Implement absence-creation-summary list

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

 <template>
-  <!-- TODO: Hide header -->
+  <!-- MAYBE introduce a minimal variant of CRUDIterator -->
+  <!--       with most features disabled for this list usecase -->
   <c-r-u-d-iterator
+    i18n-key="TODO"
     :gql-query="gqlQuery"
     :gql-additional-query-args="gqlArgs"
+    :enable-search="false"
     :enable-create="false"
     :enable-edit="false"
     :elevated="false"
+    disable-pagination
+    hide-default-footer
     >
     <template #default="{ items }">
       <v-expansion-panels>
@@ -14,10 +19,42 @@
           :key="person.id"
         >
           <v-expansion-panel-header>
-            {{ persons.find((p) => p.id === person.id) }}
+            <div>
+              {{ persons.find((p) => p.id === person.id).fullName }}
+            </div>
+            <v-spacer />
+            <div>
+              <!-- TODO i18 Stunden -->
+              {{ person.lessons.length }} Stunden
+            </div>
           </v-expansion-panel-header>
           <v-expansion-panel-content>
-            TODO
+            <v-divider />
+            <v-list-item
+              v-for="lesson in person.lessons"
+              class="px-0"
+            >
+              <!-- TODO: We should extract this display & share it -->
+              <time  :datetime="lesson.datetimeStart" class="pr-2 text-no-wrap">
+                {{ $d(toDateTime(lesson.datetimeStart), "shortWithWeekday") }}
+              </time>
+              <span>(</span>
+              <time  :datetime="lesson.datetimeStart" class="text-no-wrap">
+                {{ $d(toDateTime(lesson.datetimeStart), "shortTime") }}
+              </time>
+              <span>-</span>
+              <time  :datetime="lesson.datetimeEnd" class="text-no-wrap">
+                {{ $d(toDateTime(lesson.datetimeEnd), "shortTime") }}
+              </time>
+              <span>)</span>
+              <v-spacer />
+              <div class="pr-2">
+                {{ lesson.course.name }}
+              </div>
+              <subject-chip
+                :subject="lesson.subject"
+              />
+            </v-list-item>
           </v-expansion-panel-content>
         </v-expansion-panel>
       </v-expansion-panels>
@@ -27,12 +64,15 @@
 
 <script>
 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";
 
 export default {
   name: "AbsenceCreationSummary",
   components: {
     CRUDIterator,
+    SubjectChip,
   },
   props: {
     persons: {
@@ -62,5 +102,10 @@ export default {
       };
     },
   },
+  methods: {
+    toDateTime(dateString) {
+      return DateTime.fromISO(dateString);
+    },
+  },
 };
 </script>