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] 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"),
         },
       ],
     },