From 326e42c99f3059b215c5d4b368dce45090a040d9 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Sat, 16 Sep 2023 22:27:19 +0200
Subject: [PATCH 1/8] wip: course preview poc

---
 .../components/header/CoursePreviewBar.vue    | 55 +++++++++++++++++++
 .../components/header/MainNavigationBar.vue   | 38 ++++++++++++-
 cypress/e2e/preview.cy.js                     | 23 ++++++++
 3 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/header/CoursePreviewBar.vue
 create mode 100644 cypress/e2e/preview.cy.js

diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
new file mode 100644
index 00000000..80de3595
--- /dev/null
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useTranslation } from "i18next-vue";
+import { useRouteLookups } from "@/utils/route";
+import { useCurrentCourseSession } from "@/composables";
+
+const { inCompetenceProfile, inLearningPath } = useRouteLookups();
+const courseSession = useCurrentCourseSession();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <div data-cy="course-preview-bar">
+    <nav class="bg-yellow-500">
+      <div class="mx-auto px-4 lg:px-8">
+        <div
+          class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
+        >
+          <strong class="flex items-center px-1 pt-1 text-black">
+            <!-- TODO: @livioso i18n -->
+            Vorschau: Teilnehmer ({{ courseSession.title }})
+          </strong>
+
+          <div class="flex space-x-8">
+            <router-link
+              :to="courseSession.learning_path_url"
+              class="preview-nav-item"
+              :class="{ 'preview-nav-item--active': inLearningPath() }"
+            >
+              {{ t("general.learningPath") }}
+            </router-link>
+
+            <router-link
+              :to="courseSession.competence_url"
+              class="preview-nav-item"
+              :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
+            >
+              {{ t("competences.title") }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.preview-nav-item {
+  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-800;
+}
+
+.preview-nav-item--active {
+  @apply border-black;
+}
+</style>
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index e04414e5..33ff1ee9 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -14,6 +14,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
 import { useTranslation } from "i18next-vue";
+import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
 
 log.debug("MainNavigationBar created");
 
@@ -41,13 +42,22 @@ const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
 
+const isTrainerInCourseSessionPreview = computed(() => {
+  // todo wip @livioso check if this is correct?
+  const isTrainer =
+    courseSessionsStore.currentCourseSession &&
+    courseSessionsStore.currentCourseSessionHasCockpit;
+  return isTrainer && !inCockpit();
+});
+
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 </script>
 
 <template>
-  <div>
+  <CoursePreviewBar v-if="isTrainerInCourseSessionPreview" />
+  <div v-else>
     <Teleport to="body">
       <MobileMenu
         v-if="userStore.loggedIn"
@@ -116,7 +126,25 @@ onMounted(() => {
                 </router-link>
 
                 <router-link
-                  v-if="inCourse() && courseSessionsStore.currentCourseSession"
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    inCockpit()
+                  "
+                  :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                  target="_blank"
+                  class="nav-item"
+                  :class="{ 'nav-item--active': inLearningPath() }"
+                >
+                  {{ t("general.preview") }}
+                </router-link>
+
+                <router-link
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    !courseSessionsStore.currentCourseSessionHasCockpit
+                  "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   class="nav-item"
                   :class="{ 'nav-item--active': inLearningPath() }"
@@ -125,7 +153,11 @@ onMounted(() => {
                 </router-link>
 
                 <router-link
-                  v-if="inCourse() && courseSessionsStore.currentCourseSession"
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    !courseSessionsStore.currentCourseSessionHasCockpit
+                  "
                   :to="courseSessionsStore.currentCourseSession.competence_url"
                   class="nav-item"
                   :class="{ 'nav-item--active': inCompetenceProfile() }"
diff --git a/cypress/e2e/preview.cy.js b/cypress/e2e/preview.cy.js
new file mode 100644
index 00000000..202a7a67
--- /dev/null
+++ b/cypress/e2e/preview.cy.js
@@ -0,0 +1,23 @@
+import {login} from "./helpers";
+
+describe("preview.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  });
+
+  it("Student does not see preview", () => {
+    login("test-student1@example.com", "test");
+    cy.visit("/course/test-lehrgang/learn/fahrzeug");
+    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+  });
+
+  it("Trainer sees preview exclusively on course", () => {
+    login("test-trainer1@example.com", "test");
+
+    cy.visit("/");
+    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+
+    cy.visit("/course/test-lehrgang/learn/fahrzeug");
+    cy.get('[data-cy="course-preview-bar"]').should("exist");
+  });
+});

From 5e8554acdada40aabb5c75f17b431dd7b6724d2d Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 16:38:45 +0200
Subject: [PATCH 2/8] feat: added preview bar

---
 .../components/header/CoursePreviewBar.vue    |  7 ++-
 .../components/header/MainNavigationBar.vue   | 47 +++++--------------
 .../LearningContentContainer.vue              |  5 ++
 client/src/stores/courseSessions.ts           | 23 +++++++++
 4 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
index 80de3595..2d19ee8b 100644
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -16,10 +16,9 @@ const { t } = useTranslation();
         <div
           class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
         >
-          <strong class="flex items-center px-1 pt-1 text-black">
-            <!-- TODO: @livioso i18n -->
-            Vorschau: Teilnehmer ({{ courseSession.title }})
-          </strong>
+          <span class="flex items-center px-1 pt-1 font-bold text-black">
+            {{ t("a.VorschauTeilnehmer") }} ({{ courseSession.title }})
+          </span>
 
           <div class="flex space-x-8">
             <router-link
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 33ff1ee9..7acf98b4 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -42,21 +42,13 @@ const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
 
-const isTrainerInCourseSessionPreview = computed(() => {
-  // todo wip @livioso check if this is correct?
-  const isTrainer =
-    courseSessionsStore.currentCourseSession &&
-    courseSessionsStore.currentCourseSessionHasCockpit;
-  return isTrainer && !inCockpit();
-});
-
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 </script>
 
 <template>
-  <CoursePreviewBar v-if="isTrainerInCourseSessionPreview" />
+  <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
   <div v-else>
     <Teleport to="body">
       <MobileMenu
@@ -114,9 +106,8 @@ onMounted(() => {
                 <!-- Navigation Links Desktop -->
                 <router-link
                   v-if="
-                    inCourse() &&
-                    courseSessionsStore.currentCourseSession &&
-                    courseSessionsStore.currentCourseSessionHasCockpit
+                    courseSessionsStore.hasExpertNavigation &&
+                    courseSessionsStore.currentCourseSession
                   "
                   :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
                   class="nav-item"
@@ -127,23 +118,23 @@ onMounted(() => {
 
                 <router-link
                   v-if="
-                    inCourse() &&
-                    courseSessionsStore.currentCourseSession &&
-                    inCockpit()
+                    courseSessionsStore.hasExpertNavigation &&
+                    courseSessionsStore.currentCourseSession
                   "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   target="_blank"
                   class="nav-item"
-                  :class="{ 'nav-item--active': inLearningPath() }"
                 >
-                  {{ t("general.preview") }}
+                  <div class="flex items-center">
+                    <span>{{ t("a.VorschauTeilnehmer") }}</span>
+                    <it-icon-external-link class="ml-2" />
+                  </div>
                 </router-link>
 
                 <router-link
                   v-if="
-                    inCourse() &&
-                    courseSessionsStore.currentCourseSession &&
-                    !courseSessionsStore.currentCourseSessionHasCockpit
+                    courseSessionsStore.hasMemberNavigation &&
+                    courseSessionsStore.currentCourseSession
                   "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   class="nav-item"
@@ -154,9 +145,8 @@ onMounted(() => {
 
                 <router-link
                   v-if="
-                    inCourse() &&
-                    courseSessionsStore.currentCourseSession &&
-                    !courseSessionsStore.currentCourseSessionHasCockpit
+                    courseSessionsStore.hasMemberNavigation &&
+                    courseSessionsStore.currentCourseSession
                   "
                   :to="courseSessionsStore.currentCourseSession.competence_url"
                   class="nav-item"
@@ -255,15 +245,4 @@ onMounted(() => {
 .nav-item--active {
   @apply border-sky-500;
 }
-
-.nav-enter-active,
-.nav-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.nav-enter-from,
-.nav-leave-to {
-  opacity: 0;
-  transform: translateY(-80px);
-}
 </style>
diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
index b2e2dbe6..5d2c334d 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import * as log from "loglevel";
+import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+
+const courseSessionsStore = useCourseSessionsStore();
 
 log.debug("LearningContentContainer.vue setup");
 
@@ -9,6 +13,7 @@ defineEmits(["exit"]);
 <template>
   <div>
     <div class="absolute bottom-0 top-0 w-full bg-white">
+      <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
       <div class="h-content overflow-y-auto">
         <header
           class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index 223f6e19..5fff40b3 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -10,6 +10,7 @@ import type {
   ExpertSessionUser,
 } from "@/types";
 import eventBus from "@/utils/eventBus";
+import { useRouteLookups } from "@/utils/route";
 import { useLocalStorage } from "@vueuse/core";
 import dayjs from "dayjs";
 import uniqBy from "lodash/uniqBy";
@@ -24,6 +25,7 @@ const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessionMap";
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const loaded = ref(false);
   const allCourseSessions = ref<CourseSession[]>([]);
+  const { inCompetenceProfile, inLearningPath, inCourse } = useRouteLookups();
 
   async function loadCourseSessionsData(reload = false) {
     log.debug("loadCourseSessionsData called");
@@ -138,6 +140,24 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return false;
   });
 
+  const hasCourseSessionPreview = computed(() => {
+    const isCourseExpert =
+      currentCourseSession.value && currentCourseSessionHasCockpit.value;
+    return isCourseExpert && (inLearningPath() || inCompetenceProfile());
+  });
+
+  const hasMemberNavigation = computed(() => {
+    return (
+      inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
+    );
+  });
+
+  const hasExpertNavigation = computed(() => {
+    return (
+      inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
+    );
+  });
+
   const circleExperts = computed(() => {
     const circleStore = useCircleStore();
     const circleTranslationKey = circleStore.circle?.translation_key;
@@ -266,6 +286,9 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     courseSessionForCourse,
     switchCourseSession,
     hasCockpit,
+    hasCourseSessionPreview,
+    hasMemberNavigation,
+    hasExpertNavigation,
     currentCourseSessionHasCockpit,
     canUploadCircleDocuments,
     circleDocuments,

From fa22f5a18e56e3eb4b378d766dfa1d4b0ab2a37e Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 16:39:12 +0200
Subject: [PATCH 3/8] workaround: disable due date links for experts

---
 .../src/components/dueDates/DueDateSingle.vue | 24 ++++++++++++++++---
 .../cockpit/cockpitPage/CockpitDates.vue      |  5 +---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index e1a0b75d..f760fe1b 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -1,11 +1,26 @@
 <script lang="ts" setup>
 import { formatDate } from "@/components/dueDates/dueDatesUtils";
-import type { DueDate } from "@/types";
+import type { CourseSession, DueDate } from "@/types";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 
 const props = defineProps<{
   dueDate: DueDate;
   singleLine?: boolean;
 }>();
+
+/* FIXME @livioso 19.09.23: This is a temporary workaround to have a ship-able / deployable
+    version of the preview feature (VBV-516). The plan is to tackle the role-based
+    due dates calendar next (VBV-524) which will touch all usage of this component.
+    For now, just disable links for trainer / expert -> to reduce level of confusion ;)
+*/
+const courseSessionsStore = useCourseSessionsStore();
+const courseSession = courseSessionsStore.allCourseSessions.find(
+  (cs: CourseSession) => cs.id === props.dueDate.course_session
+);
+
+const disableLink = courseSession
+  ? !courseSessionsStore.hasCockpit(courseSession)
+  : false;
 </script>
 
 <template>
@@ -13,11 +28,14 @@ const props = defineProps<{
     class="flex justify-between py-4"
     :class="{ 'flex-col': props.singleLine, 'items-center': !props.singleLine }"
   >
-    <div class="space-y-1">
+    <div class="text-bold space-y-1">
       <div>
-        <a class="text-bold underline" :href="props.dueDate.url">
+        <a v-if="disableLink" class="underline" :href="props.dueDate.url">
           {{ props.dueDate.title }}
         </a>
+        <template v-else>
+          {{ props.dueDate.title }}
+        </template>
       </div>
       <div class="text-small text-gray-900">
         <div v-if="props.dueDate.date_type_translation_key">
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitDates.vue b/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
index e1c79ec6..06b463cc 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
@@ -14,11 +14,8 @@ const dueDates = courseSession.value.due_dates.slice(0, 2);
       :key="dueDate.id"
       class="border-t border-gray-500 pt-2"
     >
-      <DueDateSingle :due-date="dueDate" :single-line="true"></DueDateSingle>
+      <DueDateSingle :due-date="dueDate" single-line></DueDateSingle>
     </div>
     <div v-if="dueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
-    <a class="border-t border-gray-500 pt-8 underline" href="">
-      {{ $t("dueDates.showAllDueDates") }}
-    </a>
   </div>
 </template>

From 93f05e4722fa1886ed86b8acd7386dfb60b716cc Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 17:16:07 +0200
Subject: [PATCH 4/8] fix: mobile menu

---
 client/src/components/header/MobileMenu.vue | 36 +++++++++++++++------
 client/src/stores/courseSessions.ts         |  6 ++--
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 7be14ab6..b734a4d0 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -8,6 +8,8 @@ const router = useRouter();
 
 defineProps<{
   show: boolean;
+  hasExpertNavigation: boolean;
+  hasMemberNavigation: boolean;
   courseSession: CourseSession | undefined;
   mediaUrl?: string;
   user: UserState | undefined;
@@ -52,16 +54,30 @@ const clickLink = (to: string | undefined) => {
           <div v-if="courseSession" class="mt-6 border-b pb-6">
             <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
             <ul class="mt-6">
-              <li>
-                <button @click="clickLink(courseSession?.learning_path_url)">
-                  {{ $t("general.learningPath") }}
-                </button>
-              </li>
-              <li class="mt-6">
-                <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
-                  {{ $t("cockpit.title") }}
-                </button>
-              </li>
+              <template v-if="hasMemberNavigation">
+                <li>
+                  <button @click="clickLink(courseSession?.learning_path_url)">
+                    {{ $t("general.learningPath") }}
+                  </button>
+                </li>
+                <li>
+                  <button @click="clickLink(courseSession?.competence_url)">
+                    {{ $t("competences.title") }}
+                  </button>
+                </li>
+              </template>
+              <template v-if="hasExpertNavigation">
+                <li class="mt-6">
+                  <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
+                    {{ $t("cockpit.title") }}
+                  </button>
+                </li>
+                <li>
+                  <button @click="clickLink(courseSession?.learning_path_url)">
+                    {{ $t("a.VorschauTeilnehmer") }}
+                  </button>
+                </li>
+              </template>
               <li class="mt-6">
                 <button
                   data-cy="medialibrary-link"
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index 5fff40b3..93ba7e55 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -143,17 +143,17 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const hasCourseSessionPreview = computed(() => {
     const isCourseExpert =
       currentCourseSession.value && currentCourseSessionHasCockpit.value;
-    return isCourseExpert && (inLearningPath() || inCompetenceProfile());
+    return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
   });
 
   const hasMemberNavigation = computed(() => {
-    return (
+    return Boolean(
       inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
     );
   });
 
   const hasExpertNavigation = computed(() => {
-    return (
+    return Boolean(
       inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
     );
   });

From 1e27f80949389e9008428f4e1be240b87a90486b Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 17:16:35 +0200
Subject: [PATCH 5/8] refactor: main navigation, reduce duplication

---
 .../components/header/MainNavigationBar.vue   | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 7acf98b4..f2f7cb42 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -57,6 +57,8 @@ onMounted(() => {
         :course-session="courseSessionsStore.currentCourseSession"
         :media-url="courseSessionsStore.currentCourseSession?.media_library_url"
         :user="userStore"
+        :has-expert-navigation="courseSessionsStore.hasExpertNavigation"
+        :has-member-navigation="courseSessionsStore.hasMemberNavigation"
         @closemodal="state.showMobileNavigationMenu = false"
         @logout="userStore.handleLogout()"
       />
@@ -104,56 +106,53 @@ onMounted(() => {
 
               <div class="hidden space-x-8 lg:flex">
                 <!-- Navigation Links Desktop -->
-                <router-link
+                <template
                   v-if="
                     courseSessionsStore.hasExpertNavigation &&
                     courseSessionsStore.currentCourseSession
                   "
-                  :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inCockpit() }"
                 >
-                  {{ t("cockpit.title") }}
-                </router-link>
+                  <router-link
+                    :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inCockpit() }"
+                  >
+                    {{ t("cockpit.title") }}
+                  </router-link>
 
-                <router-link
-                  v-if="
-                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                  :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                  target="_blank"
-                  class="nav-item"
-                >
-                  <div class="flex items-center">
-                    <span>{{ t("a.VorschauTeilnehmer") }}</span>
-                    <it-icon-external-link class="ml-2" />
-                  </div>
-                </router-link>
-
-                <router-link
+                  <router-link
+                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                    target="_blank"
+                    class="nav-item"
+                  >
+                    <div class="flex items-center">
+                      <span>{{ t("a.VorschauTeilnehmer") }}</span>
+                      <it-icon-external-link class="ml-2" />
+                    </div>
+                  </router-link>
+                </template>
+                <template
                   v-if="
                     courseSessionsStore.hasMemberNavigation &&
                     courseSessionsStore.currentCourseSession
                   "
-                  :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inLearningPath() }"
                 >
-                  {{ t("general.learningPath") }}
-                </router-link>
+                  <router-link
+                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inLearningPath() }"
+                  >
+                    {{ t("general.learningPath") }}
+                  </router-link>
 
-                <router-link
-                  v-if="
-                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                  :to="courseSessionsStore.currentCourseSession.competence_url"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inCompetenceProfile() }"
-                >
-                  {{ t("competences.title") }}
-                </router-link>
+                  <router-link
+                    :to="courseSessionsStore.currentCourseSession.competence_url"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inCompetenceProfile() }"
+                  >
+                    {{ t("competences.title") }}
+                  </router-link>
+                </template>
               </div>
             </div>
 

From fac25e608994962d3aac24db100676f8dc6ad28f Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 18:21:01 +0200
Subject: [PATCH 6/8] fix: snafu from merge :(

---
 client/src/pages/cockpit/cockpitPage/CockpitDates.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/pages/cockpit/cockpitPage/CockpitDates.vue b/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
index 35e49853..851f8694 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitDates.vue
@@ -28,9 +28,5 @@ const circleDates = computed(() => {
       <DueDateSingle :due-date="dueDate" :single-line="true"></DueDateSingle>
     </div>
     <div v-if="circleDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
-    <a class="border-t border-gray-500 pt-8 underline" href="">
-      {{ $t("dueDates.showAllDueDates") }}
-    </a>
-    <div v-if="dueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
   </div>
 </template>

From 46faea8c1c8ba129b0b78e5dc81503fbd6617eb9 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 18:21:25 +0200
Subject: [PATCH 7/8] cleanup: navigation (duplicated code, logic)

---
 .../components/header/CoursePreviewBar.vue    |  3 +-
 .../components/header/MainNavigationBar.vue   | 98 +++++++++----------
 client/src/components/header/MobileMenu.vue   | 56 +++++------
 client/src/stores/courseSessions.ts           | 14 ---
 client/src/utils/utils.ts                     | 10 ++
 5 files changed, 83 insertions(+), 98 deletions(-)

diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
index 2d19ee8b..b12ef2fd 100644
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -2,6 +2,7 @@
 import { useTranslation } from "i18next-vue";
 import { useRouteLookups } from "@/utils/route";
 import { useCurrentCourseSession } from "@/composables";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 const { inCompetenceProfile, inLearningPath } = useRouteLookups();
 const courseSession = useCurrentCourseSession();
@@ -30,7 +31,7 @@ const { t } = useTranslation();
             </router-link>
 
             <router-link
-              :to="courseSession.competence_url"
+              :to="getCompetenceBaseUrl(courseSession)"
               class="preview-nav-item"
               :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
             >
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index ded3e063..8e03c8b1 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -15,6 +15,7 @@ import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
 import { useTranslation } from "i18next-vue";
 import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 log.debug("MainNavigationBar created");
 
@@ -57,8 +58,6 @@ onMounted(() => {
         :course-session="courseSessionsStore.currentCourseSession"
         :media-url="courseSessionsStore.currentCourseSession?.media_library_url"
         :user="userStore"
-        :has-expert-navigation="courseSessionsStore.hasExpertNavigation"
-        :has-member-navigation="courseSessionsStore.hasMemberNavigation"
         @closemodal="state.showMobileNavigationMenu = false"
         @logout="userStore.handleLogout()"
       />
@@ -104,60 +103,51 @@ onMounted(() => {
                 </div>
               </div>
 
-              <div class="hidden space-x-8 lg:flex">
-                <!-- Navigation Links Desktop -->
-                <template
-                  v-if="
-                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                >
-                  <router-link
-                    :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inCockpit() }"
-                  >
-                    {{ t("cockpit.title") }}
-                  </router-link>
+              <!-- Satisfy the type checker; these menu items are
+              only relevant if there is a current course session -->
+              <template v-if="courseSessionsStore.currentCourseSession">
+                <div class="hidden space-x-8 lg:flex">
+                  <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
+                    <router-link
+                      :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inCockpit() }"
+                    >
+                      {{ t("cockpit.title") }}
+                    </router-link>
 
-                  <router-link
-                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                    target="_blank"
-                    class="nav-item"
-                  >
-                    <div class="flex items-center">
-                      <span>{{ t("a.VorschauTeilnehmer") }}</span>
-                      <it-icon-external-link class="ml-2" />
-                    </div>
-                  </router-link>
-                </template>
-                <template
-                  v-if="
-                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                >
-                  <router-link
-                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inLearningPath() }"
-                  >
-                    {{ t("general.learningPath") }}
-                  </router-link>
+                    <router-link
+                      :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                      target="_blank"
+                      class="nav-item"
+                    >
+                      <div class="flex items-center">
+                        <span>{{ t("a.VorschauTeilnehmer") }}</span>
+                        <it-icon-external-link class="ml-2" />
+                      </div>
+                    </router-link>
+                  </template>
+                  <template v-else>
+                    <router-link
+                      :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inLearningPath() }"
+                    >
+                      {{ t("general.learningPath") }}
+                    </router-link>
 
-                  <router-link
-                    :to="`${courseSessionsStore.currentCourseSession.competence_url.replace(
-                      // TODO: remove the `competence_url` with url to Navi...
-                      '/competences',
-                      ''
-                    )}`"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inCompetenceProfile() }"
-                  >
-                    {{ t("competences.title") }}
-                  </router-link>
-                </template>
-              </div>
+                    <router-link
+                      :to="
+                        getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
+                      "
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inCompetenceProfile() }"
+                    >
+                      {{ t("competences.title") }}
+                    </router-link>
+                  </template>
+                </div>
+              </template>
             </div>
 
             <div class="flex items-stretch justify-start space-x-8">
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 0f4e3b52..ed7583cd 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
 import { useRouter } from "vue-router";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 const router = useRouter();
 
@@ -52,36 +54,32 @@ const courseSessionsStore = useCourseSessionsStore();
         </div>
         <div>
           <div v-if="courseSession" class="mt-6 border-b">
-            <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
+            <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
             <ul class="mt-6">
-              <li
-                v-if="courseSessionsStore.currentCourseSessionHasCockpit"
-                class="mb-6"
-              >
-                <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
-                  {{ $t("cockpit.title") }}
-                </button>
-              </li>
-              <li class="mb-6">
-                <button @click="clickLink(courseSession?.learning_path_url)">
-                  {{ $t("general.learningPath") }}
-                </button>
-              </li>
-              <li class="mb-6">
-                <button
-                  @click="
-                    clickLink(
-                      courseSession?.competence_url.replace(
-                        // TODO: remove the `competence_url` with url to Navi...
-                        '/competences',
-                        ''
-                      )
-                    )
-                  "
-                >
-                  {{ $t("competences.title") }}
-                </button>
-              </li>
+              <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
+                <li class="mb-6">
+                  <button @click="clickLink(`${courseSession.course_url}/cockpit`)">
+                    {{ $t("cockpit.title") }}
+                  </button>
+                </li>
+                <li class="mb-6">
+                  <button @click="clickLink(courseSession.learning_path_url)">
+                    {{ $t("a.VorschauTeilnehmer") }}
+                  </button>
+                </li>
+              </template>
+              <template v-else>
+                <li class="mb-6">
+                  <button @click="clickLink(courseSession.learning_path_url)">
+                    {{ $t("general.learningPath") }}
+                  </button>
+                </li>
+                <li class="mb-6">
+                  <button @click="clickLink(getCompetenceBaseUrl(courseSession))">
+                    {{ $t("competences.title") }}
+                  </button>
+                </li>
+              </template>
               <li class="mb-6">
                 <button
                   data-cy="medialibrary-link"
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index ce39731b..c10e9195 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -142,18 +142,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
   });
 
-  const hasMemberNavigation = computed(() => {
-    return Boolean(
-      inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
-    );
-  });
-
-  const hasExpertNavigation = computed(() => {
-    return Boolean(
-      inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
-    );
-  });
-
   const circleExperts = computed(() => {
     const circleStore = useCircleStore();
     const circleTranslationKey = circleStore.circle?.translation_key;
@@ -283,8 +271,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     switchCourseSession,
     hasCockpit,
     hasCourseSessionPreview,
-    hasMemberNavigation,
-    hasExpertNavigation,
     currentCourseSessionHasCockpit,
     canUploadCircleDocuments,
     circleDocuments,
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index 52bceeee..ed1321f8 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -1,3 +1,13 @@
+import type { CourseSession } from "@/types";
+
 export function assertUnreachable(msg: string): never {
   throw new Error("Didn't expect to get here, " + msg);
 }
+
+export function getCompetenceBaseUrl(courseSession: CourseSession): string {
+  return courseSession.competence_url.replace(
+    // TODO: remove the `competence_url` with url to Navi...
+    "/competences",
+    ""
+  );
+}

From 9020692ea94d246feee2d84bec2b4338563d107d Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 18:46:31 +0200
Subject: [PATCH 8/8] fix: linting

---
 client/src/stores/courseSessions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index c10e9195..7c6bb476 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -25,7 +25,7 @@ const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessionMap";
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const loaded = ref(false);
   const allCourseSessions = ref<CourseSession[]>([]);
-  const { inCompetenceProfile, inLearningPath, inCourse } = useRouteLookups();
+  const { inCompetenceProfile, inLearningPath } = useRouteLookups();
 
   async function loadCourseSessionsData(reload = false) {
     log.debug("loadCourseSessionsData called");