Improve layout of absence creation summary

aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationSummary.vue

@@ -23,32 +23,39 @@
               </div>
               <v-spacer />
               <div>
-                {{ person.lessons.length }}
-                {{ $t("alsijil.coursebook.absences.lessons") }}
+                {{
+                  $tc(
+                    "alsijil.coursebook.absences.lessons",
+                    person.lessons.length,
+                    { count: person.lessons.length },
+                  )
+                }}
               </div>
             </v-expansion-panel-header>
             <v-expansion-panel-content>
-              <v-divider />
-              <v-list-item v-for="lesson in person.lessons" class="px-0">
+              <v-list-item
+                v-for="lesson in person.lessons"
+                class="px-0"
+                :key="lesson.id"
+              >
                 <!-- TODO: We should extract this display & share it -->
-                <time
-                  :datetime="lesson.datetimeStart"
-                  class="pr-2 text-no-wrap"
-                >
-                  {{ $d(toDateTime(lesson.datetimeStart), "shortWithWeekday") }}
+                <time :datetime="lesson.datetimeStart" class="text-no-wrap">
+                  {{
+                    $d($parseISODate(lesson.datetimeStart), "shortWithWeekday")
+                  }}&nbsp;
                 </time>
                 <span>(</span>
                 <time :datetime="lesson.datetimeStart" class="text-no-wrap">
-                  {{ $d(toDateTime(lesson.datetimeStart), "shortTime") }}
+                  {{ $d($parseISODate(lesson.datetimeStart), "shortTime") }}
                 </time>
                 <span>-</span>
                 <time :datetime="lesson.datetimeEnd" class="text-no-wrap">
-                  {{ $d(toDateTime(lesson.datetimeEnd), "shortTime") }}
+                  {{ $d($parseISODate(lesson.datetimeEnd), "shortTime") }}
                 </time>
                 <span>)</span>
                 <v-spacer />
                 <div class="pr-2">
-                  {{ lesson.course.name }}
+                  {{ lesson.course?.name }}
                 </div>
                 <subject-chip :subject="lesson.subject" />
               </v-list-item>
@@ -57,9 +64,9 @@
         </v-expansion-panels>
       </template>
     </c-r-u-d-iterator>
-    <div class="pt-5 text-subtitle-2">
+    <message-box dense type="warning" class="mt-5">
       {{ $t("alsijil.coursebook.absences.warning") }}
-    </div>
+    </message-box>
   </div>
 </template>
 
@@ -67,7 +74,6 @@
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import { lessonsForPersons } from "./absenceCreation.graphql";
-import { DateTime } from "luxon";
 import loadingMixin from "aleksis.core/mixins/loadingMixin.js";
 
 export default {
@@ -105,10 +111,5 @@ export default {
       };
     },
   },
-  methods: {
-    toDateTime(dateString) {
-      return DateTime.fromISO(dateString);
-    },
-  },
 };
 </script>

aleksis/apps/alsijil/frontend/messages/de.json

@@ -54,7 +54,7 @@
       "absences": {
         "title": "Abwesenheiten erfassen",
         "summary": "Zusammenfassung",
-        "lessons": "Stunden",
+        "lessons": "Keine Stunden | 1 Stunde | {count} Stunden",
         "success": "Die Abwesenheiten wurden erfolgreich erstellt.",
         "warning": "Die Abwesenheiten können mit diesem Menü nicht mehr geändert werden, wenn sie einmal bestätigt wurden."
       }

aleksis/apps/alsijil/frontend/messages/en.json

@@ -80,7 +80,7 @@
       "absences": {
         "title": "Capture absences",
         "summary": "Summary",
-        "lessons": "lessons",
+        "lessons": "No lessons | 1 lesson | {count} lessons",
         "success": "The absences were created successfully.",
         "warning": "Changes are permanent and can not be altered again from this menu once confirmed."
       }