From 22b24911361bc759fada608f3fcf37c48dc7bbc4 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 5 Oct 2022 16:44:04 +0200
Subject: [PATCH] Scroll behaviour in Lernpfad

---
 .../learningPath/LearningContent.vue          |  2 +-
 .../learningPath/SelfEvaluation.vue           |  4 +-
 client/src/router/index.ts                    |  7 +++
 client/src/services/circle.ts                 | 11 ++--
 client/src/stores/circle.ts                   | 52 +++++++++----------
 client/src/types.ts                           |  9 ++--
 6 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/client/src/components/learningPath/LearningContent.vue b/client/src/components/learningPath/LearningContent.vue
index 8e4a85d4..91bfdd57 100644
--- a/client/src/components/learningPath/LearningContent.vue
+++ b/client/src/components/learningPath/LearningContent.vue
@@ -30,7 +30,7 @@ const block = computed(() => {
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
         data-cy="close-learning-content"
-        @click="circleStore.closeLearningContent()"
+        @click="circleStore.closeLearningContent(props.learningContent)"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
         <span class="hidden lg:inline">zurück zum Circle</span>
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index 7fe4afe6..0a0fdc91 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -26,7 +26,7 @@ function handleContinue() {
     state.questionIndex += 1;
   } else {
     log.debug("continue to next learning content");
-    circleStore.continueFromSelfEvaluation();
+    circleStore.continueFromSelfEvaluation(props.learningUnit);
   }
 }
 </script>
@@ -39,7 +39,7 @@ function handleContinue() {
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
-        @click="circleStore.closeSelfEvaluation()"
+        @click="circleStore.closeSelfEvaluation(props.learningUnit)"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
         <span class="hidden lg:inline">zurück zum Circle</span>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 88e481b7..24285c6e 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -6,6 +6,13 @@ import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
   routes: [
     {
       path: "/login",
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 4d69baa9..4a523793 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -9,7 +9,7 @@ import type {
   LearningContent,
   LearningSequence,
   LearningUnit,
-  LearningUnitQuestion,
+  LearningUnitPerformanceCriteria,
 } from "@/types";
 
 function _createEmptyLearningUnit(
@@ -66,6 +66,7 @@ export function parseLearningSequences(
       learningUnit = Object.assign(child, {
         learningContents: [],
         parentLearningSequence: learningSequence,
+        parentCircle: circle,
         children: child.children.map((c) => {
           c.parentLearningUnit = learningUnit;
           c.parentLearningSequence = learningSequence;
@@ -158,12 +159,12 @@ export class Circle implements CourseWagtailPage {
     );
   }
 
-  public get flatChildren(): (LearningContent | LearningUnitQuestion)[] {
-    const result: (LearningContent | LearningUnitQuestion)[] = [];
+  public get flatChildren(): (LearningContent | LearningUnitPerformanceCriteria)[] {
+    const result: (LearningContent | LearningUnitPerformanceCriteria)[] = [];
     this.learningSequences.forEach((learningSequence) => {
       learningSequence.learningUnits.forEach((learningUnit) => {
-        learningUnit.children.forEach((learningUnitQuestion) => {
-          result.push(learningUnitQuestion);
+        learningUnit.children.forEach((performanceCriteria) => {
+          result.push(performanceCriteria);
         });
         learningUnit.learningContents.forEach((learningContent) => {
           result.push(learningContent);
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 11c729c1..d0c39151 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -9,7 +9,7 @@ import type {
   CourseCompletionStatus,
   LearningContent,
   LearningUnit,
-  LearningUnitQuestion,
+  LearningUnitPerformanceCriteria,
 } from "@/types";
 
 export type CircleStoreState = {
@@ -17,6 +17,16 @@ export type CircleStoreState = {
   page: "INDEX" | "OVERVIEW";
 };
 
+function createLearningUnitHash(learningUnit: LearningUnit | undefined) {
+  const luSlug = learningUnit?.slug;
+  const circleSlug = learningUnit?.parentCircle?.slug;
+  if (luSlug && circleSlug) {
+    return "#" + luSlug.replace(`${circleSlug}-`, "");
+  }
+
+  return "";
+}
+
 export const useCircleStore = defineStore({
   id: "circle",
   state: () => {
@@ -76,7 +86,7 @@ export const useCircleStore = defineStore({
       return learningUnit;
     },
     async markCompletion(
-      page: LearningContent | LearningUnitQuestion,
+      page: LearningContent | LearningUnitPerformanceCriteria,
       completion_status: CourseCompletionStatus = "success"
     ) {
       try {
@@ -98,9 +108,10 @@ export const useCircleStore = defineStore({
         path: learningContent.frontend_url,
       });
     },
-    closeLearningContent() {
+    closeLearningContent(learningContent: LearningContent) {
       this.router.push({
         path: `${this.circle?.frontend_url}`,
+        hash: createLearningUnitHash(learningContent.parentLearningUnit),
       });
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
@@ -108,9 +119,10 @@ export const useCircleStore = defineStore({
         path: learningUnit.frontend_url,
       });
     },
-    closeSelfEvaluation() {
+    closeSelfEvaluation(learningUnit: LearningUnit) {
       this.router.push({
         path: `${this.circle?.frontend_url}`,
+        hash: createLearningUnitHash(learningUnit),
       });
     },
     calcSelfEvaluationStatus(learningUnit: LearningUnit) {
@@ -139,42 +151,26 @@ export const useCircleStore = defineStore({
           currentParent.children.length > 0
         ) {
           // go to self evaluation
-          // this.openSelfEvaluation(currentParent);
-          this.closeLearningContent();
+          this.openSelfEvaluation(currentParent);
         } else if (currentLearningContent.nextLearningContent) {
           if (
-            currentLearningContent.parentLearningSequence &&
-            currentLearningContent.parentLearningSequence.id ===
-              nextLearningContent?.parentLearningSequence?.id
+            currentLearningContent.parentLearningUnit &&
+            currentLearningContent.parentLearningUnit.id ===
+              nextLearningContent?.parentLearningUnit?.id
           ) {
             this.openLearningContent(currentLearningContent.nextLearningContent);
           } else {
-            this.closeLearningContent();
+            this.closeLearningContent(currentLearningContent);
           }
         } else {
-          this.closeLearningContent();
+          this.closeLearningContent(currentLearningContent);
         }
       } else {
         log.error("currentLearningContent is undefined");
       }
     },
-    continueFromSelfEvaluation() {
-      this.closeSelfEvaluation();
-      // if (this.currentSelfEvaluation) {
-      //   const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
-      //
-      //   if (nextContent) {
-      //     if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
-      //       this.openLearningContent(nextContent);
-      //     } else {
-      //       this.closeSelfEvaluation();
-      //     }
-      //   } else {
-      //     this.closeSelfEvaluation();
-      //   }
-      // } else {
-      //   log.error('currentSelfEvaluation is undefined');
-      // }
+    continueFromSelfEvaluation(learningUnit: LearningUnit) {
+      this.closeSelfEvaluation(learningUnit);
     },
   },
 });
diff --git a/client/src/types.ts b/client/src/types.ts
index 90242426..9470caee 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -145,8 +145,8 @@ export interface LearningContent extends CourseWagtailPage {
   previousLearningContent?: LearningContent;
 }
 
-export interface LearningUnitQuestion extends CourseWagtailPage {
-  type: "learnpath.LearningUnitQuestion";
+export interface LearningUnitPerformanceCriteria extends CourseWagtailPage {
+  type: "competence.PerformanceCriteria";
   parentLearningSequence?: LearningSequence;
   parentLearningUnit?: LearningUnit;
 }
@@ -156,7 +156,8 @@ export interface LearningUnit extends CourseWagtailPage {
   learningContents: LearningContent[];
   minutes: number;
   parentLearningSequence?: LearningSequence;
-  children: LearningUnitQuestion[];
+  parentCircle?: Circle;
+  children: LearningUnitPerformanceCriteria[];
   last?: boolean;
 }
 
@@ -171,7 +172,7 @@ export type CircleChild =
   | LearningContent
   | LearningUnit
   | LearningSequence
-  | LearningUnitQuestion;
+  | LearningUnitPerformanceCriteria;
 
 export interface WagtailCircle extends CourseWagtailPage {
   type: "learnpath.Circle";