Format [Uhr] for single dates

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(() => {

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();

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

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>

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>