chore: use basebox based boxes for progress page

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>

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

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">
+      <AssignmentProgressSummaryBox
-        <h4 class="mb-1 font-bold">{{ $t("a.Kompetenznachweis-Elemente") }}</h4>
+        :total-assignments="assignment.total_count"
-        <div class="flex items-center">
+        :achieved-points-count="assignment.points_achieved_count"
-          <i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
+        :max-points-count="assignment.points_max_count"
-            <template #NUMBER>
+        :details-link="competenceCertificateUrl"
-              <span class="mr-3 text-4xl font-bold">
+      />
-                {{ assignment.total_count }}
+      <CompetenceSummaryBox
-              </span>
+        :fail-count="competence.fail_count"
-            </template>
+        :success-count="competence.success_count"
-          </i18next>
+        :details-link="competenceCriteriaUrl"
-        </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>
     </div>
   </div>
 </template>

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>