Add DueDatesLongList to dashboard

client/src/components/dueDates/DueDateSingle.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script lang="ts" setup>
+import { formatDate } from "@/components/dueDates/dueDatesUtils";
 import type { DueDate } from "@/types";
 import { defineProps } from "vue";
 
@@ -15,32 +16,4 @@ const props = defineProps<{
 }>();
 
 console.log(props.dueDate);
-
-const formatDate = (start_str, end_str) => {
-  const start = new Date(start_str);
-  const end = new Date(end_str);
-
-  const startDateString = get_date_string(start);
-  const endDateString = get_date_string(end);
-
-  // if start and end are on the same day, dont show the day twice
-  if (startDateString === endDateString) {
-    return `${startDateString} ${get_time_string(start)} - ${get_time_string(end)}`;
-  }
-  return `${startDateString} ${get_time_string(
-    start
-  )} - ${endDateString} ${get_time_string(end)}`;
-};
-
-const get_time_string = (date) => {
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-};
-
-const get_date_string = (date) => {
-  return date.toLocaleDateString([], {
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-  });
-};
 </script>

client/src/components/dueDates/DueDatesLongList.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="bg-white p-4">
+    <ul v-if="true">
+      <li
+        v-for="dueDate in dueDates"
+        :key="dueDate.id"
+        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="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 { dueDatesTestData } from "@/components/dueDates/DueDatesTestData";
+import { formatDate } from "@/components/dueDates/DueDatesUtils.ts";
+import { useCurrentCourseSession } from "@/composables";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  maxCount: {
+    default: 10;
+    type: number;
+  };
+}>();
+
+const courseSession = useCurrentCourseSession();
+let dueDates = []; //courseSession.value.duedates.slice(0, props.maxCount);
+//
+// if (dueDates.length === 0) {
+//   dueDates = dueDatesTestData;
+// }
+dueDates = dueDatesTestData();
+
+console.log("dueDates: ", dueDates);
+console.log("maxCount: ", props.maxCount);
+</script>

client/src/components/dueDates/DueDatesShortList.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="w-64">
-    <ul>
+    <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>
 </template>
 
@@ -13,16 +14,17 @@ import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
 import { useCurrentCourseSession } from "@/composables";
 import { defineProps } from "vue";
 
+// TODO: MaxCount is not working
 const props = defineProps<{
   maxCount: {
-    type: number;
     default: 3;
+    type: number;
   };
 }>();
 
 const courseSession = useCurrentCourseSession();
 console.log(props.maxCount);
 
-const dueDates = courseSession.value.duedates.slice(0, 3);
+const dueDates = courseSession.value.duedates.slice(0, props.maxCount);
 console.log(courseSession.value.duedates);
 </script>

client/src/components/dueDates/DueDatesTestData.ts

@@ -0,0 +1,58 @@
+export const dueDatesTestData = () => {
+  return [
+    {
+      id: 1,
+      start: "2023-06-14T15:00:00+02:00",
+      end: "2023-06-14T18:00:00+02:00",
+      title: "Präsenzkurs Kickoff",
+      url: "/course/überbetriebliche-kurse/learn/kickoff/präsenzkurs-kickoff",
+      course_session: 2,
+      page: 383,
+    },
+    {
+      id: 2,
+      start: "2023-06-15T15:00:00+02:00",
+      end: "2023-06-15T18:00:00+02:00",
+      title: "Präsenzkurs Basis",
+      url: "/course/überbetriebliche-kurse/learn/basis/präsenzkurs-basis",
+      course_session: 2,
+      page: 397,
+    },
+    {
+      id: 3,
+      start: "2023-06-16T15:00:00+02:00",
+      end: "2023-06-16T18:00:00+02:00",
+      title: "Präsenzkurs Fahrzeug",
+      url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
+      course_session: 2,
+      page: 413,
+    },
+    {
+      id: 4,
+      start: "2023-06-16T15:00:00+02:00",
+      end: "2023-06-16T18:00:00+02:00",
+      title: "Präsenzkurs Flugzeuge",
+      url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
+      course_session: 2,
+      page: 413,
+    },
+    {
+      id: 5,
+      start: "2023-07-16T11:00:00+02:00",
+      end: "2023-07-16T18:00:00+02:00",
+      title: "Präsenzkurs Motorräder",
+      url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
+      course_session: 2,
+      page: 413,
+    },
+    {
+      id: 6,
+      start: "2023-08-09T15:00:00+02:00",
+      end: "2023-08-09T19:00:00+02:00",
+      title: "Präsenzkurs Fahrräder",
+      url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
+      course_session: 2,
+      page: 413,
+    },
+  ];
+};

client/src/components/dueDates/DueDatesUtils.ts

@@ -0,0 +1,27 @@
+export const formatDate = (start_str: string, end_str: string) => {
+  const start = new Date(start_str);
+  const end = new Date(end_str);
+
+  const startDateString = getDateString(start);
+  const endDateString = getDateString(end);
+
+  // 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)} - ${endDateString} ${getTimeString(
+    end
+  )}`;
+};
+
+const getTimeString = (date: Date) => {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+};
+
+const getDateString = (date: Date) => {
+  return date.toLocaleDateString([], {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+};

client/src/pages/DashboardPage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DueDatesLongList from "@/components/dueDates/DueDatesLongList.vue";
 import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
@@ -70,21 +71,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
         </div>
         <div>
           <h3 class="mb-6">Termine</h3>
-          <ul class="bg-white p-4">
+          <DueDatesLongList></DueDatesLongList>
-            <li class="flex flex-row py-4">
-              {{ $t("Zur Zeit sind keine Termine vorhanden") }}
-            </li>
-            <!-- li class="flex flex-row border-b py-4">
-              <p class="text-bold w-60">Austausch mit Trainer</p>
-              <p class="grow">Fr, 24. November 2022, 11 Uhr</p>
-              <p class="underline">Details anschauen</p>
-            </li>
-            <li class="flex flex-row py-4">
-              <p class="text-bold w-60">Vernetzen - Live Session</p>
-              <p class="grow">Di, 4. Dezember 2022, 10.30 Uhr</p>
-              <p class="underline">Details anschauen</p>
-            </li -->
-          </ul>
         </div>
       </div>
     </main>

client/src/types.ts

@@ -560,8 +560,8 @@ export interface UserAssignmentCompletionStatus {
 
 export type DueDate = {
   id: number;
-  start: Date;
+  start: string;
-  end: Date;
+  end: string;
   title: string;
   url: string;
   course_session: number | null;