Refactor Duedates List to new design

client/src/components/dueDates/DueDateSingle.vue

@@ -1,11 +1,3 @@
-<template>
-  <div class="p-1">
-    <p class="text-bold">{{ props.dueDate.title }}</p>
-    <div>{{ formatDate(props.dueDate.start, props.dueDate.end) }}</div>
-    <a :href="dueDate.url" target="_blank">Details anschauen</a>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { formatDate } from "@/components/dueDates/dueDatesUtils";
 import type { DueDate } from "@/types";
@@ -14,3 +6,21 @@ const props = defineProps<{
   dueDate: DueDate;
 }>();
 </script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="py-2">
+      <a class="text-bold underline" :href="props.dueDate.url" target="_blank">
+        {{ props.dueDate.title }}
+      </a>
+      <p class="text-small text-gray-900">
+        {{ props.dueDate.learning_content_description }}
+        <span v-if="props.dueDate.description !== ''">:</span>
+        {{ props.dueDate.description }}
+      </p>
+    </div>
+    <p>
+      {{ formatDate(props.dueDate.start, props.dueDate.end) }}
+    </p>
+  </div>
+</template>

client/src/components/dueDates/DueDatesList.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <ul v-if="true">
+      <li v-for="dueDate in dueDatesDiplayed" :key="dueDate.id" class="border-b">
+        <DueDateSingle :due-date="dueDate"></DueDateSingle>
+      </li>
+    </ul>
+    <a v-if="allDueDates.length > props.maxCount" href="">Alle Termine anzeigen</a>
+    <div v-else>Keine Termine Vorhanden</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
+import type { DueDate } from "@/types";
+import { computed } from "vue";
+
+const props = defineProps<{
+  maxCount: number;
+  dueDates: DueDate[];
+}>();
+
+const allDueDates = computed(() => {
+  return props.dueDates;
+});
+
+const dueDatesDiplayed = computed(() => {
+  return props.dueDates.slice(0, props.maxCount);
+});
+</script>

client/src/components/dueDates/DueDatesLongList.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="bg-white p-4">
-    <ul v-if="true">
-      <li
-        v-for="dueDate in props.dueDates"
-        :key="dueDate.id"
-        class="flex flex-row border-b py-4"
-      >
-        <p class="text-bold w-60">{{ dueDate.title }}</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>
-      </li>
-    </ul>
-    <div v-else>Keine Termine Vorhanden</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { formatDate, getWeekday } from "@/components/dueDates/dueDatesUtils";
-import type { DueDate } from "@/types";
-
-const props = defineProps<{
-  maxCount: number;
-  dueDates: DueDate[];
-}>();
-</script>

client/src/components/dueDates/DueDatesShortList.vue

@@ -1,28 +1,14 @@
 <template>
-  <div class="w-64">
-    <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>
+    <div>Nächste Termine</div>
+    <DueDatesList :due-dates="allDueDates" max-count="3"></DueDatesList>
   </div>
 </template>
 
 <script lang="ts" setup>
-import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
+import DueDatesList from "@/components/dueDates/DueDatesList.vue";
 import { useCurrentCourseSession } from "@/composables";
 
-// TODO: MaxCount is not working
-const props = defineProps<{
-  maxCount: number;
-}>();
-
 const courseSession = useCurrentCourseSession();
 const allDueDates = courseSession.value.duedates;
-const dueDatesDiplayed = allDueDates.slice(0, props.maxCount);
 </script>

client/src/components/dueDates/dueDatesUtils.ts

@@ -4,9 +4,24 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
   const startDateString = getDateString(start);
   const endDateString = getDateString(end);
 
+  // if start isundefined, dont show the day twice
+
+  if (!start.isValid() && !end.isValid()) {
+    return "Termin nicht festgelegt";
+  }
+
+  if (!start || (!start.isValid() && end.isValid())) {
+    return `${endDateString} ${getTimeString(end)}`;
+  }
+  if (!end || (!end.isValid() && start.isValid())) {
+    return `${startDateString} ${getTimeString(start)}`;
+  }
+
   // if start and end are on the same day, dont show the day twice
   if (startDateString === endDateString) {
-    return `${startDateString} ${getTimeString(start)} - ${getTimeString(end)}`;
+    return `${startDateString} ${getTimeString(start)} - ${getTimeString(
+      end
+    )} ${end.format("[Uhr]")}`;
   }
   return `${startDateString} ${getTimeString(start)} - ${endDateString} ${getTimeString(
     end
@@ -14,11 +29,11 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
 };
 
 const getTimeString = (date: Dayjs) => {
-  return `${date.format("HH:mm")}`;
+  return `${date.format("H:mm")}`;
 };
 
 const getDateString = (date: Dayjs) => {
-  return `${date.format("DD MMM YYYY")}`;
+  return `${date.format("D. MMMM YYYY")}`;
 };
 
 export const getWeekday = (date: Dayjs) => {

client/src/pages/DashboardPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DueDatesLongList from "@/components/dueDates/DueDatesLongList.vue";
+import DueDatesList from "@/components/dueDates/DueDatesList.vue";
 import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
@@ -77,7 +77,11 @@ const getNextStepLink = (courseSession: CourseSession) => {
         </div>
         <div>
           <h3 class="mb-6">Termine</h3>
-          <DueDatesLongList :due-dates="allDueDates" :max-count="10"></DueDatesLongList>
+          <DueDatesList
+            class="bg-white"
+            :due-dates="allDueDates"
+            :max-count="10"
+          ></DueDatesList>
         </div>
       </div>
     </main>

client/src/types.ts

@@ -564,6 +564,8 @@ export type DueDate = {
   start: Dayjs;
   end: Dayjs;
   title: string;
+  learning_content_description: string;
+  description: string;
   url: string;
   course_session: number | null;
   page: number | null;