104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import CockpitProfileContent from "@/components/userProfile/UserProfileContent.vue";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const props = defineProps<{
|
|
userId: string;
|
|
courseSlug: string;
|
|
certificateSlug?: string;
|
|
}>();
|
|
|
|
interface SubMenuItem {
|
|
label: string;
|
|
url: string;
|
|
inMenu: boolean;
|
|
routeMatch: string[];
|
|
}
|
|
|
|
const SUBPAGES: SubMenuItem[] = [
|
|
{
|
|
label: "a.Übersicht",
|
|
url: `/course/${props.courseSlug}/profile/${props.userId}/competence`,
|
|
inMenu: true,
|
|
routeMatch: ["competenceMain"],
|
|
},
|
|
{
|
|
label: useCurrentCourseSession().value.course.configuration.is_vv
|
|
? "a.Selbst- und Fremdeinschätzungen"
|
|
: "a.Selbsteinschätzungen",
|
|
url: `/course/${props.courseSlug}/profile/${props.userId}/competence/evaluations`,
|
|
inMenu: true,
|
|
routeMatch: ["competenceEvaluations"],
|
|
},
|
|
];
|
|
|
|
if (useCurrentCourseSession().value.course.configuration.is_uk) {
|
|
SUBPAGES.push(
|
|
{
|
|
label: "Kompetenznachweise",
|
|
url: `/course/${props.courseSlug}/profile/${props.userId}/competence/certificates`,
|
|
inMenu: true,
|
|
routeMatch: ["competenceCertificates", "competenceCertificateDetail"],
|
|
},
|
|
{
|
|
label: "",
|
|
url: "",
|
|
inMenu: false,
|
|
routeMatch: [],
|
|
}
|
|
);
|
|
}
|
|
|
|
function convertRouteRecordNameToString(
|
|
routeRecordName: string | symbol | undefined
|
|
): string {
|
|
if (!routeRecordName) {
|
|
return "";
|
|
}
|
|
if (typeof routeRecordName === "symbol") {
|
|
// Convert symbol to string explicitly
|
|
return routeRecordName.toString();
|
|
} else {
|
|
// It's already a string, return as is
|
|
return routeRecordName;
|
|
}
|
|
}
|
|
|
|
const route = useRoute();
|
|
</script>
|
|
|
|
<template>
|
|
<CockpitProfileContent>
|
|
<template #side>
|
|
<div
|
|
v-for="(entry, index) in SUBPAGES.filter((p) => p.inMenu)"
|
|
:key="index"
|
|
class="mb-2"
|
|
>
|
|
<router-link
|
|
:to="entry.url"
|
|
class="flex w-full items-center space-x-2 p-2 pr-4 text-blue-900 hover:bg-gray-200 lg:pr-8"
|
|
:class="{
|
|
'text-bold bg-gray-200': route.matched.some((record) =>
|
|
entry.routeMatch.includes(convertRouteRecordNameToString(record?.name))
|
|
),
|
|
}"
|
|
>
|
|
<span>{{ $t(entry.label) }}</span>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
<template #main>
|
|
<div class="container-large">
|
|
<router-view
|
|
:profile-user-id="props.userId"
|
|
:user-id="props.userId"
|
|
:course-slug="useCurrentCourseSession().value.course.slug"
|
|
:certificate-slug="certificateSlug ? certificateSlug : ''"
|
|
></router-view>
|
|
</div>
|
|
</template>
|
|
</CockpitProfileContent>
|
|
</template>
|