Create initial lesson raster component

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

+<template>
+  <div id="slot-container">
+<!--    <v-hover v-slot="{ hover }">-->
+<!--      <v-card elevation="0">-->
+<!--        <v-card-title>-->
+<!--          <validity-range-field-->
+<!--              solo-->
+<!--              hide-details-->
+<!--              v-model="internalValidityRange"-->
+<!--              :loading="$apollo.queries.currentValidityRange.loading"-->
+<!--          />-->
+<!--          <v-btn-->
+<!--              v-if="canAddDay('A_0')"-->
+<!--              v-show="hover"-->
+<!--              color="secondary"-->
+<!--              fab-->
+<!--              dark-->
+<!--              small-->
+<!--              absolute-->
+<!--              right-->
+<!--              style="right: calc(-20px - 0.5rem)"-->
+<!--          >-->
+<!--            <v-icon>mdi-plus</v-icon>-->
+<!--          </v-btn>-->
+<!--        </v-card-title>-->
+<!--      </v-card>-->
+<!--    </v-hover>-->
+
+    <v-hover
+        v-for="weekday in weekdays"
+        :style="{
+          gridColumn: weekday,
+        }"
+        v-slot="{ hover }"
+    >
+      <v-card :loading="$apollo.queries.items.loading">
+        <v-card-title>
+          {{ $t("weekdays." + weekday) }}
+
+          <v-btn
+              v-if="canAddDay(left(weekday))"
+              v-show="hover"
+              color="secondary"
+              fab
+              dark
+              small
+              absolute
+              left
+              style="left: calc(-20px - 0.5rem)"
+              @click="add(left(weekday))"
+          >
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+          <v-btn
+              v-if="canAddDay(right(weekday))"
+              v-show="hover"
+              color="secondary"
+              fab
+              dark
+              small
+              absolute
+              right
+              style="right: calc(-20px - 0.5rem)"
+              @click="add(right(weekday))"
+          >
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+        </v-card-title>
+      </v-card>
+    </v-hover>
+
+    <v-card
+        v-for="slot in slots"
+        :style="{
+          gridColumn: slot.weekday,
+          gridRow: slot.period + 1,
+        }"
+        :disabled="$apollo.queries.items.loading"
+    >
+      <v-card-text>
+        <div>{{ slot.name }}</div>
+        <div>{{ slot.timeStart }}</div>
+        <div>{{ slot.timeEnd }}</div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import {createBreakSlot} from "./break.graphql";
+import {
+  slots,
+  createSlot,
+  deleteSlot,
+  deleteSlots,
+  updateSlots,
+} from "./slot.graphql";
+import {currentValidityRange} from "./validityRange.graphql";
+import ValidityRangeField from "./ValidityRangeField.vue";
+
+export default {
+  name: "LessonRaster",
+  components: {ValidityRangeField},
+  apollo: {
+    items: {
+      query: slots,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            "validity_range__id": this.internalValidityRange.id
+          })
+        }
+      },
+      result(data) {
+        this.weekdays = Array.from(new Set(data.data.items.map(slot => slot.weekday)));
+      },
+      skip() {
+        return this.internalValidityRange === null;
+      }
+    },
+    currentValidityRange: {
+      query: currentValidityRange,
+      result(data) {
+        this.internalValidityRange = data.data.currentValidityRange;
+      }
+    }
+  },
+  data() {
+    return {
+      weekdays: [],
+      internalValidityRange: null,
+    }
+  },
+  computed: {
+    slots() {
+      return this.items;
+    },
+    columns() {
+      return this.weekdays.map(
+          day => `[${day}] 1fr`
+      ).join(" ");
+    }
+  },
+  methods: {
+    canAddDay(weekday) {
+      if (!weekday) {
+        return false;
+      }
+
+      return !this.weekdays.includes(weekday);
+    },
+    add(weekday) {
+      if (!this.weekdays.includes(weekday)) {
+        this.weekdays.push(weekday)
+        this.weekdays.sort();
+      }
+    },
+    right(weekday) {
+      return weekday === "A_6" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) + 1);
+    },
+    left(weekday) {
+      return weekday === "A_0" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) - 1);
+    }
+  },
+}
+</script>
+
+<style scoped>
+#slot-container {
+  display: grid;
+  grid-template-columns: v-bind(columns);
+  gap: 1rem;
+}
+</style>
\ No newline at end of file

aleksis/apps/lesrooster/frontend/index.js

@@ -23,6 +23,18 @@ export default {
                 permission: "lesrooster.view_validity_ranges_rule",
             },
         },
+        {
+          path: "raster/",
+          component: () => import("./components/LessonRaster.vue"),
+          name: "lesrooster.lesson_raster",
+          meta: {
+              inMenu: true,
+              titleKey: "lesrooster.lesson_raster.menu_title",
+              toolbarTitle: "lesrooster.lesson_raster.menu_title",
+              icon: "mdi-grid-large",
+              permission: "lesrooster.view_lesson_raster_rule",
+          }
+        },
         {
             path: "slots/",
             component: () => import("./components/LesroosterSlot.vue"),