Refactor SelfEvaluation to its own route

client/src/router/index.ts

@@ -46,6 +46,11 @@ const router = createRouter({
       component: () => import('../views/CircleView.vue'),
       props: true,
     },
+    {
+      path: '/learn/:learningPathSlug/:circleSlug/evaluate/:learningUnitSlug',
+      component: () => import('../views/LearningUnitSelfEvaluationView.vue'),
+      props: true,
+    },
     {
       path: '/learn/:learningPathSlug/:circleSlug/:contentSlug',
       component: () => import('../views/LearningContentView.vue'),

client/src/services/circle.ts

@@ -174,6 +174,16 @@ export class Circle implements LearningWagtailPage {
     return result;
   }
 
+  public get flatLearningUnits(): LearningUnit[] {
+    const result: LearningUnit[] = [];
+    this.learningSequences.forEach((learningSequence) => {
+      learningSequence.learningUnits.forEach((learningUnit) => {
+        result.push(learningUnit);
+      });
+    });
+    return result;
+  }
+
   public someFinishedInLearningSequence(translationKey: string): boolean {
     if (translationKey) {
       return this.flatChildren.filter((lc) => {

client/src/stores/circle.ts

@@ -5,7 +5,6 @@ import { defineStore } from 'pinia'
 import type { LearningContent, LearningUnit, LearningUnitQuestion } from '@/types'
 import type { Circle } from '@/services/circle'
 import { itPost } from '@/fetchHelpers'
-import { useAppStore } from '@/stores/app'
 import { useLearningPathStore } from '@/stores/learningPath'
 
 export type CircleStoreState = {
@@ -58,6 +57,21 @@ export const useCircleStore = defineStore({
 
       return this.currentLearningContent;
     },
+    async loadSelfEvaluation(learningPathSlug: string, circleSlug: string, learningUnitSlug: string) {
+      const circle = await this.loadCircle(learningPathSlug, circleSlug);
+      if (circle) {
+        this.currentSelfEvaluation = circle.flatLearningUnits.find((child) => {
+          return child.slug.endsWith(learningUnitSlug)
+        });
+      }
+
+      if (!this.currentSelfEvaluation) {
+        throw `No self evaluation found with slug: ${learningUnitSlug}`;
+      }
+
+      return this.currentLearningContent;
+
+    },
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
         page.completed = flag;
@@ -86,16 +100,16 @@ export const useCircleStore = defineStore({
       });
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
-      this.page = 'SELF_EVALUATION';
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = false;
       this.currentSelfEvaluation = learningUnit;
+      const shortSlug = learningUnit.slug.replace(`${this.circle?.slug}-lu-`, '');
+      this.router.push({
+        path: `${this.circle?.getUrl()}/evaluate/${shortSlug}`,
+      });
     },
     closeSelfEvaluation() {
-      this.currentSelfEvaluation = undefined;
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = true;
-      this.page = 'INDEX';
+      this.router.push({
+        path: `${this.circle?.getUrl()}`
+      });
     },
     calcSelfEvaluationStatus(learningUnit: LearningUnit) {
       if (learningUnit.children.length > 0) {
@@ -141,21 +155,22 @@ export const useCircleStore = defineStore({
       }
     },
     continueFromSelfEvaluation() {
-      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');
-      }
+      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');
+      // }
     }
   }
 })

client/src/views/CircleView.vue

@@ -7,7 +7,6 @@ import LearningContent from '@/components/circle/LearningContent.vue'
 
 import { onMounted } from 'vue'
 import { useCircleStore } from '@/stores/circle'
-import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
 import { useAppStore } from '@/stores/app'
 
 log.debug('CircleView.vue created')
@@ -46,9 +45,6 @@ onMounted(async () => {
       <div v-if="circleStore.page === 'LEARNING_CONTENT'">
         <LearningContent :key="circleStore.currentLearningContent.translation_key" />
       </div>
-      <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
-        <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key" />
-      </div>
       <div v-else>
         <div class="circle-container">
           <div class="circle">

client/src/views/LearningContentView.vue

@@ -37,23 +37,4 @@ onMounted(async () => {
   />
 </template>
 
-<style lang="postcss" scoped>
-.circle-container {
-  background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
-}
-
-.circle {
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>
+<style lang="postcss" scoped></style>

client/src/views/LearningUnitSelfEvaluationView.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+
+import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
+
+import { onMounted } from 'vue'
+import { useCircleStore } from '@/stores/circle'
+import { useAppStore } from '@/stores/app'
+
+log.debug('LearningUnitSelfEvaluationView created')
+
+const props = defineProps<{
+  learningPathSlug: string
+  circleSlug: string
+  learningUnitSlug: string
+}>()
+
+const appStore = useAppStore()
+appStore.showMainNavigationBar = false
+
+const circleStore = useCircleStore()
+
+onMounted(async () => {
+  log.debug('LearningUnitSelfEvaluationView mounted', props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
+
+  try {
+    await circleStore.loadSelfEvaluation(props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
+  } catch (error) {
+    log.error(error)
+  }
+})
+</script>
+
+<template>
+  <SelfEvaluation v-if="circleStore.currentSelfEvaluation" :key="circleStore.currentSelfEvaluation.translation_key" />
+</template>
+
+<style lang="postcss" scoped></style>

prepare_server.sh

@@ -74,7 +74,7 @@ else
 fi
 
 if [ "$START_BACKGROUND" = true ]; then
-    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
+    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
 else
-    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
+    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
 fi