Draft: Resolve "[TCC planning] Frontend is incredibly slow with large amounts of entries"

Closes #49

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>
 
@@ -270,7 +252,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 +272,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 +284,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]);
+            }
           }
         }
       }
@@ -491,6 +479,21 @@ 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);
+      });
+    },
   },
   watch: {
     selectedGroups(newValue) {
@@ -499,6 +502,61 @@ export default {
         value: JSON.stringify([group.id]),
       }));
     },
+    editedCourseConfigs: {
+      deep: true,
+      handler(newValue) {
+        if (this.editedCourseConfigsReady) {
+          this.loading = true;
+          this.mutate(
+            updateTimeboundCourseConfigs,
+            {
+              input: newValue,
+            },
+            this.updateCourseConfigs,
+          );
+
+          this.editedCourseConfigs = [];
+          this.loading = false;
+        }
+      },
+    },
+    createdCourseConfigs: {
+      deep: true,
+      handler(newValue) {
+        if (this.createdCourseConfigsReady) {
+          this.loading = true;
+          this.mutate(
+            createTimeboundCourseConfigs,
+            {
+              input: newValue,
+            },
+            this.updateCourseConfigs,
+          );
+
+          this.createdCourseConfigs = [];
+          this.loading = false;
+        }
+      },
+    },
+    createdCourses: {
+      deep: true,
+      handler(newValue) {
+        if (this.createdCoursesReady) {
+          this.loading = true;
+          this.mutate(
+            createCoursesForValidityRange,
+            {
+              input: newValue,
+              validityRange: this.internalValidityRange.id,
+            },
+            this.updateCreatedCourses,
+          );
+
+          this.createdCourses = [];
+          this.loading = false;
+        }
+      },
+    }
   },
   apollo: {
     currentValidityRange: {