Actually save and sort modified course config data

aleksis/apps/lesrooster/frontend/components/TimeboundCourseConfig.vue → aleksis/apps/lesrooster/frontend/components/TimeboundCourseConfigCRUDTable.vue

@@ -150,7 +150,7 @@ import {
 } from "./helper.graphql";
 
 export default {
-  name: "TimeboungCourseConfig",
+  name: "TimeboungCourseConfigCRUDTable",
   data() {
     return {
       headers: [

aleksis/apps/lesrooster/frontend/components/TimeboundCourseConfigTable.vue → aleksis/apps/lesrooster/frontend/components/TimeboundCourseConfigRaster.vue

@@ -2,51 +2,73 @@
 import WeekDayField from "aleksis.core/components/generic/forms/WeekDayField.vue";
 import PositiveSmallIntegerField from "aleksis.core/components/generic/forms/PositiveSmallIntegerField.vue";
 import TimeField from "aleksis.core/components/generic/forms/TimeField.vue";
+import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
 import ValidityRangeField from "./ValidityRangeField.vue";</script>
 
 <template>
   <div>
-    <v-row>
-      <v-col>
-        <validity-range-field
-          solo
-          rounded
-          hide-details
-          v-model="internalValidityRange"
-          :loading="$apollo.queries.currentValidityRange.loading"
-        />
-      </v-col>
-    </v-row>
-    
     <v-row>
       <v-col>
         <v-data-table
+          disable-sort
+          disable-filtering
+          disable-pagination
           :headers="headers"
           :items="tableItems"
         >
+          <template #top>
+            <v-toolbar
+              flat
+            >
+              <validity-range-field
+                solo
+                rounded
+                hide-details
+                v-model="internalValidityRange"
+                :loading="$apollo.queries.currentValidityRange.loading"
+              />
+              <v-divider
+                class="mx-4"
+                inset
+                vertical
+              ></v-divider>
+              <v-spacer></v-spacer>
+              <save-button />
+            </v-toolbar>
+          </template>
           <template v-for="header in headers" #[tableItemSlotName(header)]="{ item, value }">
-            <template v-for="course in value">
-              <v-row>
-                <v-col>
-                  <v-text-field
-                    :value="getCurrentCourseConfig(course) ? getCurrentCourseConfig(course).scheduledSlotCount : course.lessonQuota"
-                    :label="$t('lesrooster.timebound_course_config.scheduled_slot_count')"
-                  />
-                </v-col>
-                <v-col>
-                  <v-autocomplete
-                    multiple
-                    :items="persons"
-                    item-text="fullName"
-                    item-value="id"
-                    chips
-                    deletable-chips
-                    return-object
-                    :label="$t('lesrooster.timebound_course_config.teachers')"
-                    :value="getCurrentCourseConfig(course) ? getCurrentCourseConfig(course).teachers : course.teachers"
-                  />
-                </v-col>
-              </v-row>
+            <template v-for="(course, index) in value">
+              <v-card class="ma-2">
+                <v-card-title>
+                  {{ course.name }}
+                </v-card-title>
+                <v-card-text>
+                  <v-row>
+                    <v-col>
+                      <positive-small-integer-field
+                        dense
+                        :value="getCurrentCourseConfig(course) ? getCurrentCourseConfig(course).scheduledSlotCount : course.lessonQuota"
+                        :label="$t('lesrooster.timebound_course_config.scheduled_slot_count')"
+                        @input="event => setCourseConfigData(course, {scheduledSlotCount: event})"
+                      />
+                    </v-col>
+                    <v-col>
+                      <v-autocomplete
+                        dense
+                        multiple
+                        :items="persons"
+                        item-text="fullName"
+                        item-value="id"
+                        chips
+                        deletable-chips
+                        :label="$t('lesrooster.timebound_course_config.teachers')"
+                        :value="getCurrentCourseConfig(course) ? getCurrentCourseConfig(course).teachers : course.teachers"
+                        @input="event => setCourseConfigData(course, {teachers: event})"
+                      />
+                    </v-col>
+                  </v-row>
+                </v-card-text>
+              </v-card>
             </template>
           </template>
         </v-data-table>
@@ -74,7 +96,7 @@ import {
 } from "./helper.graphql";
 
 export default {
-  name: "TimeboungCourseConfigTable",
+  name: "TimeboungCourseConfigRaster",
   data() {
     return {
       i18nKey: "lesrooster.timebound_course_config",
@@ -100,7 +122,8 @@ export default {
       internalValidityRange: null,
       groups: [],
       subjects: [],
-      innerTableItems: [],
+      editedCourseConfigs: [],
+      createdCourseConfigs: [],
     };
   },
   methods: {
@@ -114,6 +137,24 @@ export default {
         return null;
       }
     },
+    setCourseConfigData(course, newValue) {
+      if (!(course.lrTimeboundCourseConfigs.length)) {
+        let existingCreatedCourseConfig = this.createdCourseConfigs.find(c => c.course === course.id && c.validityRange === this.internalValidityRange?.id);
+        if (!(existingCreatedCourseConfig)) {
+          this.createdCourseConfigs.push({course: course.id, validityRange: this.internalValidityRange?.id, teachers: course.teachers.map(t => t.id), scheduledSlotCount: course.lessonQuota, ...newValue});
+        } else {
+          Object.assign(existingCreatedCourseConfig, newValue);
+        }
+      } else {
+        let courseConfigID = this.course.lrTimeboundCourseConfigs[0].id;
+        let existingEditedCourseConfig = this.createdCourseConfigs.find(c => c.id === courseConfigID)
+        if (!(existingEditedCourseConfig)) {
+          this.editedCourseConfigs.push({id: courseConfigID, ...newValue})
+        } else {
+          Object.assign(existingEditedCourseConfig, newValue);
+        }
+      }
+    },
 //    getCreateData(item) {
 //      console.log("in getCreateData", item);
 //      return {
@@ -170,13 +211,8 @@ export default {
         return subject;
       });
     },
-    tableItems: {
-      get() {
-        return this.innerTableItems.length ? this.innerTableItems : this.items.map(subject => subject.groupCombinations);
-      },
-      set(newValue) {
-        this.innerTableItems = newValue;
-      },
+    tableItems() {
+      return this.items.map(subject => subject.groupCombinations);
     },
   },
   apollo: {

aleksis/apps/lesrooster/frontend/index.js

@@ -72,19 +72,25 @@ export default {
         },
         {
             path: "timebound_course_configs/",
-            component: () => import("./components/TimeboundCourseConfig.vue"),
+            component: () => import("./components/TimeboundCourseConfigCRUDTable.vue"),
             name: "lesrooster.timeboundCourseConfigs",
             meta: {
                 inMenu: true,
-                titleKey: "lesrooster.timebound_course_config.menu_title",
+                titleKey: "lesrooster.timebound_course_config.crud_table_menu_title",
                 icon: "mdi-timetable",
                 permission: "lesrooster.view_timebound_course_configs_rule",
             },
         },
         {
-            path: "plan_courses/",
-            component: () => import("./components/TimeboundCourseConfigTable.vue"),
+            path: "timebound_course_configs/plan_courses/",
+            component: () => import("./components/TimeboundCourseConfigRaster.vue"),
             name: "lesrooster.planCourses",
+            meta: {
+                inMenu: true,
+                titleKey: "lesrooster.timebound_course_config.raster_menu_title",
+                icon: "mdi-timetable",
+//                permission: "lesrooster.view_timebound_course_configs_rule",
+            },
         },
     ]
 };

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

@@ -40,7 +40,8 @@
       "repr": "Break before period {periodAfter}, from {timeStart} to {timeEnd}"
     },
     "timebound_course_config": {
-      "menu_title": "Timebound course configs",
+      "crud_table_menu_title": "Timebound course configs",
+      "raster_menu_title": "Plan courses",
       "title": "Timebound course config",
       "title_plural": "Timebound course configs",
       "scheduled_slot_count": "Scheduled lesson quota",