From c294f0e35d2f9f9d0b5099074be78b47f4533a80 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 25 Apr 2024 14:18:41 +0200
Subject: [PATCH] VBV-674: Add avatar images to dueDates for lerning mentors

---
 .../src/components/dueDates/DueDateSingle.vue |  9 +++++++
 client/src/composables.ts                     | 24 +++++++++++++++----
 .../pages/dashboard/DashboardPersonsPage.vue  |  2 +-
 client/src/services/dashboard.ts              |  1 +
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index b3261187..ce068271 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -78,6 +78,15 @@ const url = computed(() => {
           {{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
         </div>
       </div>
+      <div v-if="props.dueDate.persons?.length" class="flex gap-2">
+        <div v-for="person in props.dueDate.persons" :key="person.user_id">
+          <img
+            class="inline-block h-11 w-11 rounded-full"
+            :src="person.avatar_url_small || '/static/avatars/myvbv-default-avatar.png'"
+            :alt="`${person.first_name} ${person.last_name}`"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/client/src/composables.ts b/client/src/composables.ts
index bc924117..043b7ce1 100644
--- a/client/src/composables.ts
+++ b/client/src/composables.ts
@@ -509,7 +509,7 @@ export function useDashboardPersons() {
   const dashboardDueDates = ref<DashboardDueDate[]>([]);
   const loading = ref(false);
 
-  // due dates from today to the next year
+  // due dates from today to future
   const currentDueDates = ref<DashboardDueDate[]>([]);
 
   const fetchData = async () => {
@@ -536,10 +536,24 @@ export function useDashboardPersons() {
           refDate = dayjs(dueDate.end);
         }
 
-        return (
-          refDate >= dayjs().startOf("day") &&
-          refDate <= dayjs().add(1, "year").endOf("day")
-        );
+        return refDate >= dayjs().startOf("day");
+      });
+
+      // attach `LEARNING_MENTEE` to due dates for `LEARNING_MENTOR` persons
+      currentDueDates.value.forEach((dueDate) => {
+        if (dueDate.course_session.my_role === "LEARNING_MENTOR") {
+          dueDate.persons = dashboardPersons.value.filter((person) => {
+            if (
+              person.course_sessions
+                .map((cs) => cs.id)
+                .includes(dueDate.course_session.id)
+            ) {
+              return person.course_sessions.some(
+                (cs) => cs.user_role === "LEARNING_MENTEE"
+              );
+            }
+          });
+        }
       });
     } catch (error) {
       console.error("Error fetching data:", error);
diff --git a/client/src/pages/dashboard/DashboardPersonsPage.vue b/client/src/pages/dashboard/DashboardPersonsPage.vue
index c367db56..68c9b363 100644
--- a/client/src/pages/dashboard/DashboardPersonsPage.vue
+++ b/client/src/pages/dashboard/DashboardPersonsPage.vue
@@ -166,7 +166,7 @@ watch(selectedCourse, () => {
                     person.avatar_url_small ||
                     '/static/avatars/myvbv-default-avatar.png'
                   "
-                  :alt="person.last_name"
+                  :alt="`${person.first_name} ${person.last_name}`"
                 />
                 <div>
                   <div class="text-bold">
diff --git a/client/src/services/dashboard.ts b/client/src/services/dashboard.ts
index 7e2fba9d..b0f53853 100644
--- a/client/src/services/dashboard.ts
+++ b/client/src/services/dashboard.ts
@@ -76,6 +76,7 @@ export type DashboardCourseConfigType = {
 export type DashboardDueDate = DueDate & {
   course_session: DashboardPersonCourseSessionType;
   translatedType: string;
+  persons?: DashboardPersonType[];
 };
 
 export const fetchStatisticData = async (