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