Add dynamic "Lernpfad" and "KompetenzNavi" urls

client/src/components/MainNavigationBar.vue

@@ -6,7 +6,7 @@ import IconSettings from "@/components/icons/IconSettings.vue";
 import MobileMenu from "@/components/MobileMenu.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
 import { useAppStore } from "@/stores/app";
-import { useLearningPathStore } from "@/stores/learningPath";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import type { DropdownListItem } from "@/types";
 import type { Component } from "vue";
@@ -26,8 +26,9 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
+const courseSessionsStore = useCourseSessionsStore();
+
 const { t } = useI18n();
-const learningPathStore = useLearningPathStore();
 const state = reactive({ showMenu: false });
 
 function toggleNav() {
@@ -35,6 +36,7 @@ function toggleNav() {
 }
 
 function isInRoutePath(checkPaths: string[]) {
+  log.debug("isInRoutePath", checkPaths, route.path);
   return checkPaths.some((path) => route.path.startsWith(path));
 }
 
@@ -42,20 +44,6 @@ function inCourse() {
   return isInRoutePath(["/learn", "/competence"]);
 }
 
-function getLearningPathStringProp(prop: "title" | "slug"): string {
-  return inCourse() && learningPathStore.learningPath
-    ? learningPathStore.learningPath[prop]
-    : "";
-}
-
-function learningPathName(): string {
-  return getLearningPathStringProp("title");
-}
-
-function learninPathSlug(): string {
-  return getLearningPathStringProp("slug");
-}
-
 function handleDropdownSelect(data: DropdownData) {
   switch (data.action) {
     case "settings":
@@ -75,6 +63,7 @@ function logout() {
 
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
+  courseSessionsStore.loadCourseSessionsData();
 });
 
 const profileDropdownData: DropdownListItem[] = [
@@ -100,8 +89,7 @@ const profileDropdownData: DropdownListItem[] = [
     <Teleport to="body">
       <MobileMenu
         :show="state.showMenu"
-        :learning-path-slug="learninPathSlug()"
+        :course-session="courseSessionsStore.courseSessionForRoute"
-        :learning-path-name="learningPathName()"
         @closemodal="state.showMenu = false"
       />
     </Teleport>
@@ -156,8 +144,8 @@ const profileDropdownData: DropdownListItem[] = [
             class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0"
           >
             <router-link
-              v-if="inCourse()"
+              v-if="inCourse() && courseSessionsStore.courseSessionForRoute"
-              to="/learn/versicherungsvermittlerin-lp"
+              :to="courseSessionsStore.courseSessionForRoute.learning_path_url"
               class="nav-item"
               :class="{ 'nav-item--active': isInRoutePath(['/learn']) }"
             >
@@ -165,8 +153,8 @@ const profileDropdownData: DropdownListItem[] = [
             </router-link>
 
             <router-link
-              v-if="inCourse()"
+              v-if="inCourse() && courseSessionsStore.courseSessionForRoute"
-              to="/competence/versicherungsvermittlerin-competence"
+              :to="courseSessionsStore.courseSessionForRoute.competence_url"
               class="nav-item"
               :class="{ 'nav-item--active': isInRoutePath(['/competence']) }"
             >

client/src/components/MobileMenu.vue

@@ -3,6 +3,7 @@ import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import { useUserStore } from "@/stores/user";
+import type { CourseSession } from "@/types";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -10,15 +11,16 @@ const userStore = useUserStore();
 
 const props = defineProps<{
   show: boolean;
-  learningPathName: string;
+  courseSession: CourseSession | undefined;
-  learningPathSlug: string;
 }>();
 
 const emits = defineEmits(["closemodal"]);
 
-const clickLink = (to: string) => {
+const clickLink = (to: string | undefined) => {
-  router.push(to);
+  if (to) {
-  emits("closemodal");
+    router.push(to);
+    emits("closemodal");
+  }
 };
 </script>
 
@@ -48,18 +50,16 @@ const clickLink = (to: string) => {
           </div>
         </div>
         <div>
-          <div v-if="true" class="mt-6 pb-6 border-b">
+          <div v-if="courseSession" class="mt-6 pb-6 border-b">
-            <h4 class="text-gray-900 text-sm">Kurs: Versicherungsvermittler/in</h4>
+            <h4 class="text-gray-900 text-sm">{{ courseSession.course.title }}</h4>
             <ul class="mt-6">
               <li>
-                <button @click="clickLink(`/learn/versicherungsvermittlerin-lp`)">
+                <button @click="clickLink(courseSession?.learning_path_url)">
                   {{ $t("general.learningPath") }}
                 </button>
               </li>
               <li class="mt-6">
-                <button
+                <button @click="clickLink(courseSession?.competence_url)">
-                  @click="clickLink(`/competence/versicherungsvermittlerin-competence`)"
-                >
                   KompetenzNavi
                 </button>
               </li>

client/src/pages/CockpitPage.vue

@@ -18,12 +18,7 @@ function employer() {
 
 onMounted(async () => {
   log.debug("CockpitView mounted");
-
+  await courseSessionsStore.loadCourseSessionsData();
-  try {
-    await courseSessionsStore.loadCourseSessionsData();
-  } catch (error) {
-    log.error(error);
-  }
 });
 </script>
 

client/src/stores/courseSessions.ts

@@ -2,21 +2,40 @@ import { itGetCached } from "@/fetchHelpers";
 import type { CourseSession } from "@/types";
 import log from "loglevel";
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { useRoute } from "vue-router";
 
-export const useCourseSessionsStore = defineStore("courseSessions", () => {
+export type CourseSessionsStoreState = {
-  const courseSessions = ref<CourseSession[] | undefined>(undefined);
+  courseSessions: CourseSession[] | undefined;
+};
 
-  async function loadCourseSessionsData(reload = false) {
+export const useCourseSessionsStore = defineStore({
-    log.debug("loadCourseSessionsData called");
+  id: "courseSessions",
-    courseSessions.value = await itGetCached(`/api/course/sessions/`, {
+  state: () => {
-      reload: reload,
+    return {
-    });
+      courseSessions: undefined,
-    if (!courseSessions.value) {
+    } as CourseSessionsStoreState;
-      throw `No courseSessionData found for user`;
+  },
-    }
+  getters: {
-    return courseSessions.value;
+    courseSessionForRoute: (state) => {
-  }
+      const route = useRoute();
-
+      return state.courseSessions?.find((cs) => {
-  return { courseSessions, loadCourseSessionsData };
+        return (
+          route.path.startsWith(cs.learning_path_url) ||
+          route.path.startsWith(cs.competence_url)
+        );
+      });
+    },
+  },
+  actions: {
+    async loadCourseSessionsData(reload = false) {
+      log.debug("loadCourseSessionsData called");
+      this.courseSessions = await itGetCached(`/api/course/sessions/`, {
+        reload: reload,
+      });
+      if (!this.courseSessions) {
+        throw `No courseSessionData found for user`;
+      }
+      return this.courseSessions;
+    },
+  },
 });