From d4c846a1b927fe6b9942dc0ec2b7cf11bd046cc3 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 12 Apr 2023 15:08:10 +0200
Subject: [PATCH] Changes after code review

---
 client/src/components/header/AccountMenu.vue  |  2 +-
 .../header/AccountMenuContent.cy.ts           |  3 +-
 .../header/AccountMenuContent.stories.ts      |  4 +-
 client/src/pages/cockpit/CockpitIndexPage.vue |  3 +-
 .../blocks/AttendanceDayBlock.vue             |  2 +-
 client/src/router/index.ts                    |  4 +-
 client/src/services/learningPath.ts           |  2 +-
 .../stores/__tests__/courseSession.spec.ts    | 12 ++---
 client/src/stores/competence.ts               |  2 +-
 client/src/stores/completion.ts               |  6 ++-
 client/src/stores/courseSessions.ts           | 46 +++++++++++--------
 client/src/stores/learningPath.ts             | 26 ++++++-----
 cypress/e2e/competence.cy.js                  | 41 ++++++-----------
 cypress/e2e/mediaLibrary.cy.js                |  3 +-
 14 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/client/src/components/header/AccountMenu.vue b/client/src/components/header/AccountMenu.vue
index c981b2b5..3ed1bc55 100644
--- a/client/src/components/header/AccountMenu.vue
+++ b/client/src/components/header/AccountMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <AccountMenuContent
-    :course-sessions="courseSessionsStore.currentCourseSessions"
+    :course-sessions="courseSessionsStore.allCurrentCourseSessions"
     :selected-course-session="courseSessionsStore.currentCourseSession?.id"
     :user="userStore"
     @logout="logout"
diff --git a/client/src/components/header/AccountMenuContent.cy.ts b/client/src/components/header/AccountMenuContent.cy.ts
index c63a6533..f39b745c 100644
--- a/client/src/components/header/AccountMenuContent.cy.ts
+++ b/client/src/components/header/AccountMenuContent.cy.ts
@@ -1,5 +1,6 @@
 import avatar from "../../../.storybook/uk1.patrizia.huggel.jpg";
 import AccountMenuContent from "./AccountMenuContent.vue";
+
 const bern = {
   id: 1,
   title: "Bern 2023 a",
@@ -31,7 +32,7 @@ describe("<AccountMenuContent />", () => {
     cy.mount(AccountMenuContent, {
       props: {
         user,
-        courseSessions,
+        allCourseSessions: courseSessions,
         selectedCourseSession: selectedSession,
         onSelectCourseSession: selectCourseSession,
       },
diff --git a/client/src/components/header/AccountMenuContent.stories.ts b/client/src/components/header/AccountMenuContent.stories.ts
index f0c86e12..4b715451 100644
--- a/client/src/components/header/AccountMenuContent.stories.ts
+++ b/client/src/components/header/AccountMenuContent.stories.ts
@@ -42,14 +42,14 @@ const loggedInUser = {
 
 export const LoggedInUser: Story = {
   args: {
-    courseSessions,
+    allCourseSessions: courseSessions,
     user: loggedInUser,
   },
 };
 
 export const NoUser: Story = {
   args: {
-    courseSessions,
+    allCourseSessions: courseSessions,
     user: {
       loggedIn: false,
     },
diff --git a/client/src/pages/cockpit/CockpitIndexPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue
index bbea7caf..db8548ea 100644
--- a/client/src/pages/cockpit/CockpitIndexPage.vue
+++ b/client/src/pages/cockpit/CockpitIndexPage.vue
@@ -33,8 +33,7 @@ function userCountStatusForCircle(userId: number, translationKey: string) {
   );
   const grouped = groupBy(criteria, "circle.translation_key");
 
-  // @ts-ignore
-  return competenceStore.calcStatusCount(grouped[translationKey]);
+  return competenceStore.calcStatusCount(grouped[translationKey] as []);
 }
 
 const circles = computed(() => {
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/AttendanceDayBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/AttendanceDayBlock.vue
index 176f059d..d540b6da 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/AttendanceDayBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/AttendanceDayBlock.vue
@@ -24,7 +24,7 @@ const attendanceDay = computed(() => {
     <div class="lg:mt-8">
       <div class="text-large my-4">
         <div v-if="attendanceDay">{{ attendanceDay }}</div>
-        <div v-else>Keine Präsenztagdaten erfasst für diese Durchführung</div>
+        <div v-else>Für diese Durchführung existieren noch keine Details</div>
       </div>
     </div>
   </div>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index aa504316..c802d8a7 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -171,9 +171,9 @@ router.beforeEach(redirectToLoginIfRequired);
 router.beforeEach((to) => {
   const courseSessionStore = useCourseSessionsStore();
   if (to.params.courseSlug) {
-    courseSessionStore.currentCourseSlug = to.params.courseSlug as string;
+    courseSessionStore._currentCourseSlug = to.params.courseSlug as string;
   } else {
-    courseSessionStore.currentCourseSlug = "";
+    courseSessionStore._currentCourseSlug = "";
   }
 });
 
diff --git a/client/src/services/learningPath.ts b/client/src/services/learningPath.ts
index d57a9025..951257be 100644
--- a/client/src/services/learningPath.ts
+++ b/client/src/services/learningPath.ts
@@ -108,7 +108,7 @@ export class LearningPath implements WagtailLearningPath {
 
   public async reloadCompletionData() {
     const learningPathStore = useLearningPathStore();
-    const completionData = await learningPathStore.loadCompletionData(
+    const completionData = await learningPathStore.loadCourseSessionCompletionData(
       this.course.slug,
       this.userId
     );
diff --git a/client/src/stores/__tests__/courseSession.spec.ts b/client/src/stores/__tests__/courseSession.spec.ts
index e91479fb..3a778fac 100644
--- a/client/src/stores/__tests__/courseSession.spec.ts
+++ b/client/src/stores/__tests__/courseSession.spec.ts
@@ -63,8 +63,8 @@ describe("CourseSession Store", () => {
     userStore.$patch(user);
 
     const courseSessionsStore = useCourseSessionsStore();
-    courseSessionsStore.currentCourseSlug = "test-course";
-    courseSessionsStore.courseSessions = courseSessions;
+    courseSessionsStore._currentCourseSlug = "test-course";
+    courseSessionsStore.allCourseSessions = courseSessions;
 
     expect(courseSessionsStore.hasCockpit).toBeFalsy();
   });
@@ -74,8 +74,8 @@ describe("CourseSession Store", () => {
     userStore.$patch(Object.assign(user, { is_superuser: true }));
 
     const courseSessionsStore = useCourseSessionsStore();
-    courseSessionsStore.currentCourseSlug = "test-course";
-    courseSessionsStore.courseSessions = courseSessions;
+    courseSessionsStore._currentCourseSlug = "test-course";
+    courseSessionsStore.allCourseSessions = courseSessions;
 
     expect(courseSessionsStore.hasCockpit).toBeTruthy();
   });
@@ -87,8 +87,8 @@ describe("CourseSession Store", () => {
     );
 
     const courseSessionsStore = useCourseSessionsStore();
-    courseSessionsStore.currentCourseSlug = "test-course";
-    courseSessionsStore.courseSessions = courseSessions;
+    courseSessionsStore._currentCourseSlug = "test-course";
+    courseSessionsStore.allCourseSessions = courseSessions;
 
     expect(courseSessionsStore.hasCockpit).toBeTruthy();
   });
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index 95bab36b..f872a043 100644
--- a/client/src/stores/competence.ts
+++ b/client/src/stores/competence.ts
@@ -169,7 +169,7 @@ export const useCompetenceStore = defineStore({
         const courseSessionsStore = useCourseSessionsStore();
         const courseSession = courseSessionsStore.currentCourseSession;
         if (courseSession) {
-          const completionData = await completionStore.loadCompletionData(
+          const completionData = await completionStore.loadCourseSessionCompletionData(
             courseSession.id,
             userId
           );
diff --git a/client/src/stores/completion.ts b/client/src/stores/completion.ts
index 6de8fdc6..ed394905 100644
--- a/client/src/stores/completion.ts
+++ b/client/src/stores/completion.ts
@@ -11,7 +11,11 @@ export const useCompletionStore = defineStore({
   },
   getters: {},
   actions: {
-    async loadCompletionData(courseSessionId: number, userId: number, reload = false) {
+    async loadCourseSessionCompletionData(
+      courseSessionId: number,
+      userId: number,
+      reload = false
+    ) {
       const userCompletionData = (await itGetCached(
         `/api/course/completion/${courseSessionId}/${userId}/`,
         {
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index 5aae6fce..ed5c87cd 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -57,7 +57,7 @@ function loadCourseSessionsData(reload = false) {
   loadAndUpdate(); // this will be called asynchronously, but does not block
 
   // returns the empty sessions array at first, then after loading populates the ref
-  return { courseSessions };
+  return { allCourseSessions: courseSessions };
 }
 
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
@@ -67,26 +67,33 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
 
   // store should do own setup, we don't want to have each component initialize it
   // that's why we call the load function in here
-  const { courseSessions } = loadCourseSessionsData();
+  const { allCourseSessions } = loadCourseSessionsData();
   const selectedCourseSessionMap = useLocalStorage(
     SELECTED_COURSE_SESSIONS_KEY,
     new Map<string, number>()
   );
 
-  const currentCourseSlug = ref("");
+  const _currentCourseSlug = ref("");
 
-  // these will become getters
   const uniqueCourseSessionsByCourse = computed(() =>
-    // TODO: refactor after implementing of Klassenkonzept
+    // Im Dashboard wird aktuell ein Widget pro Kurs dargestellt
+    // mit dem Fortschritt jeweils einer Durchführung.
+    // Dieser Getter wird nur dort benutzt.
+    // TODO: Das Dashboard verschwindet evtl. in Zukunft, dann kann dieser Getter weg.
     // @ts-ignore
-    uniqBy(courseSessions.value, "course.id")
+    uniqBy(allCourseSessions.value, "course.id")
   );
 
   function selectedCourseSessionForCourse(courseSlug: string) {
+    // Wir wollen pro Kurs wissen, welche Durchführung der User zuletzt ausgewählt hat.
+    // Die letzte Durchführung wird im localStorage via `selectedCoruseSessionMap`
+    // gespeichert und hier geladen.
+    // Wenn noch keine Durchführung ausgewählt wurde, wird die erste Durchführung
+    // in `courseSessionForCourse` zurückgegeben.
     try {
       const courseSessionId = selectedCourseSessionMap.value.get(courseSlug);
       if (courseSessionId) {
-        return courseSessions.value.find((cs) => {
+        return allCourseSessions.value.find((cs) => {
           return cs.id === courseSessionId;
         });
       }
@@ -94,6 +101,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
       log.error("Error while parsing courseSessions from localStorage", e);
     }
 
+    // Keine Durchführung ausgewählt im localStorage
     return undefined;
   }
 
@@ -111,7 +119,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
         return courseSession;
       } else {
         // return first if there is no selected courseSession
-        return courseSessions.value.find((cs) => {
+        return allCourseSessions.value.find((cs) => {
           return cs.course.slug === courseSlug;
         });
       }
@@ -120,18 +128,18 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return undefined;
   }
 
-  function courseSessionsForCourse(courseSlug: string) {
-    return courseSessions.value.filter((cs) => {
+  function allCourseSessionsForCourse(courseSlug: string) {
+    return allCourseSessions.value.filter((cs) => {
       return cs.course.slug === courseSlug;
     });
   }
 
   const currentCourseSession = computed(() => {
-    return courseSessionForCourse(currentCourseSlug.value);
+    return courseSessionForCourse(_currentCourseSlug.value);
   });
 
-  const currentCourseSessions = computed(() => {
-    return courseSessionsForCourse(currentCourseSlug.value);
+  const allCurrentCourseSessions = computed(() => {
+    return allCourseSessionsForCourse(_currentCourseSlug.value);
   });
 
   const hasCockpit = computed(() => {
@@ -196,7 +204,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
 
   async function startUpload() {
     log.debug("loadCourseSessionsData called");
-    courseSessions.value = await itPost(`/api/core/file/start`, {
+    allCourseSessions.value = await itPost(`/api/core/file/start`, {
       file_type: "image/png",
       file_name: "test.png",
     });
@@ -227,7 +235,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   return {
     uniqueCourseSessionsByCourse,
     currentCourseSession,
-    currentCourseSessions,
+    allCurrentCourseSessions,
     courseSessionForCourse,
     switchCourseSession,
     hasCockpit,
@@ -239,10 +247,10 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     removeDocument,
     findAttendanceDay,
 
-    // TODO: only used to be changed by router.afterEach
-    currentCourseSlug,
+    // only used so that `router.afterEach` can switch it
+    _currentCourseSlug,
 
-    // TODO: only used for unit testing
-    courseSessions,
+    // only used for unit testing
+    allCourseSessions,
   };
 });
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
index 826fd7f3..97e3bf7e 100644
--- a/client/src/stores/learningPath.ts
+++ b/client/src/stores/learningPath.ts
@@ -41,10 +41,11 @@ export const useLearningPathStore = defineStore("learningPath", () => {
     };
   });
 
-  async function loadCompletionData(
+  async function loadCourseSessionCompletionData(
     courseSlug: string,
     userId: number | undefined = undefined
   ) {
+    // FIXME: should not be here anymore with VBV-305
     const completionStore = useCompletionStore();
 
     let completionData: CourseCompletion[] = [];
@@ -52,7 +53,7 @@ export const useLearningPathStore = defineStore("learningPath", () => {
       const courseSessionsStore = useCourseSessionsStore();
       const courseSession = courseSessionsStore.courseSessionForCourse(courseSlug);
       if (courseSession) {
-        completionData = await completionStore.loadCompletionData(
+        completionData = await completionStore.loadCourseSessionCompletionData(
           courseSession.id,
           userId
         );
@@ -85,7 +86,7 @@ export const useLearningPathStore = defineStore("learningPath", () => {
       throw `No learning path found with: ${slug}`;
     }
 
-    const completionData = await loadCompletionData(
+    const completionData = await loadCourseSessionCompletionData(
       learningPathData.course.slug,
       userId
     );
@@ -99,19 +100,22 @@ export const useLearningPathStore = defineStore("learningPath", () => {
     return learningPath;
   }
 
-  function reloadCompletionData() {
+  eventBus.on("switchedCourseSession", (courseSession) => {
+    log.debug("handle switchedCourseSession", courseSession);
+    // FIXME: clean up with VBV-305
+    // Die Completion Daten werden nur für die aktuelle Durchführung geladen.
+    // Deshalb müssen die hier neu geladen werden...
     state.learningPaths.forEach((lp) => {
       if (lp.userId) {
         lp.reloadCompletionData();
       }
     });
-  }
-
-  eventBus.on("switchedCourseSession", (courseSession) => {
-    log.debug("handle switchedCourseSession", courseSession);
-    // FIXME: clean up with VBV-305
-    reloadCompletionData();
   });
 
-  return { state, learningPathForUser, loadCompletionData, loadLearningPath };
+  return {
+    state,
+    learningPathForUser,
+    loadCourseSessionCompletionData,
+    loadLearningPath,
+  };
 });
diff --git a/cypress/e2e/competence.cy.js b/cypress/e2e/competence.cy.js
index 0f324976..7a2d5c99 100644
--- a/cypress/e2e/competence.cy.js
+++ b/cypress/e2e/competence.cy.js
@@ -5,49 +5,38 @@ describe("Competence", () => {
     cy.manageCommand("cypress_reset");
 
     login("admin", "test");
-    cy.visit("/course/versicherungsvermittler-in/learn/fahrzeug");
+
+    // test-lehrgang-lp-circle-analyse-lu-fahrzeug ist eine Selbstevaluation
+    // mit mehreren Schritten
+    cy.visit("/course/test-lehrgang/learn/analyse");
   });
 
   it("self evaluation should be neutral", () => {
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-lp-circle-fahrzeug-lu-fahrzeug-1"]'
-    )
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]')
       .find('[data-cy="unknown"]')
       .should("exist");
   });
 
   it("should be able to make a happy self evaluation", () => {
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-lp-circle-fahrzeug-lu-fahrzeug-1"]'
-    ).click();
-    cy.makeSelfEvaluation([true]);
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-lp-circle-fahrzeug-lu-fahrzeug-1"]'
-    )
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]').click();
+    cy.makeSelfEvaluation([true, true]);
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]')
       .find('[data-cy="success"]')
       .should("exist");
   });
 
   it("should be able to make a fail self evaluation", () => {
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-lp-circle-fahrzeug-lu-fahrzeug-1"]'
-    ).click();
-    cy.makeSelfEvaluation([false]);
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-lp-circle-fahrzeug-lu-fahrzeug-1"]'
-    )
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]').click();
+    cy.makeSelfEvaluation([false, false]);
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]')
       .find('[data-cy="fail"]')
       .should("exist");
   });
 
-  it.skip("should be able to make a mixed self evaluation", () => {
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-alt-lp-circle-analyse-lu-fahrzeug"]'
-    ).click();
-    cy.makeSelfEvaluation([false, true, true]);
-    cy.get(
-      '[data-cy="versicherungsvermittler-in-alt-lp-circle-analyse-lu-fahrzeug"]'
-    )
+  it("should be able to make a mixed self evaluation", () => {
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]').click();
+    cy.makeSelfEvaluation([false, true]);
+    cy.get('[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"]')
       .find('[data-cy="fail"]')
       .should("exist");
   });
diff --git a/cypress/e2e/mediaLibrary.cy.js b/cypress/e2e/mediaLibrary.cy.js
index ae6173b3..67796ff1 100644
--- a/cypress/e2e/mediaLibrary.cy.js
+++ b/cypress/e2e/mediaLibrary.cy.js
@@ -7,8 +7,9 @@ describe("MediaLibrary", () => {
     login("admin", "test");
   });
 
-  // skipped as long the MainNavigation is not finished
   it.skip("should be accessible via link in header", () => {
+    // der Link zur Mediathek fehlt aktuell im Header (auch im Design)
+    // das ganze Konzept der Mediathek wird noch überdacht -> skip
     cy.visit("/course/test-lehrgang");
     cy.get('[data-cy="medialibrary-link"]').click();
     cy.get('[data-cy="Handlungsfelder-link"]').click();