From 6f491ef6616ac5ba078285f421fea1b7a8414073 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 16:32:07 +0200
Subject: [PATCH] Refactor competence main view

---
 .../competences/CompetenceDetail.vue          | 25 +++------
 client/src/pages/CompetencesMainView.vue      | 54 ++++++++++++-------
 client/src/stores/competence.ts               | 21 +++++++-
 client/src/types.ts                           |  1 +
 4 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index a000bab8..e080236a 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
-import _ from "lodash";
 import { ref } from "vue";
 
+const competenceStore = useCompetenceStore();
+
 const props = defineProps<{
   competence: CompetencePage;
 }>();
@@ -14,23 +16,6 @@ const isOpen = ref(false);
 const togglePerformanceCriteria = () => {
   isOpen.value = !isOpen.value;
 };
-
-const calcStatusCount = () => {
-  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>
@@ -46,7 +31,9 @@ const calcStatusCount = () => {
           />
         </button>
       </div>
-      <ComptenceProgress :status-count="calcStatusCount()"></ComptenceProgress>
+      <ComptenceProgress
+        :status-count="competenceStore.calcStatusCount(competence.children)"
+      ></ComptenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 67a53564..3f7d33ba 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
+import CompetenceProgress from "@/components/competences/CompetenceProgress.vue";
+import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import _ from "lodash";
 import * as log from "loglevel";
@@ -17,16 +18,27 @@ const failedCriteria = computed(() => {
     .slice(0, 3);
 });
 
+const lastUpdatedCompetences = computed(() => {
+  if (competenceStore.competenceProfilePage?.children.length) {
+    return _.orderBy(
+      competenceStore.competenceProfilePage.children,
+      [
+        (competence) => {
+          return (
+            _.maxBy(competence.children, "completion_status_updated_at")
+              ?.completion_status_updated_at || ""
+          );
+        },
+      ],
+      ["desc"]
+    ).slice(0, 3);
+  }
+
+  return [];
+});
+
 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,
-  };
+  return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria);
 });
 </script>
 
@@ -42,16 +54,18 @@ const countStatus = computed(() => {
       <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 lastUpdatedCompetences"
+            :key="competence.id"
+            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.title }}
+            </p>
+            <CompetenceProgress
+              :status-count="competenceStore.calcStatusCount(competence.children)"
+            ></CompetenceProgress>
+          </li>
         </ul>
         <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
           <span>Alle anschauen</span>
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index 5b6cb9e4..0ab2d9c1 100644
--- a/client/src/stores/competence.ts
+++ b/client/src/stores/competence.ts
@@ -1,6 +1,6 @@
 import { itGet } from "@/fetchHelpers";
 import { useCompletionStore } from "@/stores/completion";
-import type { CompetenceProfilePage } from "@/types";
+import type { CompetenceProfilePage, PerformanceCriteria } from "@/types";
 import _ from "lodash";
 import { defineStore } from "pinia";
 
@@ -37,6 +37,22 @@ export const useCompetenceStore = defineStore({
     },
   },
   actions: {
+    calcStatusCount(criteria: PerformanceCriteria[]) {
+      if (criteria) {
+        const grouped = _.groupBy(criteria, "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,
+      };
+    },
     async loadCompetenceProfilePage(slug: string, reload = false) {
       if (this.competenceProfilePage && !reload) {
         await this.parseCompletionData();
@@ -68,8 +84,11 @@ export const useCompetenceStore = defineStore({
               );
               if (completion) {
                 performanceCriteria.completion_status = completion.completion_status;
+                performanceCriteria.completion_status_updated_at =
+                  completion.updated_at;
               } else {
                 performanceCriteria.completion_status = "unknown";
+                performanceCriteria.completion_status_updated_at = "";
               }
             });
           });
diff --git a/client/src/types.ts b/client/src/types.ts
index 64bfc94a..38281960 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -122,6 +122,7 @@ export interface CourseWagtailPage {
   readonly translation_key: string;
   readonly frontend_url: string;
   completion_status: CourseCompletionStatus;
+  completion_status_updated_at: string;
 }
 
 export interface LearningContent extends CourseWagtailPage {