Handle multiple CourseSessions for user

client/src/components/MainNavigationBar.vue

@@ -13,7 +13,7 @@ import { useNotificationsStore } from "@/stores/notifications";
 import { useUserStore } from "@/stores/user";
 import type { DropdownListItem } from "@/types";
 import type { Component } from "vue";
-import { onMounted, reactive } from "vue";
+import { computed, onMounted, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
@@ -82,6 +82,10 @@ function logout() {
   userStore.handleLogout();
 }
 
+const selectedCourseSessionTitle = computed(() => {
+  return courseSessionsStore.courseSessionForRoute?.title;
+});
+
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
   if (userStore.loggedIn) {
@@ -269,6 +273,9 @@ const profileDropdownData: DropdownListItem[] = [
               <it-icon-persons class="mr-6 h-6 w-6" />
             </router-link>
             <div v-if="userStore.loggedIn" class="nav-item flex items-center">
+              <div v-if="selectedCourseSessionTitle">
+                {{ selectedCourseSessionTitle }}
+              </div>
               <ItDropdown
                 :button-classes="[]"
                 :list-items="profileDropdownData"

client/src/stores/courseSessions.ts

@@ -24,6 +24,8 @@ export type LearningSequenceCircleDocument = {
   documents: CircleDocument[];
 };
 
+const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessions";
+
 function loadCourseSessionsData(reload = false) {
   log.debug("loadCourseSessionsData called");
   const courseSessions = ref<CourseSession[]>([]);
@@ -76,14 +78,55 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     uniqBy(courseSessions.value, "course.id")
   );
 
-  const courseSessionForRoute = computed(() => {
+  function selectedCourseSessionForCourse(courseSlug: string) {
-    const route = useRoute();
+    try {
-    const routePath = decodeURI(route.path);
+      const data = window.localStorage.getItem(SELECTED_COURSE_SESSIONS_KEY);
-    const courseSlug = routePath.split("/")[2];
+      if (data) {
+        const map = new Map(JSON.parse(data));
+        const courseSessionId = map.get(courseSlug);
+        if (courseSessionId) {
+          return courseSessions.value.find((cs) => {
+            return cs.id === courseSessionId;
+          });
+        }
+      }
+    } catch (e) {
+      log.error("Error while parsing courseSessions from localStorage", e);
+    }
 
-    return courseSessions.value.find((cs) => {
+    return undefined;
+  }
+
+  function courseSessionForCourse(courseSlug: string) {
+    if (courseSlug) {
+      const courseSession = selectedCourseSessionForCourse(courseSlug);
+      if (courseSession) {
+        return courseSession;
+      } else {
+        // return first if there is no selected courseSession
+        return courseSessions.value.find((cs) => {
+          return cs.course.slug === courseSlug;
+        });
+      }
+    }
+
+    return undefined;
+  }
+
+  function courseSessionsForCourse(courseSlug: string) {
+    return courseSessions.value.filter((cs) => {
       return cs.course.slug === courseSlug;
     });
+  }
+
+  const courseSlugForRoute = computed(() => {
+    const route = useRoute();
+    return (route.params.courseSlug as string) ?? undefined;
+  });
+
+  const courseSessionForRoute = computed(() => {
+    const courseSlug = courseSlugForRoute.value;
+    return courseSessionForCourse(courseSlug);
   });
 
   const hasCockpit = computed(() => {
@@ -176,5 +219,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     addDocument,
     startUpload,
     removeDocument,
+    courseSessionsForCourse,
   };
 });

server/vbv_lernwelt/course/management/commands/create_default_courses.py

@@ -141,7 +141,7 @@ def create_course_uk_de():
 
     cs = CourseSession.objects.create(
         course_id=COURSE_UK,
-        title="Überbetriebliche Kurse Lehrjahr 1 - Region Bern",
+        title="Bern 2023 a",
     )
 
     # figma demo users and data
@@ -209,7 +209,7 @@ def create_course_uk_de():
     # course session Überbetriebliche Kurse Lehrjahr 1 - Region Zürich
     cs = CourseSession.objects.create(
         course_id=COURSE_UK,
-        title="Überbetriebliche Kurse Lehrjahr 1 - Region Zürich",
+        title="Zürich 2023 a",
     )
     # for user_data in default_users:
     #     CourseSessionUser.objects.create(