From e631cc4d13261de7aabaa3e572c42c8990400ddf Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 19 Jun 2023 17:36:29 +0200
Subject: [PATCH] Add Weekday to long list

---
 .../components/dueDates/DueDatesLongList.vue  |  6 ++++--
 .../components/dueDates/DueDatesShortList.vue | 20 +++++++++++--------
 .../src/components/dueDates/dueDatesUtils.ts  |  4 ++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/src/components/dueDates/DueDatesLongList.vue b/client/src/components/dueDates/DueDatesLongList.vue
index 786b45a3..8c375479 100644
--- a/client/src/components/dueDates/DueDatesLongList.vue
+++ b/client/src/components/dueDates/DueDatesLongList.vue
@@ -7,7 +7,9 @@
         class="flex flex-row border-b py-4"
       >
         <p class="text-bold w-60">{{ dueDate.title }}</p>
-        <p class="grow">{{ formatDate(dueDate.start, dueDate.end) }}</p>
+        <p class="grow">
+          {{ getWeekday(dueDate.end) }}, {{ formatDate(dueDate.start, dueDate.end) }}
+        </p>
         <p class="underline">
           <a :href="dueDate.url" target="_blank">Details anschauen</a>
         </p>
@@ -18,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { formatDate } from "@/components/dueDates/dueDatesUtils";
+import { formatDate, getWeekday } from "@/components/dueDates/dueDatesUtils";
 import type { DueDate } from "@/types";
 
 const props = defineProps<{
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
index 58dae48f..b8c639ba 100644
--- a/client/src/components/dueDates/DueDatesShortList.vue
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="w-64">
-    <ul v-if="dueDates.length != 0">
-      <li v-for="dueDate in dueDates" :key="dueDate.id">
-        <SingleDueDate :due-date="dueDate"></SingleDueDate>
-      </li>
-    </ul>
-    <div v-else>Keine Termine Termine Vorhanden</div>
+    <div v-if="allDueDates.length != 0">
+      <ul>
+        <li v-for="dueDate in dueDatesDiplayed" :key="dueDate.id">
+          <SingleDueDate :due-date="dueDate"></SingleDueDate>
+        </li>
+      </ul>
+      <a v-if="allDueDates.length > props.maxCount" href="">Alle Termine anzeigen</a>
+    </div>
+
+    <div v-else>Keine Termine Vorhanden</div>
   </div>
 </template>
 
@@ -19,6 +23,6 @@ const props = defineProps<{
 }>();
 
 const courseSession = useCurrentCourseSession();
-
-const dueDates = courseSession.value.duedates.slice(0, props.maxCount);
+const allDueDates = courseSession.value.duedates;
+const dueDatesDiplayed = allDueDates.slice(0, props.maxCount);
 </script>
diff --git a/client/src/components/dueDates/dueDatesUtils.ts b/client/src/components/dueDates/dueDatesUtils.ts
index be340135..7535e2fb 100644
--- a/client/src/components/dueDates/dueDatesUtils.ts
+++ b/client/src/components/dueDates/dueDatesUtils.ts
@@ -20,3 +20,7 @@ const getTimeString = (date: Dayjs) => {
 const getDateString = (date: Dayjs) => {
   return `${date.format("DD MMM YYYY")}`;
 };
+
+export const getWeekday = (date: Dayjs) => {
+  return `${date.format("dd")}`;
+};