From a354650882c764daa7027db8a3972a2567182ba8 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 30 Oct 2023 10:55:42 +0100
Subject: [PATCH] chore: use basebox based boxes for progress page

---
 .../AssignmentProgressSummaryBox.vue          | 48 +++++++++++++
 .../dashboard/CompetenceSummaryBox.vue        |  3 +-
 client/src/pages/dashboard/ProgressPage.vue   | 69 ++++---------------
 client/src/pages/dashboard/StatisticPage.vue  |  1 +
 4 files changed, 64 insertions(+), 57 deletions(-)
 create mode 100644 client/src/components/dashboard/AssignmentProgressSummaryBox.vue

diff --git a/client/src/components/dashboard/AssignmentProgressSummaryBox.vue b/client/src/components/dashboard/AssignmentProgressSummaryBox.vue
new file mode 100644
index 00000000..b76e0b8b
--- /dev/null
+++ b/client/src/components/dashboard/AssignmentProgressSummaryBox.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import ItProgress from "@/components/ui/ItProgress.vue";
+import BaseBox from "@/components/dashboard/BaseBox.vue";
+
+const props = defineProps<{
+  detailsLink: string;
+  totalAssignments: number;
+  achievedPointsCount: number;
+  maxPointsCount: number;
+}>();
+
+const progress = computed(() => ({
+  SUCCESS: props.achievedPointsCount,
+  FAIL: 0,
+  UNKNOWN: props.maxPointsCount - props.achievedPointsCount,
+}));
+</script>
+
+<template>
+  <BaseBox :details-link="detailsLink">
+    <template #title>{{ $t("a.Kompetenznachweis-Elemente") }}</template>
+    <template #content>
+      <div class="flex items-center">
+        <i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
+          <template #NUMBER>
+            <span class="mr-3 text-4xl font-bold">{{ totalAssignments }}</span>
+          </template>
+        </i18next>
+      </div>
+      <div class="flex items-center">
+        <i18next :translation="$t('a.xOfY Punkten erreicht')">
+          <template #xOfY>
+            <span class="mr-3 text-4xl font-bold">
+              {{
+                $t("a.VALUE von MAXIMUM", {
+                  VALUE: props.achievedPointsCount,
+                  MAXIMUM: props.maxPointsCount,
+                })
+              }}
+            </span>
+          </template>
+        </i18next>
+      </div>
+      <ItProgress :status-count="progress"></ItProgress>
+    </template>
+  </BaseBox>
+</template>
diff --git a/client/src/components/dashboard/CompetenceSummaryBox.vue b/client/src/components/dashboard/CompetenceSummaryBox.vue
index 9200831d..18169f9a 100644
--- a/client/src/components/dashboard/CompetenceSummaryBox.vue
+++ b/client/src/components/dashboard/CompetenceSummaryBox.vue
@@ -4,11 +4,12 @@ import BaseBox from "@/components/dashboard/BaseBox.vue";
 defineProps<{
   failCount: number;
   successCount: number;
+  detailsLink: string;
 }>();
 </script>
 
 <template>
-  <BaseBox :details-link="'/statistic/competence'">
+  <BaseBox :details-link="detailsLink">
     <template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
     <template #content>
       <div class="flex items-center">
diff --git a/client/src/pages/dashboard/ProgressPage.vue b/client/src/pages/dashboard/ProgressPage.vue
index f829f55b..f607264b 100644
--- a/client/src/pages/dashboard/ProgressPage.vue
+++ b/client/src/pages/dashboard/ProgressPage.vue
@@ -2,13 +2,14 @@
 import { useDashboardStore } from "@/stores/dashboard";
 import { computed } from "vue";
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
-import ItProgress from "@/components/ui/ItProgress.vue";
 import { getLearningPathUrl } from "@/utils/utils";
 import type {
   CourseProgressType,
   ProgressDashboardAssignmentType,
   ProgressDashboardCompetenceType,
 } from "@/gql/graphql";
+import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
+import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
 
 const dashboardStore = useDashboardStore();
 
@@ -38,12 +39,6 @@ const competence = computed<ProgressDashboardCompetenceType>(
     DEFAULT_COMPETENCE
 );
 
-const assignment_progress = computed(() => ({
-  SUCCESS: assignment.value.points_achieved_count,
-  FAIL: 0,
-  UNKNOWN: assignment.value.points_max_count - assignment.value.points_achieved_count,
-}));
-
 const competenceCertificateUrl = computed(() => {
   return `/course/${courseSlug.value}/competence/certificates?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
 });
@@ -78,55 +73,17 @@ const competenceCriteriaUrl = computed(() => {
       </div>
     </div>
     <div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
-      <div class="flex flex-col space-y-4 bg-white p-6">
-        <h4 class="mb-1 font-bold">{{ $t("a.Kompetenznachweis-Elemente") }}</h4>
-        <div class="flex items-center">
-          <i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
-            <template #NUMBER>
-              <span class="mr-3 text-4xl font-bold">
-                {{ assignment.total_count }}
-              </span>
-            </template>
-          </i18next>
-        </div>
-
-        <div class="flex items-center">
-          <i18next :translation="$t('a.xOfY Punkten erreicht')">
-            <template #xOfY>
-              <span class="mr-3 text-4xl font-bold">
-                {{
-                  $t("a.VALUE von MAXIMUM", {
-                    VALUE: assignment.points_achieved_count,
-                    MAXIMUM: assignment.points_max_count,
-                  })
-                }}
-              </span>
-            </template>
-          </i18next>
-        </div>
-        <ItProgress :status-count="assignment_progress"></ItProgress>
-
-        <router-link class="pt-8 underline" :to="competenceCertificateUrl">
-          {{ $t("a.Details anschauen") }}
-        </router-link>
-      </div>
-
-      <div class="flex flex-col space-y-4 bg-white p-6">
-        <h4 class="mb-1 font-bold">{{ $t("a.Selbsteinschätzungen") }}</h4>
-        <div class="flex items-center space-x-3">
-          <it-icon-smiley-happy class="h-12 w-12"></it-icon-smiley-happy>
-          <span class="text-4xl font-bold">{{ competence.success_count }}</span>
-          <span>{{ $t("a.Ich kann das") }}</span>
-        </div>
-        <div class="flex items-center space-x-3">
-          <it-icon-smiley-thinking class="h-12 w-12"></it-icon-smiley-thinking>
-          <span class="text-4xl font-bold">{{ competence.fail_count }}</span>
-          <span>{{ $t("a.Das muss ich nochmals anschauen") }}</span>
-        </div>
-        <router-link class="pt-8 underline" :to="competenceCriteriaUrl">
-          {{ $t("a.Details anschauen") }}
-        </router-link>
-      </div>
+      <AssignmentProgressSummaryBox
+        :total-assignments="assignment.total_count"
+        :achieved-points-count="assignment.points_achieved_count"
+        :max-points-count="assignment.points_max_count"
+        :details-link="competenceCertificateUrl"
+      />
+      <CompetenceSummaryBox
+        :fail-count="competence.fail_count"
+        :success-count="competence.success_count"
+        :details-link="competenceCriteriaUrl"
+      />
     </div>
   </div>
 </template>
diff --git a/client/src/pages/dashboard/StatisticPage.vue b/client/src/pages/dashboard/StatisticPage.vue
index f836bb98..0e1d29af 100644
--- a/client/src/pages/dashboard/StatisticPage.vue
+++ b/client/src/pages/dashboard/StatisticPage.vue
@@ -59,6 +59,7 @@ const feebackSummary = computed(() => {
       <CompetenceSummaryBox
         :fail-count="competenceSummary.fail_total"
         :success-count="competenceSummary.success_total"
+        details-link="/statistic/competence"
       />
     </div>
   </div>