Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/timetable_management/timetables/MiniTimeTable.vue

+<script>
+import {defineComponent} from 'vue'
+import {slots} from "../../slot.graphql";
+import LessonCard from "../LessonCard.vue";
+
+
+export default defineComponent({
+  name: "MiniTimeTable",
+  components: {LessonCard},
+  props: {
+    validityRange: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      periods: [],
+      weekdays: [],
+    }
+  },
+  apollo: {
+    slots: {
+      query: slots,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            "validity_range": this.validityRange.id
+          })
+        }
+      },
+      skip() {
+        return this.validityRange === 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)));
+      },
+    },
+  },
+  computed: {
+    gridTemplate() {
+      return "[legend-row] auto "
+          + this.periods.map(period => `[period-${period}] auto `).join("")
+          + "/ [legend-day] auto"
+          + this.weekdays.map(weekday => ` [${weekday}] 1fr`).join("");
+    },
+    lessons() {
+      return [];
+    }
+  },
+  methods: {
+    styleForLesson(lesson) {
+      return {
+        gridArea: `period-${lesson.slotStart.period} / ${lesson.slotStart.weekday} / `
+            + `span ${lesson.slotEnd.period - lesson.slotStart.period + 1} / ${lesson.slotEnd.weekday}`
+      };
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="timetable">
+    <v-card v-for="period in periods" :style="{gridColumn: 'legend-day', gridRow: `period-${period} / span 1`}">
+      <v-card-text>{{ period }}</v-card-text>
+    </v-card>
+    <v-card v-for="weekday in weekdays" :style="{gridRow: 'legend-row', gridColumn: `${weekday} / span 1`}">
+      <v-card-text>{{ $t("weekdays." + weekday) }}</v-card-text>
+    </v-card>
+    <lesson-card v-for="lesson in lessons" :lesson="lesson" :style="styleForLesson(lesson)"/>
+  </div>
+</template>
+
+<style scoped>
+.timetable {
+  display: grid;
+  grid-template: v-bind(gridTemplate);
+  gap: 1em;
+}
+
+.timetable > * {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file