Merge branch 'feature/weiter-gehts' into develop

client/src/stores/learningPath.ts

@@ -1,24 +1,69 @@
 import * as log from 'loglevel';
 
 import {defineStore} from 'pinia'
+import * as _ from 'lodash';
 
 import type {LearningPath, Topic} from '@/types'
 import {itGet} from '@/fetchHelpers';
 import {Circle} from '@/services/circle';
+import learningPathDiagram from "@/components/circle/LearningPathDiagram.vue";
 
 export type LearningPathStoreState = {
   learningPath: LearningPath | undefined;
 }
 
+
+function getLastCompleted(completionData: any) {
+  return _.filter(_.orderBy(completionData, ['updated_at'], 'desc'), c =>{return c.completed && c.page_type === "learnpath.LearningContent" })[0]
+}
+
+
+function getFirstLearningContent(lastCopleted, learningPathData) {
+  const circles = _.filter(learningPathData.children, {'type': 'learnpath.Circle'})
+
+  let currentCircle = Circle.fromJson(circles[0])
+  const currentLearningUnit = currentCircle.flatChildren[0]
+  let currentLearningSequence = currentLearningUnit.parentLearningSequence
+  return [currentCircle, currentLearningSequence, currentLearningUnit]
+}
+
+function getNextLearningContent(lastCopleted, learningPathData) {
+
+  let currentCircle, currentLearningSequence, currentLearningUnit
+
+  currentLearningUnit = getFirstLearningContent(lastCopleted, learningPathData)
+
+  if (lastCopleted) {
+    const circles = _.filter(learningPathData.children, {'type': 'learnpath.Circle'})
+    _.forEach(circles, circle => {
+      _.forEach(Circle.fromJson(circle).learningSequences, learningSequence => {
+        _.forEach(learningSequence.learningUnits, learningUnit => {
+          _.forEach(learningUnit.learningContents, content => {
+            if (lastCopleted.page_key === content.translation_key) {
+              currentCircle = Circle.fromJson(circle)
+              currentLearningSequence = learningSequence
+              currentLearningUnit = content
+
+            }
+          })
+        })
+      })
+    })
+    currentLearningUnit = [currentCircle, currentLearningSequence, currentLearningUnit]
+  }
+  return currentLearningUnit
+}
+
+
 export const useLearningPathStore = defineStore({
   id: 'learningPath',
   state: () => {
     return {
       learningPath: undefined,
+
     } as LearningPathStoreState;
   },
-  getters: {
+  getters: {},
-  },
   actions: {
     async loadLearningPath(slug: string, reload = false) {
       if (this.learningPath && !reload) {
@@ -30,7 +75,17 @@ export const useLearningPathStore = defineStore({
 
         this.learningPath = learningPathData;
 
+
         if (this.learningPath) {
+          this.learningPath.lastCompleted = getLastCompleted(completionData)
+          const nextLearningContent = getNextLearningContent(this.learningPath.lastCompleted, learningPathData)
+
+          console.log('nextLearningContent', nextLearningContent)
+          this.learningPath.nextCircle = nextLearningContent[0]
+          this.learningPath.nextLearningSequence = nextLearningContent[1]
+          this.learningPath.nextLearningUnit = nextLearningContent[2]
+
+
           this.learningPath.topics = [];
           this.learningPath.circles = [];
 

client/src/types.ts

@@ -108,6 +108,11 @@ export interface LearningPath extends LearningWagtailPage {
   children: LearningPathChild[];
   topics: Topic[];
   circles: Circle[];
+  lastCompleted: CircleCompletion;
+  nextCircle: Circle;
+  nextLearningSequence: LearningSequence;
+  nextLearningUnit: LearningContent;
+
 }
 
 export interface CircleCompletion {
@@ -122,13 +127,13 @@ export interface CircleCompletion {
   json_data: any;
 }
 
-export interface CircleDiagramData  {
+export interface CircleDiagramData {
-          index: number
+  index: number
-          title:  string
+  title: string
-          icon: string
+  icon: string
-          startAngle: number
+  startAngle: number
-          endAngle: number
+  endAngle: number
-          arrowStartAngle: number
+  arrowStartAngle: number
-          arrowEndAngle:  number
+  arrowEndAngle: number
-          done: boolean
+  done: boolean
 }

client/src/views/LearningPathView.vue

@@ -2,7 +2,7 @@
 
 import * as log from 'loglevel';
 
-import {onMounted} from 'vue'
+import {computed, onMounted} from 'vue'
 import {useLearningPathStore} from '@/stores/learningPath';
 import {useUserStore} from '@/stores/user';
 
@@ -19,16 +19,22 @@ const props = defineProps<{
 const learningPathStore = useLearningPathStore();
 const userStore = useUserStore();
 
+
+const continueRoute = computed(() => {
+  return "/circle/" + learningPathStore.learningPath.nextCircle.slug + "/";
+})
+
 onMounted(async () => {
   log.info('LearningPathView mounted');
   await learningPathStore.loadLearningPath(props.learningPathSlug);
+  console.log(learningPathStore)
 });
 
 </script>
 
 <template>
   <div class="bg-gray-200" v-if="learningPathStore.learningPath">
-        <Teleport to="body">
+    <Teleport to="body">
       <LearningPathViewVertical
         :show="learningPathStore.page === 'OVERVIEW'"
         @closemodal="learningPathStore.page = 'INDEX'"
@@ -45,7 +51,8 @@ onMounted(async () => {
               Listen Ansicht anzeigen
             </button>
           </div>
-         <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization" v-bind:vertical="false"></LearningPathDiagram>
+          <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization"
+                               v-bind:vertical="false"></LearningPathDiagram>
         </div>
 
         <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
@@ -53,19 +60,18 @@ onMounted(async () => {
         <div
           class="bg-white m-12 p-8 flex flex-col lg:flex-row  divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
           <div class="p-8 flex-auto">
-            <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
+            <h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
             <p class="mt-4 text-xl">
-              Du hast bereits drei circles bearbeitet, mach weiter so!
+
             </p>
           </div>
-          <div class="p-8 flex-1">
+          <div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextCircle" translate>
             Nächster Schirtt
-            <h3>Analyse: Anwenden</h3>
+            <h3>{{ learningPathStore.learningPath.nextCircle.title }}: {{ learningPathStore.learningPath.nextLearningSequence.title }}</h3>
-            <router-link class="mt-4 btn-blue" to="/circle/analyse">
+            <router-link class="mt-4 btn-blue" v-bind:to="this.continueRoute" translate>
               Los geht's
             </router-link>
           </div>
-
         </div>
         <div class="topic"></div>