Include timeGrid in TimetableManagement urls

aleksis/apps/lesrooster/frontend/components/timetable_management/TimetableManagement.vue

@@ -109,9 +109,9 @@ export default defineComponent({
         return this.internalTimeGrid === null;
       },
       result() {
-        if (!this.selectedGroup && this.$route.params.id && this.groups) {
+        if (this.$route.params.group && this.groups) {
           this.selectedGroup = this.groups.find(
-            (group) => group.id === this.$route.params.id,
+            (group) => group.id === this.$route.params.group,
           );
         }
       },
@@ -345,10 +345,14 @@ export default defineComponent({
   watch: {
     selectedGroup() {
       if (!this.selectedGroup) return;
-      if (this.selectedGroup.id != this.$route.params.id) {
+      if (this.selectedGroup.id != this.$route.params.group) {
+        // to be able to select a group, the timeGrid has to be set
         this.$router.push({
           name: "lesrooster.timetable_management",
-          params: { id: this.selectedGroup.id },
+          params: {
+            group: this.selectedGroup.id,
+            timeGrid: this.internalTimeGrid.id,
+          },
         });
       }
       this.$setToolBarTitle(
@@ -359,6 +363,19 @@ export default defineComponent({
       this.$apollo.queries.courses.refetch();
       this.$apollo.queries.lessonObjects.refetch();
     },
+    internalTimeGrid(newTimeGrid, oldTimeGrid) {
+      if (!oldTimeGrid) return;
+
+      if (this.selectedGroup?.id) {
+        this.$router.push({
+          name: "lesrooster.timetable_management",
+          params: {
+            group: this.selectedGroup.id,
+            timeGrid: this.internalTimeGrid.id,
+          },
+        });
+      }
+    },
   },
   methods: {
     itemMovedToLessons(eventData) {
@@ -821,6 +838,13 @@ export default defineComponent({
         this.draggedItem = null;
       }
     },
+    setInitialTimeGrid(timeGrids) {
+      if (!this.internalTimeGrid?.id && this.$route.params.timeGrid) {
+        this.internalTimeGrid = timeGrids.find(
+          (timeGrid) => timeGrid.id === this.$route.params.timeGrid,
+        );
+      }
+    }
   },
 });
 </script>
@@ -837,6 +861,15 @@ export default defineComponent({
 
           <v-spacer />
 
+          <time-grid-field
+            outlined
+            filled
+            label="Select Validity Range"
+            hide-details
+            v-model="internalTimeGrid"
+            @items="setInitialTimeGrid"
+          />
+
           <v-autocomplete
             outlined
             filled
@@ -850,14 +883,6 @@ export default defineComponent({
             :loading="$apollo.queries.gqlGroups"
             class="mr-4"
           />
-
-          <time-grid-field
-            outlined
-            filled
-            label="Select Validity Range"
-            hide-details
-            v-model="internalTimeGrid"
-          />
         </div>
       </v-col>
 

aleksis/apps/lesrooster/frontend/index.js

@@ -62,7 +62,7 @@ export default {
       },
       children: [
         {
-          path: ":id(\\d+)/",
+          path: ":timeGrid(\\d+)/:group(\\d+)/",
           component: () =>
             import("./components/timetable_management/TimetableManagement.vue"),
           name: "lesrooster.timetable_management",