WIP: Add competence detail view

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>

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}%`}"

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">

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>

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'
 

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'),
+        },
       ],
     },
     {