WIP: Use real criteria data structure

client/src/components/competences/CompetenceDetail.vue

@@ -4,14 +4,17 @@ import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRo
 import {ref} from "vue";
 
 const props = defineProps<{
-  competence: object
+  competence: object,
+  userProgress: object
 }>()
 
 const isOpen = ref(false);
 
 const togglePerformanceCriteria = () => {
   isOpen.value = !isOpen.value
-}
+};
+
+const userStateForCriteria = (id: string) => props.userProgress[id] ? props.userProgress[id] : 'open'
 
 </script>
 
@@ -38,12 +41,12 @@ const togglePerformanceCriteria = () => {
       <li v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
           class="mb-4 pb-4 border-b border-gray-500">
         <LeistungskriteriumRow
+          :state="userStateForCriteria(`${performanceCriteria.id}`)"
           :showState="true"
-          :state="performanceCriteria.state"
+          :unit-url="performanceCriteria.learning_unit.slug"
-          :unit-url="performanceCriteria.unitUrl"
+          :unit="performanceCriteria.pc_id"
-          :unit="performanceCriteria.unit"
+          :title="performanceCriteria.title"
-          :description="performanceCriteria.description"
+          :unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow>
-          :unit-id="performanceCriteria.unitId"></LeistungskriteriumRow>
       </li>
     </ul>
   </div>

client/src/components/competences/LeistungskriteriumRow.vue

@@ -3,16 +3,16 @@
 
 
 interface Props {
-  description: string
+  title: string
   unit: string
   unitUrl: string
   unitId: number
-  state: string  // maybe enum
+  state?: string  // maybe enum
-  showState: boolean
+  showState?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  description: '',
+  title: '',
   unit: '',
   unitUrl: '',
   unitId: -1,
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
       <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
     </div>
     <div class="pr-5 mr-10">
-      <h4 class="text-bold mb-2">{{description}}</h4>
+      <h4 class="text-bold mb-2">{{title}}</h4>
       <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
     </div>
     <span class="whitespace-nowrap">Sich nochmals einschätzen</span>

client/src/pages/CompetencePerfomanceCriteriaView.vue

@@ -0,0 +1,13 @@
+<template>
+$END$
+</template>
+
+<script>
+export default {
+name: "CompetencePerfomanceCriteriaView"
+}
+</script>
+
+<style scoped>
+
+</style>

client/src/pages/CompetencesDetailView.vue

@@ -9,113 +9,171 @@ const competences = [
     description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
     id: 1,
     criteria: [
-      {
+        {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "id": 341,
-        state: 'done',
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        unit: 'Fahrzeug',
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
-        url: 'https://www.iterativ.ch'
+            "type": "competence.PerformanceCriteria",
-      },
+            "translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569",
-      {
+            "pc_id": "B1.3 Fahrzeug",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "learning_unit": {
-        state: 'open',
+                "id": 123,
-        unit: 'Reisen',
+                "title": "Auto verkaufen",
-        url: 'https://www.iterativ.ch'
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-      },
+                "type": "learnpath.LearningUnit",
-      {
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            },
-        state: 'notDone',
+            "circle": "Analyse"
-        unit: 'Reisen',
+        },
-        url: 'https://www.iterativ.ch'
+        {
-      },
+            "id": 342,
-      {
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
-        state: 'open',
+            "type": "competence.PerformanceCriteria",
-        unit: 'Reisen',
+            "translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae",
-        url: 'https://www.iterativ.ch'
+            "pc_id": "B2.1 Fahrzeug",
-      },
+            "learning_unit": {
-      {
+                "id": 123,
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+                "title": "Auto verkaufen",
-        state: 'done',
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-        unit: 'Reisen',
+                "type": "learnpath.LearningUnit",
-        url: 'https://www.iterativ.ch'
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-      }
+            },
+            "circle": "Analyse"
+        },
+        {
+            "id": 343,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
+            "type": "competence.PerformanceCriteria",
+            "translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc",
+            "pc_id": "B2.2 Fahrzeug",
+            "learning_unit": {
+                "id": 123,
+                "title": "Auto verkaufen",
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+                "type": "learnpath.LearningUnit",
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+            },
+            "circle": "Analyse"
+        }
     ]
   },
   {
     description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
     id: 2,
     criteria: [
-      {
+        {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "id": 341,
-        state: 'done',
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        unit: 'Fahrzeug',
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
-        url: 'https://www.iterativ.ch'
+            "type": "competence.PerformanceCriteria",
-      },
+            "translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569",
-      {
+            "pc_id": "B1.3 Fahrzeug",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "learning_unit": {
-        state: 'open',
+                "id": 123,
-        unit: 'Reisen',
+                "title": "Auto verkaufen",
-        url: 'https://www.iterativ.ch'
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-      },
+                "type": "learnpath.LearningUnit",
-      {
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            },
-        state: 'notDone',
+            "circle": "Analyse"
-        unit: 'Reisen',
+        },
-        url: 'https://www.iterativ.ch'
+        {
-      },
+            "id": 342,
-      {
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
-        state: 'open',
+            "type": "competence.PerformanceCriteria",
-        unit: 'Reisen',
+            "translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae",
-        url: 'https://www.iterativ.ch'
+            "pc_id": "B2.1 Fahrzeug",
-      },
+            "learning_unit": {
-      {
+                "id": 123,
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+                "title": "Auto verkaufen",
-        state: 'done',
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-        unit: 'Reisen',
+                "type": "learnpath.LearningUnit",
-        url: 'https://www.iterativ.ch'
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-      }
+            },
+            "circle": "Analyse"
+        },
+        {
+            "id": 343,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
+            "type": "competence.PerformanceCriteria",
+            "translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc",
+            "pc_id": "B2.2 Fahrzeug",
+            "learning_unit": {
+                "id": 123,
+                "title": "Auto verkaufen",
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+                "type": "learnpath.LearningUnit",
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+            },
+            "circle": "Analyse"
+        }
     ]
   },
   {
     description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
     id: 3,
     criteria: [
-      {
+        {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "id": 341,
-        state: 'done',
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        unit: 'Fahrzeug',
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
-        url: 'https://www.iterativ.ch'
+            "type": "competence.PerformanceCriteria",
-      },
+            "translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569",
-      {
+            "pc_id": "B1.3 Fahrzeug",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "learning_unit": {
-        state: 'open',
+                "id": 123,
-        unit: 'Reisen',
+                "title": "Auto verkaufen",
-        url: 'https://www.iterativ.ch'
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-      },
+                "type": "learnpath.LearningUnit",
-      {
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            },
-        state: 'notDone',
+            "circle": "Analyse"
-        unit: 'Reisen',
+        },
-        url: 'https://www.iterativ.ch'
+        {
-      },
+            "id": 342,
-      {
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
-        state: 'open',
+            "type": "competence.PerformanceCriteria",
-        unit: 'Reisen',
+            "translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae",
-        url: 'https://www.iterativ.ch'
+            "pc_id": "B2.1 Fahrzeug",
-      },
+            "learning_unit": {
-      {
+                "id": 123,
-        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+                "title": "Auto verkaufen",
-        state: 'done',
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
-        unit: 'Reisen',
+                "type": "learnpath.LearningUnit",
-        url: 'https://www.iterativ.ch'
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
-      }
+            },
+            "circle": "Analyse"
+        },
+        {
+            "id": 343,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
+            "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
+            "type": "competence.PerformanceCriteria",
+            "translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc",
+            "pc_id": "B2.2 Fahrzeug",
+            "learning_unit": {
+                "id": 123,
+                "title": "Auto verkaufen",
+                "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+                "type": "learnpath.LearningUnit",
+                "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+            },
+            "circle": "Analyse"
+        }
     ]
   }
 ];
 
-const openCompetences = []
+const userProgress = {
+  341: 'open',
+  342: 'notDone',
+  343: 'done'
+}
 
 </script>
 
@@ -135,7 +193,9 @@ const openCompetences = []
     <ul>
       <li v-for="competence in competences" :key="competence.description"
            class="bg-white p-8 mb-8">
-        <CompetenceDetail :competence="competence"></CompetenceDetail>
+        <CompetenceDetail
+          :competence="competence"
+          :user-progress="userProgress"></CompetenceDetail>
       </li>
     </ul>
   </div>

client/src/pages/CompetencesMainView.vue

@@ -121,23 +121,53 @@ const summary = {
 
 const nokCriteria = [
   {
-    unitId: 1,
+      "id": 341,
-    unit: 'Fahrzeuge',
+      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-    unitUrl: 'https://www.iterativ.ch',
+      "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
-    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).'
+      "type": "competence.PerformanceCriteria",
+      "translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569",
+      "pc_id": "B1.3 Fahrzeug",
+      "learning_unit": {
+          "id": 123,
+          "title": "Auto verkaufen",
+          "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+      },
+      "circle": "Analyse"
   },
   {
-    unitId: 2,
+      "id": 342,
-    unit: 'Reisen',
+      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-    unitUrl: 'https://www.iterativ.ch',
+      "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
-    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.'
+      "type": "competence.PerformanceCriteria",
+      "translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae",
+      "pc_id": "B2.1 Fahrzeug",
+      "learning_unit": {
+          "id": 123,
+          "title": "Auto verkaufen",
+          "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+      },
+      "circle": "Analyse"
   },
   {
-    unitId: 3,
+      "id": 343,
-    unit: 'Einkommenssicherung',
+      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
-    unitUrl: 'https://www.iterativ.ch',
+      "slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
-    description: 'Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.'
+      "type": "competence.PerformanceCriteria",
-  },
+      "translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc",
+      "pc_id": "B2.2 Fahrzeug",
+      "learning_unit": {
+          "id": 123,
+          "title": "Auto verkaufen",
+          "slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
+          "type": "learnpath.LearningUnit",
+          "translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2"
+      },
+      "circle": "Analyse"
+  }
 ]
 
 </script>
@@ -215,10 +245,10 @@ const nokCriteria = [
           <li v-for="criteria in nokCriteria" :key="criteria.description"
               class="mb-4 pb-4 border-b border-gray-500">
             <LeistungskriteriumRow
-              :unit-url="criteria.unitUrl"
+              :unit-url="criteria.learning_unit.slug"
-              :unit="criteria.unit"
+              :unit="criteria.pc_id"
-              :description="criteria.description"
+              :title="criteria.title"
-              :unit-id="criteria.unitId"></LeistungskriteriumRow>
+              :unit-id="criteria.learning_unit.id"></LeistungskriteriumRow>
          </li>
        </ul>
        <router-link