Add Weekday to long list

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

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>

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")}`;
+};