From 6447843656446d89d5d8b9aca5a63733444ff461 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 5 Aug 2024 16:01:13 +0200
Subject: [PATCH] Add Person count widget (VBV-718)

---
 client/src/components/dashboard/BaseBox.vue   | 16 +++++++----
 .../dashboard/BerufsbildnerStatistics.vue     |  7 +++++
 .../dashboard/MentorMenteeCount.vue           | 28 +++++++++++++------
 .../assignmentsPage/AssignmentDetails.vue     |  5 ++++
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/client/src/components/dashboard/BaseBox.vue b/client/src/components/dashboard/BaseBox.vue
index d0f0310e..eaee5e1d 100644
--- a/client/src/components/dashboard/BaseBox.vue
+++ b/client/src/components/dashboard/BaseBox.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-defineProps<{
-  detailsLink: string;
-}>();
+withDefaults(
+  defineProps<{
+    detailsLink: string;
+    slim?: boolean;
+  }>(),
+  {
+    slim: false,
+  }
+);
 </script>
 
 <template>
-  <div class="flex h-full flex-col space-y-4 bg-white">
+  <div :class="['flex h-full flex-col bg-white', slim ? '' : 'space-y-4']">
     <h4 class="mb-1 font-bold">
       <slot name="title"></slot>
     </h4>
     <slot name="content"></slot>
     <div class="flex-grow"></div>
-    <div class="pt-8">
+    <div class="pt-0">
       <router-link class="underline" :to="detailsLink" data-cy="basebox.detailsLink">
         {{ $t("a.Details anschauen") }}
       </router-link>
diff --git a/client/src/components/dashboard/BerufsbildnerStatistics.vue b/client/src/components/dashboard/BerufsbildnerStatistics.vue
index 57255a25..5228b740 100644
--- a/client/src/components/dashboard/BerufsbildnerStatistics.vue
+++ b/client/src/components/dashboard/BerufsbildnerStatistics.vue
@@ -9,6 +9,7 @@ import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue";
 import BaseBox from "@/components/dashboard/BaseBox.vue";
 import { percentToRoundedGrade } from "@/services/assignmentService";
+import MentorMenteeCount from "@/components/dashboard/MentorMenteeCount.vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -78,5 +79,11 @@ const averageGrade = computed(() => {
         :details-link="`/statistic/berufsbildner/${props.courseSlug}/assignment`"
       />
     </div>
+    <MentorMenteeCount
+      :course-id="props.courseId"
+      :course-slug="props.courseSlug"
+      :count="mentorData.user_selection_ids.length"
+      :slim="true"
+    />
   </div>
 </template>
diff --git a/client/src/components/dashboard/MentorMenteeCount.vue b/client/src/components/dashboard/MentorMenteeCount.vue
index d9a76479..71f047f8 100644
--- a/client/src/components/dashboard/MentorMenteeCount.vue
+++ b/client/src/components/dashboard/MentorMenteeCount.vue
@@ -4,16 +4,27 @@ import { onMounted, ref } from "vue";
 import { fetchMenteeCount } from "@/services/dashboard";
 import BaseBox from "@/components/dashboard/BaseBox.vue";
 
-const props = defineProps<{
-  courseId: string;
-  courseSlug: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    courseId: string;
+    courseSlug: string;
+    slim?: boolean;
+    count?: number;
+  }>(),
+  {
+    count: -1,
+    slim: false,
+  }
+);
 
-const menteeCount: Ref<number> = ref(0);
+const menteeCount: Ref<number> = ref(props.count);
 
 onMounted(async () => {
-  const data = await fetchMenteeCount(props.courseId);
-  menteeCount.value = data?.mentee_count;
+  if (props.count == -1) {
+    menteeCount.value = 0;
+    const data = await fetchMenteeCount(props.courseId);
+    menteeCount.value = data?.mentee_count;
+  }
 });
 </script>
 
@@ -22,10 +33,11 @@ onMounted(async () => {
     <BaseBox
       :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.menteeCount"
+      :slim="props.slim"
     >
       <template #title>{{ $t("a.Personen") }}</template>
       <template #content>
-        <div class="flex flex-row space-x-3 bg-white pb-6">
+        <div :class="['flex flex-row space-x-3 bg-white', slim ? '' : 'pb-6']">
           <div
             class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
           >
diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
index 15df55fd..a7087392 100644
--- a/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
+++ b/client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
@@ -89,6 +89,11 @@ function findUserPointsHtml(userId: string) {
 
 function generateCertificatesLink(userId: string) {
   const parts = props.learningContent.competence_certificate?.frontend_url?.split("/");
+
+  if (!parts) {
+    return "";
+  }
+
   const certificatePart = parts[parts.length - 1];
   return `/course/${props.courseSession.course.slug}/profile/${userId}/competence/certificates/${certificatePart}`;
 }