From 06d284b1ced5b85cf699d7755ade8565b43f40cd Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 6 Oct 2023 15:32:47 +0200
Subject: [PATCH] Refactor course url handling

---
 .../components/header/CoursePreviewBar.vue    |   4 +-
 .../components/header/MainNavigationBar.vue   |  26 +-
 client/src/components/header/MobileMenu.vue   |   8 +-
 client/src/pages/DashboardPage.vue            |   2 +-
 .../pages/cockpit/cockpitPage/CockpitPage.vue | 308 +++++++++---------
 .../selfEvaluationPage/SelfEvaluation.vue     |   3 +-
 client/src/utils/utils.ts                     |  27 +-
 7 files changed, 197 insertions(+), 181 deletions(-)

diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
index e344ae65..c2bf4259 100644
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -24,7 +24,7 @@ const { t } = useTranslation();
           <div class="flex space-x-8">
             <router-link
               data-cy="preview-learn-path-link"
-              :to="getLearningPathUrl(courseSession)"
+              :to="getLearningPathUrl(courseSession.course.slug)"
               class="preview-nav-item"
               :class="{ 'preview-nav-item--active': inLearningPath() }"
             >
@@ -33,7 +33,7 @@ const { t } = useTranslation();
 
             <router-link
               data-cy="preview-competence-profile-link"
-              :to="getCompetenceNaviUrl(courseSession)"
+              :to="getCompetenceNaviUrl(courseSession.course.slug)"
               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 72c829ec..76a6a92d 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -75,7 +75,9 @@ onMounted(() => {
         v-if="userStore.loggedIn"
         :show="state.showMobileNavigationMenu"
         :course-session="courseSessionsStore.currentCourseSession"
-        :media-url="getMediaCenterUrl(courseSessionsStore.currentCourseSession)"
+        :media-url="
+          getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
+        "
         :user="userStore"
         @closemodal="state.showMobileNavigationMenu = false"
         @logout="userStore.handleLogout()"
@@ -142,7 +144,11 @@ onMounted(() => {
 
                     <router-link
                       data-cy="navigation-preview-link"
-                      :to="getLearningPathUrl(courseSessionsStore.currentCourseSession)"
+                      :to="
+                        getLearningPathUrl(
+                          courseSessionsStore.currentCourseSession.course.slug
+                        )
+                      "
                       target="_blank"
                       class="nav-item"
                     >
@@ -155,7 +161,11 @@ onMounted(() => {
                   <template v-else>
                     <router-link
                       data-cy="navigation-learning-path-link"
-                      :to="getLearningPathUrl(courseSessionsStore.currentCourseSession)"
+                      :to="
+                        getLearningPathUrl(
+                          courseSessionsStore.currentCourseSession.course.slug
+                        )
+                      "
                       class="nav-item"
                       :class="{ 'nav-item--active': inLearningPath() }"
                     >
@@ -165,7 +175,9 @@ onMounted(() => {
                     <router-link
                       data-cy="navigation-competence-profile-link"
                       :to="
-                        getCompetenceNaviUrl(courseSessionsStore.currentCourseSession)
+                        getCompetenceNaviUrl(
+                          courseSessionsStore.currentCourseSession.course.slug
+                        )
                       "
                       class="nav-item"
                       :class="{ 'nav-item--active': inCompetenceProfile() }"
@@ -180,7 +192,11 @@ onMounted(() => {
             <div class="flex items-stretch justify-start space-x-8">
               <router-link
                 v-if="inCourse() && courseSessionsStore.currentCourseSession"
-                :to="getMediaCenterUrl(courseSessionsStore.currentCourseSession)"
+                :to="
+                  getMediaCenterUrl(
+                    courseSessionsStore.currentCourseSession.course.slug
+                  )
+                "
                 data-cy="medialibrary-link"
                 class="nav-item-no-mobile"
                 :class="{ 'nav-item--active': inMediaLibrary() }"
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 60f2497b..bc61f91b 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -72,7 +72,7 @@ const courseSessionsStore = useCourseSessionsStore();
                 <li class="mb-6">
                   <button
                     data-cy="navigation-mobile-preview-link"
-                    @click="clickLink(getLearningPathUrl(courseSession))"
+                    @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
                   >
                     {{ $t("a.VorschauTeilnehmer") }}
                   </button>
@@ -82,7 +82,7 @@ const courseSessionsStore = useCourseSessionsStore();
                 <li class="mb-6">
                   <button
                     data-cy="navigation-mobile-learning-path-link"
-                    @click="clickLink(getLearningPathUrl(courseSession))"
+                    @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
                   >
                     {{ $t("general.learningPath") }}
                   </button>
@@ -90,7 +90,7 @@ const courseSessionsStore = useCourseSessionsStore();
                 <li class="mb-6">
                   <button
                     data-cy="navigation-mobile-competence-profile-link"
-                    @click="clickLink(getCompetenceNaviUrl(courseSession))"
+                    @click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
                   >
                     {{ $t("competences.title") }}
                   </button>
@@ -99,7 +99,7 @@ const courseSessionsStore = useCourseSessionsStore();
               <li class="mb-6">
                 <button
                   data-cy="medialibrary-link"
-                  @click="clickLink(getMediaCenterUrl(courseSession))"
+                  @click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
                 >
                   {{ $t("a.Mediathek") }}
                 </button>
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index ac0dcbcc..bd600e4e 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/client/src/pages/DashboardPage.vue
@@ -23,7 +23,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
     if (courseSessionsStore.hasCockpit(courseSession)) {
       return `${courseSession.course_url}/cockpit`;
     }
-    return getLearningPathUrl(courseSession);
+    return getLearningPathUrl(courseSession.course.slug);
   });
 };
 </script>
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
index 6d99aec1..f8b1188a 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
@@ -36,176 +36,178 @@ function userCountStatusForCircle(userId: string) {
 
 <template>
   <div class="bg-gray-200">
-    <div v-if="cockpitStore.currentCircle" class="container-large">
-      <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
-        <h1>Cockpit</h1>
-        <ItDropdownSelect
-          :model-value="cockpitStore.currentCircle"
-          class="mt-4 w-full lg:mt-0 lg:w-96"
-          :items="cockpitStore.circles"
-          @update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
-        ></ItDropdownSelect>
-      </div>
-      <!-- Status -->
-      <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
-        <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-          <div>
-            <h3 class="heading-3 mb-4 flex items-center gap-2">
-              {{ $t("Trainerunterlagen") }}
-            </h3>
-            <div class="mb-4">
-              {{ $t("cockpit.trainerFilesText") }}
+    <div v-if="cockpitStore.circles?.length">
+      <div v-if="cockpitStore.currentCircle" class="container-large">
+        <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
+          <h1>Cockpit</h1>
+          <ItDropdownSelect
+            :model-value="cockpitStore.currentCircle"
+            class="mt-4 w-full lg:mt-0 lg:w-96"
+            :items="cockpitStore.circles"
+            @update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
+          ></ItDropdownSelect>
+        </div>
+        <!-- Status -->
+        <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
+          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("Trainerunterlagen") }}
+              </h3>
+              <div class="mb-4">
+                {{ $t("cockpit.trainerFilesText") }}
+              </div>
+            </div>
+            <div>
+              <a
+                href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
+                class="btn-secondary min-w-min"
+                target="_blank"
+              >
+                {{ $t("MS Teams öffnen") }}
+              </a>
             </div>
           </div>
-          <div>
-            <a
-              href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
-              class="btn-secondary min-w-min"
-              target="_blank"
-            >
-              {{ $t("MS Teams öffnen") }}
-            </a>
-          </div>
-        </div>
-        <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-          <div>
-            <h3 class="heading-3 mb-4 flex items-center gap-2">
-              {{ $t("a.Unterlagen für Teilnehmenden") }}
-            </h3>
-            <div class="mb-4">
-              {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
+          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("a.Unterlagen für Teilnehmenden") }}
+              </h3>
+              <div class="mb-4">
+                {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
+              </div>
+              <!--            <div-->
+              <!--              v-if="courseSessionsStore.circleDocuments.length"-->
+              <!--              class="mb-4 flex items-center gap-x-2"-->
+              <!--            >-->
+              <!--              <it-icon-document />-->
+              <!--              {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
+              <!--            </div>-->
             </div>
-            <!--            <div-->
-            <!--              v-if="courseSessionsStore.circleDocuments.length"-->
-            <!--              class="mb-4 flex items-center gap-x-2"-->
-            <!--            >-->
-            <!--              <it-icon-document />-->
-            <!--              {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
-            <!--            </div>-->
-          </div>
-          <div>
-            <router-link
-              :to="`/course/${props.courseSlug}/cockpit/documents`"
-              class="btn-secondary min-w-min"
-            >
-              {{ $t("a.Zum Unterlagen-Upload") }}
-            </router-link>
-          </div>
-        </div>
-        <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-          <div>
-            <h3 class="heading-3 mb-4 flex items-center gap-2">
-              {{ $t("Anwesenheitskontrolle Präsenzkurse") }}
-            </h3>
-            <div class="mb-4">
-              {{
-                $t(
-                  "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
-                )
-              }}
+            <div>
+              <router-link
+                :to="`/course/${props.courseSlug}/cockpit/documents`"
+                class="btn-secondary min-w-min"
+              >
+                {{ $t("a.Zum Unterlagen-Upload") }}
+              </router-link>
             </div>
           </div>
-          <div>
-            <router-link
-              :to="`/course/${props.courseSlug}/cockpit/attendance`"
-              class="btn-secondary min-w-min"
-            >
-              {{ $t("Anwesenheit prüfen") }}
-            </router-link>
+          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("Anwesenheitskontrolle Präsenzkurse") }}
+              </h3>
+              <div class="mb-4">
+                {{
+                  $t(
+                    "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
+                  )
+                }}
+              </div>
+            </div>
+            <div>
+              <router-link
+                :to="`/course/${props.courseSlug}/cockpit/attendance`"
+                class="btn-secondary min-w-min"
+              >
+                {{ $t("Anwesenheit prüfen") }}
+              </router-link>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="mb-4 bg-white p-6">
-        <CockpitDates></CockpitDates>
-      </div>
-      <SubmissionsOverview
-        :course-session="courseSession"
-        :selected-circle="cockpitStore.currentCircle.id"
-      ></SubmissionsOverview>
-      <div class="pt-4">
-        <!-- progress -->
-        <div
-          v-if="courseSessionDetailResult.filterMembers().length > 0"
-          class="bg-white p-6"
-        >
-          <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
-          <ul>
-            <ItPersonRow
-              v-for="csu in courseSessionDetailResult.filterMembers()"
-              :key="csu.user_id"
-              :name="`${csu.first_name} ${csu.last_name}`"
-              :avatar-url="csu.avatar_url"
-            >
-              <template #center>
-                <div
-                  class="mt-2 flex w-full flex-col items-center justify-between lg:mt-0 lg:flex-row"
-                >
-                  <LearningPathDiagram
-                    v-if="
-                      learningPathStore.learningPathForUser(
-                        props.courseSlug,
-                        csu.user_id
-                      )
-                    "
-                    :learning-path="
+        <div class="mb-4 bg-white p-6">
+          <CockpitDates></CockpitDates>
+        </div>
+        <SubmissionsOverview
+          :course-session="courseSession"
+          :selected-circle="cockpitStore.currentCircle.id"
+        ></SubmissionsOverview>
+        <div class="pt-4">
+          <!-- progress -->
+          <div
+            v-if="courseSessionDetailResult.filterMembers().length > 0"
+            class="bg-white p-6"
+          >
+            <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
+            <ul>
+              <ItPersonRow
+                v-for="csu in courseSessionDetailResult.filterMembers()"
+                :key="csu.user_id"
+                :name="`${csu.first_name} ${csu.last_name}`"
+                :avatar-url="csu.avatar_url"
+              >
+                <template #center>
+                  <div
+                    class="mt-2 flex w-full flex-col items-center justify-between lg:mt-0 lg:flex-row"
+                  >
+                    <LearningPathDiagram
+                      v-if="
+                        learningPathStore.learningPathForUser(
+                          props.courseSlug,
+                          csu.user_id
+                        )
+                      "
+                      :learning-path="
                           learningPathStore.learningPathForUser(
                             props.courseSlug,
                             csu.user_id
                           ) as LearningPath
                         "
-                    :show-circle-slugs="[cockpitStore.currentCircle.slug]"
-                    diagram-type="singleSmall"
-                    class="mr-4"
-                  ></LearningPathDiagram>
-                  <p class="lg:min-w-[150px]">
-                    {{ cockpitStore.currentCircle.title }}
-                  </p>
-                  <div class="ml-4 flex flex-row items-center">
-                    <div class="mr-6 flex flex-row items-center">
-                      <it-icon-smiley-thinking
-                        class="mr-2 inline-block h-8 w-8"
-                      ></it-icon-smiley-thinking>
-                      <p class="text-bold inline-block w-6">
-                        {{ userCountStatusForCircle(csu.user_id).FAIL }}
-                      </p>
+                      :show-circle-slugs="[cockpitStore.currentCircle.slug]"
+                      diagram-type="singleSmall"
+                      class="mr-4"
+                    ></LearningPathDiagram>
+                    <p class="lg:min-w-[150px]">
+                      {{ cockpitStore.currentCircle.title }}
+                    </p>
+                    <div class="ml-4 flex flex-row items-center">
+                      <div class="mr-6 flex flex-row items-center">
+                        <it-icon-smiley-thinking
+                          class="mr-2 inline-block h-8 w-8"
+                        ></it-icon-smiley-thinking>
+                        <p class="text-bold inline-block w-6">
+                          {{ userCountStatusForCircle(csu.user_id).FAIL }}
+                        </p>
+                      </div>
+                      <li class="mr-6 flex flex-row items-center">
+                        <it-icon-smiley-happy
+                          class="mr-2 inline-block h-8 w-8"
+                        ></it-icon-smiley-happy>
+                        <p class="text-bold inline-block w-6">
+                          {{ userCountStatusForCircle(csu.user_id).SUCCESS }}
+                        </p>
+                      </li>
+                      <li class="flex flex-row items-center">
+                        <it-icon-smiley-neutral
+                          class="mr-2 inline-block h-8 w-8"
+                        ></it-icon-smiley-neutral>
+                        <p class="text-bold inline-block w-6">
+                          {{ userCountStatusForCircle(csu.user_id).UNKNOWN }}
+                        </p>
+                      </li>
                     </div>
-                    <li class="mr-6 flex flex-row items-center">
-                      <it-icon-smiley-happy
-                        class="mr-2 inline-block h-8 w-8"
-                      ></it-icon-smiley-happy>
-                      <p class="text-bold inline-block w-6">
-                        {{ userCountStatusForCircle(csu.user_id).SUCCESS }}
-                      </p>
-                    </li>
-                    <li class="flex flex-row items-center">
-                      <it-icon-smiley-neutral
-                        class="mr-2 inline-block h-8 w-8"
-                      ></it-icon-smiley-neutral>
-                      <p class="text-bold inline-block w-6">
-                        {{ userCountStatusForCircle(csu.user_id).UNKNOWN }}
-                      </p>
-                    </li>
                   </div>
-                </div>
-              </template>
-              <template #link>
-                <router-link
-                  :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
-                  class="link w-full lg:text-right"
-                >
-                  {{ $t("general.profileLink") }}
-                </router-link>
-              </template>
-            </ItPersonRow>
-          </ul>
+                </template>
+                <template #link>
+                  <router-link
+                    :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
+                    class="link w-full lg:text-right"
+                  >
+                    {{ $t("general.profileLink") }}
+                  </router-link>
+                </template>
+              </ItPersonRow>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-    <div v-else class="container-large mt-4">
-      <span class="text-lg text-orange-600">
-        {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
-      </span>
+      <div v-else class="container-large mt-4">
+        <span class="text-lg text-orange-600">
+          {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
index f47d1486..3208173e 100644
--- a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
+++ b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
@@ -11,6 +11,7 @@ import eventBus from "@/utils/eventBus";
 import { useRouteQuery } from "@vueuse/router";
 import { computed, onUnmounted } from "vue";
 import { getPreviousRoute } from "@/router/history";
+import { getCompetenceNaviUrl } from "@/utils/utils";
 
 log.debug("LearningContent.vue setup");
 
@@ -127,7 +128,7 @@ onUnmounted(() => {
             <div class="mt-6 lg:mt-12">
               {{ $t("selfEvaluation.progressText") }}
               <router-link
-                :to="courseSession.competence_url"
+                :to="getCompetenceNaviUrl(courseSession.course.slug)"
                 class="text-primary-500 underline"
               >
                 {{ $t("selfEvaluation.progressLink") }}
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index 191f1176..700bfe05 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -1,34 +1,31 @@
-import type { AssignmentType, CourseSession } from "@/types";
+import type { AssignmentType } from "@/types";
 import { useTranslation } from "i18next-vue";
 
 export function assertUnreachable(msg: string): never {
   throw new Error("Didn't expect to get here, " + msg);
 }
 
-function createCourseUrl(
-  courseSession: CourseSession | undefined,
-  specificSub: string
-): string {
-  if (!courseSession) {
-    return "";
+function createCourseUrl(courseSlug: string | undefined, specificSub: string): string {
+  if (!courseSlug) {
+    return "/";
   }
 
   if (["learn", "media", "competence"].includes(specificSub)) {
-    return `${courseSession.course_url}/${specificSub}`;
+    return `/course/${courseSlug}/${specificSub}`;
   }
-  return courseSession.course_url;
+  return `/course/${courseSlug}`;
 }
 
-export function getCompetenceNaviUrl(courseSession: CourseSession | undefined): string {
-  return createCourseUrl(courseSession, "competence");
+export function getCompetenceNaviUrl(courseSlug: string | undefined): string {
+  return createCourseUrl(courseSlug, "competence");
 }
 
-export function getMediaCenterUrl(courseSession: CourseSession | undefined): string {
-  return createCourseUrl(courseSession, "media");
+export function getMediaCenterUrl(courseSlug: string | undefined): string {
+  return createCourseUrl(courseSlug, "media");
 }
 
-export function getLearningPathUrl(courseSession: CourseSession | undefined): string {
-  return createCourseUrl(courseSession, "learn");
+export function getLearningPathUrl(courseSlug: string | undefined): string {
+  return createCourseUrl(courseSlug, "learn");
 }
 
 export function getAssignmentTypeTitle(assignmentType: AssignmentType): string {