124 lines
4.4 KiB
Vue
124 lines
4.4 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";
|
|
import { getLearningPathUrl } from "@/utils/utils";
|
|
|
|
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);
|
|
}
|
|
|
|
function buttonLink(): string {
|
|
if (props.courseConfig?.role_key === "Member") {
|
|
return getLearningPathUrl(props.courseConfig?.course_slug);
|
|
} else if (props.courseConfig?.role_key === "Expert") {
|
|
return "btn-secondary";
|
|
} else if (props.courseConfig?.role_key === "Supervisor") {
|
|
return "btn-secondary";
|
|
}
|
|
}
|
|
|
|
function hasActionButton(): boolean {
|
|
return props.courseConfig.role_key !== "MentorUK";
|
|
}
|
|
</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">
|
|
<div class="flex flex-row justify-between">
|
|
<h3 class="mb-4 text-3xl">{{ courseName }}</h3>
|
|
<a v-if="hasActionButton()" :href="buttonLink()" class="btn btn-sm btn-blue">
|
|
foo
|
|
</a>
|
|
</div>
|
|
<p>
|
|
<span class="rounded bg-gray-300 px-2 py-1">{{ courseConfig.role_key }}</span>
|
|
<router-link
|
|
v-if="courseConfig.has_preview"
|
|
:to="getLearningPathUrl(courseConfig.course_slug)"
|
|
class="inline-block pl-6"
|
|
target="_blank"
|
|
>
|
|
<div class="flex items-center">
|
|
<span>{{ $t("a.VorschauTeilnehmer") }}</span>
|
|
<it-icon-external-link class="ml-1 !h-4 !w-4" />
|
|
</div>
|
|
</router-link>
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
hasWidget('ProgressWidget') &&
|
|
courseConfig.session_to_continue_id &&
|
|
courseSlug
|
|
"
|
|
class="border-b border-gray-300 pb-8"
|
|
>
|
|
<LearningPathDiagram
|
|
:key="courseSlug"
|
|
:course-slug="courseSlug"
|
|
:course-session-id="courseConfig.session_to_continue_id"
|
|
diagram-type="horizontal"
|
|
></LearningPathDiagram>
|
|
</div>
|
|
<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>
|