update icon stuff

client/src/components/circle/CircleOverview.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
       class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
       @click="$emit('close')"
     >
-      <it-icon-close class="h-8 w-8"></it-icon-close>
+      <it-icon-close></it-icon-close>
     </div>
 
 

client/src/components/circle/LearningSequence.vue

@@ -8,10 +8,6 @@ const props = defineProps<{
   learningSequence: LearningSequence
 }>()
 
-const emit = defineEmits<{
-  (e: 'clickContent', value: LearningContent): void
-}>()
-
 const circleStore = useCircleStore();
 
 function toggleCompleted(learningContent: LearningContent) {
@@ -49,6 +45,7 @@ const someFinished = computed(() => {
     >
       <div
         v-for="learningUnit in learningSequence.learningUnits"
+        :key="learningUnit.id"
         class="py-3"
       >
         <div class="pb-3 flex gap-4" v-if="learningUnit.title">
@@ -58,6 +55,7 @@ const someFinished = computed(() => {
 
         <div
           v-for="learningContent in learningUnit.learningContents"
+          :key="learningContent.id"
           class="flex items-center gap-4 pb-3"
         >
           <ItCheckbox

client/src/services/circle.ts

@@ -1,7 +1,7 @@
 import type {CircleChild, LearningContent, LearningSequence, LearningUnit} from '@/types';
 
 
-function createEmptyLearningUnit(): LearningUnit {
+function createEmptyLearningUnit(parentLearningSequence: LearningSequence): LearningUnit {
   return {
     id: 0,
     title: '',
@@ -11,6 +11,7 @@ function createEmptyLearningUnit(): LearningUnit {
     questions: [],
     learningContents: [],
     minutes: 0,
+    parentLearningSequence: parentLearningSequence,
   };
 }
 
@@ -32,7 +33,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
       learningSequence = Object.assign(child, {learningUnits: []});
 
       // initialize empty learning unit if there will not come a learning unit next
-      learningUnit = createEmptyLearningUnit();
+      learningUnit = createEmptyLearningUnit(learningSequence);
     } else if (child.type === 'learnpath.LearningUnit') {
       if (learningSequence === null) {
         throw new Error('LearningUnit found before LearningSequence');
@@ -42,7 +43,10 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
         learningSequence.learningUnits.push(learningUnit);
       }
 
-      learningUnit = Object.assign(child, {learningContents: []});
+      learningUnit = Object.assign(child, {
+        learningContents: [],
+        parentLearningSequence: learningSequence,
+      });
     } else if (child.type === 'learnpath.LearningContent') {
       if (learningUnit === null) {
         throw new Error('LearningContent found before LearningUnit');

client/src/types.ts

@@ -68,6 +68,7 @@ export interface LearningUnit extends LearningWagtailPage {
   questions: [];
   learningContents: LearningContent[];
   minutes: number;
+  parentLearningSequence?: LearningSequence;
 }
 
 export interface LearningSequence extends LearningWagtailPage {
@@ -90,4 +91,6 @@ export interface Circle extends LearningWagtailPage {
   children: CircleChild[];
   description: string;
   learningSequences: LearningSequence[];
+  goals: CircleGoal[];
+  job_situations: CircleJobSituation[];
 }

client/src/views/StyelGuideView.vue

@@ -49,106 +49,106 @@ function colorBgClass(color: string, value: number) {
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div class="inline-flex flex-col">
         message
-        <it-icon-message class="w-8 h-8" />
+        <it-icon-message/>
       </div>
 
       <div class="inline-flex flex-col">
         arrow-up
-        <it-icon-arrow-up class="w-8 h-8" />
+        <it-icon-arrow-up/>
       </div>
 
       <div class="inline-flex flex-col">
         arrow-down
-        <it-icon-arrow-down class="w-8 h-8" />
+        <it-icon-arrow-down/>
       </div>
 
       <div class="inline-flex flex-col">
         arrow-left
-        <it-icon-arrow-left class="w-8 h-8" />
+        <it-icon-arrow-left/>
       </div>
 
       <div class="inline-flex flex-col">
         arrow-right
-        <it-icon-arrow-right class="w-8 h-8" />
+        <it-icon-arrow-right/>
       </div>
 
       <div class="inline-flex flex-col">
         close
-        <it-icon-close class="w-8 h-8" />
+        <it-icon-close/>
       </div>
 
       <div class="inline-flex flex-col">
         check
-        <it-icon-check class="w-8 h-8" />
+        <it-icon-check/>
       </div>
 
       <div class="inline-flex flex-col">
         info
-        <it-icon-info class="w-8 h-8" />
+        <it-icon-info/>
       </div>
 
       <div class="inline-flex flex-col">
         list
-        <it-icon-list class="w-8 h-8" />
+        <it-icon-list/>
       </div>
 
       <div class="inline-flex flex-col">
         menu
-        <it-icon-menu class="w-8 h-8" />
+        <it-icon-menu/>
       </div>
     </div>
 
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div class="inline-flex flex-col">
         ls-apply
-        <it-icon-ls-apply class="w-8 h-8" />
+        <it-icon-ls-apply/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-watch
-        <it-icon-ls-watch class="w-8 h-8" />
+        <it-icon-ls-watch/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-test
-        <it-icon-ls-test class="w-8 h-8" />
+        <it-icon-ls-test/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-practice
-        <it-icon-ls-practice class="w-8 h-8" />
+        <it-icon-ls-practice/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-network
-        <it-icon-ls-network class="w-8 h-8" />
+        <it-icon-ls-network/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-start
-        <it-icon-ls-start class="w-8 h-8" />
+        <it-icon-ls-start/>
       </div>
 
       <div class="inline-flex flex-col">
         ls-end
-        <it-icon-ls-end class="w-8 h-8" />
+        <it-icon-ls-end/>
       </div>
     </div>
 
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div class="inline-flex flex-col">
         smiley-happy
-        <it-icon-smiley-happy class="w-8 h-8" />
+        <it-icon-smiley-happy/>
       </div>
 
       <div class="inline-flex flex-col">
         smiley-thinking
-        <it-icon-smiley-thinking class="w-8 h-8" />
+        <it-icon-smiley-thinking/>
       </div>
 
       <div class="inline-flex flex-col">
         smiley-neutral
-        <it-icon-smiley-neutral class="w-8 h-8" />
+        <it-icon-smiley-neutral/>
       </div>
     </div>
 

server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py

@@ -106,7 +106,17 @@ Fachspezialisten bei.
     )
 
     LearningSequenceFactory(title='Beobachten', parent=circe_analyse, icon='it-icon-ls-watch')
-    LearningUnitFactory(title='Abischerung der Familie', parent=circe_analyse)
+    LearningUnitFactory(
+        title='Absicherung der Familie',
+        parent=circe_analyse,
+        questions=[{
+            "type": "question",
+            "value": "Ich bin in der Lage, mit geeigneten Fragestellungen die Deckung von Versicherungen zu erfassen."
+        }, {
+            "type": "question",
+            "value": "Ich weiss was meine Kunden wollen."
+        }]
+    )
     LearningContentFactory(
         title='Ermittlung des Kundenbedarfs',
         parent=circe_analyse,

server/vbv_lernwelt/static/icons/icon-ls-start.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M25.81,28.06H10.63c-3.35,0-6.08-2.73-6.08-6.08s2.73-6.08,6.08-6.08h9.84c2.53,0,4.58-2.06,4.58-4.58s-2.06-4.58-4.58-4.58H10.77c-.41,0-.75-.34-.75-.75,0-1.4-1.14-2.54-2.54-2.54s-2.54,1.14-2.54,2.54,1.14,2.54,2.54,2.54c.68,0,1.32-.26,1.8-.75l1.06,1.06c-.76,.76-1.78,1.19-2.86,1.19-2.23,0-4.04-1.81-4.04-4.04S5.25,1.94,7.48,1.94c1.97,0,3.62,1.42,3.97,3.29h9.03c3.35,0,6.08,2.73,6.08,6.08s-2.73,6.08-6.08,6.08H10.63c-2.53,0-4.58,2.06-4.58,4.58s2.06,4.58,4.58,4.58h15.18v1.5Z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M25.81,28.06H10.63c-3.35,0-6.08-2.73-6.08-6.08s2.73-6.08,6.08-6.08h9.84c2.53,0,4.58-2.06,4.58-4.58s-2.06-4.58-4.58-4.58H10.77c-.41,0-.75-.34-.75-.75,0-1.4-1.14-2.54-2.54-2.54s-2.54,1.14-2.54,2.54,1.14,2.54,2.54,2.54c.68,0,1.32-.26,1.8-.75l1.06,1.06c-.76,.76-1.78,1.19-2.86,1.19-2.23,0-4.04-1.81-4.04-4.04S5.25,1.94,7.48,1.94c1.97,0,3.62,1.42,3.97,3.29h9.03c3.35,0,6.08,2.73,6.08,6.08s-2.73,6.08-6.08,6.08H10.63c-2.53,0-4.58,2.06-4.58,4.58s2.06,4.58,4.58,4.58h15.18v1.5Z"/></svg>

server/vbv_lernwelt/templates/learnpath/icons.html

@@ -4,7 +4,7 @@ example:
 
 class icon_arrow_up extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = `<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    this.innerHTML = `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M14.9383 10L23.7001 18.9614C23.916 19.2016 23.9084 19.5731 23.6828 19.8038C23.4573 20.0344 23.0941 20.0422 22.8593 19.8214L14.9383 11.72L7.01742 19.8214C6.86685 19.9754 6.6474 20.0356 6.44173 19.9792C6.23605 19.9228 6.0754 19.7585 6.02029 19.5482C5.96518 19.3378 6.02398 19.1134 6.17455 18.9594L14.9383 10Z"
     />
 </svg>
@@ -20,7 +20,10 @@ customElements.define('it-icon-arrow-up', icon_arrow_up);
 
 class {{ svg_icon.classname }} extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = `{{ svg_icon.content|safe }}`;
+    this.classList.add('it-icon');
+    this.innerHTML = `
+      {{ svg_icon.content|safe }}
+  `;
   }
 }
 

tailwind/input.css

@@ -11,6 +11,9 @@ svg {
 }
 
 @layer base {
+  .it-icon {
+    @apply w-8 h-8 inline-block
+  }
 
   h1 {
     @apply text-4xl md:text-5xl xl:text-7xl font-bold