89 lines
3.2 KiB
Vue
89 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
|
|
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
|
|
import CompetenceSummary from "@/components/dashboard/CompetenceSummary.vue";
|
|
import AssignmentSummary from "@/components/dashboard/AssignmentSummary.vue";
|
|
import MentorOpenTasksCount from "@/components/dashboard/MentorOpenTasksCount.vue";
|
|
import MentorMenteeCount from "@/components/dashboard/MentorMenteeCount.vue";
|
|
import MentorCompetenceSummary from "@/components/dashboard/MentorCompetenceSummary.vue";
|
|
|
|
const mentorWidgets = [
|
|
"MentorTasksWidget",
|
|
"MentorPersonWidget",
|
|
"MentorCompetenceWidget",
|
|
];
|
|
const progressWidgets = ["CompetenceWidget", "CompetenceCertificateWidget"];
|
|
|
|
const props = defineProps<{
|
|
courseConfig: DashboardCourseConfigType;
|
|
}>();
|
|
|
|
const courseSlug = computed(() => props.courseConfig?.course_slug);
|
|
const courseName = computed(() => props.courseConfig?.course_title);
|
|
const numberOfMentorWidgets = computed(() => {
|
|
return props.courseConfig.widgets.filter((widget) => mentorWidgets.includes(widget))
|
|
.length;
|
|
});
|
|
const numberOfProgressWidgets = computed(() => {
|
|
return props.courseConfig.widgets.filter((widget) => progressWidgets.includes(widget))
|
|
.length;
|
|
});
|
|
|
|
function hasWidget(widget: WidgetType) {
|
|
return props.courseConfig.widgets.includes(widget);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="courseConfig" class="mb-14 space-y-8">
|
|
<div class="flex flex-col space-y-8 bg-white p-6">
|
|
<div class="border-b border-gray-300 pb-8">
|
|
<h3 class="mb-4 text-3xl">{{ courseName }}</h3>
|
|
<p>
|
|
<span class="rounded bg-gray-300 px-2 py-1">{{ courseConfig.role_key }}</span>
|
|
</p>
|
|
</div>
|
|
<LearningPathDiagram
|
|
v-if="
|
|
hasWidget('ProgressWidget') &&
|
|
courseConfig.session_to_continue_id &&
|
|
courseSlug
|
|
"
|
|
:key="courseSlug"
|
|
:course-slug="courseSlug"
|
|
:course-session-id="courseConfig.session_to_continue_id"
|
|
diagram-type="horizontal"
|
|
></LearningPathDiagram>
|
|
<div v-if="numberOfProgressWidgets" class="flex flex-col flex-wrap">
|
|
<CompetenceSummary
|
|
v-if="hasWidget('CompetenceWidget')"
|
|
:course-slug="courseSlug"
|
|
:session-to-continue-id="courseConfig.session_to_continue_id"
|
|
:course-id="courseConfig.course_id"
|
|
></CompetenceSummary>
|
|
<AssignmentSummary
|
|
v-if="hasWidget('CompetenceCertificateWidget')"
|
|
:course-slug="courseSlug"
|
|
:session-to-continue-id="courseConfig.session_to_continue_id"
|
|
:course-id="courseConfig.course_id"
|
|
/>
|
|
</div>
|
|
<div v-if="numberOfMentorWidgets > 0" class="flex flex-col flex-wrap md:flex-row">
|
|
<MentorOpenTasksCount
|
|
v-if="hasWidget('MentorTasksWidget')"
|
|
:course-id="courseConfig.course_id"
|
|
/>
|
|
<MentorMenteeCount
|
|
v-if="hasWidget('MentorPersonWidget')"
|
|
:course-id="courseConfig.course_id"
|
|
/>
|
|
<MentorCompetenceSummary
|
|
v-if="hasWidget('MentorCompetenceWidget')"
|
|
:course-id="courseConfig.course_id"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|