WIP Implement StatisticsForGroupTab

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

+<template>
+  <c-r-u-d-table
+    >
+    i18n-key="TODO"
+    :headers="headers"
+    :gql-query="gqlQuery"
+    :gql-additional-query-args="gqlQueryArgs"
+    :enable-create="false"
+    :enable-edit="false"
+    :elevated="false"
+    @items="items = $event"
+  >
+    <template #header="{ }">
+      <thead>
+        <tr>
+          <!-- https://stackoverflow.com/questions/55702916/is-it-possible-to-create-a-multi-line-header-in-a-vuetify-datatable -->
+  </c-r-u-d-table>
+</template>
+
+<script>
+import groupOverviewTabMixin from "aleksis.core/mixins/groupOverviewTabMixin.js";
+import CRUDTable from "aleksis.core/components/generic/CRUDTable.vue";
+
+import { documentationsByGroup } from "./statistics.graphql";
+
+export default {
+  name: "StatisticsForGroupTab",
+  mixins: [groupOverviewTabMixin],
+  components: {
+    CRUDTable,
+  },
+  data() {
+    return {
+      gqlQuery: documentationsByGroup,
+      items: [],
+    };
+  },
+  computed: {
+    headers() {
+      // TODO: i18n
+      {
+        text: "name",
+        value: "fullName",
+      },
+      ...[new Set(this.items.flatMap((person) => {
+        return person.absenceReasons.map((absence) => absence.absenceReason.shortName)
+      }))].map((name) => {
+        return {
+          text: name,
+        };
+      }),
+      ...[new Set(this.items.flatMap((person) => {
+        return person.extraMarks.map((extraMark) => extraMark.extraMark.shortName)
+      }))].map((name) => {
+        return {
+          text: name,
+        };
+      }),
+      {
+        text: "",
+      },
+    },
+    gqlQueryArgs() {
+      const term = this.schoolTerm
+            ? { term: this.schoolTerm.id }
+            : {};
+      return {
+        group: this.group.id,
+        ...term,
+      };
+    },
+  },
+};
+</script>

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

@@ -93,8 +93,7 @@ query statisticsByGroup (
   ) {
   persons {
     id
-    firstName
-    lastName
+    fullName
     ...statistics
     }
   }