Begin adapting timetable management frontend to courseBundles query

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

 <script>
 import { defineComponent } from "vue";
 import {
-  timeboundCourses,
+  courseBundles,
   createLessons,
   deleteLessons,
   gqlGroups,
@@ -166,12 +166,13 @@ export default defineComponent({
         return !this.internalTimeGrid;
       },
     },
-    timeboundCourses: {
-      query: timeboundCourses,
+    courseBundles: {
+      query: courseBundles,
       variables() {
         return {
-          timeGrid: this.internalTimeGrid.id,
           group: this.selectedGroup.id,
+          validityRange: this.internalTimeGrid.validityRange.id,
+          
         };
       },
       skip() {
@@ -179,8 +180,8 @@ export default defineComponent({
       },
       result({ data }) {
         this.lessonQuotaTotal =
-          data && data.timeboundCourses
-            ? data.timeboundCourses.reduce(
+          data && data.courseBundles
+            ? data.courseBundles.reduce(
                 (accumulator, course) => accumulator + course.lessonQuota,
                 0,
               )
@@ -281,21 +282,23 @@ export default defineComponent({
         this.$apollo.queries.groups.loading
       );
     },
-    griddedTimeboundCourses() {
-      return this.timeboundCourses
-        ? this.timeboundCourses.map((tc) => ({
+    griddedCourseBundles() {
+      return this.courseBundles
+        ? this.courseBundles.map((bundle) => ({
             x: "0",
             y: "0",
             w: 1,
             h: 1,
-            key: "course-" + tc.course.id,
+            key: "course-bundle-" + bundle.id,
             data: {
-              ...tc.course,
-              teachers: tc.teachers,
-              lessonQuota: tc.lessonQuota,
-              lessonsUsed: this.lessonsUsed[tc.course.id] || 0,
+              // TODO: A uniform interface between courseBundles and lessonBundles
+              ...bundle,
+              // TODO: lessonQuota: is used per bundle (smallest from courses?)
+              // TODO: Adapt lessonsUsed key everywhere else
+              lessonsUsed: this.lessonsUsed[bundle.id] || 0,
               lessonRatio:
-                (this.lessonsUsed[tc.course.id] || 0) / tc.lessonQuota,
+              // Again quota TODO
+                (this.lessonsUsed[bundle.id] || 0) / bundle.lessonQuota,
             },
           }))
         : [];
@@ -375,7 +378,7 @@ export default defineComponent({
           group: this.selectedGroup.name,
         }),
       );
-      this.$apollo.queries.timeboundCourses.refetch();
+      this.$apollo.queries.courseBundles.refetch();
       this.$apollo.queries.lessons.refetch();
     },
     internalTimeGrid(newTimeGrid, oldTimeGrid) {
@@ -486,7 +489,7 @@ export default defineComponent({
               "lesrooster.timetable_management.snacks.lesson_move.error",
             );
           });
-      } else if (eventData.originGridId === "timeboundCourses") {
+      } else if (eventData.originGridId === "courseBundles") {
         let that = this;
         const rule = new RRule({
           freq: RRule.WEEKLY, // TODO: Make this configurable
@@ -1057,7 +1060,7 @@ export default defineComponent({
               persistent-hint
             />
             <v-data-iterator
-              :items="griddedTimeboundCourses"
+              :items="griddedCourseBundles"
               item-key="key"
               :items-per-page="-1"
               single-expand
@@ -1070,11 +1073,11 @@ export default defineComponent({
                   :cols="3"
                   :rows="4"
                   :value="items"
-                  :loading="$apollo.queries.timeboundCourses.loading"
+                  :loading="$apollo.queries.courseBundles.loading"
                   no-highlight
                   context="timetable"
                   @itemChanged="itemMovedToCourses"
-                  grid-id="timeboundCourses"
+                  grid-id="courseBundles"
                   @containerDragStart="handleContainerDrag($event, 'start')"
                   @containerDragEnd="handleContainerDrag($event, 'end')"
                 >
@@ -1165,7 +1168,7 @@ export default defineComponent({
       <template #body>
         <ul class="text-body-1">
           <li v-for="item in itemsToDelete" :key="'delete-' + item.id">
-            {{ item.subject?.name || item.course.subject.name }}
+            {{ item.subject.name }}
           </li>
         </ul>
       </template>