From 66220cdfcb49e58c605aa76b9ead72b5c3124c98 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Apr 2024 15:29:46 +0200
Subject: [PATCH] WIP: Use Basebox

---
 client/src/components/dashboard/BaseBox.vue   |  2 +-
 .../dashboard/MentorCompetenceSummary.vue     | 40 ++++++++++---------
 .../dashboard/MentorMenteeCount.vue           | 26 +++++++-----
 .../dashboard/MentorOpenTasksCount.vue        | 24 ++++++-----
 4 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/client/src/components/dashboard/BaseBox.vue b/client/src/components/dashboard/BaseBox.vue
index e8c3aec3..f05a0bc9 100644
--- a/client/src/components/dashboard/BaseBox.vue
+++ b/client/src/components/dashboard/BaseBox.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col space-y-4 bg-white p-6">
+  <div class="flex flex-col space-y-4 bg-white">
     <h4 class="mb-1 font-bold">
       <slot name="title"></slot>
     </h4>
diff --git a/client/src/components/dashboard/MentorCompetenceSummary.vue b/client/src/components/dashboard/MentorCompetenceSummary.vue
index 4a06a135..1de419b6 100644
--- a/client/src/components/dashboard/MentorCompetenceSummary.vue
+++ b/client/src/components/dashboard/MentorCompetenceSummary.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref, Ref } from "vue";
 import { fetchMentorCompetenceSummary } from "@/services/dashboard";
 import { AssignmentsStatisticsType } from "@/gql/graphql";
+import BaseBox from "@/components/dashboard/BaseBox.vue";
 
 const props = defineProps<{
   courseId: string;
@@ -17,23 +18,26 @@ onMounted(async () => {
 
 <template>
   <div v-if="summary" class="w-[325px]">
-    <h3 class="mb-4 text-base">{{ $t("Kompetenznachweise") }}</h3>
-    <div class="flex flex-row space-x-3 bg-white">
-      <div
-        class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
-      >
-        <span>{{ summary.summary.total_passed }}</span>
-      </div>
-      <p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
-    </div>
-    <div class="flex flex-row space-x-3 bg-white pb-6">
-      <div
-        class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
-      >
-        <span>{{ summary.summary.total_failed }}</span>
-      </div>
-      <p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
-    </div>
-    <p>{{ $t("Details anschauen") }}</p>
+    <BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
+      <template #title>{{ $t("Kompetenznachweise") }}</template>
+      <template #content>
+        <div class="flex flex-row space-x-3 bg-white">
+          <div
+            class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
+          >
+            <span>{{ summary.summary.total_passed }}</span>
+          </div>
+          <p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
+        </div>
+        <div class="flex flex-row space-x-3 bg-white pb-6">
+          <div
+            class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
+          >
+            <span>{{ summary.summary.total_failed }}</span>
+          </div>
+          <p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
+        </div>
+      </template>
+    </BaseBox>
   </div>
 </template>
diff --git a/client/src/components/dashboard/MentorMenteeCount.vue b/client/src/components/dashboard/MentorMenteeCount.vue
index 79597ff1..963d2f40 100644
--- a/client/src/components/dashboard/MentorMenteeCount.vue
+++ b/client/src/components/dashboard/MentorMenteeCount.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, Ref } from "vue";
 import { fetchMenteeCount } from "@/services/dashboard";
+import BaseBox from "@/components/dashboard/BaseBox.vue";
 
 const props = defineProps<{
   courseId: string;
@@ -16,15 +17,20 @@ onMounted(async () => {
 
 <template>
   <div class="w-[325px]">
-    <h3 class="mb-4 text-base">{{ $t("Personen") }}</h3>
-    <div class="flex flex-row space-x-3 bg-white pb-6">
-      <div
-        class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
-      >
-        <span>{{ menteeCount }}</span>
-      </div>
-      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Personen, die du begleitest") }}</p>
-    </div>
-    <p>{{ $t("Details anschauen") }}</p>
+    <BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
+      <template #title>{{ $t("Elemente zu erledigen") }}</template>
+      <template #content>
+        <div class="flex flex-row space-x-3 bg-white pb-6">
+          <div
+            class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
+          >
+            <span>{{ menteeCount }}</span>
+          </div>
+          <p class="ml-3 mt-0 leading-[74px]">
+            {{ $t("Personen, die du begleitest") }}
+          </p>
+        </div>
+      </template>
+    </BaseBox>
   </div>
 </template>
diff --git a/client/src/components/dashboard/MentorOpenTasksCount.vue b/client/src/components/dashboard/MentorOpenTasksCount.vue
index 4136cbf4..feb9231f 100644
--- a/client/src/components/dashboard/MentorOpenTasksCount.vue
+++ b/client/src/components/dashboard/MentorOpenTasksCount.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, Ref } from "vue";
 import { fetchOpenTasksCount } from "@/services/dashboard";
+import BaseBox from "@/components/dashboard/BaseBox.vue";
 
 const props = defineProps<{
   courseId: string;
@@ -16,15 +17,18 @@ onMounted(async () => {
 
 <template>
   <div class="w-[325px]">
-    <h3 class="mb-4 text-base">{{ $t("Zu erledigen") }}</h3>
-    <div class="flex flex-row space-x-3 bg-white pb-6">
-      <div
-        class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
-      >
-        <span>{{ openTaskCount }}</span>
-      </div>
-      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
-    </div>
-    <p>{{ $t("Details anschauen") }}</p>
+    <BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
+      <template #title>{{ $t("Zu erledigen") }}</template>
+      <template #content>
+        <div class="flex flex-row space-x-3 bg-white pb-6">
+          <div
+            class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
+          >
+            <span>{{ openTaskCount }}</span>
+          </div>
+          <p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
+        </div>
+      </template>
+    </BaseBox>
   </div>
 </template>