Added learning path api and view

client/src/router/index.ts

@@ -25,6 +25,11 @@ const router = createRouter({
       meta: {
         public: true
       }
+    },
+        {
+      path: '/learningpath/:learningPathSlug',
+      component: () => import('../views/LearningPathView.vue'),
+      props: true
     },
     {
       path: '/circle/:circleSlug',

client/src/views/HomeView.vue

@@ -10,6 +10,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
     <div class="mt-8 flex flex-row justify-start gap-4">
       <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
       <a class="link text-xl" href="/login/">Login</a>
+            <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
       <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
     </div>
   </main>

client/src/views/LearningPathView.vue

@@ -0,0 +1,84 @@
+<script>
+import axios from 'axios';
+import * as log from 'loglevel';
+
+import MainNavigationBar from '../components/MainNavigationBar.vue';
+import LearningSequence from '../components/circle/LearningSequence.vue';
+
+export default {
+  components: {LearningSequence, MainNavigationBar},
+  props: ['learningPathSlug',],
+  data() {
+    return {
+      count: 0,
+      learningPathData: {},
+      circles: [],
+      learningSequences: [],
+    }
+  },
+  mounted() {
+    log.debug('LearningPath mounted', this.learningPathSlug);
+    axios({
+      method: 'get',
+      url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
+    }).then((response) => {
+      log.debug(response.data);
+      this.learningPathData = response.data;
+
+      // extract cirlces
+
+      this.learningPathData.children.forEach((child) => {
+        if (child.type === 'learnpath.Circle') {
+          this.circles.push(child);
+        }
+      });
+    });
+
+  }
+}
+</script>
+
+<template>
+  <div class="bg-gray-100 h-screen">
+
+    <MainNavigationBar/>
+
+    <div class="learningpath flex flex-col">
+
+      <div class="flex flex-row  justify-start bg-white">
+        <div class="m-8 bg-green-500" v-for="circle in circles">
+          <img src="@/assets/circle-analyse.svg" alt="" height="200" width="200">
+          <div class="text-center text-xl font-bold mt-4">{{ circle.title }}</div>
+
+        </div>
+
+      </div>
+      <div class="flex flex-col h-max p-6">
+        <div class="text-blue-dark font-bold text-7xl m-12">
+          {{ learningPathData.title }}
+        </div>
+
+        <div class="bg-white m-12  p-8 flex flex-row  justify-start">
+          <div class="p-8">
+
+            <h2>Willkommmen zurück, Jan</h2>
+            Du hast bereits drei circles bearbeitet, mach weiter so!
+          </div>
+          <div class="p-8  border-l ">Nächster Schirtt
+            <h3>Analyse: Anwenden</h3>
+            <div class="btn-blue mt-4">
+              Los geht's
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

server/vbv_lernwelt/learnpath/models.py

@@ -95,6 +95,11 @@ class Circle(Page):
         APIField('description'),
     ]
 
+
+    @classmethod
+    def get_serializer_class(cls):
+        return get_it_serializer_class(cls, field_names=['id', 'title', 'slug', 'type', 'translation_key'])
+
     def full_clean(self, *args, **kwargs):
         # self.slug = find_available_slug(Circle, slugify(self.title, allow_unicode=True))
         super(Circle, self).full_clean(*args, **kwargs)

server/vbv_lernwelt/learnpath/serializers.py

@@ -1,6 +1,6 @@
 from rest_framework import serializers
 
-from vbv_lernwelt.learnpath.models import Circle
+from vbv_lernwelt.learnpath.models import Circle, LearningPath
 from vbv_lernwelt.learnpath.serializer_helpers import get_it_serializer_class
 
 
@@ -18,3 +18,19 @@ class CircleSerializer(get_it_serializer_class(Circle, [])):
     class Meta:
         model = Circle
         fields = ['id', 'title', 'slug', 'children', 'type']
+
+
+class LearningPathSerializer(get_it_serializer_class(LearningPath, [])):
+    children = serializers.SerializerMethodField()
+
+    meta_fields = []
+
+    def get_children(self, obj):
+        return [c.specific.get_serializer_class()(c.specific).data for c in obj.get_children()]
+
+    def get_meta_label(self, obj):
+        return obj._meta.label
+
+    class Meta:
+        model = Circle
+        fields = ['id', 'title', 'slug', 'children', 'type']

server/vbv_lernwelt/learnpath/tests/bla.json

@@ -0,0 +1,9 @@
+# -*- coding: utf-8 -*-
+#
+# Iterativ GmbH
+# http://www.iterativ.ch/
+#
+# Copyright (c) 2015 Iterativ GmbH. All rights reserved.
+#
+# Created on 2022-06-07
+# @author: lorenz.padberg@iterativ.ch

server/vbv_lernwelt/learnpath/urls.py

@@ -3,8 +3,9 @@ from django.urls import path
 from rest_framework.routers import DefaultRouter
 
 from . import views
-from .views import circle_view
+from .views import circle_view, learningpath_view
 
 urlpatterns = [
     path(r"api/circle/<slug:slug>/", circle_view, name="circle_view"),
+    path(r"api/learningpath/<slug:slug>/", learningpath_view, name="learningpath_view"),
 ]

server/vbv_lernwelt/learnpath/views.py

@@ -2,8 +2,8 @@
 from rest_framework.decorators import api_view
 from rest_framework.response import Response
 
-from vbv_lernwelt.learnpath.models import Circle
+from vbv_lernwelt.learnpath.models import Circle, LearningPath
-from vbv_lernwelt.learnpath.serializers import CircleSerializer
+from vbv_lernwelt.learnpath.serializers import CircleSerializer, LearningPathSerializer
 
 
 @api_view(['GET'])
@@ -11,3 +11,10 @@ def circle_view(request, slug):
     circle = Circle.objects.get(slug=slug)
     serializer = CircleSerializer(circle)
     return Response(serializer.data)
+
+
+@api_view(['GET'])
+def learningpath_view(request, slug):
+    learning_path = LearningPath.objects.get(slug=slug)
+    serializer = LearningPathSerializer(learning_path)
+    return Response(serializer.data)