Draft: Resolve "[New data model] PDF export for "regular" timetable"

Closes #46

aleksis/apps/lesrooster/frontend/components/timetables/Timetable.vue

+<script setup>
+import TimetableWrapper from "aleksis.apps.chronos/components/TimetableWrapper.vue";
+import TimeGridField from "../validity_range/TimeGridField.vue";
+import RoomTimeTable from "./RoomTimeTable.vue";
+import GroupTimeTable from "./GroupTimeTable.vue";
+import TeacherTimeTable from "./TeacherTimeTable.vue";
+</script>
+<script>
+export default {
+  name: "Timetable",
+  data() {
+    return {
+      timeGrid: null,
+      selected: null,
+    };
+  },
+  watch: {
+    timeGrid(newTimeGrid) {
+      this.onSelected(this.selected);
+    },
+  },
+  computed: {
+    timetableAttrs() {
+      return {
+        id: this.$route.params.id,
+        timeGrid: this.timeGrid,
+      };
+    },
+  },
+  methods: {
+    onSelected(selected) {
+      this.selected = selected;
+      if (!selected && this.timeGrid) {
+        this.$router.push({
+          name: "lesrooster.timetableWithTimeGrid",
+          params: { timeGrid: this.timeGrid.id },
+        });
+      } else if (!selected && !this.timeGrid) {
+        this.$router.push({ name: "lesrooster.timetable" });
+      } else if (
+        selected.objId !== this.$route.params.id ||
+        selected.type.toLowerCase() !== this.$route.params.type ||
+        this.timeGrid.id !== this.$route.params.timeGrid
+      ) {
+        this.$router.push({
+          name: "lesrooster.timetableWithId",
+          params: {
+            timeGrid: this.timeGrid.id,
+            type: selected.type.toLowerCase(),
+            id: selected.objId,
+          },
+        });
+      }
+    },
+    setInitialTimeGrid(timeGrids) {
+      if (!this.timeGrid) {
+        this.timeGrid = timeGrids.find(
+          this.$route.params.timeGrid
+            ? (timeGrid) => timeGrid.id === this.$route.params.timeGrid
+            : (timeGrid) => timeGrid.validityRange.isCurrent && !timeGrid.group,
+        );
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <timetable-wrapper :on-selected="onSelected">
+    <template #additionalSelect="{ selected }">
+      <v-card class="mb-2">
+        <v-card-text>
+          <time-grid-field
+            outlined
+            filled
+            label="Select Validity Range"
+            hide-details
+            with-dates
+            :enable-create="false"
+            v-model="timeGrid"
+            @items="setInitialTimeGrid"
+          >
+          </time-grid-field>
+        </v-card-text>
+      </v-card>
+    </template>
+    <template #default="{ selected }">
+      <group-time-table
+        v-if="$route.params.type === 'group'"
+        v-bind="timetableAttrs"
+      />
+      <teacher-time-table
+        v-else-if="$route.params.type === 'teacher'"
+        v-bind="timetableAttrs"
+      />
+      <room-time-table
+        v-else-if="$route.params.type === 'room'"
+        v-bind="timetableAttrs"
+      />
+    </template>
+  </timetable-wrapper>
+</template>