From f9f213231b1e3358041e350ee99490f56e55a325 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 27 Sep 2022 13:53:46 +0200
Subject: [PATCH 01/18] WIP: Add competence page and progress

---
 .../competences/CompetenceProgress.vue        |  28 ++++
 client/src/pages/CompetencesMainView.vue      | 142 ++++++++++++++++++
 client/src/pages/ComptencesView.vue           |  26 ++++
 client/src/router/index.ts                    |  11 ++
 4 files changed, 207 insertions(+)
 create mode 100644 client/src/components/competences/CompetenceProgress.vue
 create mode 100644 client/src/pages/CompetencesMainView.vue
 create mode 100644 client/src/pages/ComptencesView.vue

diff --git a/client/src/components/competences/CompetenceProgress.vue b/client/src/components/competences/CompetenceProgress.vue
new file mode 100644
index 00000000..4fc51757
--- /dev/null
+++ b/client/src/components/competences/CompetenceProgress.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  total: number
+  done: number
+  open: number
+}>()
+
+const done = 100 * props.done / props.total
+const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done
+console.log(done, notDone)
+
+</script>
+
+<template>
+  <span class="relative w-full h-2 bg-gray-300">
+    <span v-if="notDone !== done"
+          class="absolute bg-orange-500 h-full"
+          :style="{width: `${notDone}%`}"
+    ></span>
+    <span v-if="done > 0"
+          class="absolute bg-green-500 h-full"
+          :style="{width: `${done}%`}"
+    ></span>
+  </span>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
new file mode 100644
index 00000000..039c9aa1
--- /dev/null
+++ b/client/src/pages/CompetencesMainView.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import { ref, watch } from 'vue'
+import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
+
+log.debug('CompetencesMainView created')
+
+const lastCompetences = [
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  }
+]
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Kompetenzprofil</h1>
+      <!--      <ItDropdownSelect-->
+      <!--        v-model="dropdownSelected"-->
+      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <div class="bg-white p-8">
+      <div>
+        <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
+        <ul class="divide-y">
+          <li v-for="competence in lastCompetences" :key="competence.description"
+              class="py-4 flex flex-col lg:flex-row items-center">
+            <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
+            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/pages/ComptencesView.vue b/client/src/pages/ComptencesView.vue
new file mode 100644
index 00000000..dcb0fcb4
--- /dev/null
+++ b/client/src/pages/ComptencesView.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import { onMounted } from 'vue'
+
+log.debug('CometencesView created')
+
+const props = defineProps<{
+  competencesPageSlug: string
+}>()
+
+
+onMounted(async () => {
+  log.debug('CompetencesView mounted', props.competencesPageSlug)
+
+})
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <main class="px-8 py-8">
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 24285c6e..a76d36e0 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -52,6 +52,17 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: '/competences/:competencesPageSlug',
+      props: true,
+      component: () => import('@/views/ComptencesView.vue'),
+      children: [
+        {
+          path: 'overview',
+          component: () => import('@/views/CompetencesMainView.vue'),
+        },
+      ],
+    },
     {
       path: "/learn/:learningPathSlug",
       component: () => import("../pages/learningPath/LearningPathPage.vue"),

From 7d7a5c198f5d5de70f9246d034d9d31fa8897c23 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 27 Sep 2022 15:21:20 +0200
Subject: [PATCH 02/18] WIP: Add self assesment

---
 .../competences/CompetenceProgress.vue        |  5 +-
 client/src/pages/CompetencesMainView.vue      | 53 +++++++++++++++++--
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/client/src/components/competences/CompetenceProgress.vue b/client/src/components/competences/CompetenceProgress.vue
index 4fc51757..71d41629 100644
--- a/client/src/components/competences/CompetenceProgress.vue
+++ b/client/src/components/competences/CompetenceProgress.vue
@@ -6,9 +6,8 @@ const props = defineProps<{
   open: number
 }>()
 
-const done = 100 * props.done / props.total
-const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done
-console.log(done, notDone)
+const done = 100 * props.done / props.total;
+const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
 
 </script>
 
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 039c9aa1..0e242b06 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -111,7 +111,13 @@ const lastCompetences = [
       }
     ]
   }
-]
+];
+
+const summary = {
+  ok: 325,
+  nok: 32,
+  open: 28
+};
 
 </script>
 
@@ -123,7 +129,7 @@ const lastCompetences = [
       <!--        v-model="dropdownSelected"-->
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
-    <div class="bg-white p-8">
+    <div class="bg-white p-8 mb-8">
       <div>
         <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
         <ul class="divide-y">
@@ -133,7 +139,48 @@ const lastCompetences = [
             <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
           </li>
         </ul>
-
+         <router-link
+            to="/mediacenter/handlungsfeldlist"
+            class="flex items-center"
+          >
+            <span>Alle anschauen</span>
+            <it-icon-arrow-right></it-icon-arrow-right>
+          </router-link>
+      </div>
+    </div>
+    <div class="bg-white p-8">
+      <div>
+        <h3 class="pb-4">Einschätzungen</h3>
+         <ul class="flex flex-col lg:flex-row items-center mb-6">
+           <li class="inline-block pr-12 mr-12 border-r">
+             <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
+             <div class="flex flex-row items-center">
+               <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
+               <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
+             </div>
+           </li>
+           <li class="inline-block pr-12 mr-12 border-r">
+             <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
+             <div class="flex flex-row items-center">
+               <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
+               <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
+             </div>
+           </li>
+             <li>
+             <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
+             <div class="flex flex-row items-center border-r">
+               <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
+               <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
+             </div>
+           </li>
+         </ul>
+         <router-link
+            to="/mediacenter/handlungsfeldlist"
+            class="flex items-center"
+          >
+            <span>Alle anschauen</span>
+            <it-icon-arrow-right></it-icon-arrow-right>
+          </router-link>
       </div>
     </div>
   </div>

From c96fa96a240b62609b881909098f544c46e216c4 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 08:26:56 +0200
Subject: [PATCH 03/18] WIP: Add LK row

---
 .../competences/LeistungskriteriumRow.vue     |  40 ++++++
 client/src/pages/CompetencesMainView.vue      | 119 ++++++++++++------
 2 files changed, 123 insertions(+), 36 deletions(-)
 create mode 100644 client/src/components/competences/LeistungskriteriumRow.vue

diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
new file mode 100644
index 00000000..811cdf67
--- /dev/null
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+
+
+
+interface Props {
+  description: string
+  unit: string
+  unitUrl: string
+  unitId: number
+  state: string  // maybe enum
+  showState: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  unit: '',
+  unitUrl: '',
+  unitId: -1,
+  state: 'open',
+  showState: false
+})
+
+</script>
+
+<template>
+  <div class="flex flex-row items-center justify-between">
+    <div v-if="showState">
+      <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
+      <it-icon-smiley-thinking v-if="state === 'notDone'"></it-icon-smiley-thinking>
+      <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>
+      <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
+    </div>
+    <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 0e242b06..ca97e9eb 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -2,6 +2,7 @@
 import * as log from 'loglevel'
 import { ref, watch } from 'vue'
 import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
+import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
 
 log.debug('CompetencesMainView created')
 
@@ -119,6 +120,27 @@ const summary = {
   open: 28
 };
 
+const nokCriteria = [
+  {
+    unitId: 1,
+    unit: 'Fahrzeuge',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).'
+  },
+  {
+    unitId: 2,
+    unit: 'Reisen',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.'
+  },
+  {
+    unitId: 3,
+    unit: 'Einkommenssicherung',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.'
+  },
+]
+
 </script>
 
 <template>
@@ -131,12 +153,16 @@ const summary = {
     </div>
     <div class="bg-white p-8 mb-8">
       <div>
-        <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
-        <ul class="divide-y">
+        <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
+        <ul>
           <li v-for="competence in lastCompetences" :key="competence.description"
-              class="py-4 flex flex-col lg:flex-row items-center">
+              class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
             <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
-            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+            <ComptenceProgress
+              :total="7"
+              :done="3"
+              :open="2"
+            ></ComptenceProgress>
           </li>
         </ul>
          <router-link
@@ -148,40 +174,61 @@ const summary = {
           </router-link>
       </div>
     </div>
+    <div class="bg-white p-8 mb-8">
+      <h3 class="mb-4">Einschätzungen</h3>
+       <ul class="flex flex-col lg:flex-row items-center mb-6">
+         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
+           <div class="flex flex-row items-center">
+             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
+           </div>
+         </li>
+         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
+           <div class="flex flex-row items-center">
+             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
+           </div>
+         </li>
+           <li>
+           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
+           <div class="flex flex-row items-center border-r">
+             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
+           </div>
+         </li>
+       </ul>
+       <router-link
+          to="/mediacenter/handlungsfeldlist"
+          class="flex items-center"
+        >
+          <span>Alle anschauen</span>
+          <it-icon-arrow-right></it-icon-arrow-right>
+        </router-link>
+    </div>
     <div class="bg-white p-8">
-      <div>
-        <h3 class="pb-4">Einschätzungen</h3>
-         <ul class="flex flex-col lg:flex-row items-center mb-6">
-           <li class="inline-block pr-12 mr-12 border-r">
-             <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
-             <div class="flex flex-row items-center">
-               <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
-             </div>
-           </li>
-           <li class="inline-block pr-12 mr-12 border-r">
-             <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
-             <div class="flex flex-row items-center">
-               <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
-             </div>
-           </li>
-             <li>
-             <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
-             <div class="flex flex-row items-center border-r">
-               <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
-             </div>
-           </li>
-         </ul>
-         <router-link
-            to="/mediacenter/handlungsfeldlist"
-            class="flex items-center"
-          >
-            <span>Alle anschauen</span>
-            <it-icon-arrow-right></it-icon-arrow-right>
-          </router-link>
+      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+        <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
+        <h3 class="pb-4">«Das muss ich nochmals anschauen»</h3>
       </div>
+       <ul class="mb-6">
+          <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="criteria.unit"
+              :description="criteria.description"
+              :unit-id="criteria.unitId"></LeistungskriteriumRow>
+         </li>
+       </ul>
+       <router-link
+          to="/mediacenter/handlungsfeldlist"
+          class="flex items-center"
+        >
+          <span>Alle anschauen</span>
+          <it-icon-arrow-right></it-icon-arrow-right>
+        </router-link>
     </div>
   </div>
 </template>

From 9756902ce2710c0cbd94bb50d8993badb16c2ec8 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 11:45:58 +0200
Subject: [PATCH 04/18] WIP: Add competence detail view

---
 .../competences/CompetenceDetail.vue          |  49 ++++++
 .../competences/CompetenceProgress.vue        |   2 +-
 .../competences/LeistungskriteriumRow.vue     |   4 +-
 client/src/pages/CompetencesDetailView.vue    | 144 ++++++++++++++++++
 client/src/pages/CompetencesMainView.vue      |   1 -
 client/src/router/index.ts                    |   4 +
 6 files changed, 200 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/competences/CompetenceDetail.vue
 create mode 100644 client/src/pages/CompetencesDetailView.vue

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
new file mode 100644
index 00000000..4ee9f1c8
--- /dev/null
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
+import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
+import {ref} from "vue";
+
+const props = defineProps<{
+  competence: object
+}>()
+
+const isOpen = ref(false);
+
+const togglePerformanceCriteria = () => {
+  isOpen.value = !isOpen.value
+}
+
+</script>
+
+<template>
+  <div>
+    <div :class="{'pb-8 border-b border-gray-500 mb-4': isOpen}"
+         class="-mx-8 px-8">
+      <div class="mb-4 flex flex-row justify-between items-center">
+        <h2 class="text-large">{{competence.description}}</h2>
+        <button><it-icon-arrow-down
+          @click="togglePerformanceCriteria()"
+          class="h-10 w-10"
+          aria-hidden="true"/></button>
+      </div>
+      <ComptenceProgress
+      :total="7"
+      :done="3"
+      :open="2"
+      ></ComptenceProgress>
+    </div>
+    <ul v-if="isOpen">
+      <li v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
+          class="mb-4 pb-4 border-b border-gray-500">
+        <LeistungskriteriumRow
+          :showState="true"
+          :state="performanceCriteria.state"
+          :unit-url="performanceCriteria.unitUrl"
+          :unit="performanceCriteria.unit"
+          :description="performanceCriteria.description"
+          :unit-id="performanceCriteria.unitId"></LeistungskriteriumRow>
+      </li>
+    </ul>
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/client/src/components/competences/CompetenceProgress.vue b/client/src/components/competences/CompetenceProgress.vue
index 71d41629..155acdd1 100644
--- a/client/src/components/competences/CompetenceProgress.vue
+++ b/client/src/components/competences/CompetenceProgress.vue
@@ -12,7 +12,7 @@ const notDone = 100 * ((props.total - props.open - props.done) / props.total) +
 </script>
 
 <template>
-  <span class="relative w-full h-2 bg-gray-300">
+  <span class="relative w-full h-2 bg-gray-300 inline-block">
     <span v-if="notDone !== done"
           class="absolute bg-orange-500 h-full"
           :style="{width: `${notDone}%`}"
diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
index 811cdf67..6ac82604 100644
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -24,9 +24,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="flex flex-row items-center justify-between">
-    <div v-if="showState">
+    <div v-if="showState" class="h-8 w-8 mr-4">
       <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
-      <it-icon-smiley-thinking v-if="state === 'notDone'"></it-icon-smiley-thinking>
+      <it-icon-smiley-thinking v-else-if="state === 'notDone'"></it-icon-smiley-thinking>
       <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
     </div>
     <div class="pr-5 mr-10">
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/CompetencesDetailView.vue
new file mode 100644
index 00000000..86c28feb
--- /dev/null
+++ b/client/src/pages/CompetencesDetailView.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import CompetenceDetail from '@/components/competences/CompetenceDetail.vue'
+
+log.debug('CompetencesMainView created')
+
+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.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    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.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    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.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        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: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  }
+];
+
+const openCompetences = []
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+     <nav>
+        <a
+          class="block mb-8 cursor-pointer flex items-center"
+          @click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a>
+      </nav>
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Kompetenzen</h1>
+      <!--      <ItDropdownSelect-->
+      <!--        v-model="dropdownSelected"-->
+      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <ul>
+      <li v-for="competence in competences" :key="competence.description"
+           class="bg-white p-8 mb-8">
+        <CompetenceDetail :competence="competence"></CompetenceDetail>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index ca97e9eb..9d54ffde 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import * as log from 'loglevel'
-import { ref, watch } from 'vue'
 import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
 import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
 
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index a76d36e0..bad25c02 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -61,6 +61,10 @@ const router = createRouter({
           path: 'overview',
           component: () => import('@/views/CompetencesMainView.vue'),
         },
+        {
+          path: 'detail',
+          component: () => import('@/views/CompetencesDetailView.vue'),
+        },
       ],
     },
     {

From b78cf5ffd09d8bfc2076aab86c50e143a5a115c6 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 12:48:23 +0200
Subject: [PATCH 05/18] WIP: Add arrow animation

---
 client/src/components/competences/CompetenceDetail.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 4ee9f1c8..04772ad6 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -21,10 +21,12 @@ const togglePerformanceCriteria = () => {
          class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
         <h2 class="text-large">{{competence.description}}</h2>
-        <button><it-icon-arrow-down
-          @click="togglePerformanceCriteria()"
-          class="h-10 w-10"
-          aria-hidden="true"/></button>
+        <button class="transition-transform"
+            :class="{'rotate-180': isOpen}">
+          <it-icon-arrow-down
+            @click="togglePerformanceCriteria()"
+            class="h-10 w-10"
+            aria-hidden="true"/></button>
       </div>
       <ComptenceProgress
       :total="7"

From 31331f9d169383d5d9623a950836ecd98fc6678a Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 13:29:05 +0200
Subject: [PATCH 06/18] WIP: Use real criteria data structure

---
 .../competences/CompetenceDetail.vue          |  17 +-
 .../competences/LeistungskriteriumRow.vue     |  10 +-
 .../CompetencePerfomanceCriteriaView.vue      |  13 +
 client/src/pages/CompetencesDetailView.vue    | 244 +++++++++++-------
 client/src/pages/CompetencesMainView.vue      |  64 +++--
 5 files changed, 227 insertions(+), 121 deletions(-)
 create mode 100644 client/src/pages/CompetencePerfomanceCriteriaView.vue

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 04772ad6..1ee4701d 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/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.unitUrl"
-          :unit="performanceCriteria.unit"
-          :description="performanceCriteria.description"
-          :unit-id="performanceCriteria.unitId"></LeistungskriteriumRow>
+          :unit-url="performanceCriteria.learning_unit.slug"
+          :unit="performanceCriteria.pc_id"
+          :title="performanceCriteria.title"
+          :unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow>
       </li>
     </ul>
   </div>
diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
index 6ac82604..3ee3b366 100644
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ b/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
-  showState: boolean
+  state?: string  // maybe enum
+  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>
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
new file mode 100644
index 00000000..dffdf362
--- /dev/null
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -0,0 +1,13 @@
+<template>
+$END$
+</template>
+
+<script>
+export default {
+name: "CompetencePerfomanceCriteriaView"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/CompetencesDetailView.vue
index 86c28feb..59bcbb54 100644
--- a/client/src/pages/CompetencesDetailView.vue
+++ b/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.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
+        {
+            "id": 341,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "id": 342,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "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.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
+        {
+            "id": 341,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "id": 342,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "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.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      },
-      {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
+        {
+            "id": 341,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "id": 342,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "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>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 9d54ffde..ee7eb2aa 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -121,23 +121,53 @@ const summary = {
 
 const nokCriteria = [
   {
-    unitId: 1,
-    unit: 'Fahrzeuge',
-    unitUrl: 'https://www.iterativ.ch',
-    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).'
+      "id": 341,
+      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+      "slug": "kompetenzprofil-crit-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,
-    unit: 'Reisen',
-    unitUrl: 'https://www.iterativ.ch',
-    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.'
+      "id": 342,
+      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+      "slug": "kompetenzprofil-crit-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,
-    unit: 'Einkommenssicherung',
-    unitUrl: 'https://www.iterativ.ch',
-    description: 'Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.'
-  },
+      "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"
+  }
 ]
 
 </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="criteria.unit"
-              :description="criteria.description"
-              :unit-id="criteria.unitId"></LeistungskriteriumRow>
+              :unit-url="criteria.learning_unit.slug"
+              :unit="criteria.pc_id"
+              :title="criteria.title"
+              :unit-id="criteria.learning_unit.id"></LeistungskriteriumRow>
          </li>
        </ul>
        <router-link

From 9fe5c689a373e5fa79c81277405633e77b65b868 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 14:15:13 +0200
Subject: [PATCH 07/18] WIP: Add criteria page

---
 .../competences/CompetenceDetail.vue          |  10 +-
 .../CompetencePerfomanceCriteriaView.vue      | 147 +++++++++++++++++-
 client/src/pages/CompetencesDetailView.vue    |   2 +-
 client/src/pages/CompetencesMainView.vue      |  10 +-
 client/src/router/index.ts                    |   4 +
 5 files changed, 156 insertions(+), 17 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 1ee4701d..741abe5c 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -24,8 +24,9 @@ const userStateForCriteria = (id: string) => props.userProgress[id] ? props.user
          class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
         <h2 class="text-large">{{competence.description}}</h2>
-        <button class="transition-transform"
-            :class="{'rotate-180': isOpen}">
+        <button
+          class="transition-transform"
+          :class="{'rotate-180': isOpen}">
           <it-icon-arrow-down
             @click="togglePerformanceCriteria()"
             class="h-10 w-10"
@@ -38,8 +39,9 @@ const userStateForCriteria = (id: string) => props.userProgress[id] ? props.user
       ></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
-      <li v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
-          class="mb-4 pb-4 border-b border-gray-500">
+      <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"
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index dffdf362..cf0200a2 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -1,13 +1,144 @@
-<template>
-$END$
-</template>
+<script setup lang="ts">
+import * as log from 'loglevel'
+import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
+import {computed, Ref, ref} from "vue";
 
-<script>
-export default {
-name: "CompetencePerfomanceCriteriaView"
+log.debug('CompetencesMainView created')
+
+enum UserCriteriaState {
+  Open = 'open',
+  Done = 'done',
+  Nok = 'notDone'
 }
+
+const data = {
+    "id": 340,
+    "title": "Kompetenzprofil",
+    "slug": "versicherungsvermittlerin-competence",
+    "type": "competence.CompetenceProfilePage",
+    "translation_key": "a3adb9ac-606d-42fd-b115-842af3706926",
+    "course": {
+        "id": -1,
+        "title": "Versicherungsvermittler/in",
+        "category_name": "Handlungsfeld"
+    },
+    "children": [
+        {
+            "id": 341,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "id": 342,
+            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+            "slug": "kompetenzprofil-crit-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"
+        },
+        {
+            "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 userProgress = {
+  341: 'open',
+  342: 'notDone',
+  343: 'done'
+}
+
+const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok)
+
+const shownCriteria = computed(() => {
+  return data.children.filter(criteria => userProgress[`${criteria.id}`] === activeState.value)
+})
+
 </script>
 
-<style scoped>
+<template>
+  <div class="mx-auto max-w-5xl">
+     <nav>
+        <a
+          class="block mb-8 cursor-pointer flex items-center"
+          @click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a>
+      </nav>
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Einschätzungen</h1>
+      <!--      <ItDropdownSelect-->
+      <!--        v-model="dropdownSelected"-->
+      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <div class="bg-white p-8">
+      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+        <button
+          @click="activeState = UserCriteriaState.Nok"
+          :class="{'bg-gray-200': activeState === UserCriteriaState.Nok}"
+          class="flex flex-row items-center py-4 px-2 mr-6">
+          <span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span>
+          <span><it-icon-smiley-thinking></it-icon-smiley-thinking></span>
+        </button>
+        <button
+          @click="activeState = UserCriteriaState.Done"
+          :class="{'bg-gray-200': activeState === UserCriteriaState.Done}"
+          class="flex flex-row items-center py-4 px-2 mr-6">
+          <span class="inline-block mr-2">«Ja, ich kann das»</span>
+          <span><it-icon-smiley-happy></it-icon-smiley-happy></span>
+        </button>
+        <button
+          @click="activeState = UserCriteriaState.Open"
+          :class="{'bg-gray-200': activeState === UserCriteriaState.Open}"
+          class="flex flex-row items-center py-4 px-2">
+          <span class="inline-block mr-2">Nicht eingeschätzt</span>
+          <span><it-icon-smiley-neutral></it-icon-smiley-neutral></span>
+        </button>
+      </div>
+       <ul class="mb-6">
+          <li
+            v-for="criteria in shownCriteria"
+            :key="criteria.title"
+            class="mb-4 pb-4 border-b border-gray-500">
+            <LeistungskriteriumRow
+              :unit-url="criteria.learning_unit.slug"
+              :unit="criteria.pc_id"
+              :title="criteria.title"
+              :unit-id="criteria.learning_unit.id"></LeistungskriteriumRow>
+         </li>
+       </ul>
+    </div>
+  </div>
+</template>
 
-</style>
+<style scoped></style>
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/CompetencesDetailView.vue
index 59bcbb54..261529b2 100644
--- a/client/src/pages/CompetencesDetailView.vue
+++ b/client/src/pages/CompetencesDetailView.vue
@@ -191,7 +191,7 @@ const userProgress = {
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <ul>
-      <li v-for="competence in competences" :key="competence.description"
+      <li v-for="competence in competences" :key="competence.id"
            class="bg-white p-8 mb-8">
         <CompetenceDetail
           :competence="competence"
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index ee7eb2aa..bec1fa4a 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -184,8 +184,9 @@ const nokCriteria = [
       <div>
         <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
         <ul>
-          <li v-for="competence in lastCompetences" :key="competence.description"
-              class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
+          <li
+            v-for="competence in lastCompetences" :key="competence.description"
+            class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
             <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
             <ComptenceProgress
               :total="7"
@@ -242,8 +243,9 @@ const nokCriteria = [
         <h3 class="pb-4">«Das muss ich nochmals anschauen»</h3>
       </div>
        <ul class="mb-6">
-          <li v-for="criteria in nokCriteria" :key="criteria.description"
-              class="mb-4 pb-4 border-b border-gray-500">
+          <li
+            v-for="criteria in nokCriteria" :key="criteria.title"
+            class="mb-4 pb-4 border-b border-gray-500">
             <LeistungskriteriumRow
               :unit-url="criteria.learning_unit.slug"
               :unit="criteria.pc_id"
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index bad25c02..38e3c073 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -65,6 +65,10 @@ const router = createRouter({
           path: 'detail',
           component: () => import('@/views/CompetencesDetailView.vue'),
         },
+        {
+          path: 'performancecriteria',
+          component: () => import('@/views/CompetencePerfomanceCriteriaView.vue'),
+        },
       ],
     },
     {

From 3fa05216232212cfd0903af17814d8ab63432e00 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 3 Oct 2022 16:25:01 +0200
Subject: [PATCH 08/18] Style competence mobile views

---
 .../components/competences/LeistungskriteriumRow.vue |  6 ++++--
 .../src/pages/CompetencePerfomanceCriteriaView.vue   |  2 +-
 client/src/pages/CompetencesMainView.vue             | 12 ++++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
index 3ee3b366..e3c1265b 100644
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -23,16 +23,18 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="flex flex-row items-center justify-between">
+  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
+    <div class="flex flex-row items-center">
     <div v-if="showState" class="h-8 w-8 mr-4">
       <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
       <it-icon-smiley-thinking v-else-if="state === 'notDone'"></it-icon-smiley-thinking>
       <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
     </div>
-    <div class="pr-5 mr-10">
+    <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
       <h4 class="text-bold mb-2">{{title}}</h4>
       <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
     </div>
+    </div>
     <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
   </div>
 </template>
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index cf0200a2..c4d225ce 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -102,7 +102,7 @@ const shownCriteria = computed(() => {
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <div class="bg-white p-8">
-      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+      <div class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4">
         <button
           @click="activeState = UserCriteriaState.Nok"
           :class="{'bg-gray-200': activeState === UserCriteriaState.Nok}"
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index bec1fa4a..893cd6a2 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -186,8 +186,8 @@ const nokCriteria = [
         <ul>
           <li
             v-for="competence in lastCompetences" :key="competence.description"
-            class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
-            <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
+            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8">
+            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">{{competence.description}}</p>
             <ComptenceProgress
               :total="7"
               :done="3"
@@ -206,15 +206,15 @@ const nokCriteria = [
     </div>
     <div class="bg-white p-8 mb-8">
       <h3 class="mb-4">Einschätzungen</h3>
-       <ul class="flex flex-col lg:flex-row items-center mb-6">
-         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+       <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
+         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
            <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
              <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
            </div>
          </li>
-         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
            <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
@@ -240,7 +240,7 @@ const nokCriteria = [
     <div class="bg-white p-8">
       <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
         <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
-        <h3 class="pb-4">«Das muss ich nochmals anschauen»</h3>
+        <h3>«Das muss ich nochmals anschauen»</h3>
       </div>
        <ul class="mb-6">
           <li

From 22e3fce59e19b8a5b4b8f3cd9ad73df57368deb7 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 10:12:52 +0200
Subject: [PATCH 09/18] Reformat code

---
 .../competences/CompetenceDetail.vue          |  46 +--
 .../competences/CompetenceProgress.vue        |  26 +-
 .../competences/LeistungskriteriumRow.vue     |  50 +--
 .../CompetencePerfomanceCriteriaView.vue      | 209 +++++-----
 client/src/pages/CompetencesDetailView.vue    | 334 ++++++++--------
 client/src/pages/CompetencesMainView.vue      | 377 +++++++++---------
 client/src/pages/ComptencesView.vue           |  16 +-
 client/src/router/index.ts                    |  16 +-
 8 files changed, 554 insertions(+), 520 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 741abe5c..da1a1923 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,54 +1,52 @@
 <script setup lang="ts">
-import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
-import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
-import {ref} from "vue";
+import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
+import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import { ref } from "vue";
 
 const props = defineProps<{
-  competence: object,
-  userProgress: object
-}>()
+  competence: object;
+  userProgress: object;
+}>();
 
 const isOpen = ref(false);
 
 const togglePerformanceCriteria = () => {
-  isOpen.value = !isOpen.value
+  isOpen.value = !isOpen.value;
 };
 
-const userStateForCriteria = (id: string) => props.userProgress[id] ? props.userProgress[id] : 'open'
-
+const userStateForCriteria = (id: string) =>
+  props.userProgress[id] ? props.userProgress[id] : "open";
 </script>
 
 <template>
   <div>
-    <div :class="{'pb-8 border-b border-gray-500 mb-4': isOpen}"
-         class="-mx-8 px-8">
+    <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
-        <h2 class="text-large">{{competence.description}}</h2>
-        <button
-          class="transition-transform"
-          :class="{'rotate-180': isOpen}">
+        <h2 class="text-large">{{ competence.description }}</h2>
+        <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
           <it-icon-arrow-down
             @click="togglePerformanceCriteria()"
             class="h-10 w-10"
-            aria-hidden="true"/></button>
+            aria-hidden="true"
+          />
+        </button>
       </div>
-      <ComptenceProgress
-      :total="7"
-      :done="3"
-      :open="2"
-      ></ComptenceProgress>
+      <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
-        v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
-        class="mb-4 pb-4 border-b border-gray-500">
+        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"
           :unit-url="performanceCriteria.learning_unit.slug"
           :unit="performanceCriteria.pc_id"
           :title="performanceCriteria.title"
-          :unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow>
+          :unit-id="performanceCriteria.learning_unit.id"
+        ></LeistungskriteriumRow>
       </li>
     </ul>
   </div>
diff --git a/client/src/components/competences/CompetenceProgress.vue b/client/src/components/competences/CompetenceProgress.vue
index 155acdd1..fdead048 100644
--- a/client/src/components/competences/CompetenceProgress.vue
+++ b/client/src/components/competences/CompetenceProgress.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  total: number
-  done: number
-  open: number
-}>()
+  total: number;
+  done: number;
+  open: number;
+}>();
 
-const done = 100 * props.done / props.total;
+const done = (100 * props.done) / props.total;
 const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
-
 </script>
 
 <template>
   <span class="relative w-full h-2 bg-gray-300 inline-block">
-    <span v-if="notDone !== done"
-          class="absolute bg-orange-500 h-full"
-          :style="{width: `${notDone}%`}"
+    <span
+      v-if="notDone !== done"
+      class="absolute bg-orange-500 h-full"
+      :style="{ width: `${notDone}%` }"
     ></span>
-    <span v-if="done > 0"
-          class="absolute bg-green-500 h-full"
-          :style="{width: `${done}%`}"
+    <span
+      v-if="done > 0"
+      class="absolute bg-green-500 h-full"
+      :style="{ width: `${done}%` }"
     ></span>
   </span>
 </template>
diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
index e3c1265b..6220d4fd 100644
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -1,39 +1,39 @@
 <script setup lang="ts">
-
-
-
 interface Props {
-  title: string
-  unit: string
-  unitUrl: string
-  unitId: number
-  state?: string  // maybe enum
-  showState?: boolean
+  title: string;
+  unit: string;
+  unitUrl: string;
+  unitId: number;
+  state?: string; // maybe enum
+  showState?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: '',
-  unit: '',
-  unitUrl: '',
+  title: "",
+  unit: "",
+  unitUrl: "",
   unitId: -1,
-  state: 'open',
-  showState: false
-})
-
+  state: "open",
+  showState: false,
+});
 </script>
 
 <template>
   <div class="flex flex-col lg:flex-row lg:items-center justify-between">
     <div class="flex flex-row items-center">
-    <div v-if="showState" class="h-8 w-8 mr-4">
-      <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
-      <it-icon-smiley-thinking v-else-if="state === 'notDone'"></it-icon-smiley-thinking>
-      <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
-    </div>
-    <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
-      <h4 class="text-bold mb-2">{{title}}</h4>
-      <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
-    </div>
+      <div v-if="showState" class="h-8 w-8 mr-4">
+        <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
+        <it-icon-smiley-thinking
+          v-else-if="state === 'notDone'"
+        ></it-icon-smiley-thinking>
+        <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
+      </div>
+      <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
+        <h4 class="text-bold mb-2">{{ title }}</h4>
+        <p>
+          Lerneinheit: <a :href="unitUrl">{{ unit }}</a>
+        </p>
+      </div>
     </div>
     <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
   </div>
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index c4d225ce..ba3a34cb 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -1,100 +1,104 @@
 <script setup lang="ts">
-import * as log from 'loglevel'
-import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
-import {computed, Ref, ref} from "vue";
+import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import * as log from "loglevel";
+import { computed, Ref, ref } from "vue";
 
-log.debug('CompetencesMainView created')
+log.debug("CompetencesMainView created");
 
 enum UserCriteriaState {
-  Open = 'open',
-  Done = 'done',
-  Nok = 'notDone'
+  Open = "open",
+  Done = "done",
+  Nok = "notDone",
 }
 
 const data = {
-    "id": 340,
-    "title": "Kompetenzprofil",
-    "slug": "versicherungsvermittlerin-competence",
-    "type": "competence.CompetenceProfilePage",
-    "translation_key": "a3adb9ac-606d-42fd-b115-842af3706926",
-    "course": {
-        "id": -1,
-        "title": "Versicherungsvermittler/in",
-        "category_name": "Handlungsfeld"
+  id: 340,
+  title: "Kompetenzprofil",
+  slug: "versicherungsvermittlerin-competence",
+  type: "competence.CompetenceProfilePage",
+  translation_key: "a3adb9ac-606d-42fd-b115-842af3706926",
+  course: {
+    id: -1,
+    title: "Versicherungsvermittler/in",
+    category_name: "Handlungsfeld",
+  },
+  children: [
+    {
+      id: 341,
+      title:
+        "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+      slug: "kompetenzprofil-crit-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",
     },
-    "children": [
-        {
-            "id": 341,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-            "slug": "kompetenzprofil-crit-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"
-        },
-        {
-            "id": 342,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-            "slug": "kompetenzprofil-crit-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"
-        },
-        {
-            "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"
-        }
-    ]
-}
+    {
+      id: 342,
+      title:
+        "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+      slug: "kompetenzprofil-crit-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",
+    },
+    {
+      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 userProgress = {
-  341: 'open',
-  342: 'notDone',
-  343: 'done'
-}
+  341: "open",
+  342: "notDone",
+  343: "done",
+};
 
-const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok)
+const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok);
 
 const shownCriteria = computed(() => {
-  return data.children.filter(criteria => userProgress[`${criteria.id}`] === activeState.value)
-})
-
+  return data.children.filter(
+    (criteria) => userProgress[`${criteria.id}`] === activeState.value
+  );
+});
 </script>
 
 <template>
   <div class="mx-auto max-w-5xl">
-     <nav>
-        <a
-          class="block mb-8 cursor-pointer flex items-center"
-          @click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a>
-      </nav>
+    <nav>
+      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
+        ><it-icon-arrow-left /><span>zurück</span></a
+      >
+    </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Einschätzungen</h1>
       <!--      <ItDropdownSelect-->
@@ -102,41 +106,48 @@ const shownCriteria = computed(() => {
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <div class="bg-white p-8">
-      <div class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4">
+      <div
+        class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
+      >
         <button
           @click="activeState = UserCriteriaState.Nok"
-          :class="{'bg-gray-200': activeState === UserCriteriaState.Nok}"
-          class="flex flex-row items-center py-4 px-2 mr-6">
+          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Nok }"
+          class="flex flex-row items-center py-4 px-2 mr-6"
+        >
           <span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span>
           <span><it-icon-smiley-thinking></it-icon-smiley-thinking></span>
         </button>
         <button
           @click="activeState = UserCriteriaState.Done"
-          :class="{'bg-gray-200': activeState === UserCriteriaState.Done}"
-          class="flex flex-row items-center py-4 px-2 mr-6">
+          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Done }"
+          class="flex flex-row items-center py-4 px-2 mr-6"
+        >
           <span class="inline-block mr-2">«Ja, ich kann das»</span>
           <span><it-icon-smiley-happy></it-icon-smiley-happy></span>
         </button>
         <button
           @click="activeState = UserCriteriaState.Open"
-          :class="{'bg-gray-200': activeState === UserCriteriaState.Open}"
-          class="flex flex-row items-center py-4 px-2">
+          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Open }"
+          class="flex flex-row items-center py-4 px-2"
+        >
           <span class="inline-block mr-2">Nicht eingeschätzt</span>
           <span><it-icon-smiley-neutral></it-icon-smiley-neutral></span>
         </button>
       </div>
-       <ul class="mb-6">
-          <li
-            v-for="criteria in shownCriteria"
-            :key="criteria.title"
-            class="mb-4 pb-4 border-b border-gray-500">
-            <LeistungskriteriumRow
-              :unit-url="criteria.learning_unit.slug"
-              :unit="criteria.pc_id"
-              :title="criteria.title"
-              :unit-id="criteria.learning_unit.id"></LeistungskriteriumRow>
-         </li>
-       </ul>
+      <ul class="mb-6">
+        <li
+          v-for="criteria in shownCriteria"
+          :key="criteria.title"
+          class="mb-4 pb-4 border-b border-gray-500"
+        >
+          <LeistungskriteriumRow
+            :unit-url="criteria.learning_unit.slug"
+            :unit="criteria.pc_id"
+            :title="criteria.title"
+            :unit-id="criteria.learning_unit.id"
+          ></LeistungskriteriumRow>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/CompetencesDetailView.vue
index 261529b2..508ea742 100644
--- a/client/src/pages/CompetencesDetailView.vue
+++ b/client/src/pages/CompetencesDetailView.vue
@@ -1,189 +1,197 @@
 <script setup lang="ts">
-import * as log from 'loglevel'
-import CompetenceDetail from '@/components/competences/CompetenceDetail.vue'
+import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
+import * as log from "loglevel";
 
-log.debug('CompetencesMainView created')
+log.debug("CompetencesMainView created");
 
 const competences = [
   {
-    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     id: 1,
     criteria: [
-        {
-            "id": 341,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-            "slug": "kompetenzprofil-crit-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"
+      {
+        id: 341,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "id": 342,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-            "slug": "kompetenzprofil-crit-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"
+        circle: "Analyse",
+      },
+      {
+        id: 342,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "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"
-        }
-    ]
+        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',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     id: 2,
     criteria: [
-        {
-            "id": 341,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-            "slug": "kompetenzprofil-crit-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"
+      {
+        id: 341,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "id": 342,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-            "slug": "kompetenzprofil-crit-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"
+        circle: "Analyse",
+      },
+      {
+        id: 342,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "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"
-        }
-    ]
+        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',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     id: 3,
     criteria: [
-        {
-            "id": 341,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-            "slug": "kompetenzprofil-crit-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"
+      {
+        id: 341,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "id": 342,
-            "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-            "slug": "kompetenzprofil-crit-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"
+        circle: "Analyse",
+      },
+      {
+        id: 342,
+        title:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        slug: "kompetenzprofil-crit-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",
         },
-        {
-            "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"
-        }
-    ]
-  }
+        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 userProgress = {
-  341: 'open',
-  342: 'notDone',
-  343: 'done'
-}
-
+  341: "open",
+  342: "notDone",
+  343: "done",
+};
 </script>
 
 <template>
   <div class="mx-auto max-w-5xl">
-     <nav>
-        <a
-          class="block mb-8 cursor-pointer flex items-center"
-          @click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a>
-      </nav>
+    <nav>
+      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
+        ><it-icon-arrow-left /><span>zurück</span></a
+      >
+    </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Kompetenzen</h1>
       <!--      <ItDropdownSelect-->
@@ -191,11 +199,15 @@ const userProgress = {
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <ul>
-      <li v-for="competence in competences" :key="competence.id"
-           class="bg-white p-8 mb-8">
+      <li
+        v-for="competence in competences"
+        :key="competence.id"
+        class="bg-white p-8 mb-8"
+      >
         <CompetenceDetail
           :competence="competence"
-          :user-progress="userProgress"></CompetenceDetail>
+          :user-progress="userProgress"
+        ></CompetenceDetail>
       </li>
     </ul>
   </div>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 893cd6a2..5e4287e8 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,175 +1,192 @@
 <script setup lang="ts">
-import * as log from 'loglevel'
-import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
-import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
+import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
+import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import * as log from "loglevel";
 
-log.debug('CompetencesMainView created')
+log.debug("CompetencesMainView created");
 
 const lastCompetences = [
   {
-    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     criteria: [
       {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
+        description:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: "done",
+        unit: "Fahrzeug",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
-    ]
+        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: "done",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
+      },
+    ],
   },
   {
-    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     criteria: [
       {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
+        description:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: "done",
+        unit: "Fahrzeug",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
-    ]
+        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: "done",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
+      },
+    ],
   },
   {
-    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
     criteria: [
       {
-        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: 'done',
-        unit: 'Fahrzeug',
-        url: 'https://www.iterativ.ch'
+        description:
+          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: "done",
+        unit: "Fahrzeug",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'open',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
+        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: "open",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
       },
       {
-        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: 'done',
-        unit: 'Reisen',
-        url: 'https://www.iterativ.ch'
-      }
-    ]
-  }
+        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: "done",
+        unit: "Reisen",
+        url: "https://www.iterativ.ch",
+      },
+    ],
+  },
 ];
 
 const summary = {
   ok: 325,
   nok: 32,
-  open: 28
+  open: 28,
 };
 
 const nokCriteria = [
   {
-      "id": 341,
-      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-      "slug": "kompetenzprofil-crit-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"
+    id: 341,
+    title:
+      "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
+    slug: "kompetenzprofil-crit-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",
   },
   {
-      "id": 342,
-      "title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-      "slug": "kompetenzprofil-crit-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"
+    id: 342,
+    title:
+      "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+    slug: "kompetenzprofil-crit-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",
   },
   {
-      "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"
-  }
-]
-
+    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",
+  },
+];
 </script>
 
 <template>
@@ -185,81 +202,79 @@ const nokCriteria = [
         <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
         <ul>
           <li
-            v-for="competence in lastCompetences" :key="competence.description"
-            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8">
-            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">{{competence.description}}</p>
-            <ComptenceProgress
-              :total="7"
-              :done="3"
-              :open="2"
-            ></ComptenceProgress>
+            v-for="competence in lastCompetences"
+            :key="competence.description"
+            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
+          >
+            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
+              {{ competence.description }}
+            </p>
+            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
           </li>
         </ul>
-         <router-link
-            to="/mediacenter/handlungsfeldlist"
-            class="flex items-center"
-          >
-            <span>Alle anschauen</span>
-            <it-icon-arrow-right></it-icon-arrow-right>
-          </router-link>
+        <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+          <span>Alle anschauen</span>
+          <it-icon-arrow-right></it-icon-arrow-right>
+        </router-link>
       </div>
     </div>
     <div class="bg-white p-8 mb-8">
       <h3 class="mb-4">Einschätzungen</h3>
-       <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
-         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
-           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
-           <div class="flex flex-row items-center">
-             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
-             <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
-           </div>
-         </li>
-         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
-           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
-           <div class="flex flex-row items-center">
-             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
-             <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
-           </div>
-         </li>
-           <li>
-           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
-           <div class="flex flex-row items-center border-r">
-             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
-             <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
-           </div>
-         </li>
-       </ul>
-       <router-link
-          to="/mediacenter/handlungsfeldlist"
-          class="flex items-center"
+      <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
+        <li
+          class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
         >
-          <span>Alle anschauen</span>
-          <it-icon-arrow-right></it-icon-arrow-right>
-        </router-link>
+          <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
+          <div class="flex flex-row items-center">
+            <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
+            <p class="text-7xl font-bold inline-block ml-4">{{ summary.nok }}</p>
+          </div>
+        </li>
+        <li
+          class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
+        >
+          <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
+          <div class="flex flex-row items-center">
+            <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
+            <p class="text-7xl font-bold inline-block ml-4">{{ summary.ok }}</p>
+          </div>
+        </li>
+        <li>
+          <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
+          <div class="flex flex-row items-center border-r">
+            <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
+            <p class="text-7xl font-bold inline-block ml-4">{{ summary.open }}</p>
+          </div>
+        </li>
+      </ul>
+      <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+        <span>Alle anschauen</span>
+        <it-icon-arrow-right></it-icon-arrow-right>
+      </router-link>
     </div>
     <div class="bg-white p-8">
       <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
         <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
         <h3>«Das muss ich nochmals anschauen»</h3>
       </div>
-       <ul class="mb-6">
-          <li
-            v-for="criteria in nokCriteria" :key="criteria.title"
-            class="mb-4 pb-4 border-b border-gray-500">
-            <LeistungskriteriumRow
-              :unit-url="criteria.learning_unit.slug"
-              :unit="criteria.pc_id"
-              :title="criteria.title"
-              :unit-id="criteria.learning_unit.id"></LeistungskriteriumRow>
-         </li>
-       </ul>
-       <router-link
-          to="/mediacenter/handlungsfeldlist"
-          class="flex items-center"
+      <ul class="mb-6">
+        <li
+          v-for="criteria in nokCriteria"
+          :key="criteria.title"
+          class="mb-4 pb-4 border-b border-gray-500"
         >
-          <span>Alle anschauen</span>
-          <it-icon-arrow-right></it-icon-arrow-right>
-        </router-link>
+          <LeistungskriteriumRow
+            :unit-url="criteria.learning_unit.slug"
+            :unit="criteria.pc_id"
+            :title="criteria.title"
+            :unit-id="criteria.learning_unit.id"
+          ></LeistungskriteriumRow>
+        </li>
+      </ul>
+      <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+        <span>Alle anschauen</span>
+        <it-icon-arrow-right></it-icon-arrow-right>
+      </router-link>
     </div>
   </div>
 </template>
diff --git a/client/src/pages/ComptencesView.vue b/client/src/pages/ComptencesView.vue
index dcb0fcb4..14aab95a 100644
--- a/client/src/pages/ComptencesView.vue
+++ b/client/src/pages/ComptencesView.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import * as log from 'loglevel'
-import { onMounted } from 'vue'
+import * as log from "loglevel";
+import { onMounted } from "vue";
 
-log.debug('CometencesView created')
+log.debug("CometencesView created");
 
 const props = defineProps<{
-  competencesPageSlug: string
-}>()
-
+  competencesPageSlug: string;
+}>();
 
 onMounted(async () => {
-  log.debug('CompetencesView mounted', props.competencesPageSlug)
-
-})
+  log.debug("CompetencesView mounted", props.competencesPageSlug);
+});
 </script>
 
 <template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 38e3c073..ef24b520 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -53,21 +53,21 @@ const router = createRouter({
       ],
     },
     {
-      path: '/competences/:competencesPageSlug',
+      path: "/competences/:competencesPageSlug",
       props: true,
-      component: () => import('@/views/ComptencesView.vue'),
+      component: () => import("@/pages/ComptencesView.vue"),
       children: [
         {
-          path: 'overview',
-          component: () => import('@/views/CompetencesMainView.vue'),
+          path: "overview",
+          component: () => import("@/pages/CompetencesMainView.vue"),
         },
         {
-          path: 'detail',
-          component: () => import('@/views/CompetencesDetailView.vue'),
+          path: "detail",
+          component: () => import("@/pages/CompetencesDetailView.vue"),
         },
         {
-          path: 'performancecriteria',
-          component: () => import('@/views/CompetencePerfomanceCriteriaView.vue'),
+          path: "performancecriteria",
+          component: () => import("@/pages/CompetencePerfomanceCriteriaView.vue"),
         },
       ],
     },

From dc3b1a4ca651b337025bc9daef526e84139b8c46 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 11:35:43 +0200
Subject: [PATCH 10/18] Add backend data to competence profile

---
 .../competences/CompetenceDetail.vue          |  6 +--
 .../competences/LeistungskriteriumRow.vue     | 42 ---------------
 .../competences/PerformanceCriteriaRow.vue    | 45 ++++++++++++++++
 .../CompetencePerfomanceCriteriaView.vue      | 29 +++++-----
 client/src/pages/CompetencesMainView.vue      |  2 +-
 client/src/pages/ComptencesView.vue           | 15 ++++--
 client/src/router/index.ts                    |  2 +-
 client/src/stores/competence.ts               | 53 +++++++++++++++++++
 client/src/types.ts                           | 20 +++++++
 client/tsconfig.app.json                      | 19 +++++--
 server/vbv_lernwelt/competence/models.py      |  1 +
 11 files changed, 165 insertions(+), 69 deletions(-)
 delete mode 100644 client/src/components/competences/LeistungskriteriumRow.vue
 create mode 100644 client/src/components/competences/PerformanceCriteriaRow.vue
 create mode 100644 client/src/stores/competence.ts

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index da1a1923..00eee94a 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
-import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import { ref } from "vue";
 
 const props = defineProps<{
@@ -25,9 +25,9 @@ const userStateForCriteria = (id: string) =>
         <h2 class="text-large">{{ competence.description }}</h2>
         <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
           <it-icon-arrow-down
-            @click="togglePerformanceCriteria()"
             class="h-10 w-10"
             aria-hidden="true"
+            @click="togglePerformanceCriteria()"
           />
         </button>
       </div>
@@ -41,7 +41,7 @@ const userStateForCriteria = (id: string) =>
       >
         <LeistungskriteriumRow
           :state="userStateForCriteria(`${performanceCriteria.id}`)"
-          :showState="true"
+          :show-state="true"
           :unit-url="performanceCriteria.learning_unit.slug"
           :unit="performanceCriteria.pc_id"
           :title="performanceCriteria.title"
diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
deleted file mode 100644
index 6220d4fd..00000000
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string;
-  unit: string;
-  unitUrl: string;
-  unitId: number;
-  state?: string; // maybe enum
-  showState?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "",
-  unit: "",
-  unitUrl: "",
-  unitId: -1,
-  state: "open",
-  showState: false,
-});
-</script>
-
-<template>
-  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
-    <div class="flex flex-row items-center">
-      <div v-if="showState" class="h-8 w-8 mr-4">
-        <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
-        <it-icon-smiley-thinking
-          v-else-if="state === 'notDone'"
-        ></it-icon-smiley-thinking>
-        <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
-      </div>
-      <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
-        <h4 class="text-bold mb-2">{{ title }}</h4>
-        <p>
-          Lerneinheit: <a :href="unitUrl">{{ unit }}</a>
-        </p>
-      </div>
-    </div>
-    <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/client/src/components/competences/PerformanceCriteriaRow.vue b/client/src/components/competences/PerformanceCriteriaRow.vue
new file mode 100644
index 00000000..b56d83ec
--- /dev/null
+++ b/client/src/components/competences/PerformanceCriteriaRow.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PerformanceCriteria } from "@/types";
+
+interface Props {
+  criteria: PerformanceCriteria;
+  showState: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  criteria: undefined,
+  showState: false,
+});
+</script>
+
+<template>
+  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
+    <div class="flex flex-row items-center">
+      <div v-if="showState" class="h-8 w-8 mr-4">
+        <it-icon-smiley-happy
+          v-if="criteria.completion_status === 'success'"
+        ></it-icon-smiley-happy>
+        <it-icon-smiley-thinking
+          v-else-if="criteria.completion_status === 'fail'"
+        ></it-icon-smiley-thinking>
+        <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
+      </div>
+      <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
+        <h4 class="text-bold mb-2">{{ criteria.title }}</h4>
+        <p>
+          Lerneinheit:
+          <a class="link" :href="criteria.learning_unit.frontend_url">
+            {{ criteria.learning_unit.title }}
+          </a>
+        </p>
+      </div>
+    </div>
+    <span class="whitespace-nowrap">
+      <a class="link" :href="criteria.learning_unit.frontend_url">
+        Sich nochmals einschätzen
+      </a>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index ba3a34cb..acaf8d3d 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
+import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { computed, Ref, ref } from "vue";
 
@@ -11,6 +12,8 @@ enum UserCriteriaState {
   Nok = "notDone",
 }
 
+const competenceStore = useCompetenceStore();
+
 const data = {
   id: 340,
   title: "Kompetenzprofil",
@@ -86,17 +89,16 @@ const userProgress = {
 const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok);
 
 const shownCriteria = computed(() => {
-  return data.children.filter(
-    (criteria) => userProgress[`${criteria.id}`] === activeState.value
-  );
+  return competenceStore.flatPerformanceCriteria;
 });
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
+  <div class="container-large">
     <nav>
-      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
-        ><it-icon-arrow-left /><span>zurück</span></a
+      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
+        <it-icon-arrow-left />
+        <span>zurück</span></a
       >
     </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
@@ -110,25 +112,25 @@ const shownCriteria = computed(() => {
         class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
       >
         <button
-          @click="activeState = UserCriteriaState.Nok"
           :class="{ 'bg-gray-200': activeState === UserCriteriaState.Nok }"
           class="flex flex-row items-center py-4 px-2 mr-6"
+          @click="activeState = UserCriteriaState.Nok"
         >
           <span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span>
           <span><it-icon-smiley-thinking></it-icon-smiley-thinking></span>
         </button>
         <button
-          @click="activeState = UserCriteriaState.Done"
           :class="{ 'bg-gray-200': activeState === UserCriteriaState.Done }"
           class="flex flex-row items-center py-4 px-2 mr-6"
+          @click="activeState = UserCriteriaState.Done"
         >
           <span class="inline-block mr-2">«Ja, ich kann das»</span>
           <span><it-icon-smiley-happy></it-icon-smiley-happy></span>
         </button>
         <button
-          @click="activeState = UserCriteriaState.Open"
           :class="{ 'bg-gray-200': activeState === UserCriteriaState.Open }"
           class="flex flex-row items-center py-4 px-2"
+          @click="activeState = UserCriteriaState.Open"
         >
           <span class="inline-block mr-2">Nicht eingeschätzt</span>
           <span><it-icon-smiley-neutral></it-icon-smiley-neutral></span>
@@ -140,12 +142,7 @@ const shownCriteria = computed(() => {
           :key="criteria.title"
           class="mb-4 pb-4 border-b border-gray-500"
         >
-          <LeistungskriteriumRow
-            :unit-url="criteria.learning_unit.slug"
-            :unit="criteria.pc_id"
-            :title="criteria.title"
-            :unit-id="criteria.learning_unit.id"
-          ></LeistungskriteriumRow>
+          <PerformanceCriteriaRow :criteria="criteria"> </PerformanceCriteriaRow>
         </li>
       </ul>
     </div>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 5e4287e8..7c305cce 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
-import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
+import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import * as log from "loglevel";
 
 log.debug("CompetencesMainView created");
diff --git a/client/src/pages/ComptencesView.vue b/client/src/pages/ComptencesView.vue
index 14aab95a..70406407 100644
--- a/client/src/pages/ComptencesView.vue
+++ b/client/src/pages/ComptencesView.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
+import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { onMounted } from "vue";
 
 log.debug("CometencesView created");
 
 const props = defineProps<{
-  competencesPageSlug: string;
+  competenceProfilePageSlug: string;
 }>();
 
+const competenceStore = useCompetenceStore();
+
 onMounted(async () => {
-  log.debug("CompetencesView mounted", props.competencesPageSlug);
+  log.debug("CompetencesView mounted", props.competenceProfilePageSlug);
+
+  try {
+    await competenceStore.loadCompetenceProfilePage(props.competenceProfilePageSlug);
+  } catch (error) {
+    log.error(error);
+  }
 });
 </script>
 
 <template>
   <div class="bg-gray-200">
-    <main class="px-8 py-8">
+    <main>
       <router-view></router-view>
     </main>
   </div>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index ef24b520..9d0db13e 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -53,7 +53,7 @@ const router = createRouter({
       ],
     },
     {
-      path: "/competences/:competencesPageSlug",
+      path: "/competence/:competenceProfilePageSlug",
       props: true,
       component: () => import("@/pages/ComptencesView.vue"),
       children: [
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
new file mode 100644
index 00000000..ad4e5b82
--- /dev/null
+++ b/client/src/stores/competence.ts
@@ -0,0 +1,53 @@
+import { itGet } from "@/fetchHelpers";
+import type { CompetenceProfilePage } from "@/types";
+import _ from "lodash";
+import { defineStore } from "pinia";
+
+export type CompetenceStoreState = {
+  competenceProfilePage: CompetenceProfilePage | undefined;
+};
+
+export const useCompetenceStore = defineStore({
+  id: "competence",
+  state: () => {
+    return {
+      competenceProfilePage: undefined,
+    } as CompetenceStoreState;
+  },
+  getters: {
+    flatPerformanceCriteria: (state, circleTitle = "") => {
+      if (!state.competenceProfilePage) {
+        return [];
+      }
+
+      let criteria = _.orderBy(
+        state.competenceProfilePage.children.flatMap((competence) => {
+          return competence.children;
+        }),
+        ["competence_id"],
+        ["asc"]
+      );
+
+      if (circleTitle) {
+        criteria = criteria.filter((c) => c.circle === circleTitle);
+      }
+
+      return criteria;
+    },
+  },
+  actions: {
+    async loadCompetenceProfilePage(slug: string, reload = false) {
+      if (this.competenceProfilePage && !reload) {
+        return this.competenceProfilePage;
+      }
+      const competenceProfilePageData = await itGet(`/api/course/page/${slug}/`);
+
+      if (!competenceProfilePageData) {
+        throw `No competenceProfilePageData found with: ${slug}`;
+      }
+
+      this.competenceProfilePage = competenceProfilePageData;
+      return this.competenceProfilePage;
+    },
+  },
+});
diff --git a/client/src/types.ts b/client/src/types.ts
index 9470caee..64bfc94a 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -290,3 +290,23 @@ export interface MediaLibraryPage extends CourseWagtailPage {
   course: Course;
   children: MediaCategoryPage[];
 }
+
+export interface PerformanceCriteria extends CourseWagtailPage {
+  type: "competence.PerformanceCriteria";
+  competence_id: string;
+  circle: string;
+  course_category: CourseCategory;
+  learning_unit: CourseWagtailPage;
+}
+
+export interface CompetencePage extends CourseWagtailPage {
+  type: "competence.CompetencePage";
+  competence_id: string;
+  children: PerformanceCriteria[];
+}
+
+export interface CompetenceProfilePage extends CourseWagtailPage {
+  type: "competence.CompetenceProfilePage";
+  course: Course;
+  children: CompetencePage[];
+}
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index bea740ec..00819462 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -1,14 +1,27 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
   "compilerOptions": {
+    "lib": [
+      "ES2021",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "composite": true,
     "strict": true,
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
 }
diff --git a/server/vbv_lernwelt/competence/models.py b/server/vbv_lernwelt/competence/models.py
index e61a7d7c..370a70bd 100644
--- a/server/vbv_lernwelt/competence/models.py
+++ b/server/vbv_lernwelt/competence/models.py
@@ -64,6 +64,7 @@ class CompetencePage(Page):
         return get_it_serializer_class(
             cls,
             [
+                "competence_id",
                 "children",
             ],
         )

From 46ad6cab36598f7864c2e8ef2e42bb35ae1c44ee Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 14:20:42 +0200
Subject: [PATCH 11/18] Completion data in Performance Criteria view

---
 .../competences/PerformanceCriteriaRow.vue    |   2 +-
 .../CompetencePerfomanceCriteriaView.vue      | 104 +++---------------
 client/src/stores/circle.ts                   |  12 +-
 client/src/stores/competence.ts               |  27 +++++
 client/src/stores/completion.ts               |  44 ++++++++
 client/src/stores/learningPath.ts             |   6 +-
 6 files changed, 97 insertions(+), 98 deletions(-)
 create mode 100644 client/src/stores/completion.ts

diff --git a/client/src/components/competences/PerformanceCriteriaRow.vue b/client/src/components/competences/PerformanceCriteriaRow.vue
index b56d83ec..caa676f4 100644
--- a/client/src/components/competences/PerformanceCriteriaRow.vue
+++ b/client/src/components/competences/PerformanceCriteriaRow.vue
@@ -3,7 +3,7 @@ import type { PerformanceCriteria } from "@/types";
 
 interface Props {
   criteria: PerformanceCriteria;
-  showState: boolean;
+  showState?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index acaf8d3d..a22ca4ad 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -1,95 +1,20 @@
 <script setup lang="ts">
 import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
 import { useCompetenceStore } from "@/stores/competence";
+import type { CourseCompletionStatus } from "@/types";
 import * as log from "loglevel";
 import { computed, Ref, ref } from "vue";
 
 log.debug("CompetencesMainView created");
 
-enum UserCriteriaState {
-  Open = "open",
-  Done = "done",
-  Nok = "notDone",
-}
-
 const competenceStore = useCompetenceStore();
 
-const data = {
-  id: 340,
-  title: "Kompetenzprofil",
-  slug: "versicherungsvermittlerin-competence",
-  type: "competence.CompetenceProfilePage",
-  translation_key: "a3adb9ac-606d-42fd-b115-842af3706926",
-  course: {
-    id: -1,
-    title: "Versicherungsvermittler/in",
-    category_name: "Handlungsfeld",
-  },
-  children: [
-    {
-      id: 341,
-      title:
-        "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-      slug: "kompetenzprofil-crit-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",
-    },
-    {
-      id: 342,
-      title:
-        "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-      slug: "kompetenzprofil-crit-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",
-    },
-    {
-      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 userProgress = {
-  341: "open",
-  342: "notDone",
-  343: "done",
-};
-
-const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok);
+const activeState: Ref<CourseCompletionStatus> = ref("fail");
 
 const shownCriteria = computed(() => {
-  return competenceStore.flatPerformanceCriteria;
+  return competenceStore.flatPerformanceCriteria.filter((criteria) => {
+    return criteria.completion_status === activeState.value;
+  });
 });
 </script>
 
@@ -112,25 +37,25 @@ const shownCriteria = computed(() => {
         class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
       >
         <button
-          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Nok }"
+          :class="{ 'bg-gray-200': activeState === 'fail' }"
           class="flex flex-row items-center py-4 px-2 mr-6"
-          @click="activeState = UserCriteriaState.Nok"
+          @click="activeState = 'fail'"
         >
           <span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span>
           <span><it-icon-smiley-thinking></it-icon-smiley-thinking></span>
         </button>
         <button
-          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Done }"
+          :class="{ 'bg-gray-200': activeState === 'success' }"
           class="flex flex-row items-center py-4 px-2 mr-6"
-          @click="activeState = UserCriteriaState.Done"
+          @click="activeState = 'success'"
         >
           <span class="inline-block mr-2">«Ja, ich kann das»</span>
           <span><it-icon-smiley-happy></it-icon-smiley-happy></span>
         </button>
         <button
-          :class="{ 'bg-gray-200': activeState === UserCriteriaState.Open }"
+          :class="{ 'bg-gray-200': activeState === 'unknown' }"
           class="flex flex-row items-center py-4 px-2"
-          @click="activeState = UserCriteriaState.Open"
+          @click="activeState = 'unknown'"
         >
           <span class="inline-block mr-2">Nicht eingeschätzt</span>
           <span><it-icon-smiley-neutral></it-icon-smiley-neutral></span>
@@ -139,10 +64,13 @@ const shownCriteria = computed(() => {
       <ul class="mb-6">
         <li
           v-for="criteria in shownCriteria"
-          :key="criteria.title"
+          :key="criteria.id"
           class="mb-4 pb-4 border-b border-gray-500"
         >
-          <PerformanceCriteriaRow :criteria="criteria"> </PerformanceCriteriaRow>
+          <PerformanceCriteriaRow
+            :criteria="criteria"
+            :show-state="true"
+          ></PerformanceCriteriaRow>
         </li>
       </ul>
     </div>
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index d0c39151..9673c25f 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -1,9 +1,7 @@
 import * as log from "loglevel";
 
-import { defineStore } from "pinia";
-
-import { itPost } from "@/fetchHelpers";
 import type { Circle } from "@/services/circle";
+import { useCompletionStore } from "@/stores/completion";
 import { useLearningPathStore } from "@/stores/learningPath";
 import type {
   CourseCompletionStatus,
@@ -11,6 +9,7 @@ import type {
   LearningUnit,
   LearningUnitPerformanceCriteria,
 } from "@/types";
+import { defineStore } from "pinia";
 
 export type CircleStoreState = {
   circle: Circle | undefined;
@@ -89,12 +88,11 @@ export const useCircleStore = defineStore({
       page: LearningContent | LearningUnitPerformanceCriteria,
       completion_status: CourseCompletionStatus = "success"
     ) {
+      const completionStore = useCompletionStore();
+
       try {
         page.completion_status = completion_status;
-        const completionData = await itPost("/api/course/completion/mark/", {
-          page_key: page.translation_key,
-          completion_status: page.completion_status,
-        });
+        const completionData = await completionStore.markPage(page);
         if (this.circle) {
           this.circle.parseCompletionData(completionData);
         }
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index ad4e5b82..5b6cb9e4 100644
--- a/client/src/stores/competence.ts
+++ b/client/src/stores/competence.ts
@@ -1,4 +1,5 @@
 import { itGet } from "@/fetchHelpers";
+import { useCompletionStore } from "@/stores/completion";
 import type { CompetenceProfilePage } from "@/types";
 import _ from "lodash";
 import { defineStore } from "pinia";
@@ -38,6 +39,7 @@ export const useCompetenceStore = defineStore({
   actions: {
     async loadCompetenceProfilePage(slug: string, reload = false) {
       if (this.competenceProfilePage && !reload) {
+        await this.parseCompletionData();
         return this.competenceProfilePage;
       }
       const competenceProfilePageData = await itGet(`/api/course/page/${slug}/`);
@@ -47,7 +49,32 @@ export const useCompetenceStore = defineStore({
       }
 
       this.competenceProfilePage = competenceProfilePageData;
+      await this.parseCompletionData();
+
       return this.competenceProfilePage;
     },
+    async parseCompletionData() {
+      if (this.competenceProfilePage) {
+        const completionStore = useCompletionStore();
+        const completionData = await completionStore.loadCompletionData(
+          this.competenceProfilePage.course.id
+        );
+
+        if (completionData) {
+          this.competenceProfilePage.children.forEach((competence) => {
+            competence.children.forEach((performanceCriteria) => {
+              const completion = completionData.find(
+                (c) => c.page_key === performanceCriteria.translation_key
+              );
+              if (completion) {
+                performanceCriteria.completion_status = completion.completion_status;
+              } else {
+                performanceCriteria.completion_status = "unknown";
+              }
+            });
+          });
+        }
+      }
+    },
   },
 });
diff --git a/client/src/stores/completion.ts b/client/src/stores/completion.ts
new file mode 100644
index 00000000..f420ac0d
--- /dev/null
+++ b/client/src/stores/completion.ts
@@ -0,0 +1,44 @@
+import { itGet, itPost } from "@/fetchHelpers";
+import type { CourseCompletion, CourseWagtailPage } from "@/types";
+import { defineStore } from "pinia";
+
+export type CompletionStoreState = {
+  completionData: CourseCompletion[] | undefined;
+};
+
+export const useCompletionStore = defineStore({
+  id: "completion",
+  state: () => {
+    return {
+      completionData: undefined,
+    } as CompletionStoreState;
+  },
+  getters: {},
+  actions: {
+    async loadCompletionData(courseId: number, reload = false) {
+      if (this.completionData && !reload) {
+        return this.completionData;
+      }
+      const completionData = await itGet(`/api/course/completion/${courseId}/`);
+
+      if (!completionData) {
+        throw `No completionData found with: ${courseId}`;
+      }
+
+      this.completionData = completionData;
+      return this.completionData || [];
+    },
+    async markPage(page: CourseWagtailPage) {
+      const completionData = await itPost("/api/course/completion/mark/", {
+        page_key: page.translation_key,
+        completion_status: page.completion_status,
+      });
+
+      if (completionData) {
+        this.completionData = completionData;
+      }
+
+      return this.completionData || [];
+    },
+  },
+});
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
index 3c6c33b3..3ea7a9b2 100644
--- a/client/src/stores/learningPath.ts
+++ b/client/src/stores/learningPath.ts
@@ -1,5 +1,6 @@
 import { itGet } from "@/fetchHelpers";
 import { LearningPath } from "@/services/learningPath";
+import { useCompletionStore } from "@/stores/completion";
 import { defineStore } from "pinia";
 
 export type LearningPathStoreState = {
@@ -18,12 +19,13 @@ export const useLearningPathStore = defineStore({
   getters: {},
   actions: {
     async loadLearningPath(slug: string, reload = false) {
+      const completionStore = useCompletionStore();
       if (this.learningPath && !reload) {
         return this.learningPath;
       }
       const learningPathData = await itGet(`/api/course/page/${slug}/`);
-      const completionData = await itGet(
-        `/api/course/completion/${learningPathData.course.id}/`
+      const completionData = await completionStore.loadCompletionData(
+        learningPathData.course.id
       );
 
       if (!learningPathData) {

From 999a9164271f5e745b7113918371e1a266053ffc Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 14:50:52 +0200
Subject: [PATCH 12/18] Add backend data to competence profile main page

---
 client/src/pages/CompetencesMainView.vue | 262 +++++------------------
 1 file changed, 50 insertions(+), 212 deletions(-)

diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 7c305cce..67a53564 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,196 +1,37 @@
 <script setup lang="ts">
-import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
-import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
+import { useCompetenceStore } from "@/stores/competence";
+import _ from "lodash";
 import * as log from "loglevel";
+import { computed } from "vue";
 
 log.debug("CompetencesMainView created");
 
-const lastCompetences = [
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    criteria: [
-      {
-        description:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: "done",
-        unit: "Fahrzeug",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "done",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-    ],
-  },
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    criteria: [
-      {
-        description:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: "done",
-        unit: "Fahrzeug",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "done",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-    ],
-  },
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    criteria: [
-      {
-        description:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        state: "done",
-        unit: "Fahrzeug",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "open",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-      {
-        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: "done",
-        unit: "Reisen",
-        url: "https://www.iterativ.ch",
-      },
-    ],
-  },
-];
+const competenceStore = useCompetenceStore();
 
-const summary = {
-  ok: 325,
-  nok: 32,
-  open: 28,
-};
+const failedCriteria = computed(() => {
+  return competenceStore.flatPerformanceCriteria
+    .filter((criteria) => {
+      return criteria.completion_status === "fail";
+    })
+    .slice(0, 3);
+});
 
-const nokCriteria = [
-  {
-    id: 341,
-    title:
-      "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-    slug: "kompetenzprofil-crit-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",
-  },
-  {
-    id: 342,
-    title:
-      "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-    slug: "kompetenzprofil-crit-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",
-  },
-  {
-    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 countStatus = computed(() => {
+  const grouped = _.groupBy(
+    competenceStore.flatPerformanceCriteria,
+    "completion_status"
+  );
+  return {
+    fail: grouped?.fail?.length || 0,
+    success: grouped?.success?.length || 0,
+    unknown: grouped?.unknown?.length || 0,
+  };
+});
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
+  <div class="container-large lg:mt-8">
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Kompetenzprofil</h1>
       <!--      <ItDropdownSelect-->
@@ -201,16 +42,16 @@ const nokCriteria = [
       <div>
         <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
         <ul>
-          <li
-            v-for="competence in lastCompetences"
-            :key="competence.description"
-            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
-          >
-            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
-              {{ competence.description }}
-            </p>
-            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
-          </li>
+          <!--          <li-->
+          <!--            v-for="competence in lastCompetences"-->
+          <!--            :key="competence.description"-->
+          <!--            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"-->
+          <!--          >-->
+          <!--            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">-->
+          <!--              {{ competence.description }}-->
+          <!--            </p>-->
+          <!--            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>-->
+          <!--          </li>-->
         </ul>
         <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
           <span>Alle anschauen</span>
@@ -220,30 +61,32 @@ const nokCriteria = [
     </div>
     <div class="bg-white p-8 mb-8">
       <h3 class="mb-4">Einschätzungen</h3>
-      <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
-        <li
-          class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
-        >
+      <ul
+        class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
+      >
+        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
-            <p class="text-7xl font-bold inline-block ml-4">{{ summary.nok }}</p>
+            <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
           </div>
         </li>
-        <li
-          class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
-        >
+        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
-            <p class="text-7xl font-bold inline-block ml-4">{{ summary.ok }}</p>
+            <p class="text-7xl font-bold inline-block ml-4">
+              {{ countStatus.success }}
+            </p>
           </div>
         </li>
-        <li>
+        <li class="flex-1">
           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
           <div class="flex flex-row items-center border-r">
             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
-            <p class="text-7xl font-bold inline-block ml-4">{{ summary.open }}</p>
+            <p class="text-7xl font-bold inline-block ml-4">
+              {{ countStatus.unknown }}
+            </p>
           </div>
         </li>
       </ul>
@@ -259,16 +102,11 @@ const nokCriteria = [
       </div>
       <ul class="mb-6">
         <li
-          v-for="criteria in nokCriteria"
-          :key="criteria.title"
+          v-for="criteria in failedCriteria"
+          :key="criteria.id"
           class="mb-4 pb-4 border-b border-gray-500"
         >
-          <LeistungskriteriumRow
-            :unit-url="criteria.learning_unit.slug"
-            :unit="criteria.pc_id"
-            :title="criteria.title"
-            :unit-id="criteria.learning_unit.id"
-          ></LeistungskriteriumRow>
+          <PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
         </li>
       </ul>
       <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">

From f4dafef005ec1ac5a5099676b9f9ac7554a61564 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 15:11:22 +0200
Subject: [PATCH 13/18] Refactor competence detail view

---
 .../competences/CompetenceDetail.vue          |  43 ++--
 .../competences/CompetenceProgress.vue        |  35 ++-
 client/src/pages/CompetencesDetailView.vue    | 199 +-----------------
 3 files changed, 67 insertions(+), 210 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 00eee94a..a000bab8 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
-import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import type { CompetencePage } from "@/types";
+import _ from "lodash";
 import { ref } from "vue";
 
 const props = defineProps<{
-  competence: object;
-  userProgress: object;
+  competence: CompetencePage;
 }>();
 
 const isOpen = ref(false);
@@ -14,15 +15,29 @@ const togglePerformanceCriteria = () => {
   isOpen.value = !isOpen.value;
 };
 
-const userStateForCriteria = (id: string) =>
-  props.userProgress[id] ? props.userProgress[id] : "open";
+const calcStatusCount = () => {
+  if (props.competence) {
+    const grouped = _.groupBy(props.competence.children, "completion_status");
+    return {
+      fail: grouped?.fail?.length || 0,
+      success: grouped?.success?.length || 0,
+      unknown: grouped?.unknown?.length || 0,
+    };
+  }
+
+  return {
+    success: 0,
+    fail: 0,
+    unknown: 0,
+  };
+};
 </script>
 
 <template>
   <div>
     <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
-        <h2 class="text-large">{{ competence.description }}</h2>
+        <h2 class="text-large">{{ competence.title }}</h2>
         <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
           <it-icon-arrow-down
             class="h-10 w-10"
@@ -31,22 +46,18 @@ const userStateForCriteria = (id: string) =>
           />
         </button>
       </div>
-      <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+      <ComptenceProgress :status-count="calcStatusCount()"></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
-        v-for="performanceCriteria in competence.criteria"
-        :key="performanceCriteria.description"
+        v-for="performanceCriteria in competence.children"
+        :key="performanceCriteria.id"
         class="mb-4 pb-4 border-b border-gray-500"
       >
-        <LeistungskriteriumRow
-          :state="userStateForCriteria(`${performanceCriteria.id}`)"
+        <PerformanceCriteriaRow
+          :criteria="performanceCriteria"
           :show-state="true"
-          :unit-url="performanceCriteria.learning_unit.slug"
-          :unit="performanceCriteria.pc_id"
-          :title="performanceCriteria.title"
-          :unit-id="performanceCriteria.learning_unit.id"
-        ></LeistungskriteriumRow>
+        ></PerformanceCriteriaRow>
       </li>
     </ul>
   </div>
diff --git a/client/src/components/competences/CompetenceProgress.vue b/client/src/components/competences/CompetenceProgress.vue
index fdead048..93628f5a 100644
--- a/client/src/components/competences/CompetenceProgress.vue
+++ b/client/src/components/competences/CompetenceProgress.vue
@@ -1,12 +1,37 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 const props = defineProps<{
-  total: number;
-  done: number;
-  open: number;
+  statusCount?: {
+    fail: number;
+    success: number;
+    unknown: number;
+  };
 }>();
 
-const done = (100 * props.done) / props.total;
-const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
+const total = computed(() => {
+  return (
+    (props.statusCount?.fail || 0) +
+    (props.statusCount?.success || 0) +
+    (props.statusCount?.unknown || 0)
+  );
+});
+
+const done = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.success || 0) / total.value) * 100;
+});
+
+const notDone = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
+});
 </script>
 
 <template>
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/CompetencesDetailView.vue
index 508ea742..6aea6903 100644
--- a/client/src/pages/CompetencesDetailView.vue
+++ b/client/src/pages/CompetencesDetailView.vue
@@ -1,195 +1,19 @@
 <script setup lang="ts">
 import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
+import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 
 log.debug("CompetencesMainView created");
 
-const competences = [
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    id: 1,
-    criteria: [
-      {
-        id: 341,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        id: 342,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        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: [
-      {
-        id: 341,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        id: 342,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        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: [
-      {
-        id: 341,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        id: 342,
-        title:
-          "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
-        slug: "kompetenzprofil-crit-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",
-      },
-      {
-        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 userProgress = {
-  341: "open",
-  342: "notDone",
-  343: "done",
-};
+const competenceStore = useCompetenceStore();
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
-    <nav>
-      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
-        ><it-icon-arrow-left /><span>zurück</span></a
+  <div class="container-large">
+    <nav class="lg:mt-4">
+      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
+        <it-icon-arrow-left />
+        <span>zurück</span></a
       >
     </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
@@ -198,16 +22,13 @@ const userProgress = {
       <!--        v-model="dropdownSelected"-->
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
-    <ul>
+    <ul v-if="competenceStore.competenceProfilePage">
       <li
-        v-for="competence in competences"
+        v-for="competence in competenceStore.competenceProfilePage.children"
         :key="competence.id"
         class="bg-white p-8 mb-8"
       >
-        <CompetenceDetail
-          :competence="competence"
-          :user-progress="userProgress"
-        ></CompetenceDetail>
+        <CompetenceDetail :competence="competence"></CompetenceDetail>
       </li>
     </ul>
   </div>

From 6f491ef6616ac5ba078285f421fea1b7a8414073 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 16:32:07 +0200
Subject: [PATCH 14/18] Refactor competence main view

---
 .../competences/CompetenceDetail.vue          | 25 +++------
 client/src/pages/CompetencesMainView.vue      | 54 ++++++++++++-------
 client/src/stores/competence.ts               | 21 +++++++-
 client/src/types.ts                           |  1 +
 4 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index a000bab8..e080236a 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
-import _ from "lodash";
 import { ref } from "vue";
 
+const competenceStore = useCompetenceStore();
+
 const props = defineProps<{
   competence: CompetencePage;
 }>();
@@ -14,23 +16,6 @@ const isOpen = ref(false);
 const togglePerformanceCriteria = () => {
   isOpen.value = !isOpen.value;
 };
-
-const calcStatusCount = () => {
-  if (props.competence) {
-    const grouped = _.groupBy(props.competence.children, "completion_status");
-    return {
-      fail: grouped?.fail?.length || 0,
-      success: grouped?.success?.length || 0,
-      unknown: grouped?.unknown?.length || 0,
-    };
-  }
-
-  return {
-    success: 0,
-    fail: 0,
-    unknown: 0,
-  };
-};
 </script>
 
 <template>
@@ -46,7 +31,9 @@ const calcStatusCount = () => {
           />
         </button>
       </div>
-      <ComptenceProgress :status-count="calcStatusCount()"></ComptenceProgress>
+      <ComptenceProgress
+        :status-count="competenceStore.calcStatusCount(competence.children)"
+      ></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 67a53564..3f7d33ba 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
+import CompetenceProgress from "@/components/competences/CompetenceProgress.vue";
+import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import _ from "lodash";
 import * as log from "loglevel";
@@ -17,16 +18,27 @@ const failedCriteria = computed(() => {
     .slice(0, 3);
 });
 
+const lastUpdatedCompetences = computed(() => {
+  if (competenceStore.competenceProfilePage?.children.length) {
+    return _.orderBy(
+      competenceStore.competenceProfilePage.children,
+      [
+        (competence) => {
+          return (
+            _.maxBy(competence.children, "completion_status_updated_at")
+              ?.completion_status_updated_at || ""
+          );
+        },
+      ],
+      ["desc"]
+    ).slice(0, 3);
+  }
+
+  return [];
+});
+
 const countStatus = computed(() => {
-  const grouped = _.groupBy(
-    competenceStore.flatPerformanceCriteria,
-    "completion_status"
-  );
-  return {
-    fail: grouped?.fail?.length || 0,
-    success: grouped?.success?.length || 0,
-    unknown: grouped?.unknown?.length || 0,
-  };
+  return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria);
 });
 </script>
 
@@ -42,16 +54,18 @@ const countStatus = computed(() => {
       <div>
         <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
         <ul>
-          <!--          <li-->
-          <!--            v-for="competence in lastCompetences"-->
-          <!--            :key="competence.description"-->
-          <!--            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"-->
-          <!--          >-->
-          <!--            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">-->
-          <!--              {{ competence.description }}-->
-          <!--            </p>-->
-          <!--            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>-->
-          <!--          </li>-->
+          <li
+            v-for="competence in lastUpdatedCompetences"
+            :key="competence.id"
+            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
+          >
+            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
+              {{ competence.title }}
+            </p>
+            <CompetenceProgress
+              :status-count="competenceStore.calcStatusCount(competence.children)"
+            ></CompetenceProgress>
+          </li>
         </ul>
         <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
           <span>Alle anschauen</span>
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index 5b6cb9e4..0ab2d9c1 100644
--- a/client/src/stores/competence.ts
+++ b/client/src/stores/competence.ts
@@ -1,6 +1,6 @@
 import { itGet } from "@/fetchHelpers";
 import { useCompletionStore } from "@/stores/completion";
-import type { CompetenceProfilePage } from "@/types";
+import type { CompetenceProfilePage, PerformanceCriteria } from "@/types";
 import _ from "lodash";
 import { defineStore } from "pinia";
 
@@ -37,6 +37,22 @@ export const useCompetenceStore = defineStore({
     },
   },
   actions: {
+    calcStatusCount(criteria: PerformanceCriteria[]) {
+      if (criteria) {
+        const grouped = _.groupBy(criteria, "completion_status");
+        return {
+          fail: grouped?.fail?.length || 0,
+          success: grouped?.success?.length || 0,
+          unknown: grouped?.unknown?.length || 0,
+        };
+      }
+
+      return {
+        success: 0,
+        fail: 0,
+        unknown: 0,
+      };
+    },
     async loadCompetenceProfilePage(slug: string, reload = false) {
       if (this.competenceProfilePage && !reload) {
         await this.parseCompletionData();
@@ -68,8 +84,11 @@ export const useCompetenceStore = defineStore({
               );
               if (completion) {
                 performanceCriteria.completion_status = completion.completion_status;
+                performanceCriteria.completion_status_updated_at =
+                  completion.updated_at;
               } else {
                 performanceCriteria.completion_status = "unknown";
+                performanceCriteria.completion_status_updated_at = "";
               }
             });
           });
diff --git a/client/src/types.ts b/client/src/types.ts
index 64bfc94a..38281960 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -122,6 +122,7 @@ export interface CourseWagtailPage {
   readonly translation_key: string;
   readonly frontend_url: string;
   completion_status: CourseCompletionStatus;
+  completion_status_updated_at: string;
 }
 
 export interface LearningContent extends CourseWagtailPage {

From d42b32ef30a5fc26f404d79e128e6c0a7c0c468c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 16:41:16 +0200
Subject: [PATCH 15/18] Refactor navigation with competence profile

---
 client/src/components/MainNavigationBar.vue | 16 ++++++++--------
 client/src/router/index.ts                  |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index b0d232a9..c3f0d358 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -28,12 +28,12 @@ function isInRoutePath(checkPaths: string[]) {
   return checkPaths.some((path) => route.path.startsWith(path));
 }
 
-function inLearningPath() {
-  return isInRoutePath(["/learn/"]);
+function inCourse() {
+  return isInRoutePath(["/learn", "/competence"]);
 }
 
 function getLearningPathStringProp(prop: "title" | "slug"): string {
-  return inLearningPath() && learningPathStore.learningPath
+  return inCourse() && learningPathStore.learningPath
     ? learningPathStore.learningPath[prop]
     : "";
 }
@@ -144,19 +144,19 @@ const profileDropdownData = [
             class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0"
           >
             <router-link
-              v-if="inLearningPath()"
+              v-if="inCourse()"
               to="/learn/versicherungsvermittlerin-lp"
               class="nav-item"
-              :class="{ 'nav-item--active': inLearningPath() }"
+              :class="{ 'nav-item--active': isInRoutePath(['/learn']) }"
             >
               Lernpfad
             </router-link>
 
             <router-link
-              v-if="inLearningPath()"
-              to="/competences/"
+              v-if="inCourse()"
+              to="/competence/versicherungsvermittlerin-competence"
               class="nav-item"
-              :class="{ 'nav-item--active': isInRoutePath(['/competences/']) }"
+              :class="{ 'nav-item--active': isInRoutePath(['/competence']) }"
             >
               Kompetenzprofil
             </router-link>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9d0db13e..3609707b 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -58,7 +58,7 @@ const router = createRouter({
       component: () => import("@/pages/ComptencesView.vue"),
       children: [
         {
-          path: "overview",
+          path: "",
           component: () => import("@/pages/CompetencesMainView.vue"),
         },
         {

From ebfeec41841a1dfef1cdc59c9529a42af570f575 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 17:08:55 +0200
Subject: [PATCH 16/18] Refactor competence profile

---
 .../competences/CompetenceDetail.vue          |  4 ++-
 .../competences/PerformanceCriteriaRow.vue    |  4 ++-
 .../learningPath/SelfEvaluation.vue           |  4 ++-
 .../CompetenceIndexPage.vue}                  | 26 ++++++++++----
 .../CompetenceListPage.vue}                   |  5 ++-
 .../CompetenceParentPage.vue}                 |  2 +-
 .../PerformanceCriteriaPage.vue}              |  7 ++--
 client/src/router/index.ts                    | 12 +++----
 .../create_default_competence_profile.py      | 34 +++++++++----------
 server/vbv_lernwelt/competence/models.py      |  3 ++
 10 files changed, 64 insertions(+), 37 deletions(-)
 rename client/src/pages/{CompetencesMainView.vue => competence/CompetenceIndexPage.vue} (85%)
 rename client/src/pages/{CompetencesDetailView.vue => competence/CompetenceListPage.vue} (88%)
 rename client/src/pages/{ComptencesView.vue => competence/CompetenceParentPage.vue} (93%)
 rename client/src/pages/{CompetencePerfomanceCriteriaView.vue => competence/PerformanceCriteriaPage.vue} (93%)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index e080236a..67998432 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -22,7 +22,9 @@ const togglePerformanceCriteria = () => {
   <div>
     <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
-        <h2 class="text-large">{{ competence.title }}</h2>
+        <h2 class="text-large">
+          {{ competence.competence_id }} {{ competence.title }}
+        </h2>
         <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
           <it-icon-arrow-down
             class="h-10 w-10"
diff --git a/client/src/components/competences/PerformanceCriteriaRow.vue b/client/src/components/competences/PerformanceCriteriaRow.vue
index caa676f4..464b171b 100644
--- a/client/src/components/competences/PerformanceCriteriaRow.vue
+++ b/client/src/components/competences/PerformanceCriteriaRow.vue
@@ -25,7 +25,9 @@ const props = withDefaults(defineProps<Props>(), {
         <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
       </div>
       <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
-        <h4 class="text-bold mb-2">{{ criteria.title }}</h4>
+        <h4 class="text-bold mb-2">
+          {{ criteria.competence_id }} {{ criteria.title }}
+        </h4>
         <p>
           Lerneinheit:
           <a class="link" :href="criteria.learning_unit.frontend_url">
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index be53ba5b..d8c216bf 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -72,7 +72,9 @@ function handleContinue() {
       </p>
 
       <div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
-        <h2 class="heading-2">{{ currentQuestion.title }}</h2>
+        <h2 class="heading-2">
+          {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
+        </h2>
 
         <div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
           <button
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/competence/CompetenceIndexPage.vue
similarity index 85%
rename from client/src/pages/CompetencesMainView.vue
rename to client/src/pages/competence/CompetenceIndexPage.vue
index 3f7d33ba..58202c37 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -6,7 +6,7 @@ import _ from "lodash";
 import * as log from "loglevel";
 import { computed } from "vue";
 
-log.debug("CompetencesMainView created");
+log.debug("CompetenceIndexPage created");
 
 const competenceStore = useCompetenceStore();
 
@@ -43,8 +43,11 @@ const countStatus = computed(() => {
 </script>
 
 <template>
-  <div class="container-large lg:mt-8">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+  <div class="container-large lg:mt-4">
+    <div
+      v-if="competenceStore.competenceProfilePage"
+      class="flex flex-col lg:flex-row items-center justify-between mb-10"
+    >
       <h1>Kompetenzprofil</h1>
       <!--      <ItDropdownSelect-->
       <!--        v-model="dropdownSelected"-->
@@ -60,14 +63,17 @@ const countStatus = computed(() => {
             class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
           >
             <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
-              {{ competence.title }}
+              {{ competence.competence_id }} {{ competence.title }}
             </p>
             <CompetenceProgress
               :status-count="competenceStore.calcStatusCount(competence.children)"
             ></CompetenceProgress>
           </li>
         </ul>
-        <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+        <router-link
+          :to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`"
+          class="flex items-center"
+        >
           <span>Alle anschauen</span>
           <it-icon-arrow-right></it-icon-arrow-right>
         </router-link>
@@ -104,7 +110,10 @@ const countStatus = computed(() => {
           </div>
         </li>
       </ul>
-      <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+      <router-link
+        :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
+        class="flex items-center"
+      >
         <span>Alle anschauen</span>
         <it-icon-arrow-right></it-icon-arrow-right>
       </router-link>
@@ -123,7 +132,10 @@ const countStatus = computed(() => {
           <PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
         </li>
       </ul>
-      <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
+      <router-link
+        :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
+        class="flex items-center"
+      >
         <span>Alle anschauen</span>
         <it-icon-arrow-right></it-icon-arrow-right>
       </router-link>
diff --git a/client/src/pages/CompetencesDetailView.vue b/client/src/pages/competence/CompetenceListPage.vue
similarity index 88%
rename from client/src/pages/CompetencesDetailView.vue
rename to client/src/pages/competence/CompetenceListPage.vue
index 6aea6903..f8de78c9 100644
--- a/client/src/pages/CompetencesDetailView.vue
+++ b/client/src/pages/competence/CompetenceListPage.vue
@@ -11,7 +11,10 @@ const competenceStore = useCompetenceStore();
 <template>
   <div class="container-large">
     <nav class="lg:mt-4">
-      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
+      <a
+        class="block mb-8 cursor-pointer flex items-center"
+        :href="competenceStore.competenceProfilePage?.frontend_url"
+      >
         <it-icon-arrow-left />
         <span>zurück</span></a
       >
diff --git a/client/src/pages/ComptencesView.vue b/client/src/pages/competence/CompetenceParentPage.vue
similarity index 93%
rename from client/src/pages/ComptencesView.vue
rename to client/src/pages/competence/CompetenceParentPage.vue
index 70406407..aea76a37 100644
--- a/client/src/pages/ComptencesView.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -3,7 +3,7 @@ import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { onMounted } from "vue";
 
-log.debug("CometencesView created");
+log.debug("CompetenceParentPage created");
 
 const props = defineProps<{
   competenceProfilePageSlug: string;
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
similarity index 93%
rename from client/src/pages/CompetencePerfomanceCriteriaView.vue
rename to client/src/pages/competence/PerformanceCriteriaPage.vue
index a22ca4ad..5fc30015 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -20,8 +20,11 @@ const shownCriteria = computed(() => {
 
 <template>
   <div class="container-large">
-    <nav>
-      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
+    <nav class="lg:mt-4">
+      <a
+        class="block mb-8 cursor-pointer flex items-center"
+        :href="`${competenceStore.competenceProfilePage?.frontend_url}`"
+      >
         <it-icon-arrow-left />
         <span>zurück</span></a
       >
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 3609707b..9d799c65 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -55,19 +55,19 @@ const router = createRouter({
     {
       path: "/competence/:competenceProfilePageSlug",
       props: true,
-      component: () => import("@/pages/ComptencesView.vue"),
+      component: () => import("@/pages/competence/CompetenceParentPage.vue"),
       children: [
         {
           path: "",
-          component: () => import("@/pages/CompetencesMainView.vue"),
+          component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
         },
         {
-          path: "detail",
-          component: () => import("@/pages/CompetencesDetailView.vue"),
+          path: "competences",
+          component: () => import("@/pages/competence/CompetenceListPage.vue"),
         },
         {
-          path: "performancecriteria",
-          component: () => import("@/pages/CompetencePerfomanceCriteriaView.vue"),
+          path: "criteria",
+          component: () => import("@/pages/competence/PerformanceCriteriaPage.vue"),
         },
       ],
     },
diff --git a/server/vbv_lernwelt/competence/create_default_competence_profile.py b/server/vbv_lernwelt/competence/create_default_competence_profile.py
index c4491463..242bb288 100644
--- a/server/vbv_lernwelt/competence/create_default_competence_profile.py
+++ b/server/vbv_lernwelt/competence/create_default_competence_profile.py
@@ -373,7 +373,7 @@ def create_default_competence_profile():
         competence_id="B4.2",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -381,7 +381,7 @@ def create_default_competence_profile():
         competence_id="B4.3",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, auf Vorbehalte und/oder Fragen sachlich korrekt und (verhandlungs-)sicher einzugehen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -389,7 +389,7 @@ def create_default_competence_profile():
         competence_id="B4.4",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, nötige Anpassungen flexibel vorzunehmen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -397,7 +397,7 @@ def create_default_competence_profile():
         competence_id="C1.1",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig durch eine Bestandesaufnahme der aktuellen Policen zu prüfen, ob die Leistungen dem Bedarf des Kunden entsprechen",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -405,7 +405,7 @@ def create_default_competence_profile():
         competence_id="C1.2",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, den Kunden bedarfsgerechte Vorschläge für Anpassungen der Versicherungslösung zu unterbreiten (Up-Selling).",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-fahrzeug"
         ),
     )
 
@@ -415,7 +415,7 @@ def create_default_competence_profile():
         competence_id="B3.2",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, eine Unterversicherung, eine Doppel- oder Überversicherung, einen fehlenden Versicherungsschutz und mögliches Optimierungspotential festzustellen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -423,7 +423,7 @@ def create_default_competence_profile():
         competence_id="B4.2",
         title="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=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -431,7 +431,7 @@ def create_default_competence_profile():
         competence_id="B4.3",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, auf Vorbehalte und/oder Fragen sachlich korrekt und (verhandlungs-)sicher einzugehen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -439,7 +439,7 @@ def create_default_competence_profile():
         competence_id="B4.4",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, nötige Anpassungen flexibel vorzunehmen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -447,7 +447,7 @@ def create_default_competence_profile():
         competence_id="C1.2",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, den Kunden bedarfsgerechte Vorschläge für Anpassungen der Versicherungslösung zu unterbreiten (Up-Selling).",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -455,7 +455,7 @@ def create_default_competence_profile():
         competence_id="C1.3",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig aufgrund des Portfolios passende Zusatzprodukte anzubieten (Cross-Selling).",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-lösung-lu-reisen"
         ),
     )
 
@@ -465,7 +465,7 @@ def create_default_competence_profile():
         competence_id="A1.2",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, geeignete Personen wie z.B. Garagisten, Architekten, Treuhänder auf die Vermittlung/Zusammenarbeit anzusprechen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -473,7 +473,7 @@ def create_default_competence_profile():
         competence_id="A4.1",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, Kundendaten in Datenbanken (CRM) korrekt zu erfassen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -481,7 +481,7 @@ def create_default_competence_profile():
         competence_id="B4.6",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, Anträge korrekt auszufüllen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug"
         ),
     )
     PerformanceCriteriaFactory(
@@ -489,7 +489,7 @@ def create_default_competence_profile():
         competence_id="C1.3",
         title="Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, aufgrund des Portfolios passende Zusatzprodukte anzubieten (Cross-Selling).",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-fahrzeug"
         ),
     )
 
@@ -499,7 +499,7 @@ def create_default_competence_profile():
         competence_id="B4.6",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, Anträge korrekt auszufüllen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-reisen"
         ),
     )
     PerformanceCriteriaFactory(
@@ -507,6 +507,6 @@ def create_default_competence_profile():
         competence_id="C3.1",
         title="Innerhalb des Handlungsfelds «Reisen» bin ich fähig, Kunden die Vorgehensweise für die Meldung des Schadens nachvollziehbar zu erläutern und sie bei Bedarf zu unterstützen.",
         learning_unit=LearningUnit.objects.get(
-            slug="versicherungsvermittlerin-lp-circle-analyse-lu-reisen"
+            slug="versicherungsvermittlerin-lp-circle-abschluss-lu-reisen"
         ),
     )
diff --git a/server/vbv_lernwelt/competence/models.py b/server/vbv_lernwelt/competence/models.py
index 370a70bd..ce1b4162 100644
--- a/server/vbv_lernwelt/competence/models.py
+++ b/server/vbv_lernwelt/competence/models.py
@@ -23,6 +23,9 @@ class CompetenceProfilePage(Page):
         )
         super(CompetenceProfilePage, self).full_clean(*args, **kwargs)
 
+    def get_frontend_url(self):
+        return f"/competence/{self.slug}"
+
     @classmethod
     def get_serializer_class(cls):
         return get_it_serializer_class(

From 3c386f31ca25603bfd023f672e600aa8ee582c12 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 17:22:28 +0200
Subject: [PATCH 17/18] Add linking to `evaluate_url` for learning unit

---
 .../competences/PerformanceCriteriaRow.vue    |  2 +-
 client/src/stores/circle.ts                   |  2 +-
 client/src/types.ts                           |  1 +
 server/vbv_lernwelt/competence/serializers.py | 15 ++++--------
 server/vbv_lernwelt/learnpath/models.py       |  4 ++++
 server/vbv_lernwelt/learnpath/serializers.py  | 23 +++++++++++++++++++
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/client/src/components/competences/PerformanceCriteriaRow.vue b/client/src/components/competences/PerformanceCriteriaRow.vue
index 464b171b..0675d5ef 100644
--- a/client/src/components/competences/PerformanceCriteriaRow.vue
+++ b/client/src/components/competences/PerformanceCriteriaRow.vue
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
       </div>
     </div>
     <span class="whitespace-nowrap">
-      <a class="link" :href="criteria.learning_unit.frontend_url">
+      <a class="link" :href="criteria.learning_unit.evaluate_url">
         Sich nochmals einschätzen
       </a>
     </span>
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 9673c25f..3a98342e 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -114,7 +114,7 @@ export const useCircleStore = defineStore({
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
       this.router.push({
-        path: learningUnit.frontend_url,
+        path: learningUnit.evaluate_url,
       });
     },
     closeSelfEvaluation(learningUnit: LearningUnit) {
diff --git a/client/src/types.ts b/client/src/types.ts
index 38281960..c55be659 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -155,6 +155,7 @@ export interface LearningUnitPerformanceCriteria extends CourseWagtailPage {
 export interface LearningUnit extends CourseWagtailPage {
   type: "learnpath.LearningUnit";
   learningContents: LearningContent[];
+  evaluate_url: string;
   minutes: number;
   parentLearningSequence?: LearningSequence;
   parentCircle?: Circle;
diff --git a/server/vbv_lernwelt/competence/serializers.py b/server/vbv_lernwelt/competence/serializers.py
index 5b42311d..3b4d96ef 100644
--- a/server/vbv_lernwelt/competence/serializers.py
+++ b/server/vbv_lernwelt/competence/serializers.py
@@ -2,7 +2,6 @@ from rest_framework import serializers
 
 from vbv_lernwelt.competence.models import PerformanceCriteria
 from vbv_lernwelt.course.serializers import CourseCategorySerializer
-from vbv_lernwelt.learnpath.models import LearningUnit
 from vbv_lernwelt.learnpath.serializer_helpers import get_it_serializer_class
 
 
@@ -27,17 +26,11 @@ class PerformanceCriteriaSerializer(
     course_category = serializers.SerializerMethodField()
 
     def get_learning_unit(self, obj):
-        learning_unit_serializer = get_it_serializer_class(
-            LearningUnit,
-            [
-                "id",
-                "title",
-                "slug",
-                "type",
-                "translation_key",
-            ],
+        from vbv_lernwelt.learnpath.serializers import (
+            LearningUnitPerformanceCriteriaSerializer,
         )
-        return learning_unit_serializer(obj.learning_unit).data
+
+        return LearningUnitPerformanceCriteriaSerializer(obj.learning_unit).data
 
     def get_circle(self, obj):
         return obj.learning_unit.get_parent().specific.title
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index 31a1d794..4564451b 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -250,6 +250,10 @@ class LearningUnit(Page):
         super(LearningUnit, self).full_clean(*args, **kwargs)
 
     def get_frontend_url(self):
+        short_slug = self.slug.replace(f"{self.get_parent().slug}-lu-", "")
+        return f"{self.get_parent().specific.get_frontend_url()}#lu-{short_slug}"
+
+    def get_evaluate_url(self):
         short_slug = self.slug.replace(f"{self.get_parent().slug}-lu-", "")
         return f"{self.get_parent().specific.get_frontend_url()}/evaluate/{short_slug}"
 
diff --git a/server/vbv_lernwelt/learnpath/serializers.py b/server/vbv_lernwelt/learnpath/serializers.py
index 57f1195e..8884663e 100644
--- a/server/vbv_lernwelt/learnpath/serializers.py
+++ b/server/vbv_lernwelt/learnpath/serializers.py
@@ -1,3 +1,5 @@
+from rest_framework.fields import SerializerMethodField
+
 from vbv_lernwelt.competence.serializers import (
     PerformanceCriteriaLearningPathSerializer,
 )
@@ -9,13 +11,34 @@ class LearningUnitSerializer(
     get_it_serializer_class(
         LearningUnit,
         [
+            "evaluate_url",
             "course_category",
             "children",
         ],
     )
 ):
+    evaluate_url = SerializerMethodField()
+
     def get_children(self, obj):
         return [
             PerformanceCriteriaLearningPathSerializer(child).data
             for child in obj.performancecriteria_set.all()
         ]
+
+    def get_evaluate_url(self, obj):
+        return obj.get_evaluate_url()
+
+
+class LearningUnitPerformanceCriteriaSerializer(
+    get_it_serializer_class(
+        LearningUnit,
+        [
+            "evaluate_url",
+            "course_category",
+        ],
+    )
+):
+    evaluate_url = SerializerMethodField()
+
+    def get_evaluate_url(self, obj):
+        return obj.get_evaluate_url()

From d9d741f4c634390fa6cf0c1c3ca550bcdb877294 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 17:32:50 +0200
Subject: [PATCH 18/18] Add back links to media library frontend

---
 .../mediaLibrary/MLCategoryDetailPage.vue     | 175 +++++++++---------
 .../pages/mediaLibrary/MLCategoryLayout.vue   |  39 ----
 .../pages/mediaLibrary/MLMediaListPage.vue    |  83 +++++----
 client/tsconfig.app.json                      |  20 +-
 4 files changed, 143 insertions(+), 174 deletions(-)
 delete mode 100644 client/src/pages/mediaLibrary/MLCategoryLayout.vue

diff --git a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
index 1d822529..d4f8c0ce 100644
--- a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
+++ b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
-import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
@@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
 </script>
 
 <template>
-  <Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
-    <MLCategoryLayout>
-      <template #header>
+  <div
+    v-if="mediaCategory"
+    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+  >
+    <div class="bg-gray-200">
+      <div class="container-large">
+        <nav>
+          <a
+            class="block my-9 cursor-pointer flex items-center"
+            :href="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
+          >
+            <it-icon-arrow-left />
+            <span>zurück</span></a
+          >
+        </nav>
         <div class="flex justify-between">
           <div class="lg:w-6/12">
             <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
@@ -64,91 +75,89 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
             />
           </div>
         </div>
-      </template>
-      <template #body>
-        <section class="mb-20 mt-8 lg:w-2/3">
-          <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
-          <p class="mb-4">{{ mediaCategory.description_text }}</p>
-          <ul>
+      </div>
+    </div>
+    <div class="container-large">
+      <section class="mb-20 mt-8 lg:w-2/3">
+        <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
+        <p class="mb-4">{{ mediaCategory.description_text }}</p>
+        <ul>
+          <li
+            v-for="item in mediaCategory.items"
+            :key="item"
+            class="mb-2 flex items-center"
+          >
+            <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
+            {{ item.value }}
+          </li>
+        </ul>
+      </section>
+
+      <template
+        v-for="content_collection in mediaCategory.body"
+        :key="content_collection.value.title"
+      >
+        <section v-if="content_collection.value?.contents?.length" class="mb-20">
+          <h2 class="mb-4">{{ content_collection.value.title }}</h2>
+          <p class="mb-4 lg:w-2/3">
+            {{ content_collection.value.description }}
+          </p>
+          <ul
+            :class="{
+              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
+                content_collection.value.contents[0].type
+              ),
+              'border-t': !displayAsCard(content_collection.value.contents[0].type),
+              'mb-6': hasMoreItemsForType(
+                content_collection.value.contents[0].type,
+                content_collection.value.contents
+              ),
+            }"
+          >
             <li
-              v-for="item in mediaCategory.items"
-              :key="item"
-              class="mb-2 flex items-center"
+              v-for="mediaItem in getMaxDisplayItemsForType(
+                content_collection.value.contents[0].type,
+                content_collection.value.contents
+              )"
+              :key="mediaItem.id"
             >
-              <it-icon-check
-                class="h-8 w-8 text-sky-500 mr-4 flex-none"
-              ></it-icon-check>
-              {{ item.value }}
+              <LinkCard
+                v-if="displayAsCard(mediaItem.type)"
+                :title="mediaItem.value.title"
+                :icon="mediaItem.value.icon_url"
+                :description="mediaItem.value.description"
+                :url="mediaItem.value.url"
+                :link-text="mediaItem.value.link_display_text"
+                :open-window="mediaItem.value.open_window"
+              />
+              <div v-else class="flex items-center justify-between border-b py-4">
+                <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
+                <media-link
+                  :blank="mediaItem.value.open_window"
+                  :to="mediaItem.value.url"
+                  class="link"
+                  >{{ mediaItem.value.link_display_text }}
+                </media-link>
+              </div>
             </li>
           </ul>
+          <router-link
+            v-if="
+              hasMoreItemsForType(
+                content_collection.value.contents[0].type,
+                content_collection.value.contents
+              )
+            "
+            :to="`${mediaCategory.frontend_url}/media`"
+            class="flex items-center"
+          >
+            <span>Alle anschauen</span>
+            <it-icon-arrow-right></it-icon-arrow-right>
+          </router-link>
         </section>
-
-        <template
-          v-for="content_collection in mediaCategory.body"
-          :key="content_collection.value.title"
-        >
-          <section v-if="content_collection.value?.contents?.length" class="mb-20">
-            <h2 class="mb-4">{{ content_collection.value.title }}</h2>
-            <p class="mb-4 lg:w-2/3">
-              {{ content_collection.value.description }}
-            </p>
-            <ul
-              :class="{
-                'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
-                  content_collection.value.contents[0].type
-                ),
-                'border-t': !displayAsCard(content_collection.value.contents[0].type),
-                'mb-6': hasMoreItemsForType(
-                  content_collection.value.contents[0].type,
-                  content_collection.value.contents
-                ),
-              }"
-            >
-              <li
-                v-for="mediaItem in getMaxDisplayItemsForType(
-                  content_collection.value.contents[0].type,
-                  content_collection.value.contents
-                )"
-                :key="mediaItem.id"
-              >
-                <LinkCard
-                  v-if="displayAsCard(mediaItem.type)"
-                  :title="mediaItem.value.title"
-                  :icon="mediaItem.value.icon_url"
-                  :description="mediaItem.value.description"
-                  :url="mediaItem.value.url"
-                  :link-text="mediaItem.value.link_display_text"
-                  :open-window="mediaItem.value.open_window"
-                />
-                <div v-else class="flex items-center justify-between border-b py-4">
-                  <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
-                  <media-link
-                    :blank="mediaItem.value.open_window"
-                    :to="mediaItem.value.url"
-                    class="link"
-                    >{{ mediaItem.value.link_display_text }}
-                  </media-link>
-                </div>
-              </li>
-            </ul>
-            <router-link
-              v-if="
-                hasMoreItemsForType(
-                  content_collection.value.contents[0].type,
-                  content_collection.value.contents
-                )
-              "
-              :to="`${mediaCategory.frontend_url}/media`"
-              class="flex items-center"
-            >
-              <span>Alle anschauen</span>
-              <it-icon-arrow-right></it-icon-arrow-right>
-            </router-link>
-          </section>
-        </template>
       </template>
-    </MLCategoryLayout>
-  </Teleport>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/client/src/pages/mediaLibrary/MLCategoryLayout.vue b/client/src/pages/mediaLibrary/MLCategoryLayout.vue
deleted file mode 100644
index 2db10c49..00000000
--- a/client/src/pages/mediaLibrary/MLCategoryLayout.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-</script>
-
-<template>
-  <Teleport to="body">
-    <div class="fixed top-0 overflow-y-scroll bg-white h-full w-full">
-      <div class="bg-gray-200">
-        <div class="container-large">
-          <nav>
-            <a
-              class="block my-9 cursor-pointer flex items-center"
-              @click="router.go(-1)"
-            >
-              <it-icon-arrow-left />
-              <span>zurück</span></a
-            >
-          </nav>
-          <slot name="header"></slot>
-        </div>
-      </div>
-      <div class="container-large">
-        <slot name="body"></slot>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.it-icon-hf {
-  color: blue;
-}
-
-.it-icon-hf > * {
-  @apply m-auto;
-}
-</style>
diff --git a/client/src/pages/mediaLibrary/MLMediaListPage.vue b/client/src/pages/mediaLibrary/MLMediaListPage.vue
index 980b8502..e62bc3f4 100644
--- a/client/src/pages/mediaLibrary/MLMediaListPage.vue
+++ b/client/src/pages/mediaLibrary/MLMediaListPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
-import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
@@ -35,44 +34,56 @@ const mediaList = computed(() => {
 </script>
 
 <template>
-  <Teleport v-if="mediaList" to="body">
-    <MLCategoryLayout>
-      <template #header>
+  <div
+    v-if="mediaCategory"
+    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+  >
+    <div class="bg-gray-200">
+      <div class="container-large">
+        <nav>
+          <a
+            class="block my-9 cursor-pointer flex items-center"
+            :href="mediaStore.mediaLibraryPage.frontend_url"
+          >
+            <it-icon-arrow-left />
+            <span>zurück</span></a
+          >
+        </nav>
         <h1 class="mb-4">{{ mediaList.title }}</h1>
-      </template>
-      <template #body>
-        <section class="mb-20">
-          <ul class="border-t">
-            <li
-              v-for="item in mediaList.contents"
-              :key="item.id"
-              class="flex items-center justify-between border-b py-4"
-            >
-              <div class="flex items-center justify-between">
-                <div v-if="item.value.icon_url">
-                  <img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
-                </div>
-                <div>
-                  <h4 class="text-bold">{{ item.value.title }}</h4>
-                  <p v-if="item.value.description" class="mb-2">
-                    {{ item.value.description }}
-                  </p>
-                </div>
+      </div>
+    </div>
+    <div class="container-large">
+      <section class="mb-20">
+        <ul class="border-t">
+          <li
+            v-for="item in mediaList.contents"
+            :key="item.id"
+            class="flex items-center justify-between border-b py-4"
+          >
+            <div class="flex items-center justify-between">
+              <div v-if="item.value.icon_url">
+                <img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
               </div>
-              <div class="">
-                <media-link
-                  :to="item.value.url"
-                  :blank="item.value.open_window"
-                  class="link"
-                  >{{ item.value.link_display_text }}
-                </media-link>
+              <div>
+                <h4 class="text-bold">{{ item.value.title }}</h4>
+                <p v-if="item.value.description" class="mb-2">
+                  {{ item.value.description }}
+                </p>
               </div>
-            </li>
-          </ul>
-        </section>
-      </template>
-    </MLCategoryLayout>
-  </Teleport>
+            </div>
+            <div class="">
+              <media-link
+                :to="item.value.url"
+                :blank="item.value.open_window"
+                class="link"
+                >{{ item.value.link_display_text }}
+              </media-link>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index 00819462..0d2e0c18 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -1,27 +1,15 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": [
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ],
-  "exclude": [
-    "src/**/__tests__/*"
-  ],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "lib": [
-      "ES2021",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "composite": true,
     "strict": true,
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
 }