Create initial draft of the TimetableManagement.vue component ("magnet board")

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

+<script>
+import {defineComponent} from 'vue'
+import {group} 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";
+
+export default defineComponent({
+  name: "TimetableManagement",
+  components: {SecondaryActionButton, SaveButton, ValidityRangeField},
+  data() {
+    return {
+      weekdays: [],
+      periods: [],
+      internalValidityRange: null,
+    }
+  },
+  apollo: {
+    group: {
+      query: group,
+      variables() {
+        return {
+          id: this.$route.params.id,
+        };
+      },
+      update: data => data.groupById,
+      result({data: {groupById}}) {
+        this.$setToolBarTitle(this.$t("lesrooster.timetable_management.for_group", {group: groupById.name}))
+      }
+    },
+    slots: {
+      query: slots,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            "validity_range": this.internalValidityRange.id
+          })
+        }
+      },
+      skip() {
+        return this.internalValidityRange === null;
+      },
+      update: data => data.items,
+      result({data: {items}}) {
+        this.weekdays = Array.from(new Set(items.filter(slot => slot.model === "Slot").map(slot => slot.weekday)));
+        this.periods = Array.from(new Set(items.filter(slot => slot.model === "Slot").map(slot => slot.period)));
+      },
+    },
+    currentValidityRange: {
+      query: currentValidityRange,
+      result(data) {
+        this.internalValidityRange = data.data.currentValidityRange;
+      }
+    }
+  },
+  computed: {
+    validityRange() {
+      return validityRange
+    },
+    lessons() {
+      return this.slots ?
+          this.slots
+              .filter(slot => slot.model === "Slot")
+              .map(
+                  slot => (
+                      {
+                        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"},
+                      }
+                  )
+              )
+          : [];
+    },
+    gridLoading() {
+      return this.$apollo.queries.slots.loading
+          || this.$apollo.queries.currentValidityRange.loading
+          || this.$apollo.queries.group.loading
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12" lg="8">
+        <div class="d-flex justify-space-between flex-wrap align-center">
+          <secondary-action-button i18n-key="IDK, ggf back??"/>
+
+          <v-spacer/>
+
+          <validity-range-field
+              solo
+              rounded
+              hide-details
+              v-model="internalValidityRange"
+              :loading="$apollo.queries.currentValidityRange.loading"
+          />
+        </div>
+      </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">
+        <drag-grid
+            :cols="weekdays.length"
+            :rows="periods.length"
+            :value="lessons"
+            :loading="gridLoading"
+        >
+          <template #item="item">
+            <v-card>{{ item.data.text }}</v-card>
+          </template>
+          <template #loader>
+            <v-skeleton-loader type="sentences"/>
+          </template>
+        </drag-grid>
+      </v-col>
+
+      <v-col cols="12" lg="4">
+        <v-card>
+          <v-card-text>
+            <v-card-title>Courses</v-card-title>
+            <v-autocomplete search solo rounded hide-details/>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        Timetable Teacher
+      </v-col>
+      <v-col cols="12" md="6">
+        Timetable Room
+      </v-col>
+    </v-row>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

aleksis/apps/lesrooster/frontend/components/timetable_management/timetableManagement.graphql

+query group($id: ID!) {
+    groupById(id: $id) {
+        id
+        name
+    }
+}

aleksis/apps/lesrooster/frontend/index.js

@@ -35,6 +35,19 @@ export default {
               permission: "lesrooster.view_lesson_raster_rule",
           }
         },
+        {
+          path: "timetable/:id(\\d+)/",
+          component: () => import("./components/timetable_management/TimetableManagement.vue"),
+          name: "lesrooster.timetable_management",
+          props: true,
+          meta: {
+              inMenu: true,
+              titleKey: "lesrooster.timetable_management.menu_title",
+              toolbarTitle: "lesrooster.timetable_management.menu_title",
+              icon: "mdi-magnet",
+              permission: "lesrooster.view_timetable_creation_rule",
+          }
+        },
         {
             path: "slots/",
             component: () => import("./components/LesroosterSlot.vue"),