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/documentation/Documentation.vue

+<template>
+  <v-card class="my-1 full-width">
+    <v-card-title v-if="!compact">
+      <lesson-information v-bind="documentationPartProps" />
+    </v-card-title>
+
+    <!-- flex-md-row zeile ab medium -->
+    <!-- align-stretch - stretch full-width -->
+    <v-card-text
+      class="full-width d-flex flex-column align-stretch pa-2"
+      :class="{ 'flex-md-row': compact }"
+    >
+      <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+      <lesson-summary
+        :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
+        ref="summary"
+        v-bind="{ ...$attrs, ...documentationPartProps }"
+        :is-create="false"
+        :gql-patch-mutation="documentationsMutation"
+        @open="$emit('open')"
+        @loading="loading = $event"
+        @save="$emit('close')"
+      />
+      <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+    </v-card-text>
+    <v-divider />
+    <v-card-actions v-if="!compact">
+      <v-spacer />
+      <cancel-button v-if="documentation.canEdit" @click="$emit('close')" :disabled="loading" />
+      <save-button v-if="documentation.canEdit" @click="save" :loading="loading" />
+      <cancel-button v-if="!documentation.canEdit" i18n-key="actions.close" @click="$emit('close')"/>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import LessonInformation from "./LessonInformation.vue";
+import LessonSummary from "./LessonSummary.vue";
+import LessonNotes from "./LessonNotes.vue";
+
+import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
+import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
+
+import { createOrUpdateDocumentations } from "../coursebook.graphql";
+
+import documentationPartMixin from "./documentationPartMixin";
+
+export default {
+  name: "Documentation",
+  components: {
+    LessonInformation,
+    LessonSummary,
+    LessonNotes,
+    SaveButton,
+    CancelButton,
+  },
+  emits: ["open", "close"],
+  mixins: [documentationPartMixin],
+  data() {
+    return {
+      loading: false,
+      documentationsMutation: createOrUpdateDocumentations,
+    };
+  },
+  methods: {
+    save() {
+      this.$refs.summary.save();
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.flex-110 {
+  flex: 1 1 0;
+  width: 0;
+}
+</style>