diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue index 55f3d4d7..a67918ed 100644 --- a/client/src/components/MainNavigationBar.vue +++ b/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[] = [ @@ -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" > @@ -165,8 +153,8 @@ const profileDropdownData: DropdownListItem[] = [ diff --git a/client/src/components/MobileMenu.vue b/client/src/components/MobileMenu.vue index c6a9e145..3b50fadd 100644 --- a/client/src/components/MobileMenu.vue +++ b/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; - learningPathSlug: string; + courseSession: CourseSession | undefined; }>(); const emits = defineEmits(["closemodal"]); -const clickLink = (to: string) => { - router.push(to); - emits("closemodal"); +const clickLink = (to: string | undefined) => { + if (to) { + router.push(to); + emits("closemodal"); + } }; @@ -48,18 +50,16 @@ const clickLink = (to: string) => {
-
-

Kurs: Versicherungsvermittler/in

+
+

{{ courseSession.course.title }}

  • -
  • -
  • diff --git a/client/src/pages/CockpitPage.vue b/client/src/pages/CockpitPage.vue index 012b285d..3300308a 100644 --- a/client/src/pages/CockpitPage.vue +++ b/client/src/pages/CockpitPage.vue @@ -18,12 +18,7 @@ function employer() { onMounted(async () => { log.debug("CockpitView mounted"); - - try { - await courseSessionsStore.loadCourseSessionsData(); - } catch (error) { - log.error(error); - } + await courseSessionsStore.loadCourseSessionsData(); }); diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts index 5fd38b67..6f40c204 100644 --- a/client/src/stores/courseSessions.ts +++ b/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", () => { - const courseSessions = ref(undefined); +export type CourseSessionsStoreState = { + courseSessions: CourseSession[] | undefined; +}; - async function loadCourseSessionsData(reload = false) { - log.debug("loadCourseSessionsData called"); - courseSessions.value = await itGetCached(`/api/course/sessions/`, { - reload: reload, - }); - if (!courseSessions.value) { - throw `No courseSessionData found for user`; - } - return courseSessions.value; - } - - return { courseSessions, loadCourseSessionsData }; +export const useCourseSessionsStore = defineStore({ + id: "courseSessions", + state: () => { + return { + courseSessions: undefined, + } as CourseSessionsStoreState; + }, + getters: { + courseSessionForRoute: (state) => { + const route = useRoute(); + return state.courseSessions?.find((cs) => { + 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; + }, + }, });