Resolve "Add simple course book list"

Closes #256 (closed) Closes #63 (closed)

Screenshots

Frontend todos

• Uhrzeit so wie im Mockup
  • Rechtsbuendig @ZugBahnHof
• Kasten nicht höher als input-feld
• fach und subject strukturierter nebeneinander
• Kursnamen irgendwie hervorheben
• datum gleiche einrückung wie das datum
• datum sollte überschrift sein und prominenter gestaltet
• datum braucht Wochentag
• mittlere spalte linksaligned
• Indikator ob Stundenthema richtig gespeichert wurde (@yuha )
  • when hovering over icon & success: show some fancy success message
  • when hovering over icon & error: show error message
• verify that changes are being tracked using revisions (using a mixin in core creating revisions when mutating) (blocked by AlekSIS-Core!1433 (merged))
• Remove outer card
• Move search, group select, ... into an app bar (see also this)
• Bottom sheet for date select should not be full width of screen (@yuha )
• Statusicon am Anfang der Zeile fehlt (#63 (closed) explains the different stati)

aleksis/apps/alsijil/frontend/components/Coursebook.vue

+<template>
+  <c-r-u-d-iterator
+    i18n-key="coursebook"
+    :gql-query="gqlQuery"
+    :gql-additional-query-args="gqlQueryArgs"
+    :enable-create="false"
+    :enable-edit="false"
+    >
+    <template #default="{ items }">
+      <v-card class="my-6 mx-3">
+        <v-list-item
+          v-for="day in groupDocsByDay(items)"
+          two-line
+        >
+          <v-list-item-content>
+            <v-list-item-title>{{ day[0] }}</v-list-item-title>
+            <v-list>
+              <!-- I know slice copies the array. But show me something better. -->
+              <v-list-item v-for="doc in day.slice(1)">
+                <v-card class="my-2">
+                  <v-card-text>{{ doc.id }}</v-card-text>
+                </v-card>
+              </v-list-item>
+            </v-list>
+          </v-list-item-content>
+        </v-list-item>
+      </v-card>
+    </template>
+  </c-r-u-d-iterator>
+</template>
+
+<script>
+import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import gqlDocumentationsForCoursebook from "./coursebook.graphql";
+import { DateTime } from "luxon";
+
+export default {
+  name: "Coursebook",
+  components: {
+    CRUDIterator,
+  },
+  props: {
+    // Either as props OR route params
+    // TODO: Remove default?
+    courseId: {
+      type: [Number, String],
+      required: false,
+      default: 0,
+    },
+    // Next two in ISODate
+    dateStart: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    dateEnd: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      gqlQuery: gqlDocumentationsForCoursebook,
+    };
+  },
+  computed: {
+    gqlQueryArgs() {
+      return {
+        // Assure courseId is a number
+        courseId: Number(this.courseId),
+        dateStart: this.dateStart,
+        dateEnd: this.dateEnd,
+      };
+    },
+  },
+  methods: {
+    groupDocsByDay(docs) {
+      const byDay = docs.reduce(
+        (byDay, doc) => {
+          // This works with dummy. Does actual doc have dateStart instead?
+          const day = DateTime.fromISO(doc.datetimeStart).startOf('day');
+          byDay[day] ??= [];
+          byDay[day].push(doc);
+          return byDay;
+        },
+        {}
+      );
+
+      return Object.keys(byDay).sort().map(key => [key, ...byDay[key]]);
+    },
+  },
+};
+</script>