Update `nextLearningContent` dynamically

client/src/components/ui/ItFullScreenModal.vue

@@ -2,7 +2,6 @@
 // inspiration https://vuejs.org/examples/#modal
 
 import {onMounted, watch} from "vue";
-import {HTMLElement} from "happy-dom";
 
 const props = defineProps<{
   show: boolean

client/src/services/circle.ts

@@ -8,6 +8,7 @@ import type {
   LearningUnit,
   LearningWagtailPage,
 } from '@/types'
+import type { LearningPath } from '@/services/learningPath'
 
 function _createEmptyLearningUnit(parentLearningSequence: LearningSequence): LearningUnit {
   return {
@@ -124,12 +125,13 @@ export class Circle implements LearningWagtailPage {
     public children: CircleChild[],
     public goals: CircleGoal[],
     public job_situations: CircleJobSituation[],
+    public readonly parentLearningPath?: LearningPath,
   ) {
     this.learningSequences = parseLearningSequences(this, this.children);
     this.completed = false;
   }
 
-  public static fromJson(json: any): Circle {
+  public static fromJson(json: any, learningPath?: LearningPath): Circle {
     // TODO add error checking when the data does not conform to the schema
     return new Circle(
       json.id,
@@ -140,6 +142,7 @@ export class Circle implements LearningWagtailPage {
       json.children,
       json.goals,
       json.job_situations,
+      learningPath,
     )
   }
 
@@ -206,5 +209,9 @@ export class Circle implements LearningWagtailPage {
         page.completed = undefined;
       }
     });
+
+    if (this.parentLearningPath) {
+      this.parentLearningPath.calcNextLearningContent(completionData);
+    }
   }
 }

client/src/services/learningPath.ts

@@ -15,7 +15,7 @@ export class LearningPath implements LearningWagtailPage {
   public circles: Circle[]
   public nextLearningContent?: LearningContent
 
-  public static fromJson(json: any, completionData: any): LearningPath {
+  public static fromJson(json: any, completionData: CircleCompletion[]): LearningPath {
     return new LearningPath(json.id, json.slug, json.title, json.translation_key, json.children, completionData)
   }
 
@@ -41,7 +41,7 @@ export class LearningPath implements LearningWagtailPage {
         topic = Object.assign(page, { circles: [] })
       }
       if (page.type === 'learnpath.Circle') {
-        const circle = Circle.fromJson(page)
+        const circle = Circle.fromJson(page, this)
         circle.parseCompletionData(completionData)
         if (topic) {
           topic.circles.push(circle)
@@ -59,7 +59,12 @@ export class LearningPath implements LearningWagtailPage {
       this.topics.push(topic)
     }
 
-    // find next learning content
+    this.calcNextLearningContent(completionData);
+  }
+
+  public calcNextLearningContent(completionData: CircleCompletion[]): void {
+    this.nextLearningContent = undefined;
+
     const lastCompletedLearningContent = getLastCompleted(this.translation_key, completionData);
 
     if (lastCompletedLearningContent) {
@@ -75,9 +80,9 @@ export class LearningPath implements LearningWagtailPage {
         }
       }
     } else {
-      this.nextLearningContent = this.circles[0].flatLearningContents[0];
+      if (this.circles[0]) {
+        this.nextLearningContent = this.circles[0].flatLearningContents[0];
+      }
     }
-
-    console.log('################# ', this.nextLearningContent);
   }
 }