53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<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";
|
|
|
|
const dashboardStore = useDashboardStore();
|
|
const courseId = computed(() => dashboardStore.currentDashboardConfig?.id);
|
|
const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug || "");
|
|
|
|
const progressQuery = useQuery({
|
|
query: DASHBOARD_COURSE_SESSION_PROGRESS,
|
|
variables: {
|
|
// @ts-ignore
|
|
courseId,
|
|
},
|
|
});
|
|
|
|
const progress = progressQuery.data;
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="progress?.course_progress && dashboardStore.currentDashboardConfig">
|
|
<div class="mb-14">
|
|
<h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>
|
|
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</template>
|