Resolve "Add absence overview page"

Closes #264 (closed)

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

@@ -14,9 +14,12 @@
       <lesson-information v-if="compact" v-bind="documentationPartProps" />
       <v-spacer />
       <lesson-notes v-bind="documentationPartProps" />
-    </v-card-text>
-    <v-card-text>
-      <participation-list v-bind="documentationPartProps" @select="$emit('selectParticipation', $event)" />
+      <participation-list
+        :include-present="false"
+        class="participation-list"
+        v-bind="documentationPartProps"
+        v-on="selectListeners"
+      />
     </v-card-text>
     <v-spacer />
     <v-divider />
@@ -51,6 +54,7 @@ import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.v
 
 import { createOrUpdateDocumentations } from "../coursebook.graphql";
 
+import selectParticipationMixin from "./selectParticipationMixin.js";
 import documentationPartMixin from "../documentation/documentationPartMixin";
 
 export default {
@@ -62,8 +66,8 @@ export default {
     SaveButton,
     CancelButton,
   },
-  emits: ["open", "close", "selectParticipation"],
-  mixins: [documentationPartMixin],
+  emits: ["open", "close"],
+  mixins: [documentationPartMixin, selectParticipationMixin],
   data() {
     return {
       loading: false,
@@ -84,8 +88,14 @@ export default {
 .main-body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: min-content min-content;
   gap: 1em;
 }
+.participation-list {
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 2;
+}
 .vertical {
   grid-template-columns: 1fr;
 }