108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import * as log from "loglevel";
|
|
import { computed, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { VV_COURSE_IDS } from "@/constants";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
|
|
log.debug("CompetenceParentPage created");
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const route = useRoute();
|
|
|
|
function routeInOverview() {
|
|
return route.path.endsWith("/competence");
|
|
}
|
|
|
|
function routeInCompetenceCertificate() {
|
|
return route.path.includes("/certificate");
|
|
}
|
|
|
|
function routeInActionCompetences() {
|
|
return route.path.endsWith("/competences");
|
|
}
|
|
|
|
function routeInSelfEvaluationAndFeedback() {
|
|
return route.path.endsWith("/self-evaluation-and-feedback");
|
|
}
|
|
|
|
// FIXME 22.02.24: To-be-tackled NEXT in a separate PR (shippable member comp.navi)
|
|
// -> Do not use the VV_COURSE_ID anymore (discuss with @chrigu) -> We do this next.
|
|
const currentCourseSession = useCurrentCourseSession();
|
|
const isVVCourse = computed(() => {
|
|
return VV_COURSE_IDS.includes(currentCourseSession.value.course.id);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
log.debug("CompetenceParentPage mounted", props.courseSlug);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-200">
|
|
<nav class="border-b bg-white px-4 lg:px-8">
|
|
<ul class="flex flex-col lg:flex-row">
|
|
<li
|
|
class="border-t-2 border-t-transparent"
|
|
:class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
|
|
>
|
|
<router-link :to="`/course/${courseSlug}/competence`" class="block py-3">
|
|
{{ $t("a.Übersicht") }}
|
|
</router-link>
|
|
</li>
|
|
<li
|
|
v-if="!isVVCourse"
|
|
class="border-t-2 border-t-transparent lg:ml-12"
|
|
:class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
|
|
>
|
|
<router-link
|
|
:to="`/course/${courseSlug}/competence/certificates`"
|
|
class="block py-3"
|
|
>
|
|
{{ $t("a.Kompetenznachweise") }}
|
|
</router-link>
|
|
</li>
|
|
<li
|
|
class="border-t-2 border-t-transparent lg:ml-12"
|
|
:class="{
|
|
'border-b-2 border-b-blue-900': routeInSelfEvaluationAndFeedback(),
|
|
}"
|
|
>
|
|
<router-link
|
|
:to="`/course/${courseSlug}/competence/self-evaluation-and-feedback`"
|
|
class="block py-3"
|
|
>
|
|
{{
|
|
isVVCourse
|
|
? $t("a.Selbst- und Fremdeinschätzungen")
|
|
: $t("a.Selbsteinschätzungen")
|
|
}}
|
|
</router-link>
|
|
</li>
|
|
<li
|
|
class="border-t-2 border-t-transparent lg:ml-12"
|
|
:class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
|
|
>
|
|
<router-link
|
|
:to="`/course/${courseSlug}/competence/competences`"
|
|
class="block py-3"
|
|
>
|
|
{{ $t("a.Handlungskompetenzen") }}
|
|
</router-link>
|
|
</li>
|
|
|
|
<!-- Add similar logic for other `li` items as you expand the list -->
|
|
<li class="ml-6 inline-block lg:ml-12"></li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<router-view></router-view>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|