feat: progress dashboard design
This commit is contained in:
Reto Aebersold
parent
0ecb03275e
commit
897d39ceb8
|
|
@ -1,40 +1,66 @@
|
|||
<script setup lang="ts">
|
||||
import { useDashboardStore } from "@/stores/dashboard";
|
||||
import { DASHBOARD_COURSE_SESSION_PROGRESS } from "@/graphql/queries";
|
||||
import { useQuery } from "@urql/vue";
|
||||
import { computed } from "vue";
|
||||
import { getLearningPathUrl } from "@/utils/utils";
|
||||
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
||||
import ItProgress from "@/components/ui/ItProgress.vue";
|
||||
import { DASHBOARD_COURSE_SESSION_PROGRESS } from "@/graphql/queries";
|
||||
import { getLearningPathUrl } from "@/utils/utils";
|
||||
import type {
|
||||
ProgressDashboardAssignmentType,
|
||||
ProgressDashboardCompetenceType,
|
||||
} from "@/gql/graphql";
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
const courseId = computed(() => dashboardStore.currentDashboardConfig?.id);
|
||||
const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug || "");
|
||||
|
||||
const progressQuery = useQuery({
|
||||
const courseId = computed(() => dashboardStore.currentDashboardConfig?.id);
|
||||
const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug);
|
||||
const courseName = computed(() => dashboardStore.currentDashboardConfig?.name);
|
||||
|
||||
const { data: progress } = useQuery({
|
||||
query: DASHBOARD_COURSE_SESSION_PROGRESS,
|
||||
variables: {
|
||||
// @ts-ignore
|
||||
courseId,
|
||||
},
|
||||
// @ts-ignore
|
||||
variables: { courseId },
|
||||
});
|
||||
|
||||
const progress = progressQuery.data;
|
||||
const DEFAULT_ASSIGNMENT = {
|
||||
points_achieved_count: 0,
|
||||
points_max_count: 0,
|
||||
total_count: 0,
|
||||
};
|
||||
const DEFAULT_COMPETENCE = { total_count: 0, success_count: 0, fail_count: 0 };
|
||||
|
||||
const assignment = computed<ProgressDashboardAssignmentType>(
|
||||
() =>
|
||||
(progress.value?.course_progress?.assignment as ProgressDashboardAssignmentType) ??
|
||||
DEFAULT_ASSIGNMENT
|
||||
);
|
||||
|
||||
const competence = computed<ProgressDashboardCompetenceType>(
|
||||
() =>
|
||||
(progress.value?.course_progress?.competence as ProgressDashboardCompetenceType) ??
|
||||
DEFAULT_COMPETENCE
|
||||
);
|
||||
|
||||
const assignment_progress = computed(() => ({
|
||||
SUCCESS: assignment.value.points_achieved_count,
|
||||
FAIL: 0,
|
||||
UNKNOWN: assignment.value.points_max_count - assignment.value.points_achieved_count,
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="progress?.course_progress && dashboardStore.currentDashboardConfig">
|
||||
<div class="mb-14">
|
||||
<div class="bg-white p-6 md:h-full">
|
||||
<h3 class="mb-4">{{ dashboardStore.currentDashboardConfig.name }}</h3>
|
||||
<div>
|
||||
<LearningPathDiagram
|
||||
:key="courseSlug"
|
||||
class="mb-4"
|
||||
:course-slug="courseSlug"
|
||||
:course-session-id="progress.course_progress.session_to_continue_id"
|
||||
diagram-type="horizontalSmall"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
<div class="mb-14 space-y-8">
|
||||
<div class="flex flex-col space-y-7 bg-white p-6">
|
||||
<h3>{{ courseName }}</h3>
|
||||
<LearningPathDiagram
|
||||
v-if="progress.course_progress.session_to_continue_id && courseSlug"
|
||||
:key="courseSlug"
|
||||
:course-slug="courseSlug"
|
||||
:course-session-id="progress.course_progress.session_to_continue_id"
|
||||
diagram-type="horizontal"
|
||||
></LearningPathDiagram>
|
||||
<div>
|
||||
<router-link
|
||||
class="btn-blue"
|
||||
|
|
@ -45,6 +71,43 @@ const progress = progressQuery.data;
|
|||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
|
||||
<div class="flex flex-col space-y-4 bg-white p-6">
|
||||
<h4 class="mb-1 font-bold">Kompetenznachweis-Elemente</h4>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-4xl font-bold">
|
||||
{{ assignment.total_count }}
|
||||
</span>
|
||||
<span>Elemente abgeschlossen</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-4xl font-bold">
|
||||
{{ assignment.points_achieved_count }} von
|
||||
{{ assignment.points_max_count }}
|
||||
</span>
|
||||
<span>Punkten erreicht</span>
|
||||
</div>
|
||||
<ItProgress :status-count="assignment_progress"></ItProgress>
|
||||
|
||||
<router-link class="pt-8 underline" to="#">Details anschauen</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-4 bg-white p-6">
|
||||
<h4 class="mb-1 font-bold">Selbsteinschätzungen</h4>
|
||||
<div class="flex items-center space-x-3">
|
||||
<it-icon-smiley-happy class="h-12 w-12"></it-icon-smiley-happy>
|
||||
<span class="text-4xl font-bold">{{ competence.success_count }}</span>
|
||||
<span>Ich kann das</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<it-icon-smiley-thinking class="h-12 w-12"></it-icon-smiley-thinking>
|
||||
<span class="text-4xl font-bold">{{ competence.fail_count }}</span>
|
||||
<span>Das muss ich nochmals anschauen</span>
|
||||
</div>
|
||||
<router-link class="pt-8 underline" to="#">Details anschauen</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue