Make subject field editable

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

@@ -146,6 +146,13 @@ mutation createOrUpdateDocumentations($input: [DocumentationInputType]!) {
         tardiness
         isOptimistic
       }
+      subject {
+        id
+        name
+        shortName
+        colourFg
+        colourBg
+      }
     }
   }
 }

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

 <template>
   <v-card :class="{ 'my-1 full-width': true, 'd-flex flex-column': !compact }">
     <v-card-title v-if="!compact">
-      <lesson-information v-bind="documentationPartProps" />
+      <lesson-information
+        v-bind="{ ...$attrs, ...documentationPartProps }"
+        :is-create="false"
+        :gql-patch-mutation="documentationsMutation"
+      />
     </v-card-title>
 
     <v-card-text

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

 <script setup>
 import DocumentationStatus from "./DocumentationStatus.vue";
 import PersonChip from "aleksis.core/components/person/PersonChip.vue";
+import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
+import SubjectField from "aleksis.apps.cursus/components/SubjectField.vue";
 </script>
 
 <template>
@@ -37,16 +39,29 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
         'justify-start': !largeGrid,
       }"
     >
-      <subject-chip
-        v-if="documentation.subject"
-        :subject="documentation.subject"
-        v-bind="compact ? dialogActivator.attrs : {}"
-        v-on="compact ? dialogActivator.on : {}"
-        :class="{
-          'text-decoration-line-through': documentation.amends?.cancelled,
-        }"
-        :disabled="documentation.amends?.cancelled"
-      />
+      <v-slide-x-transition>
+        <subject-chip
+          v-if="documentation.subject && !subjectField"
+          :subject="documentation.subject"
+          :append-icon="compact ? '' : '$edit'"
+          :disabled="loading"
+          v-bind="compact ? dialogActivator.attrs : {}"
+          v-on="
+            compact
+              ? dialogActivator.on
+              : { click: () => (subjectField = true) }
+          "
+        />
+        <subject-field
+          v-else-if="documentation.canEdit"
+          :value="documentation.subject"
+          :enable-create="false"
+          dense
+          filled
+          hide-details
+          @input="editSubject"
+        />
+      </v-slide-x-transition>
       <subject-chip
         v-if="
           documentation?.amends?.amends?.subject &&
@@ -88,20 +103,38 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
 </template>
 
 <script>
-import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import { DateTime } from "luxon";
+
+import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
+
 import documentationPartMixin from "./documentationPartMixin";
+import documentationCacheUpdateMixin from "./documentationCacheUpdateMixin";
 
 export default {
   name: "LessonInformation",
-  mixins: [documentationPartMixin],
-  components: {
-    SubjectChip,
+  mixins: [
+    createOrPatchMixin,
+    documentationCacheUpdateMixin,
+    documentationPartMixin,
+  ],
+  data() {
+    return {
+      subjectField: false,
+    };
   },
   methods: {
     toDateTime(dateString) {
       return DateTime.fromISO(dateString);
     },
+    editSubject(subject) {
+      this.subjectField = false;
+      this.createOrPatch([
+        {
+          id: this.documentation.id,
+          subject: subject.id,
+        },
+      ]);
+    },
   },
   computed: {
     largeGrid() {

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

@@ -146,10 +146,15 @@ import DocumentationFullDetails from "./DocumentationFullDetails.vue";
 <script>
 import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
 import documentationPartMixin from "./documentationPartMixin";
+import documentationCacheUpdateMixin from "./documentationCacheUpdateMixin";
 
 export default {
   name: "LessonSummary",
-  mixins: [createOrPatchMixin, documentationPartMixin],
+  mixins: [
+    createOrPatchMixin,
+    documentationCacheUpdateMixin,
+    documentationPartMixin,
+  ],
   emits: ["open"],
   data() {
     return {
@@ -161,28 +166,6 @@ export default {
     };
   },
   methods: {
-    handleUpdateAfterCreateOrPatch(itemId) {
-      return (cached, incoming) => {
-        for (const object of incoming) {
-          console.log("summary: handleUpdateAfterCreateOrPatch", object);
-          // Replace the current documentation
-          const index = cached.findIndex(
-            (o) => o[itemId] === this.documentation.id,
-          );
-          // merged with the incoming partial documentation
-          // if creation of proper documentation from dummy one, set ID of documentation currently being edited as oldID so that key in coursebook doesn't change
-          cached[index] = {
-            ...this.documentation,
-            ...object,
-            oldId:
-              this.documentation.id !== object.id
-                ? this.documentation.id
-                : this.documentation.oldId,
-          };
-        }
-        return cached;
-      };
-    },
     handleAppendIconSuccess() {
       this.topicError = null;
       this.appendIcon = "$success";

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

+/**
+ * Mixin to provide the cache update functionality used after creating or patching documentations
+ */
+export default {
+  methods: {
+    handleUpdateAfterCreateOrPatch(itemId) {
+      return (cached, incoming) => {
+        for (const object of incoming) {
+          console.log("summary: handleUpdateAfterCreateOrPatch", object);
+          // Replace the current documentation
+          const index = cached.findIndex(
+            (o) => o[itemId] === this.documentation.id,
+          );
+          // merged with the incoming partial documentation
+          // if creation of proper documentation from dummy one, set ID of documentation currently being edited as oldID so that key in coursebook doesn't change
+          cached[index] = {
+            ...this.documentation,
+            ...object,
+            oldId:
+              this.documentation.id !== object.id
+                ? this.documentation.id
+                : this.documentation.oldId,
+          };
+        }
+        return cached;
+      };
+    },
+  },
+};

aleksis/apps/alsijil/frontend/messages/en.json

@@ -90,6 +90,11 @@
         },
         "absences_exist": "Only show lessons with absent participants"
       },
+      "information": {
+        "subject": {
+          "field": "Edit subject"
+        }
+      },
       "present_number": "{present}/{total} present",
       "no_data": "No lessons for the selected groups and courses in this period",
       "no_results": "No search results for {search}",