From ba7533614de9bd52fd48086fd565f265145da6ad Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 11 Jul 2023 18:13:11 +0200
Subject: [PATCH] Format [Uhr] for single dates

---
 client/src/components/dueDates/DueDatesList.vue             | 6 +++---
 client/src/components/dueDates/DueDatesShortList.vue        | 4 ++--
 client/src/components/dueDates/dueDatesUtils.ts             | 5 +++--
 client/src/pages/DashboardPage.vue                          | 2 +-
 .../learningPath/learningPathPage/LearningPathPage.vue      | 2 +-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/dueDates/DueDatesList.vue b/client/src/components/dueDates/DueDatesList.vue
index f5bf95cb..48aae0cc 100644
--- a/client/src/components/dueDates/DueDatesList.vue
+++ b/client/src/components/dueDates/DueDatesList.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <ul v-if="true">
+    <ul>
       <li
         v-for="dueDate in dueDatesDisplayed"
         :key="dueDate.id"
-        :class="{ 'first:border-t': props.showTopBoarder, 'border-b': true }"
+        :class="{ 'first:border-t': props.showTopBorder, 'border-b': true }"
       >
         <DueDateSingle :due-date="dueDate"></DueDateSingle>
       </li>
@@ -26,7 +26,7 @@ import { computed } from "vue";
 const props = defineProps<{
   maxCount: number;
   dueDates: DueDate[];
-  showTopBoarder: boolean;
+  showTopBorder: boolean;
 }>();
 
 const allDueDates = computed(() => {
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
index e47a5e68..98b908bd 100644
--- a/client/src/components/dueDates/DueDatesShortList.vue
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -3,7 +3,7 @@
     <DueDatesList
       :due-dates="allDueDates"
       :max-count="props.maxCount"
-      :show-top-boarder="props.showTopBoarder"
+      :show-top-border="props.showTopBorder"
     ></DueDatesList>
   </div>
 </template>
@@ -14,7 +14,7 @@ import { useCurrentCourseSession } from "@/composables";
 
 const props = defineProps<{
   maxCount: number;
-  showTopBoarder: boolean;
+  showTopBorder: boolean;
 }>();
 
 const courseSession = useCurrentCourseSession();
diff --git a/client/src/components/dueDates/dueDatesUtils.ts b/client/src/components/dueDates/dueDatesUtils.ts
index dfabaaea..78734c49 100644
--- a/client/src/components/dueDates/dueDatesUtils.ts
+++ b/client/src/components/dueDates/dueDatesUtils.ts
@@ -11,10 +11,10 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
   }
 
   if (!start || (!start.isValid() && end.isValid())) {
-    return `${endDateString} ${getTimeString(end)}`;
+    return `${endDateString} ${getTimeString(end)} ${end.format("[Uhr]")}`;
   }
   if (!end || (!end.isValid() && start.isValid())) {
-    return `${startDateString} ${getTimeString(start)}`;
+    return `${startDateString} ${getTimeString(start)} ${start.format("[Uhr]")}`;
   }
 
   // if start and end are on the same day, dont show the day twice
@@ -23,6 +23,7 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
       end
     )} ${end.format("[Uhr]")}`;
   }
+
   return `${startDateString} ${getTimeString(start)} - ${endDateString} ${getTimeString(
     end
   )}`;
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index c3e806be..78893e11 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/client/src/pages/DashboardPage.vue
@@ -76,7 +76,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
             class="bg-white p-6"
             :due-dates="allDueDates"
             :max-count="10"
-            :show-top-boarder="false"
+            :show-top-border="false"
           ></DueDatesList>
         </div>
       </div>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index eb44ad2b..af505914 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -95,7 +95,7 @@ const changeViewType = (viewType: ViewType) => {
         <div class="text-bold pb-3">
           {{ $t("learningPathPage.nextDueDates") }}
         </div>
-        <DueDatesShortList :max-count="2" :show-top-boarder="true"></DueDatesShortList>
+        <DueDatesShortList :max-count="2" :show-top-border="true"></DueDatesShortList>
       </div>
     </div>