Move `compact` and `documentation` props into separate mixin

aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue

@@ -4,24 +4,25 @@
     <!-- align-stretch - stretch full-width -->
     <div
       class="full-width d-flex flex-column align-stretch"
-      :class="{ 'flex-md-row': 'compact' in $attrs }"
+      :class="{ 'flex-md-row': compact }"
     >
-      <lesson-information class="flex-grow-1" :documentation="documentation" />
+      <lesson-information class="flex-grow-1" v-bind="documentationPartProps" />
       <lesson-summary
         class="flex-grow-1"
         ref="summary"
         v-bind="$attrs"
         :documentation="documentation"
+        :compact="compact"
         :is-create="false"
         :gql-patch-mutation="documentationsMutation"
         @open="$emit('open')"
         @loading="loading = $event"
         @save="$emit('close')"
       />
-      <lesson-notes class="flex-grow-1" :documentation="documentation" />
+      <lesson-notes class="flex-grow-1" v-bind="documentationPartProps" />
     </div>
     <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" />
@@ -39,6 +40,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: {
@@ -49,18 +52,13 @@ export default {
     CancelButton,
   },
   emits: ["open", "close"],
+  mixins: [documentationPartMixin],
   data() {
     return {
       loading: false,
       documentationsMutation: createOrUpdateDocumentations,
     };
   },
-  props: {
-    documentation: {
-      type: Object,
-      required: true,
-    },
-  },
   methods: {
     save() {
       this.$refs.summary.save();

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue

@@ -15,18 +15,14 @@
 <script>
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import { DateTime } from "luxon";
+import documentationPartMixin from "./documentationPartMixin";
 
 export default {
   name: "LessonInformation",
+  mixins: [documentationPartMixin],
   components: {
     SubjectChip,
   },
-  props: {
-    documentation: {
-      type: Object,
-      required: true,
-    },
-  },
   methods: {
     toDateTime(dateString) {
       return DateTime.fromISO(dateString);

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue

@@ -30,14 +30,11 @@
 </template>
 
 <script>
+import documentationPartMixin from "./documentationPartMixin";
+
 export default {
   name: "LessonNotes",
-  props: {
-    documentation: {
-      type: Object,
-      required: true,
-    },
-  },
+  mixins: [documentationPartMixin],
 };
 </script>
 

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue

@@ -82,21 +82,11 @@
 
 <script>
 import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
+import documentationPartMixin from "./documentationPartMixin";
 
 export default {
   name: "LessonSummary",
-  mixins: [createOrPatchMixin],
-  props: {
-    documentation: {
-      type: Object,
-      required: true,
-    },
-    compact: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
+  mixins: [createOrPatchMixin, documentationPartMixin],
   emits: ["open"],
   data() {
     return {

aleksis/apps/alsijil/frontend/components/coursebook/documentation/documentationPartMixin.js

+/**
+ * Mixin to provide common fields for all components specific to a singular documentation inside the coursebook
+ */
+export default {
+    props: {
+        /**
+         * The documentation in question
+         */
+        documentation: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * Whether the documentation is currently in the compact mode (meaning coursebook row)
+         */
+        compact: {
+            type: Boolean,
+            required: false,
+            default: false,
+        }
+    },
+
+    computed: {
+        /**
+         * All necessary props bundled together to easily pass to child components
+         * @returns {{compact: Boolean, documentation: Object}}
+         */
+        documentationPartProps() {
+            return {
+                documentation: this.documentation,
+                compact: this.compact,
+            }
+        }
+    }
+};