Resolve "Frontend for Models"

Closes #1 (closed)

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

 <script>
 import {defineComponent} from 'vue'
-import {courses, group} from "./timetableManagement.graphql";
+import {courses, group, lessonObjects} from "./timetableManagement.graphql";
 import {currentValidityRange} from "../validityRange.graphql";
 import {slots} from "../slot.graphql";
 import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
-import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
 import ValidityRangeField from "../ValidityRangeField.vue";
 import validityRange from "../ValidityRange.vue";
 import LessonCard from "./LessonCard.vue";
 
 export default defineComponent({
   name: "TimetableManagement",
-  components: {LessonCard, SecondaryActionButton, SaveButton, ValidityRangeField},
+  components: {LessonCard, SecondaryActionButton, ValidityRangeField},
   data() {
     return {
       weekdays: [],
       periods: [],
       internalValidityRange: null,
       courseSearch: null,
+      lessonsUsed: {},
     }
   },
   apollo: {
@@ -68,30 +68,79 @@ export default defineComponent({
       skip() {
         return this.internalValidityRange === null;
       },
-    }
+    },
+    lessonObjects: {
+      query: lessonObjects,
+      variables() {
+        return {
+          validityRange: this.internalValidityRange.id,
+          group: this.$route.params.id,
+        }
+      },
+      skip() {
+        return this.internalValidityRange === null;
+      },
+      result({data: {lessonObjects}}) {
+        this.lessonsUsed = {}
+        lessonObjects.forEach(
+            lesson => {
+              let increment = this.periods.indexOf(lesson.slotEnd.period) - this.periods.indexOf(lesson.slotStart.period) + 1;
+              this.lessonsUsed[lesson.course.id] = (this.lessonsUsed[lesson.course.id] + increment) || increment;
+            }
+        )
+      }
+    },
   },
   computed: {
     validityRange() {
       return validityRange
     },
     lessons() {
-      return this.slots ?
-          this.slots
-              .filter(slot => slot.model === "Slot")
+      return this.lessonObjects ?
+          this.lessonObjects
               .map(
-                  slot => (
+                  lesson => (
                       {
-                        x: this.weekdays.indexOf(slot.weekday) + 1,
-                        y: this.periods.indexOf(slot.period) + 1,
-                        w: 1,
-                        h: 1,
-                        key: slot.id,
-                        data: {text: "Hello world 1"},
+                        x: this.weekdays.indexOf(lesson.slotStart.weekday) + 2,
+                        y: this.periods.indexOf(lesson.slotStart.period) + 2,
+                        w: this.weekdays.indexOf(lesson.slotEnd.weekday) - this.weekdays.indexOf(lesson.slotStart.weekday) + 1,
+                        h: this.periods.indexOf(lesson.slotEnd.period) - this.periods.indexOf(lesson.slotStart.period) + 1,
+                        key: "lesson-" + lesson.id,
+                        data: lesson,
                       }
                   )
               )
           : [];
     },
+    gridItems() {
+      return [
+        ...this.weekdays.map((weekday, index) => ({
+          x: index + 2,
+          y: 1,
+          w: 1,
+          h: 1,
+          disabled: true,
+          key: "weekday-" + weekday,
+          data: {
+            isWeekday: true,
+            weekday
+          },
+        })),
+        ...this.periods.map((period, index) => ({
+          x: 1,
+          y: index + 2,
+          w: 1,
+          h: 1,
+          disabled: true,
+          key: "period-" + period,
+          data: {
+            isPeriod: true,
+            period
+          },
+        })),
+        ...this.lessons
+      ];
+    },
     gridLoading() {
       return this.$apollo.queries.slots.loading
           || this.$apollo.queries.currentValidityRange.loading
@@ -107,12 +156,30 @@ export default defineComponent({
                         y: "0",
                         w: 1,
                         h: 1,
-                        key: course.id,
+                        key: "course-" + course.id,
                         data: course,
                       }
                   )
               )
           : [];
+    },
+    disabledSlots() {
+      // Disable all fields in the grid where no slot exists
+      return this.periods.map(
+          (period, indexY) => this.weekdays.map(
+              (weekday, indexX) => this.slots
+                  .filter(
+                      slot => slot.model === "Slot"
+                          && slot.weekday === weekday
+                          && slot.period === period
+                  ).length === 0
+                  ? {
+                    x: indexX + 2,
+                    y: indexY + 2,
+                  }
+                  : undefined
+          )
+      ).flat().filter(val => val !== undefined)
     }
   },
 })
@@ -138,23 +205,29 @@ export default defineComponent({
       </v-col>
 
       <v-col cols="12" lg="4" class="d-flex justify-space-between flex-wrap align-center">
-        <save-button/>
         <secondary-action-button i18n-key="actions.copy_last_configuration"/>
       </v-col>
 
-      <v-col cols="12" lg="8">
+      <v-col cols="12" lg="8" class="align-self-start">
         <drag-grid
-            :cols="weekdays.length"
-            :rows="periods.length"
-            :value="lessons"
+            :cols="weekdays.length + 1"
+            :rows="periods.length + 1"
+            :value="gridItems"
             :loading="gridLoading"
+            context="timetable"
+            :disabled-fields="disabledSlots"
         >
           <template #item="item">
-            <v-card>{{ item.data.text }}</v-card>
+            <div v-if="item.data.isWeekday">{{ $t("weekdays." + item.data.weekday) }}</div>
+            <div v-else-if="item.data.isPeriod">{{ item.data.period }}</div>
+            <lesson-card v-else :lesson="item.data" rounded="lg"></lesson-card>
           </template>
           <template #loader>
             <v-skeleton-loader type="sentences"/>
           </template>
+          <template #highlight>
+            <v-skeleton-loader type="image" boilerplate height="100%" id="highlight"/>
+          </template>
         </drag-grid>
       </v-col>
 
@@ -183,10 +256,12 @@ export default defineComponent({
                     :rows="5"
                     :value="items"
                     :loading="$apollo.queries.courses.loading"
+                    no-highlight
+                    context="timetable"
                 >
                   <template #item="item">
                     <lesson-card :lesson="item.data" rounded="lg">
-                      0/{{ item.data.lessonQuota }}
+                      {{ lessonsUsed[item.data.id] || 0 }}/{{ item.data.lessonQuota }}
                     </lesson-card>
                   </template>
                   <template #loader>
@@ -210,6 +285,8 @@ export default defineComponent({
   </div>
 </template>
 
-<style scoped>
-
+<style>
+#highlight > .v-skeleton-loader__image {
+  height: 100%;
+}
 </style>
\ No newline at end of file