Implement TCC raster autosave

aleksis/apps/lesrooster/frontend/components/timebound_course_config/TimeboundCourseConfigRaster.vue

 <script setup>
 import PositiveSmallIntegerField from "aleksis.core/components/generic/forms/PositiveSmallIntegerField.vue";
-import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
-import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import ValidityRangeField from "../validity_range/ValidityRangeField.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 </script>
@@ -15,7 +13,7 @@ import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
       hide-default-footer
       :headers="headers"
       :items="items"
-      :loading="$apollo.queries.subjects.loading"
+      :loading="loading"
     >
       <template #top>
         <v-row>
@@ -73,22 +71,6 @@ import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
           </v-col>
 
           <v-spacer />
-
-          <v-col
-            cols="4"
-            lg="1"
-            class="d-flex justify-space-between flex-wrap align-center"
-          >
-            <save-button
-              :disabled="
-                !editedCourseConfigs.length &&
-                !createdCourseConfigs.length &&
-                !createdCourses.length
-              "
-              :loading="loading"
-              @click="save"
-            />
-          </v-col>
         </v-row>
       </template>
 
@@ -237,7 +219,6 @@ export default {
       createdCourses: [],
       currentCourse: null,
       currentSubject: null,
-      loading: false,
       includeChildGroups: true,
       selectedGroupHeaders: [],
       items: [],
@@ -270,7 +251,9 @@ export default {
             ...newValue,
           });
         } else {
-          Object.assign(existingCreatedCourse, newValue);
+          for (const key in newValue) {
+            this.$set(existingCreatedCourse, key, newValue[key]);
+          }
         }
       } else {
         if (!course.lrTimeboundCourseConfigs?.length) {
@@ -288,7 +271,9 @@ export default {
               ...newValue,
             });
           } else {
-            Object.assign(existingCreatedCourseConfig, newValue);
+            for (const key in newValue) {
+              this.$set(existingCreatedCourseConfig, key, newValue[key]);
+            }
           }
         } else {
           let courseConfigID = course.lrTimeboundCourseConfigs[0].id;
@@ -298,7 +283,9 @@ export default {
           if (!existingEditedCourseConfig) {
             this.editedCourseConfigs.push({ id: courseConfigID, ...newValue });
           } else {
-            Object.assign(existingEditedCourseConfig, newValue);
+            for (const key in newValue) {
+              this.$set(existingEditedCourseConfig, key, newValue[key]);
+            }
           }
         }
       }
@@ -335,46 +322,6 @@ export default {
 
       return cachedSubjects;
     },
-    save() {
-      this.loading = true;
-
-      for (let mutationCombination of [
-        {
-          data: this.editedCourseConfigs,
-          mutation: updateTimeboundCourseConfigs,
-          updateCacheHandler: this.updateCourseConfigs,
-        },
-        {
-          data: this.createdCourseConfigs,
-          mutation: createTimeboundCourseConfigs,
-          updateCacheHandler: this.updateCourseConfigs,
-        },
-        {
-          data: this.createdCourses,
-          mutation: createCoursesForValidityRange,
-          updateCacheHandler: this.updateCreatedCourses,
-        },
-      ]) {
-        if (mutationCombination.data.length) {
-          this.mutate(
-            mutationCombination.mutation,
-            {
-              input: mutationCombination.data,
-              ...(mutationCombination.mutation ===
-                createCoursesForValidityRange && {
-                validityRange: this.internalValidityRange.id,
-              }),
-            },
-            mutationCombination.updateCacheHandler,
-          );
-        }
-      }
-
-      this.editedCourseConfigs = [];
-      this.createdCourseConfigs = [];
-      this.createdCourses = [];
-      this.loading = false;
-    },
     getTeacherList(subjectTeachers) {
       return [
         {
@@ -491,6 +438,27 @@ export default {
     subjectGroupCombinations() {
       return Array.from(this.groupCombinationsSet);
     },
+    createdCoursesReady() {
+      return !!this.createdCourses.length && this.createdCourses.every((c) => {
+        return c?.groups?.length && c.lessonQuota && c.name && c.subject && c?.teachers?.length
+      });
+    },
+    createdCourseConfigsReady() {
+      return !!this.createdCourseConfigs.length && this.createdCourseConfigs.every((c) => {
+        return c.course && c.validityRange && c?.teachers?.length && c.lessonQuota
+      });
+    },
+    editedCourseConfigsReady() {
+      return !!this.editedCourseConfigs.length && this.editedCourseConfigs.every((c) => {
+        return c.id && (c.lessonQuota || c?.teachers?.length);
+      });
+    },
+    expandedQuery() {
+      return {
+        ...this.$apollo.queries.subjects.options,
+        variables: JSON.parse(this.$apollo.queries.subjects.previousVariablesJson),
+      };
+    },
   },
   watch: {
     selectedGroups(newValue) {
@@ -499,6 +467,55 @@ export default {
         value: JSON.stringify([group.id]),
       }));
     },
+    editedCourseConfigs: {
+      deep: true,
+      handler(newValue) {
+        if (this.editedCourseConfigsReady) {
+          this.mutate(
+            updateTimeboundCourseConfigs,
+            {
+              input: newValue,
+            },
+            this.updateCourseConfigs,
+          );
+
+          this.editedCourseConfigs = [];
+        }
+      },
+    },
+    createdCourseConfigs: {
+      deep: true,
+      handler(newValue) {
+        if (this.createdCourseConfigsReady) {
+          this.mutate(
+            createTimeboundCourseConfigs,
+            {
+              input: newValue,
+            },
+            this.updateCourseConfigs,
+          );
+
+          this.createdCourseConfigs = [];
+        }
+      },
+    },
+    createdCourses: {
+      deep: true,
+      handler(newValue) {
+        if (this.createdCoursesReady) {
+          this.mutate(
+            createCoursesForValidityRange,
+            {
+              input: newValue,
+              validityRange: this.internalValidityRange.id,
+            },
+            this.updateCreatedCourses,
+          );
+
+          this.createdCourses = [];
+        }
+      },
+    }
   },
   apollo: {
     currentValidityRange: {
@@ -530,9 +547,10 @@ export default {
           includeChildGroups: this.includeChildGroups,
         };
       },
+      update: data => data.items,
       result({ data }) {
         if (!data) return;
-        this.items = this.generateTableItems(data.subjects);
+        this.items = this.generateTableItems(data.items);
       },
     },
     persons: {

aleksis/apps/lesrooster/frontend/components/timebound_course_config/timeboundCourseConfig.graphql

@@ -104,7 +104,7 @@ query subjects(
   $groups: [ID]
   $includeChildGroups: Boolean!
 ) {
-  subjects: lesroosterExtendedSubjects(
+  items: lesroosterExtendedSubjects(
     orderBy: $orderBy
     filters: $filters
     groups: $groups