90 lines
3.1 KiB
Vue
90 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { useDashboardStore } from "@/stores/dashboard";
|
|
import { computed } from "vue";
|
|
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
|
import { getLearningPathUrl } from "@/utils/utils";
|
|
import type {
|
|
CourseProgressType,
|
|
ProgressDashboardAssignmentType,
|
|
ProgressDashboardCompetenceType,
|
|
} from "@/gql/graphql";
|
|
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
|
|
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
|
|
|
|
const dashboardStore = useDashboardStore();
|
|
|
|
const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug);
|
|
const courseName = computed(() => dashboardStore.currentDashboardConfig?.name);
|
|
|
|
const courseSessionProgress = computed(() => {
|
|
return dashboardStore.currentDashBoardData as CourseProgressType;
|
|
});
|
|
|
|
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>(
|
|
() =>
|
|
(courseSessionProgress.value?.assignment as ProgressDashboardAssignmentType) ??
|
|
DEFAULT_ASSIGNMENT
|
|
);
|
|
|
|
const competence = computed<ProgressDashboardCompetenceType>(
|
|
() =>
|
|
(courseSessionProgress.value?.competence as ProgressDashboardCompetenceType) ??
|
|
DEFAULT_COMPETENCE
|
|
);
|
|
|
|
const competenceCertificateUrl = computed(() => {
|
|
return `/course/${courseSlug.value}/competence/certificates?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
|
|
});
|
|
|
|
const competenceCriteriaUrl = computed(() => {
|
|
return `/course/${courseSlug.value}/competence/criteria?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="courseSessionProgress && dashboardStore.currentDashboardConfig"
|
|
class="mb-14 space-y-8"
|
|
>
|
|
<div class="flex flex-col space-y-7 bg-white p-6">
|
|
<h3>{{ courseName }}</h3>
|
|
<LearningPathDiagram
|
|
v-if="courseSessionProgress.session_to_continue_id && courseSlug"
|
|
:key="courseSlug"
|
|
:course-slug="courseSlug"
|
|
:course-session-id="courseSessionProgress.session_to_continue_id"
|
|
diagram-type="horizontal"
|
|
></LearningPathDiagram>
|
|
<div>
|
|
<router-link
|
|
class="btn-blue"
|
|
:to="getLearningPathUrl(dashboardStore.currentDashboardConfig.slug)"
|
|
:data-cy="`continue-course-${dashboardStore.currentDashboardConfig.id}`"
|
|
>
|
|
{{ $t("general.nextStep") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
|
|
<AssignmentProgressSummaryBox
|
|
:total-assignments="assignment.total_count"
|
|
:achieved-points-count="assignment.points_achieved_count"
|
|
:max-points-count="assignment.points_max_count"
|
|
:details-link="competenceCertificateUrl"
|
|
/>
|
|
<CompetenceSummaryBox
|
|
:fail-count="competence.fail_count"
|
|
:success-count="competence.success_count"
|
|
:details-link="competenceCriteriaUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|