Add backend data to competence profile main page

client/src/pages/CompetencesMainView.vue

@@ -1,196 +1,37 @@
 <script setup lang="ts">
-import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
+import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
-import LeistungskriteriumRow 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 = [
+const competenceStore = useCompetenceStore();
-  {
-    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 summary = {
+const failedCriteria = computed(() => {
-  ok: 325,
+  return competenceStore.flatPerformanceCriteria
-  nok: 32,
+    .filter((criteria) => {
-  open: 28,
+      return criteria.completion_status === "fail";
-};
+    })
+    .slice(0, 3);
+});
 
-const nokCriteria = [
+const countStatus = computed(() => {
-  {
+  const grouped = _.groupBy(
-    id: 341,
+    competenceStore.flatPerformanceCriteria,
-    title:
+    "completion_status"
-      "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",
+  return {
-    type: "competence.PerformanceCriteria",
+    fail: grouped?.fail?.length || 0,
-    translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
+    success: grouped?.success?.length || 0,
-    pc_id: "B1.3 Fahrzeug",
+    unknown: grouped?.unknown?.length || 0,
-    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",
-  },
-];
 </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
+          <!--          <li-->
-            v-for="competence in lastCompetences"
+          <!--            v-for="competence in lastCompetences"-->
-            :key="competence.description"
+          <!--            :key="competence.description"-->
-            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
+          <!--            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">
+          <!--            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">-->
-              {{ competence.description }}
+          <!--              {{ competence.description }}-->
-            </p>
+          <!--            </p>-->
-            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+          <!--            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>-->
-          </li>
+          <!--          </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">
+      <ul
-        <li
+        class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
-          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">«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
+        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
-          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>
+            <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"
+          v-for="criteria in failedCriteria"
-          :key="criteria.title"
+          :key="criteria.id"
           class="mb-4 pb-4 border-b border-gray-500"
         >
-          <LeistungskriteriumRow
+          <PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
-            :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">