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