Refactor LearningPath class

client/package.json

@@ -36,7 +36,7 @@
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.8",
-    "eslint": "^8.23.0",
+    "eslint": "8.22.0",
     "eslint-plugin-vue": "^9.4.0",
     "jsdom": "^20.0.0",
     "postcss": "^8.4.14",

client/src/services/__tests__/request_learning_path_data.py

@@ -0,0 +1,29 @@
+import json
+
+import requests
+
+
+def main():
+    client = requests.session()
+    client.get('http://localhost:8000/')
+
+    client.post(
+        'http://localhost:8000/core/login/',
+        json={
+            'username': 'admin',
+            'password': 'test',
+        }
+    )
+
+    response = client.get(
+        'http://localhost:8000/learnpath/api/page/unit-test-lernpfad/',
+    )
+    print(response.status_code)
+    print(response.json())
+
+    with open('unit-test-lernpfad.json', 'w') as f:
+        f.write(json.dumps(response.json(), indent=4))
+
+
+if __name__ == '__main__':
+    main()

client/src/services/circle.ts

@@ -6,9 +6,8 @@ import type {
   LearningContent,
   LearningSequence,
   LearningUnit,
-  LearningWagtailPage
-} from '@/types';
-
+  LearningWagtailPage,
+} from '@/types'
 
 function _createEmptyLearningUnit(parentLearningSequence: LearningSequence): LearningUnit {
   return {
@@ -22,7 +21,7 @@ function _createEmptyLearningUnit(parentLearningSequence: LearningSequence): Lea
     parentLearningSequence: parentLearningSequence,
     children: [],
     last: true,
-  };
+  }
 }
 
 export function parseLearningSequences (children: CircleChild[]): LearningSequence[] {

client/src/services/learningPath.ts

@@ -0,0 +1,48 @@
+import type { LearningPathChild, LearningWagtailPage, Topic } from '@/types'
+import { Circle } from '@/services/circle'
+
+export class LearningPath implements LearningWagtailPage {
+  readonly type = 'learnpath.LearningPath'
+  public topics: Topic[]
+  public circles: Circle[]
+
+  public static fromJson(json: any, completionData: any): LearningPath {
+    return new LearningPath(json.id, json.slug, json.title, json.translation_key, json.children, completionData)
+  }
+
+  constructor(
+    public readonly id: number,
+    public readonly slug: string,
+    public readonly title: string,
+    public readonly translation_key: string,
+    public children: LearningPathChild[],
+    completionData?: any
+  ) {
+    // parse children
+    this.topics = []
+    this.circles = []
+
+    let topic: Topic | undefined
+
+    this.children.forEach((page) => {
+      if (page.type === 'learnpath.Topic') {
+        if (topic) {
+          this.topics.push(topic)
+        }
+        topic = Object.assign(page, { circles: [] })
+      }
+      if (page.type === 'learnpath.Circle') {
+        const circle = Circle.fromJson(page)
+        circle.parseCompletionData(completionData)
+        if (topic) {
+          topic.circles.push(circle)
+        }
+        this.circles.push(circle)
+      }
+    })
+
+    if (topic) {
+      this.topics.push(topic)
+    }
+  }
+}

client/src/stores/learningPath.ts

@@ -1,5 +1,8 @@
-import * as log from 'loglevel';
+import * as log from 'loglevel'
 
+import { defineStore } from 'pinia'
+import { itGet } from '@/fetchHelpers'
+import { LearningPath } from '@/services/learningPath'
 import {defineStore} from 'pinia'
 import * as _ from 'lodash';
 
@@ -9,7 +12,7 @@ import {Circle} from '@/services/circle';
 import learningPathDiagram from "@/components/circle/LearningPathDiagram.vue";
 
 export type LearningPathStoreState = {
-  learningPath: LearningPath | undefined;
+  learningPath: LearningPath | undefined
 }
 
 
@@ -76,7 +79,7 @@ export const useLearningPathStore = defineStore({
         this.learningPath = learningPathData;
 
 
-        if (this.learningPath) {
+        if (learningPathData) {
           this.learningPath.lastCompleted = getLastCompleted(completionData)
           const nextLearningContent = getNextLearningContent(this.learningPath.lastCompleted, learningPathData)
 
@@ -86,29 +89,7 @@ export const useLearningPathStore = defineStore({
           this.learningPath.nextLearningUnit = nextLearningContent[2]
 
 
-          this.learningPath.topics = [];
-          this.learningPath.circles = [];
-
-          let topic: Topic | undefined;
-
-          this.learningPath.children.forEach((page) => {
-            if (page.type === 'learnpath.Topic') {
-              if (topic) {
-                this.learningPath.topics.push(topic);
-              }
-              topic = Object.assign(page, {circles: []});
-            }
-            if (page.type === 'learnpath.Circle') {
-              const circle = Circle.fromJson(page);
-              circle.parseCompletionData(completionData);
-              if (topic) {
-                topic.circles.push(circle);
-              }
-              this.learningPath.circles.push(circle);
-            }
-
-          })
-          this.learningPath.topics.push(topic);
+          this.learningPath = LearningPath.fromJson(learningPathData, completionData);
         }
         return this.learningPath;
       } catch (error) {

client/src/types.ts

@@ -1,11 +1,11 @@
-import type {Circle} from '@/services/circle';
+import type { Circle } from '@/services/circle'
 
 export interface LearningContentBlock {
-  type: 'web-based-training' | 'competence' | 'exercise' | 'knowledge';
+  type: 'web-based-training' | 'competence' | 'exercise' | 'knowledge'
   value: {
-    description: string;
-  },
-  id: string;
+    description: string
+  }
+  id: string
 }
 
 export interface VideoBlock {
@@ -103,18 +103,6 @@ export interface Topic extends LearningWagtailPage {
 
 export type LearningPathChild = Topic | WagtailCircle;
 
-export interface LearningPath extends LearningWagtailPage {
-  type: 'learnpath.LearningPath';
-  children: LearningPathChild[];
-  topics: Topic[];
-  circles: Circle[];
-  lastCompleted: CircleCompletion;
-  nextCircle: Circle;
-  nextLearningSequence: LearningSequence;
-  nextLearningUnit: LearningContent;
-
-}
-
 export interface CircleCompletion {
   id: number;
   created_at: string;