chore: use new due date format

client/src/components/dueDates/DueDateSingle.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
-import { formatDueDate } from "@/components/dueDates/dueDatesUtils";
 import type { CourseSession, DueDate } from "@/types";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useTranslation } from "i18next-vue";
+import dayjs from "dayjs";
 
 const props = defineProps<{
   dueDate: DueDate;
   singleLine?: boolean;
 }>();
 
+const { t } = useTranslation();
+const dateType = t(props.dueDate.date_type_translation_key);
+const assignmentType = t(props.dueDate.assignment_type_translation_key);
+
 const courseSessionsStore = useCourseSessionsStore();
 const courseSession = courseSessionsStore.allCourseSessions.find(
   (cs: CourseSession) => cs.id === props.dueDate.course_session
@@ -27,23 +32,30 @@ const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;
     :class="{ 'flex-col': props.singleLine, 'items-center': !props.singleLine }"
   >
     <div class="space-y-1">
-      <div class="text-bold">
+      <div>
         <a class="underline" :href="url">
-          {{ props.dueDate.title }}
+          <span class="text-bold">
+            {{ dayjs(props.dueDate.start).format("D. MMMM YYYY") }}:
+            <template v-if="dateType">
+              {{ dateType }}
+            </template>
+            <template v-else>
+              {{ assignmentType }}
+            </template>
+            {{ " " }}
+          </span>
+          <template v-if="assignmentType && dateType">
+            {{ assignmentType }}:
+            {{ props.dueDate.title }}
+          </template>
+          <template v-else>
+            {{ props.dueDate.title }}
+          </template>
         </a>
       </div>
       <div class="text-small text-gray-900">
-        <div v-if="props.dueDate.date_type_translation_key">
+        <div>{{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»</div>
-          {{ $t(props.dueDate.assignment_type_translation_key) }}:
-          {{ $t(props.dueDate.date_type_translation_key) }}
-        </div>
-        <div v-else>
-          {{ $t(props.dueDate.assignment_type_translation_key) }}
-        </div>
       </div>
     </div>
-    <div>
-      {{ formatDueDate(props.dueDate.start, props.dueDate.end) }}
-    </div>
   </div>
 </template>