Add Weiter gehts to learning path overview

client/src/stores/learningPath.ts

@@ -1,24 +1,75 @@
 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'), 'completed')[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
+
+  // delete currentCircle.children
+  // delete currentLearningUnit.children
+  // delete currentLearningSequence.children
+
+  return [currentCircle, currentLearningSequence, currentLearningUnit]
+}
+
+function getNextLearningContent(lastCopleted, learningPathData) {
+
+  let currentCircle, currentLearningSequence, currentLearningUnit
+
+  currentLearningUnit = getFirstLearningContent(lastCopleted, learningPathData)
+
+  if (lastCopleted) {
+    _.forEach(circles, circle => {
+      currentCircle = circle
+
+      debugger
+      //
+      // _.forEach(circle.children, learningSequence => {
+      //   currentLearningSequence = learningSequence
+      //   _.forEach(learningSequence.children, learningUnit => {
+      //       currentLearningUnit = learningUnit
+      //       console.log(lastCopleted.page_key, learningUnit.translation_key)
+      //       if (lastCopleted.page_key === learningUnit.translation_key)
+      //         return false
+      //     }
+      //   )
+      // });
+    })
+
+  }
+  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 +81,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,9 +19,20 @@ const props = defineProps<{
 const learningPathStore = useLearningPathStore();
 const userStore = useUserStore();
 
+
+
+// const continueRoute = computed(() => {
+//   if (learningPathStore.learningPath) {
+//     return"/cirlce/"+learningPathStore.learningPath.nextCircle.slug;
+//   }
+//
+//   return false;
+// })
+
 onMounted(async () => {
   log.info('LearningPathView mounted');
   await learningPathStore.loadLearningPath(props.learningPathSlug);
+  console.log(learningPathStore)
 });
 
 </script>
@@ -58,14 +69,14 @@ onMounted(async () => {
               Du hast bereits drei circles bearbeitet, mach weiter so!
             </p>
           </div>
-          <div class="p-8 flex-1">
+          <div class="p-8 flex-1" v-if="learningPathStore.learningPath.nextCircle">
             Nächster Schirtt
-            <h3>Analyse: Anwenden</h3>
-            <router-link class="mt-4 btn-blue" to="/circle/analyse">
-              Los geht's
-            </router-link>
-          </div>
 
+             <h3>{{learningPathStore.learningPath.nextCircle.title}}: {{learningPathStore.learningPath.nextLearningSequence.title}}</h3>
+<!--            <router-link class="mt-4 btn-blue" v-bind:to="this.continueRoute">-->
+              Los geht's
+<!--            </router-link>-->
+          </div>
         </div>
         <div class="topic"></div>