From 639683c06d14b8b02f6205efd4f2f3d90c69523c Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 15 Jun 2023 14:43:47 +0200
Subject: [PATCH] Add DueDatesFrontendComponents

---
 .../dueDates/DueDateSingle.vue}               | 32 +++++++++----------
 .../components/dueDates/DueDatesShortList.vue | 28 ++++++++++++++++
 .../learningPathPage/LearningPathPage.vue     |  4 +--
 3 files changed, 45 insertions(+), 19 deletions(-)
 rename client/src/{pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue => components/dueDates/DueDateSingle.vue} (56%)
 create mode 100644 client/src/components/dueDates/DueDatesShortList.vue

diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue b/client/src/components/dueDates/DueDateSingle.vue
similarity index 56%
rename from client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue
rename to client/src/components/dueDates/DueDateSingle.vue
index 22fb8516..68e6cc1c 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -1,26 +1,20 @@
 <template>
-  <div>
-    <ul>
-      <li v-for="dueDate in dueDates" :key="dueDate.id">
-        <div class="m-3 p-1">
-          <p class="text-bold">{{ dueDate.title }}</p>
-          <div>{{ formatDate(dueDate.start, dueDate.end) }}</div>
-          <a :href="dueDate.url" target="_blank">Details anschauen</a>
-        </div>
-      </li>
-    </ul>
+  <div class="p-1">
+    <p class="text-bold">{{ dueDate.title }}</p>
+    <div>{{ formatDate(dueDate.start, dueDate.end) }}</div>
+    <a :href="dueDate.url" target="_blank">Details anschauen</a>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useCurrentCourseSession } from "@/composables";
+import type { DueDate } from "@/types";
+import { defineProps } from "vue";
 
-defineProps<{}>();
+const props = defineProps<{
+  dueDate: DueDate;
+}>();
 
-const courseSession = useCurrentCourseSession();
-console.log(courseSession.value);
-
-const dueDates = courseSession.value.duedates;
+console.log(props.dueDate);
 
 const formatDate = (start_str, end_str) => {
   const start = new Date(start_str);
@@ -43,6 +37,10 @@ const get_time_string = (date) => {
 };
 
 const get_date_string = (date) => {
-  return date.toLocaleDateString();
+  return date.toLocaleDateString([], {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
 };
 </script>
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
new file mode 100644
index 00000000..1b73f8f2
--- /dev/null
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="dueDate in dueDates" :key="dueDate.id">
+        <SingleDueDate :due-date="dueDate"></SingleDueDate>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
+import { useCurrentCourseSession } from "@/composables";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  maxCount: {
+    type: number;
+    default: 3;
+  };
+}>();
+
+const courseSession = useCurrentCourseSession();
+console.log(props.maxCount);
+
+const dueDates = courseSession.value.duedates.slice(0, 3);
+console.log(courseSession.value.duedates);
+</script>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 4a854672..4fcb1fdc 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LearningPathAppointmentsMock from "@/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue";
+import DueDatesShortList from "@/components/dueDates/DueDatesShortList.vue";
 import LearningPathListView from "@/pages/learningPath/learningPathPage/LearningPathListView.vue";
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
@@ -92,7 +92,7 @@ const changeViewType = (viewType: ViewType) => {
 
       <!-- Right -->
       <div v-if="!useMobileLayout" class="max-w-md">
-        <LearningPathAppointmentsMock></LearningPathAppointmentsMock>
+        <DueDatesShortList></DueDatesShortList>
       </div>
     </div>