Refactor competence detail view

client/src/components/competences/CompetenceDetail.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
-import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import type { CompetencePage } from "@/types";
+import _ from "lodash";
 import { ref } from "vue";
 
 const props = defineProps<{
-  competence: object;
+  competence: CompetencePage;
-  userProgress: object;
 }>();
 
 const isOpen = ref(false);
@@ -14,15 +15,29 @@ const togglePerformanceCriteria = () => {
   isOpen.value = !isOpen.value;
 };
 
-const userStateForCriteria = (id: string) =>
+const calcStatusCount = () => {
-  props.userProgress[id] ? props.userProgress[id] : "open";
+  if (props.competence) {
+    const grouped = _.groupBy(props.competence.children, "completion_status");
+    return {
+      fail: grouped?.fail?.length || 0,
+      success: grouped?.success?.length || 0,
+      unknown: grouped?.unknown?.length || 0,
+    };
+  }
+
+  return {
+    success: 0,
+    fail: 0,
+    unknown: 0,
+  };
+};
 </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>
+        <h2 class="text-large">{{ competence.title }}</h2>
         <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
           <it-icon-arrow-down
             class="h-10 w-10"
@@ -31,22 +46,18 @@ const userStateForCriteria = (id: string) =>
           />
         </button>
       </div>
-      <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+      <ComptenceProgress :status-count="calcStatusCount()"></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
-        v-for="performanceCriteria in competence.criteria"
+        v-for="performanceCriteria in competence.children"
-        :key="performanceCriteria.description"
+        :key="performanceCriteria.id"
         class="mb-4 pb-4 border-b border-gray-500"
       >
-        <LeistungskriteriumRow
+        <PerformanceCriteriaRow
-          :state="userStateForCriteria(`${performanceCriteria.id}`)"
+          :criteria="performanceCriteria"
           :show-state="true"
-          :unit-url="performanceCriteria.learning_unit.slug"
+        ></PerformanceCriteriaRow>
-          :unit="performanceCriteria.pc_id"
-          :title="performanceCriteria.title"
-          :unit-id="performanceCriteria.learning_unit.id"
-        ></LeistungskriteriumRow>
       </li>
     </ul>
   </div>

client/src/components/competences/CompetenceProgress.vue

@@ -1,12 +1,37 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 const props = defineProps<{
-  total: number;
+  statusCount?: {
-  done: number;
+    fail: number;
-  open: number;
+    success: number;
+    unknown: number;
+  };
 }>();
 
-const done = (100 * props.done) / props.total;
+const total = computed(() => {
-const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
+  return (
+    (props.statusCount?.fail || 0) +
+    (props.statusCount?.success || 0) +
+    (props.statusCount?.unknown || 0)
+  );
+});
+
+const done = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.success || 0) / total.value) * 100;
+});
+
+const notDone = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
+});
 </script>
 
 <template>

client/src/pages/CompetencesDetailView.vue

@@ -1,195 +1,19 @@
 <script setup lang="ts">
 import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
+import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 
 log.debug("CompetencesMainView created");
 
-const competences = [
+const competenceStore = useCompetenceStore();
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    id: 1,
-    criteria: [
-      {
-        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",
-      },
-    ],
-  },
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    id: 2,
-    criteria: [
-      {
-        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",
-      },
-    ],
-  },
-  {
-    description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
-    id: 3,
-    criteria: [
-      {
-        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",
-};
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl">
+  <div class="container-large">
-    <nav>
+    <nav class="lg:mt-4">
-      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
+      <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
-        ><it-icon-arrow-left /><span>zurück</span></a
+        <it-icon-arrow-left />
+        <span>zurück</span></a
       >
     </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
@@ -198,16 +22,13 @@ const userProgress = {
       <!--        v-model="dropdownSelected"-->
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
-    <ul>
+    <ul v-if="competenceStore.competenceProfilePage">
       <li
-        v-for="competence in competences"
+        v-for="competence in competenceStore.competenceProfilePage.children"
         :key="competence.id"
         class="bg-white p-8 mb-8"
       >
-        <CompetenceDetail
+        <CompetenceDetail :competence="competence"></CompetenceDetail>
-          :competence="competence"
-          :user-progress="userProgress"
-        ></CompetenceDetail>
       </li>
     </ul>
   </div>