wip: Add routes

client/src/pages/userProfile/CompetenceProfilePage.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import CockpitProfileContent from "@/components/userProfile/UserProfileContent.vue";
-import { ref } from "vue";
+import { computed } from "vue";
 import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
 import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
 import { useCurrentCourseSession } from "@/composables";
+import CompetenceCertificateListPage from "@/pages/competence/CompetenceCertificateListPage.vue";
+import { useRoute } from "vue-router";
 
-type SubMenuType = "OVERVIEW" | "DETAILS";
+type SubMenuType = "OVERVIEW" | "EVALUATIONS" | "COMPETENCES";
+const subMenuOptions: SubMenuType[] = ["OVERVIEW", "EVALUATIONS", "COMPETENCES"];
 
 const props = defineProps<{
   userId: string;
@@ -15,49 +18,71 @@ const props = defineProps<{
 interface SubMenuItem {
   type: SubMenuType;
   label: string;
+  url: string;
 }
 
 const MENU_ENTRIES: SubMenuItem[] = [
-  { type: "OVERVIEW", label: "a.Übersicht" },
   {
-    type: "DETAILS",
-    label: useCurrentCourseSession().value.course.configuration.enable_learning_mentor
+    type: "OVERVIEW",
+    label: "a.Übersicht",
+    url: `/course/${props.courseSlug}/profile/${props.userId}/competence`,
+  },
+  {
+    type: "EVALUATIONS",
+    label: useCurrentCourseSession().value.course.configuration.is_vv
       ? "a.Selbst- und Fremdeinschätzungen"
       : "a.Selbsteinschätzungen",
+    url: `/course/${props.courseSlug}/profile/${props.userId}/competence/evaluations`,
   },
 ];
 
-const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
-const selectDetails = () => {
-  active.value = MENU_ENTRIES[1];
-};
+if (useCurrentCourseSession().value.course.configuration.is_uk) {
+  MENU_ENTRIES.push({
+    type: "COMPETENCES",
+    label: "Kompetenznachweise",
+    url: `/course/${props.courseSlug}/profile/${props.userId}/competence/competences`,
+  });
+}
+
+const route = useRoute();
+const active = computed(() => {
+  const index = subMenuOptions.indexOf(route.meta?.subpage);
+  if (index > -1) {
+    return MENU_ENTRIES[index];
+  }
+  return MENU_ENTRIES[0];
+});
 </script>
 
 <template>
   <CockpitProfileContent>
     <template #side>
       <div v-for="(entry, index) in MENU_ENTRIES" :key="index" class="mb-2">
-        <button
+        <router-link
+          v-if="active"
+          :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': active.type === entry.type }"
-          @click="active = entry"
         >
           <span>{{ $t(entry.label) }}</span>
-        </button>
+        </router-link>
       </div>
     </template>
     <template #main>
-      <div class="container-large">
+      <div v-if="active" class="container-large">
         <SelfEvaluationAndFeedbackOverview
           v-if="active.type === 'OVERVIEW'"
           :profile-user-id="props.userId"
-          @show-all="selectDetails"
         />
         <SelfEvaluationAndFeedbackList
-          v-else-if="active.type === 'DETAILS'"
+          v-else-if="active.type === 'EVALUATIONS'"
           class="w-full"
           :profile-user-id="props.userId"
         />
+        <CompetenceCertificateListPage
+          v-else-if="active.type === 'COMPETENCES'"
+          :course-slug="useCurrentCourseSession().value.course.slug"
+        />
       </div>
     </template>
   </CockpitProfileContent>

client/src/router/index.ts

@@ -174,6 +174,26 @@ const router = createRouter({
           component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
           props: true,
           name: "profileCompetence",
+          children: [
+            {
+              path: "", // Default path (e.g., /competence)
+              name: "competenceMain",
+              meta: { subpage: "OVERVIEW" },
+              component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
+            },
+            {
+              path: "evaluations", // Subpath (e.g., /competence/evaluations)
+              name: "competenceEvaluations",
+              meta: { subpage: "EVALUATIONS" },
+              component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
+            },
+            {
+              path: "competences", // Another subpath (e.g., /competence/competences)
+              name: "profileCompetences",
+              meta: { subpage: "COMPETENCES" },
+              component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
+            },
+          ],
         },
       ],
     },

client/src/types.ts

@@ -194,6 +194,7 @@ export interface CourseConfiguration {
   enable_learning_mentor: boolean;
   enable_competence_certificates: boolean;
   is_uk: boolean;
+  is_vv: boolean;
 }
 
 export interface Course {