Make groups available in timebound course config planning selectable inside component

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

@@ -26,12 +26,26 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
             v-model="internalValidityRange"
             :loading="$apollo.queries.currentValidityRange.loading"
           />
+          <v-spacer></v-spacer>
+          <v-autocomplete
+            rounded
+            solo
+            multiple
+            :items="groups"
+            item-text="shortName"
+            item-value="id"
+            return-object
+            :disabled="$apollo.queries.groups.loading"
+            :label="$t('lesrooster.timebound_course_config.groups')"
+            v-model="selectedGroups"
+            class="mt-8"
+          />
+          <v-spacer></v-spacer>
           <v-divider
             class="mx-4"
             inset
             vertical
           ></v-divider>
-          <v-spacer></v-spacer>
           <save-button
             :disabled="!editedCourseConfigs.length && !createdCourseConfigs.length"
             @click="save"
@@ -92,6 +106,7 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
                     </v-list-item-action>
                     <v-list-item-content>
                       <v-list-item-title v-html="data.item.fullName"></v-list-item-title>
+                      <v-list-item-subtitle v-if="data.item.lessonQuota" v-html="$t('lesrooster.timebound_course_config.lessons_planned', { planned: getPlannedLessons(data.item.id), quota: data.item.lessonQuota })"></v-list-item-subtitle>
                     </v-list-item-content>
                   </template>
                 </template>
@@ -118,7 +133,7 @@ import {
 } from "./validityRange.graphql";
 
 import {
-  gqlClassesByGrade,
+  gqlClasses,
   gqlTeachers,
 } from "./helper.graphql";
 
@@ -145,6 +160,7 @@ export default {
         ],
       internalValidityRange: null,
       groups: [],
+      selectedGroups: [],
       subjects: [],
       editedCourseConfigs: [],
       createdCourseConfigs: [],
@@ -153,12 +169,6 @@ export default {
       loading: false,
     };
   },
-  props: {
-    grade: {
-      type: String,
-      required: true,
-    },
-  },
   methods: {
     tableItemSlotName(header) {
       return "item." + header.value;
@@ -223,13 +233,13 @@ export default {
   },
   computed: {
     groupIDList() {
-      return this.groups.map(group => group.id);
+      return this.selectedGroups.map(group => group.id);
     },
     subjectGroupCombinations() {
       return [].concat.apply([], this.items.map(subject => Object.keys(subject.groupCombinations)));
     },
     groupHeaders() {
-      return this.groups.map(group => ({text: group.shortName, value: JSON.stringify([group.id])})).concat(this.subjectGroupCombinations.map(combination => {
+      return this.selectedGroups.map(group => ({text: group.shortName, value: JSON.stringify([group.id])})).concat(this.subjectGroupCombinations.map(combination => {
         let parsedCombination = JSON.parse(combination);
         return {
           text: parsedCombination.map(groupID => this.groups.find(group => group.id === groupID).shortName).join(", "), value: combination
@@ -282,12 +292,7 @@ export default {
       }
     },
     groups: {
-      query: gqlClassesByGrade,
-      variables() {
-        return {
-          grade: this.grade,
-        };
-      },
+      query: gqlClasses,
     },
     subjects: {
       query: subjects,

aleksis/apps/lesrooster/frontend/components/helper.graphql

@@ -22,6 +22,14 @@ query gqlGroups {
     }
 }
 
+query gqlClasses {
+    groups: schoolClasses {
+        id
+        name
+        shortName
+    }
+}
+
 query gqlClassesByGrade($grade: ID!) {
     groups: classesByGrade(grade: $grade) {
         id

aleksis/apps/lesrooster/frontend/index.js

@@ -82,10 +82,15 @@ export default {
             },
         },
         {
-            path: "timebound_course_configs/plan_courses/:grade(\\d+)/",
+            path: "timebound_course_configs/plan_courses/",
             component: () => import("./components/TimeboundCourseConfigRaster.vue"),
             name: "lesrooster.planCourses",
-            props: true,
+            meta: {
+                inMenu: true,
+                titleKey: "lesrooster.timebound_course_config.raster_menu_title",
+                icon: "mdi-clock-edit-outline",
+                permission: "lesrooster.view_timebound_course_configs_rule",
+            },
         },
     ]
 };

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

@@ -46,6 +46,7 @@
       "title_plural": "Timebound course configs",
       "scheduled_slot_count": "Scheduled lesson quota",
       "course": "Course",
+      "groups": "Groups",
       "teachers": "Teachers",
       "teachers_for": "Teachers for",
       "subject_teachers": "Teachers for this subject",
@@ -65,4 +66,4 @@
   "actions":{
     "copy_to_day": "Copy to another day"
   }
-}
\ No newline at end of file
+}