From 7022827cf3afbdffb68b864c93d5ba8a48b6b727 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 4 Jul 2022 10:45:00 +0200
Subject: [PATCH 1/3] Refactor circle code to Circle class

---
 .../src/components/circle/CircleDiagram.vue   | 24 +++---
 .../src/components/circle/CircleOverview.vue  | 10 +--
 .../components/circle/LearningSequence.vue    |  6 +-
 client/src/services/circle.ts                 | 82 ++++++++++++++++++-
 client/src/stores/circle.ts                   | 47 +++--------
 client/src/types.ts                           | 24 +++---
 client/src/views/CircleView.vue               | 11 ++-
 7 files changed, 130 insertions(+), 74 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index c40ec640..4845a4f2 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed, onMounted} from "vue";
+import {computed} from "vue";
 import * as _ from 'underscore'
+import {useCircleStore} from '@/stores/circle';
 
 const props = defineProps<{
-  circleStore: {},
   width: {
     default: 500,
     type: number,
@@ -18,28 +18,26 @@ const props = defineProps<{
   },
 }>()
 
+const circleStore = useCircleStore();
 
 function someFinished(learningSequence) {
-  return props.circleStore.flatChildren.filter((lc) => {
-    return lc.completed && lc.parentLearningSequence?.translation_key === learningSequence.translation_key;
-  }).length > 0;
+  if (circleStore.circle) {
+    return circleStore.circle.someFinishedInLearningSequence(learningSequence.translation_key);
+  }
+  return false;
 }
 
 
 const pieData = computed(() => {
-  const circle = props.circleStore.circleData, completionData = props.circleStore.completionData
-  console.log('initial of compute pie data ', circle, completionData)
+  const circle = circleStore.circle
+  console.log('initial of compute pie data ', circle)
 
-  if (circle && completionData) {
-    console.log('initial of compute pie data ', circle, completionData)
+  if (circle) {
+    console.log('initial of compute pie data ', circle)
     let learningSequences = _.filter(circle.children, (child) => {
       return child.type === 'learnpath.LearningSequence';
     })
 
-    const completionDataByPageId = _.object(_.map(completionData, function (item) {
-      return [item.page_key, item]
-    }))
-
     let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
     let pieGenerator = d3.pie()
     let angles = pieGenerator(pieWeights)
diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index 7a9b446a..29bf5ec5 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type {Circle} from '@/types';
+import {Circle} from '@/services/circle';
 
 const props = defineProps<{
-  circleData: Circle
+  circle: Circle
 }>()
 
 </script>
@@ -17,7 +17,7 @@ const props = defineProps<{
     </div>
 
 
-    <h1 class="">Überblick: Circle "{{ circleData.title }}"</h1>
+    <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
 
     <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
 
@@ -25,7 +25,7 @@ const props = defineProps<{
       <h3>Du wirst in der Lage sein, ... </h3>
 
       <ul class="mt-4">
-        <li class="text-xl flex items-center" v-for="goal in circleData.goals" :key="goal.id">
+        <li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
           <it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
           <div class="mt-4">{{ goal.value }}</div>
         </li>
@@ -38,7 +38,7 @@ const props = defineProps<{
 
     <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
       <li
-        v-for="jobSituation in circleData.job_situations"
+        v-for="jobSituation in circle.job_situations"
         :key="jobSituation.id"
         class="job-situation border border-gray-500 p-4 text-xl flex items-center"
       >
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index 91c2b5c5..a2578260 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -15,10 +15,8 @@ function toggleCompleted(learningContent: LearningContent) {
 }
 
 const someFinished = computed(() => {
-  if (props.learningSequence) {
-    return circleStore.flatChildren.filter((lc) => {
-      return lc.completed && lc.parentLearningSequence?.translation_key === props.learningSequence.translation_key;
-    }).length > 0;
+  if (props.learningSequence && circleStore.circle) {
+    return circleStore.circle.someFinishedInLearningSequence(props.learningSequence.translation_key);
   }
 
   return false;
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 3cb8c462..acb460a9 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -1,4 +1,13 @@
-import type {CircleChild, LearningContent, LearningSequence, LearningUnit} from '@/types';
+import type {
+  CircleChild,
+  CircleCompletion,
+  CircleGoal,
+  CircleInterface,
+  CircleJobSituation,
+  LearningContent,
+  LearningSequence,
+  LearningUnit
+} from '@/types';
 
 
 function _createEmptyLearningUnit(parentLearningSequence: LearningSequence): LearningUnit {
@@ -98,3 +107,74 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
   return result;
 }
 
+export class Circle implements CircleInterface {
+  readonly type = 'learnpath.Circle';
+  readonly learningSequences: LearningSequence[];
+  readonly completed: boolean;
+
+  constructor(
+    public readonly id: number,
+    public readonly slug: string,
+    public readonly title: string,
+    public readonly translation_key: string,
+    public description: string,
+    public children: CircleChild[],
+    public goals: CircleGoal[],
+    public job_situations: CircleJobSituation[],
+  ) {
+    this.learningSequences = parseLearningSequences(this.children);
+    this.completed = false;
+  }
+
+  public static fromJson(json: any): Circle {
+    // TODO add error checking when the data does not conform to the schema
+    return new Circle(
+      json.id,
+      json.slug,
+      json.title,
+      json.translation_key,
+      json.description,
+      json.children,
+      json.goals,
+      json.job_situations,
+    )
+  }
+
+  public get flatChildren(): CircleChild[] {
+    const result: CircleChild[] = [];
+    this.learningSequences.forEach((learningSequence) => {
+      learningSequence.learningUnits.forEach((learningUnit) => {
+        learningUnit.children.forEach((learningUnitQuestion) => {
+          result.push(learningUnitQuestion);
+        })
+        learningUnit.learningContents.forEach((learningContent) => {
+          result.push(learningContent);
+        });
+      });
+    });
+    return result;
+  }
+
+  public someFinishedInLearningSequence(translationKey: string): boolean {
+    if (translationKey) {
+      return this.flatChildren.filter((lc) => {
+        return lc.completed && lc.parentLearningSequence?.translation_key === translationKey;
+      }).length > 0;
+    }
+
+    return false;
+  }
+
+  public parseCompletionData(completionData: CircleCompletion[]) {
+    this.flatChildren.forEach((page) => {
+      const pageIndex = completionData.findIndex((e) => {
+        return e.page_key === page.translation_key;
+      });
+      if (pageIndex >= 0) {
+        page.completed = completionData[pageIndex].completed;
+      } else {
+        page.completed = undefined;
+      }
+    });
+  }
+}
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index cd5b1917..a3474604 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -2,14 +2,13 @@ import * as log from 'loglevel';
 
 import {defineStore} from 'pinia'
 
-import type {Circle, CircleChild, CircleCompletion, LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
+import type {LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
+import {Circle} from '@/services/circle'
 import {itGet, itPost} from '@/fetchHelpers';
-import {parseLearningSequences} from '@/services/circle';
 import {useAppStore} from '@/stores/app';
 
 export type CircleStoreState = {
-  circleData: Circle;
-  completionData: CircleCompletion[];
+  circle: Circle | undefined;
   currentLearningContent: LearningContent | undefined;
   currentSelfEvaluation: LearningUnit | undefined;
   page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION';
@@ -19,7 +18,7 @@ export const useCircleStore = defineStore({
   id: 'circle',
   state: () => {
     return {
-      circleData: {},
+      circle: undefined,
       completionData: {},
       currentLearningContent: undefined,
       currentSelfEvaluation: undefined,
@@ -28,27 +27,15 @@ export const useCircleStore = defineStore({
   },
   getters: {
     flatChildren: (state) => {
-      const result:CircleChild[] = [];
-      state.circleData.learningSequences.forEach((learningSequence) => {
-        learningSequence.learningUnits.forEach((learningUnit) => {
-          learningUnit.children.forEach((learningUnitQuestion) => {
-            result.push(learningUnitQuestion);
-          })
-          learningUnit.learningContents.forEach((learningContent) => {
-            result.push(learningContent);
-          });
-        });
-      });
-      return result;
     },
   },
   actions: {
     async loadCircle(slug: string) {
       try {
-        this.circleData = await itGet(`/learnpath/api/circle/${slug}/`);
-        this.circleData.learningSequences = parseLearningSequences(this.circleData.children);
-        this.completionData = await itGet(`/api/completion/circle/${this.circleData.translation_key}/`);
-        this.parseCompletionData();
+        const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
+        this.circle = Circle.fromJson(circleData);
+        const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
+        this.circle.parseCompletionData(completionData);
       } catch (error) {
         log.error(error);
         return error
@@ -57,28 +44,18 @@ export const useCircleStore = defineStore({
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
         page.completed = flag;
-        this.completionData = await itPost('/api/completion/circle/mark/', {
+        const completionData = await itPost('/api/completion/circle/mark/', {
           page_key: page.translation_key,
           completed: page.completed,
         });
-        this.parseCompletionData();
+        if (this.circle) {
+          this.circle.parseCompletionData(completionData);
+        }
       } catch (error) {
         log.error(error);
         return error
       }
     },
-    parseCompletionData() {
-      this.flatChildren.forEach((page) => {
-        const pageIndex = this.completionData.findIndex((e) => {
-          return e.page_key === page.translation_key;
-        });
-        if (pageIndex >= 0) {
-          page.completed = this.completionData[pageIndex].completed;
-        } else {
-          page.completed = undefined;
-        }
-      });
-    },
     openLearningContent(learningContent: LearningContent) {
       this.currentLearningContent = learningContent;
       const appStore = useAppStore();
diff --git a/client/src/types.ts b/client/src/types.ts
index 006b1d25..01dbae35 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -1,3 +1,5 @@
+import {parseLearningSequences} from '@/services/circle';
+
 export interface LearningContentBlock {
   type: 'web-based-training' | 'competence' | 'exercise' | 'knowledge';
   value: {
@@ -46,10 +48,10 @@ export interface CircleJobSituation {
 }
 
 export interface LearningWagtailPage {
-  id: number;
-  title: string;
-  slug: string;
-  translation_key: string;
+  readonly id: number;
+  readonly title: string;
+  readonly slug: string;
+  readonly translation_key: string;
   completed?: boolean;
 }
 
@@ -105,15 +107,17 @@ export interface CircleCompletion {
   json_data: any;
 }
 
-export interface Circle extends LearningWagtailPage {
-  type: 'learnpath.Circle';
-  children: CircleChild[];
-  description: string;
+export interface CircleInterface extends LearningWagtailPage {
+  readonly type: 'learnpath.Circle';
+  readonly children: CircleChild[];
+  readonly description: string;
+  readonly goals: CircleGoal[];
+  readonly job_situations: CircleJobSituation[];
   learningSequences: LearningSequence[];
-  goals: CircleGoal[];
-  job_situations: CircleJobSituation[];
 }
 
+
+
 export interface CircleDiagramData  {
           index: number
           title:  string
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 7d07b4f2..c310d8e0 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -35,15 +35,15 @@ onMounted(async () => {
     <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
       <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
     </div>
-    <div v-else>
+    <div v-else-if="circleStore.circle">
       <div class="circle">
         <div class="flex flex-col lg:flex-row">
           <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
             <h1 class="text-blue-dark text-7xl">
-              {{ circleStore.circleData.title }}
+              {{ circleStore.circle.title }}
             </h1>
 
-            <div v-if="circleStore.circleData.learningSequences && circleStore.flatChildren" class="w-full mt-8">
+            <div v-if="circleStore.circle.learningSequences && circleStore.circle.flatChildren" class="w-full mt-8">
               <CircleDiagram :circle-store="circleStore"></CircleDiagram>
             </div>
 
@@ -65,7 +65,7 @@ onMounted(async () => {
               <div class="block border border-gray-500 mt-8 p-6">
                 <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
                 <div class="prose mt-4">
-                  {{ circleStore.circleData.description }}
+                  {{ circleStore.circle.description }}
                 </div>
 
                 <button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
@@ -83,12 +83,11 @@ onMounted(async () => {
 
           <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
             <div
-              v-for="learningSequence in circleStore.circleData.learningSequences"
+              v-for="learningSequence in circleStore.circle.learningSequences"
               :key="learningSequence.translation_key"
             >
               <LearningSequence
                 :learning-sequence="learningSequence"
-                :completion-data="circleStore.completionData"
               ></LearningSequence>
             </div>
 

From cbbf4e42a287270982dd96fdc6288bc449477a07 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 4 Jul 2022 11:52:05 +0200
Subject: [PATCH 2/3] Refactor learningPath views

---
 .../components/circle/LearningPathDiagram.vue | 36 +++++----
 client/src/services/circle.ts                 |  6 +-
 client/src/stores/learningPath.ts             | 59 ++++++++++++++
 client/src/types.ts                           | 27 ++++---
 client/src/views/LearningPathView.vue         | 78 +++++--------------
 5 files changed, 118 insertions(+), 88 deletions(-)
 create mode 100644 client/src/stores/learningPath.ts

diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index b1762468..71585c96 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -1,6 +1,6 @@
 <script>
-import * as d3 from 'd3'
-import * as _ from 'underscore'
+import * as d3 from 'd3';
+import { useLearningPathStore } from '../../stores/learningPath';
 
 export default {
   props: {
@@ -157,23 +157,31 @@ export default {
       type: Number,
     },
   },
+  setup() {
+    const learningPathStore = useLearningPathStore()
+
+    return { learningPathStore }
+  },
   computed: {
     viewBox() {
       return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
-
-      let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
-      _.forEach(internalCircles, function (circle) {
-        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
-        let pieGenerator = d3.pie()
-        let pieData = pieGenerator(pieWeights)
-        _.forEach(pieData, function (pie) {
-          pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
-        })
-        circle.pieData = pieData
-      })
-      return internalCircles
+      if (this.learningPathStore.learningPath) {
+        let internalCircles = this.learningPathStore.learningPath.topics.flatMap(topic => topic.circles);
+        // console.log(internalCircles);
+        internalCircles.forEach((circle) => {
+          let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
+          let pieGenerator = d3.pie()
+          let pieData = pieGenerator(pieWeights)
+          // _.forEach(pieData, function(pie) {
+          //   pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
+          // })
+          circle.pieData = pieData
+        });
+        return internalCircles
+      }
+      return [];
     },
     svg() {
       return d3.select('.learning-path-visualization')
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index acb460a9..9b9abdcd 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -2,11 +2,11 @@ import type {
   CircleChild,
   CircleCompletion,
   CircleGoal,
-  CircleInterface,
   CircleJobSituation,
   LearningContent,
   LearningSequence,
-  LearningUnit
+  LearningUnit,
+  LearningWagtailPage
 } from '@/types';
 
 
@@ -107,7 +107,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
   return result;
 }
 
-export class Circle implements CircleInterface {
+export class Circle implements LearningWagtailPage {
   readonly type = 'learnpath.Circle';
   readonly learningSequences: LearningSequence[];
   readonly completed: boolean;
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
new file mode 100644
index 00000000..8764b8c1
--- /dev/null
+++ b/client/src/stores/learningPath.ts
@@ -0,0 +1,59 @@
+import * as log from 'loglevel';
+
+import {defineStore} from 'pinia'
+
+import type {LearningPath, Topic} from '@/types'
+import {itGet} from '@/fetchHelpers';
+import {Circle} from '@/services/circle';
+
+export type LearningPathStoreState = {
+  learningPath: LearningPath;
+}
+
+export const useLearningPathStore = defineStore({
+  id: 'learningPath',
+  state: () => {
+    return {
+      learningPath: undefined,
+    } as LearningPathStoreState;
+  },
+  getters: {
+  },
+  actions: {
+    async loadLearningPath(slug: string) {
+      try {
+        this.learningPath = await itGet(`/learnpath/api/learningpath/${slug}/`);
+        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);
+            topic.circles.push(circle);
+          }
+
+          this.learningPath.topics.push(topic);
+        })
+        console.log(this.learningPath);
+        return this.learningPath;
+      } catch (error) {
+        log.error(error);
+        return error
+      }
+    },
+  }
+})
diff --git a/client/src/types.ts b/client/src/types.ts
index 01dbae35..9b9884f9 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -1,4 +1,4 @@
-import {parseLearningSequences} from '@/services/circle';
+import type {Circle} from '@/services/circle';
 
 export interface LearningContentBlock {
   type: 'web-based-training' | 'competence' | 'exercise' | 'knowledge';
@@ -95,6 +95,20 @@ export interface WagtailCircle extends LearningWagtailPage {
   description: string;
 }
 
+export interface Topic extends LearningWagtailPage {
+  type: 'learnpath.Topic';
+  is_visible: boolean;
+  circles: Circle[];
+}
+
+export type LearningPathChild = Topic | WagtailCircle;
+
+export interface LearningPath extends LearningWagtailPage {
+  type: 'learnpath.LearningPath';
+  children: LearningPathChild[];
+  topics: Topic[];
+}
+
 export interface CircleCompletion {
   id: number;
   created_at: string;
@@ -107,17 +121,6 @@ export interface CircleCompletion {
   json_data: any;
 }
 
-export interface CircleInterface extends LearningWagtailPage {
-  readonly type: 'learnpath.Circle';
-  readonly children: CircleChild[];
-  readonly description: string;
-  readonly goals: CircleGoal[];
-  readonly job_situations: CircleJobSituation[];
-  learningSequences: LearningSequence[];
-}
-
-
-
 export interface CircleDiagramData  {
           index: number
           title:  string
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index c4734958..ac36c36f 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -1,80 +1,40 @@
-<script>
-import axios from 'axios';
+<script setup lang="ts">
+
 import * as log from 'loglevel';
-import { mapStores } from 'pinia';
 
-import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
-import { useUserStore } from '../stores/user';
+import {onMounted} from 'vue'
+import {useLearningPathStore} from '@/stores/learningPath';
+import {useUserStore} from '@/stores/user';
 
-export default {
+import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
 
 
-  components: {LearningPathDiagram},
-  props: ['learningPathSlug',],
-  data() {
-    return {
-      count: 0,
-      learningPathData: {},
-      learningPathContents: null,
-      circles: [],
-      learningSequences: [],
-    }
-  },
-  computed: {
-    ...mapStores(useUserStore)
-  },
-  mounted() {
-    log.debug('LearningPath mounted', this.learningPathSlug);
-    axios({
-      method: 'get',
-      url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
-    }).then((response) => {
+log.debug('LearningPathView created');
 
-      this.learningPathData = response.data
+const props = defineProps<{
+  learningPathSlug: string
+}>()
 
-      let learningPathContents = {topics: []}
-      let topic = {
-        id: 0,
-        title: '',
-        slug: '',
-        type: 'learnpath.Topic',
-        translation_key: '',
-        is_visible: false,
-        cirlces: []
-      }
-      response.data.children.forEach((child) => {
-        if (child.type === 'learnpath.Topic') {
-          if (topic.id != 0) {
-            learningPathContents.topics.push(child)
-          }
-          topic = child
-          topic.circles = []
-        }
-        if (child.type === 'learnpath.Circle') {
-          topic.circles.push(child)
-        }
-      });
-      learningPathContents.topics.push(topic)
-      this.learningPathContents = learningPathContents;
-
-    });
-
-  }
-}
+const learningPathStore = useLearningPathStore();
+const userStore = useUserStore();
 
+onMounted(async () => {
+  log.info('LearningPathView mounted');
+  await learningPathStore.loadLearningPath(props.learningPathSlug);
+});
 
 </script>
 
 <template>
-  <div class="bg-gray-100" v-if="learningPathContents">
+  <div class="bg-gray-100" v-if="learningPathStore.learningPath">
 
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">
         <div class="bg-white h-80 pt-8">
-          <LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
+          <LearningPathDiagram></LearningPathDiagram>
         </div>
 
-        <h1 class="m-12">{{ learningPathData.title }}</h1>
+        <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
 
         <div class="bg-white m-12 p-8 flex flex-row  justify-start">
           <div class="p-8 flex-auto">

From 2557d478c9772f99e4342123791bc59738169784 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 4 Jul 2022 12:15:49 +0200
Subject: [PATCH 3/3] Show finished learningSequences in LearningPathDiagram

---
 .../src/components/circle/LearningPathDiagram.vue  |  7 ++++---
 client/src/stores/learningPath.ts                  |  6 +++++-
 .../completion/migrations/0001_initial.py          |  3 ++-
 server/vbv_lernwelt/completion/models.py           |  1 +
 server/vbv_lernwelt/completion/serializers.py      |  2 +-
 server/vbv_lernwelt/completion/urls.py             |  4 +++-
 server/vbv_lernwelt/completion/views.py            | 14 +++++++++++++-
 server/vbv_lernwelt/learnpath/models.py            |  6 +-----
 server/vbv_lernwelt/learnpath/serializers.py       |  2 +-
 9 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 71585c96..384410ce 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -174,9 +174,10 @@ export default {
           let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
           let pieGenerator = d3.pie()
           let pieData = pieGenerator(pieWeights)
-          // _.forEach(pieData, function(pie) {
-          //   pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
-          // })
+          pieData.forEach((pie) => {
+            const lp = circle.learningSequences[parseInt(pie.index)];
+            pie.done = circle.someFinishedInLearningSequence(lp.translation_key);
+          });
           circle.pieData = pieData
         });
         return internalCircles
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
index 8764b8c1..b23852d5 100644
--- a/client/src/stores/learningPath.ts
+++ b/client/src/stores/learningPath.ts
@@ -22,7 +22,10 @@ export const useLearningPathStore = defineStore({
   actions: {
     async loadLearningPath(slug: string) {
       try {
-        this.learningPath = await itGet(`/learnpath/api/learningpath/${slug}/`);
+        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,
@@ -43,6 +46,7 @@ export const useLearningPathStore = defineStore({
           }
           if (page.type === 'learnpath.Circle') {
             const circle = Circle.fromJson(page);
+            circle.parseCompletionData(completionData);
             topic.circles.push(circle);
           }
 
diff --git a/server/vbv_lernwelt/completion/migrations/0001_initial.py b/server/vbv_lernwelt/completion/migrations/0001_initial.py
index eab576fb..f6e70be8 100644
--- a/server/vbv_lernwelt/completion/migrations/0001_initial.py
+++ b/server/vbv_lernwelt/completion/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.2.13 on 2022-06-22 16:53
+# Generated by Django 3.2.13 on 2022-07-04 09:58
 
 from django.conf import settings
 from django.db import migrations, models
@@ -23,6 +23,7 @@ class Migration(migrations.Migration):
                 ('page_key', models.UUIDField()),
                 ('page_type', models.CharField(blank=True, default='', max_length=255)),
                 ('circle_key', models.UUIDField()),
+                ('learning_path_key', models.UUIDField()),
                 ('completed', models.BooleanField(default=False)),
                 ('json_data', models.JSONField(blank=True, default=dict)),
                 ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
diff --git a/server/vbv_lernwelt/completion/models.py b/server/vbv_lernwelt/completion/models.py
index d46c28bf..5eff0fbc 100644
--- a/server/vbv_lernwelt/completion/models.py
+++ b/server/vbv_lernwelt/completion/models.py
@@ -15,6 +15,7 @@ class CircleCompletion(models.Model):
     page_key = models.UUIDField()
     page_type = models.CharField(max_length=255, default='', blank=True)
     circle_key = models.UUIDField()
+    learning_path_key = models.UUIDField()
 
     completed = models.BooleanField(default=False)
     json_data = models.JSONField(default=dict, blank=True)
diff --git a/server/vbv_lernwelt/completion/serializers.py b/server/vbv_lernwelt/completion/serializers.py
index 92d5bef4..4a26ac73 100644
--- a/server/vbv_lernwelt/completion/serializers.py
+++ b/server/vbv_lernwelt/completion/serializers.py
@@ -8,6 +8,6 @@ class CircleCompletionSerializer(serializers.ModelSerializer):
         model = CircleCompletion
         fields = [
             'id', 'created_at', 'updated_at', 'user', 'page_key', 'page_type', 'circle_key',
-            'completed', 'json_data',
+            'learning_path_key', 'completed', 'json_data',
         ]
 
diff --git a/server/vbv_lernwelt/completion/urls.py b/server/vbv_lernwelt/completion/urls.py
index 3530697b..891712bf 100644
--- a/server/vbv_lernwelt/completion/urls.py
+++ b/server/vbv_lernwelt/completion/urls.py
@@ -1,8 +1,10 @@
 from django.urls import path
 
-from vbv_lernwelt.completion.views import request_circle_completion, mark_circle_completion
+from vbv_lernwelt.completion.views import request_circle_completion, mark_circle_completion, \
+    request_learning_path_completion
 
 urlpatterns = [
     path(r"circle/<uuid:circle_key>/", request_circle_completion, name="request_circle_completion"),
+    path(r"learning_path/<uuid:learning_path_key>/", request_learning_path_completion, name="request_learning_path_completion"),
     path(r"circle/mark/", mark_circle_completion, name="mark_circle_completion"),
 ]
diff --git a/server/vbv_lernwelt/completion/views.py b/server/vbv_lernwelt/completion/views.py
index c195ebc1..9cb5fba0 100644
--- a/server/vbv_lernwelt/completion/views.py
+++ b/server/vbv_lernwelt/completion/views.py
@@ -5,7 +5,7 @@ from wagtail.models import Page
 
 from vbv_lernwelt.completion.models import CircleCompletion
 from vbv_lernwelt.completion.serializers import CircleCompletionSerializer
-from vbv_lernwelt.learnpath.models import Circle
+from vbv_lernwelt.learnpath.models import Circle, LearningPath
 from vbv_lernwelt.learnpath.utils import get_wagtail_type
 
 logger = structlog.get_logger(__name__)
@@ -21,6 +21,16 @@ def request_circle_completion(request, circle_key):
     return Response(status=200, data=response_data)
 
 
+@api_view(['GET'])
+def request_learning_path_completion(request, learning_path_key):
+    response_data = CircleCompletionSerializer(
+        CircleCompletion.objects.filter(user=request.user, learning_path_key=learning_path_key),
+        many=True,
+    ).data
+
+    return Response(status=200, data=response_data)
+
+
 @api_view(['POST'])
 def mark_circle_completion(request):
     page_key = request.data.get('page_key')
@@ -29,11 +39,13 @@ def mark_circle_completion(request):
     page = Page.objects.get(translation_key=page_key, locale__language_code='de-CH')
     page_type = get_wagtail_type(page.specific)
     circle = Circle.objects.ancestor_of(page).first()
+    learning_path = LearningPath.objects.ancestor_of(page).first()
 
     cc, created = CircleCompletion.objects.get_or_create(
         user=request.user,
         page_key=page_key,
         circle_key=circle.translation_key,
+        learning_path_key=learning_path.translation_key,
     )
     cc.page_type = page_type
     cc.completed = completed
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index 04cd7171..67534a3c 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -98,16 +98,12 @@ class Circle(Page):
         FieldPanel('experts'),
     ]
 
-    @property
-    def learning_sequences(self):
-        return self.get_children().filter(content_type__model='learningsequence').values('id', 'title')
-
     @classmethod
     def get_serializer_class(cls):
         return get_it_serializer_class(
             cls,
             field_names=[
-                'id', 'title', 'slug', 'type', 'translation_key', 'learning_sequences', 'children',
+                'id', 'title', 'slug', 'type', 'translation_key', 'children',
                 'description', 'job_situations', 'goals', 'experts',
             ]
         )
diff --git a/server/vbv_lernwelt/learnpath/serializers.py b/server/vbv_lernwelt/learnpath/serializers.py
index 8e868ee3..3aa8d494 100644
--- a/server/vbv_lernwelt/learnpath/serializers.py
+++ b/server/vbv_lernwelt/learnpath/serializers.py
@@ -17,4 +17,4 @@ class LearningPathSerializer(get_it_serializer_class(LearningPath, [])):
 
     class Meta:
         model = Circle
-        fields = ['id', 'title', 'slug', 'children', 'type']
+        fields = ['id', 'title', 'slug', 'type', 'translation_key', 'children']