Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -4,9 +4,9 @@ import {
   courses,
   createLesson,
   deleteLesson,
-  group,
   lessonObjects,
   updateLesson,
+  gqlGroups,
 } from "./timetableManagement.graphql";
 import { currentValidityRange } from "../validityRange.graphql";
 import { slots } from "../slot.graphql";
@@ -46,23 +46,20 @@ export default defineComponent({
       selectedObjectType: null,
       selectedObjectTitle: "",
       selectedObjectDialogOpen: false,
+      groups: [],
+      selectedGroup: null,
     };
   },
   apollo: {
-    group: {
-      query: group,
+    groups: {
+      query: gqlGroups,
       variables() {
         return {
-          id: this.$route.params.id,
+          validityRange: this.internalValidityRange.id,
         };
       },
-      update: (data) => data.groupById,
-      result({ data: { groupById } }) {
-        this.$setToolBarTitle(
-          this.$t("lesrooster.timetable_management.for_group", {
-            group: groupById.name,
-          })
-        );
+      skip() {
+        return this.internalValidityRange === null;
       },
     },
     slots: {
@@ -75,7 +72,7 @@ export default defineComponent({
         };
       },
       skip() {
-        return this.internalValidityRange === null;
+        return !this.readyForQueries;
       },
       update: (data) => data.items,
       result({ data: { items } }) {
@@ -106,11 +103,11 @@ export default defineComponent({
       variables() {
         return {
           validityRange: this.internalValidityRange.id,
-          group: this.$route.params.id,
+          group: this.selectedGroup.id,
         };
       },
       skip() {
-        return this.internalValidityRange === null;
+        return !this.readyForQueries;
       },
     },
     lessonObjects: {
@@ -118,11 +115,11 @@ export default defineComponent({
       variables() {
         return {
           validityRange: this.internalValidityRange.id,
-          group: this.$route.params.id,
+          group: this.selectedGroup.id,
         };
       },
       skip() {
-        return this.internalValidityRange === null;
+        return !this.readyForQueries;
       },
       result({ data: { lessonObjects } }) {
         this.lessonsUsed = {};
@@ -138,8 +135,8 @@ export default defineComponent({
     },
   },
   computed: {
-    validityRange() {
-      return validityRange;
+    readyForQueries() {
+      return this.internalValidityRange !== null && this.selectedGroup !== null;
     },
     lessons() {
       return this.lessonObjects
@@ -168,7 +165,7 @@ export default defineComponent({
       return (
         this.$apollo.queries.slots.loading ||
         this.$apollo.queries.currentValidityRange.loading ||
-        this.$apollo.queries.group.loading
+        this.$apollo.queries.groups.loading
       );
     },
     selectableCourses() {
@@ -205,6 +202,24 @@ export default defineComponent({
         .filter((val) => val !== undefined);
     },
   },
+  watch: {
+    selectedGroup() {
+      if (!this.selectedGroup) return;
+      if (this.selectedGroup.id != this.$route.params.id) {
+        this.$router.push({
+          name: "lesrooster.timetable_management",
+          params: { id: this.selectedGroup.id },
+        });
+      }
+      this.$setToolBarTitle(
+        this.$t("lesrooster.timetable_management.for_group", {
+          group: this.selectedGroup.name,
+        })
+      );
+      this.$apollo.queries.courses.refetch();
+      this.$apollo.queries.lessonObjects.refetch();
+    },
+  },
   methods: {
     itemMovedToLessons(eventData) {
       let newStartSlotId = this.slots.filter(
@@ -500,9 +515,24 @@ export default defineComponent({
 
           <v-spacer />
 
+          <v-autocomplete
+            outlined
+            filled
+            hide-details
+            label="Select Group"
+            :items="groups"
+            item-text="name"
+            item-value="id"
+            return-object
+            v-model="selectedGroup"
+            :loading="$apollo.queries.gqlGroups"
+            class="mr-4"
+          />
+
           <validity-range-field
-            solo
-            rounded
+            outlined
+            filled
+            label="Select Validity Range"
             hide-details
             v-model="internalValidityRange"
             :loading="$apollo.queries.currentValidityRange.loading"