Make reactive

client/src/components/circle/LearningPathDiagram.vue

@@ -62,7 +62,7 @@ export default {
     },
     circles() {
       if (this.learningPathStore.learningPath) {
-        let internalCircles = this.learningPathStore.learningPath.topics.flatMap(topic => topic.circles);
+        let internalCircles = this.learningPathStore.learningPath.circles;
         // console.log(internalCircles);
         internalCircles.forEach((circle) => {
           let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)

client/src/stores/circle.ts

@@ -3,9 +3,10 @@ import * as log from 'loglevel';
 import {defineStore} from 'pinia'
 
 import type {LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
-import {Circle} from '@/services/circle'
+import type {Circle} from '@/services/circle'
 import {itGet, itPost} from '@/fetchHelpers';
 import {useAppStore} from '@/stores/app';
+import {useLearningPathStore} from '@/stores/learningPath';
 
 export type CircleStoreState = {
   circle: Circle | undefined;
@@ -26,16 +27,21 @@ export const useCircleStore = defineStore({
     } as CircleStoreState;
   },
   getters: {
-    flatChildren: (state) => {
-    },
   },
   actions: {
     async loadCircle(slug: string) {
       try {
-        const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
+        // const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
-        this.circle = Circle.fromJson(circleData);
+        // this.circle = Circle.fromJson(circleData);
-        const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+        // this.circle.parseCompletionData(completionData);
-        this.circle.parseCompletionData(completionData);
+        const learningPathStore = useLearningPathStore();
+        await learningPathStore.loadLearningPath('versicherungsvermittlerin');
+        this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
+        if (this.circle) {
+          const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+          this.circle.parseCompletionData(completionData);
+        }
+        return Promise.resolve(this.circle)
       } catch (error) {
         log.error(error);
         return error

client/src/stores/learningPath.ts

@@ -7,7 +7,7 @@ import {itGet} from '@/fetchHelpers';
 import {Circle} from '@/services/circle';
 
 export type LearningPathStoreState = {
-  learningPath: LearningPath;
+  learningPath: LearningPath | undefined;
 }
 
 export const useLearningPathStore = defineStore({
@@ -20,39 +20,47 @@ export const useLearningPathStore = defineStore({
   getters: {
   },
   actions: {
-    async loadLearningPath(slug: string) {
+    async loadLearningPath(slug: string, reload = false) {
+      if (this.learningPath && !reload) {
+        return this.learningPath;
+      }
       try {
         const learningPathData = await itGet(`/learnpath/api/learningpath/${slug}/`);
         const completionData = await itGet(`/api/completion/learning_path/${learningPathData.translation_key}/`);
 
         this.learningPath = learningPathData;
-        this.learningPath.topics = [];
-        const emptyTopic: Topic = {
-          id: 0,
-          title: '',
-          slug: '',
-          type: 'learnpath.Topic',
-          translation_key: '',
-          is_visible: false,
-          circles: []
-        }
-        let topic = Object.assign({}, emptyTopic);
-        this.learningPath.children.forEach((page) => {
-          if (page.type === 'learnpath.Topic') {
-            if (topic.id !== 0) {
-              this.learningPath.topics.push(topic);
-            }
-            topic = Object.assign({}, emptyTopic, page);
-          }
-          if (page.type === 'learnpath.Circle') {
-            const circle = Circle.fromJson(page);
-            circle.parseCompletionData(completionData);
-            topic.circles.push(circle);
-          }
 
-          this.learningPath.topics.push(topic);
+        if (this.learningPath) {
-        })
+          this.learningPath.topics = [];
-        console.log(this.learningPath);
+          this.learningPath.circles = [];
+          const emptyTopic: Topic = {
+            id: 0,
+            title: '',
+            slug: '',
+            type: 'learnpath.Topic',
+            translation_key: '',
+            is_visible: false,
+            circles: []
+          }
+          let topic = Object.assign({}, emptyTopic);
+          this.learningPath.children.forEach((page) => {
+            if (page.type === 'learnpath.Topic') {
+              if (topic.id !== 0) {
+                this.learningPath.topics.push(topic);
+              }
+              topic = Object.assign({}, emptyTopic, page);
+            }
+            if (page.type === 'learnpath.Circle') {
+              const circle = Circle.fromJson(page);
+              circle.parseCompletionData(completionData);
+              topic.circles.push(circle);
+              this.learningPath.circles.push(circle);
+            }
+
+            this.learningPath.topics.push(topic);
+          })
+          console.log(this.learningPath);
+        }
         return this.learningPath;
       } catch (error) {
         log.error(error);

client/src/types.ts

@@ -107,6 +107,7 @@ export interface LearningPath extends LearningWagtailPage {
   type: 'learnpath.LearningPath';
   children: LearningPathChild[];
   topics: Topic[];
+  circles: Circle[];
 }
 
 export interface CircleCompletion {

client/src/views/CircleView.vue

@@ -27,7 +27,7 @@ onMounted(async () => {
 <template>
   <Transition>
     <div v-if="circleStore.page === 'OVERVIEW'">
-      <CircleOverview :circle-data="circleStore.circleData" @close="circleStore.page = 'INDEX'"/>
+      <CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/>
     </div>
     <div v-else-if="circleStore.page === 'LEARNING_CONTENT'">
       <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
@@ -43,8 +43,8 @@ onMounted(async () => {
               {{ circleStore.circle.title }}
             </h1>
 
-            <div v-if="circleStore.circle.learningSequences && circleStore.circle.flatChildren" class="w-full mt-8">
+            <div v-if="circleStore.circle" class="w-full mt-8">
-              <CircleDiagram :circle-store="circleStore"></CircleDiagram>
+              <CircleDiagram></CircleDiagram>
             </div>
 
             <div class="border-t-2 border-gray-500 mt-4 lg:hidden">