Create mini timetables for teachers and rooms

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] 1fr"
+          + this.weekdays.map(weekday => ` [${weekday}] 1fr`).join("");
+    },
+    lessons() {
+      return [];
+    }
+  },
+  methods: {
+    styleForLesson(lesson) {
+      return {gridArea: `period-${lesson.slotStart.period} / ${lesson.slotStart.weekday} / period-${lesson.slotEnd.period + 1} / ${lesson.slotEnd.weekday}`};
+      // return "stonk"
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="timetable">
+<!--    {{ lessons }}-->
+    <div v-for="period in periods" :style="{gridColumn: 'legend-day', gridRow: `period-${period} / span 1`}">
+      {{ period }}
+    </div>
+    <div v-for="weekday in weekdays" :style="{gridRow: 'legend-row', gridColumn: `${weekday} / span 1`}">
+      {{ weekday }}
+    </div>
+    <lesson-card v-for="lesson in lessons" :lesson="lesson" :style="styleForLesson(lesson)"/>
+  </div>
+</template>
+
+<style scoped>
+.timetable {
+  display: grid;
+  grid-template: v-bind(gridTemplate);
+}
+</style>
\ No newline at end of file

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

+<script>
+import {defineComponent} from 'vue'
+import {lessonsRoom} from "./timetables.graphql";
+import MiniTimeTable from "./MiniTimeTable.vue";
+
+export default defineComponent({
+  name: "RoomTimeTable",
+  extends: MiniTimeTable,
+  props: {
+    roomId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    lessons() {
+      return this.lessonsRoom;
+    }
+  },
+  apollo: {
+    lessonsRoom: {
+      query: lessonsRoom,
+      variables() {
+        return {
+          validityRange: this.validityRange.id,
+          room: this.roomId,
+        }
+      },
+      skip() {
+        return this.validityRange === null;
+      },
+    }
+  }
+})
+</script>
\ No newline at end of file

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

+<script>
+import {defineComponent} from 'vue'
+import {lessonsTeacher} from "./timetables.graphql";
+import MiniTimeTable from "./MiniTimeTable.vue";
+
+export default defineComponent({
+  name: "TeacherTimeTable",
+  extends: MiniTimeTable,
+  props: {
+    teacherId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    lessons() {
+      return this.lessonsTeacher;
+    }
+  },
+  apollo: {
+    lessonsTeacher: {
+      query: lessonsTeacher,
+      variables() {
+        return {
+          validityRange: this.validityRange.id,
+          teacher: this.teacherId,
+        }
+      },
+      skip() {
+        return this.validityRange === null;
+      },
+    }
+  }
+})
+</script>
\ No newline at end of file

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

+query lessonsTeacher($teacher: ID!, $validityRange: ID!) {
+    lessonsTeacher: lessonObjectsForTeacher(teacher: $teacher, validityRange: $validityRange) {
+        id
+        slotStart {
+            id
+            period
+            weekday
+        }
+        slotEnd {
+            id
+            period
+            weekday
+        }
+        subject {
+            id
+            name
+            colourFg
+            colourBg
+        }
+        teachers {
+            id
+            fullName
+            shortName
+        }
+        rooms {
+            id
+            name
+            shortName
+        }
+        course {
+            id
+            name
+            subject {
+                id
+                name
+                colourFg
+                colourBg
+            }
+            teachers {
+                id
+                fullName
+                shortName
+            }
+            groups {
+                id
+                name
+                shortName
+            }
+        }
+        recurrence
+        canEdit
+        canDelete
+    }
+}
+
+query lessonsRoom($room: ID!, $validityRange: ID!) {
+    lessonsRoom: lessonObjectsForRoom(room: $room, validityRange: $validityRange) {
+        id
+        slotStart {
+            id
+            period
+            weekday
+        }
+        slotEnd {
+            id
+            period
+            weekday
+        }
+        subject {
+            id
+            name
+            colourFg
+            colourBg
+        }
+        teachers {
+            id
+            fullName
+            shortName
+        }
+        rooms {
+            id
+            name
+            shortName
+        }
+        course {
+            id
+            name
+            subject {
+                id
+                name
+                colourFg
+                colourBg
+            }
+            teachers {
+                id
+                fullName
+                shortName
+            }
+            groups {
+                id
+                name
+                shortName
+            }
+        }
+        recurrence
+        canEdit
+        canDelete
+    }
+}