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-2 full-width">
-    <!-- flex-md-row zeile ab medium -->
-    <!-- align-stretch - stretch full-width -->
-    <div
-      class="full-width d-flex flex-column align-stretch"
-      :class="{ 'flex-md-row': 'compact' in $attrs }"
+  <v-card :class="{ 'my-1 full-width': true, 'd-flex flex-column': !compact }">
+    <v-card-title v-if="!compact">
+      <lesson-information v-bind="documentationPartProps" />
+    </v-card-title>
+
+    <v-card-text
+      class="full-width main-body"
+      :class="{
+        vertical: !compact || $vuetify.breakpoint.mobile,
+        'pa-2': compact,
+      }"
     >
-      <lesson-information
-        class="flex-grow-1"
-        :documentation="$attrs.documentation"
-      />
+      <lesson-information v-if="compact" v-bind="documentationPartProps" />
       <lesson-summary
-        class="flex-grow-1"
         ref="summary"
-        v-bind="$attrs"
+        v-bind="{ ...$attrs, ...documentationPartProps }"
         :is-create="false"
         :gql-patch-mutation="documentationsMutation"
         @open="$emit('open')"
         @loading="loading = $event"
         @save="$emit('close')"
       />
-      <lesson-notes class="flex-grow-1" :documentation="$attrs.documentation" />
-    </div>
+      <lesson-notes v-bind="documentationPartProps" />
+    </v-card-text>
+    <v-spacer />
     <v-divider />
-    <v-card-actions v-if="!('compact' in $attrs)">
+    <v-card-actions v-if="!compact">
       <v-spacer />
-      <cancel-button @click="$emit('close')" :disabled="loading" />
-      <save-button @click="save" :loading="loading" />
+      <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>
@@ -41,6 +56,8 @@ import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.v
 
 import { createOrUpdateDocumentations } from "../coursebook.graphql";
 
+import documentationPartMixin from "./documentationPartMixin";
+
 export default {
   name: "Documentation",
   components: {
@@ -51,6 +68,7 @@ export default {
     CancelButton,
   },
   emits: ["open", "close"],
+  mixins: [documentationPartMixin],
   data() {
     return {
       loading: false,
@@ -65,3 +83,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.main-body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+}
+.vertical {
+  grid-template-columns: 1fr;
+}
+</style>