WIP: Add criteria page

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"

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>

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"

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"

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