Implement documentations for person list and query

This is untested since the backend is missing so far!

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue

 <template>
   <div class="d-flex" style="gap: 4em">
-    <!-- header (close, title, print) -->
+    <!-- TODO: header (close, title, print) -->
     <!-- TODO: flex-grow-1 does a little & flex-shrink-1 does nothing -->
     <div class="flex-grow-1">
       <!-- school-term-select -->
       <school-term-field v-model="schoolTerm" :enable-create="false" />
-      <!-- documentations statistics list -->
+      <!-- documentations for person list -->
       <c-r-u-d-iterator
+        i18n-key="TODO"
+        :gql-query="gqlQuery"
+        :gql-additional-query-args="gqlQueryArgs"
+        :enable-create="false"
+        :enable-edit="false"
+        :elevated="false"
         >
+        <template #item="{ item }">
+          <v-list-item :key="item.id">
+            <v-list-item-content>
+              <v-list-item-title class="d-flex">
+                <!-- date & timeslot -->
+                <time :datetime="item.datetimeStart" class="text-no-wrap">
+                  {{ $d(DateTime.fromISO(item.datetimeStart), "shortDate") }}
+                </time>
+                <time :datetime="item.datetimeStart" class="text-no-wrap">
+                  {{ $d(DateTime.fromISO(item.datetimeStart), "shortTime") }}
+                </time>
+                <span>-</span>
+                <time :datetime="item.datetimeEnd" class="text-no-wrap">
+                  {{ $d(DateTime.fromISO(item.datetimeEnd), "shortTime") }}
+                </time>
+                <!-- teacher -->
+                <person-chip
+                  :person="item.teacher"
+                  no-link
+                />
+                <!-- group -->
+                <div>
+                  {{ item.groupShortName }}
+                </div>
+                <!-- subject -->
+                <subject-chip :subject="item.subject" />
+                <v-spacer />
+                <!-- chips: absences & extraMarks -->
+                <absence-reason-chip
+                  v-for="absence in items.absences"
+                  :absenceReason="absence"
+                />
+                <v-chip
+                  v-for="extraMark in item.extraMarks"
+                  :value="extraMark.id"
+                  :color="extraMark.colourBg"
+                  :text-color="extraMark.colourFg"
+                >
+                  {{ extraMark.name }}
+                </v-chip>
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              item.personalNote
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+        <v-divider></v-divider>
+        </template>
       </c-r-u-d-iterator>
     </div>
     <statistics-for-person-card
@@ -22,13 +76,20 @@
 <script>
 import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField.vue";
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import PersonChip from "aleksis.core/components/person/PersonChip.vue";
+import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import StatisticsForPersonCard from "./StatisticsForPersonCard.vue";
 
+import { documentationsByPerson } from "./statistics.graphql";
+import { DateTime } from "luxon";
+
 export default {
   name: "StatisticsForPersonPage",
   components: {
     SchoolTermField,
     CRUDIterator,
+    PersonChip,
+    SubjectChip,
     StatisticsForPersonCard,
   },
   props: {
@@ -45,7 +106,16 @@ export default {
   data() {
     return {
       schoolTerm: this.schoolTermId,
+      gqlQuery: documentationsByPerson,
     };
   },
+  computed: {
+    gqlQueryArgs() {
+      return {
+        person: this.personId,
+        term: this.schoolTermId,
+      };
+    },
+  },
 };
 </script>

aleksis/apps/alsijil/frontend/components/coursebook/statistics/statistics.graphql

@@ -39,6 +39,50 @@ query statisticsByPerson (
   }
 }
 
+query documentationsByPerson (
+  $person: ID!
+  $term: ID
+) {
+  documentations: documentationsByPerson(
+    person: $person
+    term: $term
+  ) {
+    id
+    datetimeStart
+    datetimeEnd
+    groupShortName
+    teacher {
+      id
+      shortName
+      fullName
+      avatarContentUrl
+    }
+    subject {
+      id
+      name
+      shortName
+      colourFg
+      colourBg
+    }
+    absences {
+      id
+      shortName
+      name
+      colour
+      default
+    }
+    extraMarks {
+      id
+      shortName
+      name
+      colourFg
+      colourBg
+      showInCoursebook
+    }
+    personalNote
+  }
+}
+
 query statisticsByGroup (
   $group: ID!
   $term: ID