Introduce view for regular timetables

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

+<script>
+import { defineComponent } from "vue";
+import { lessonsGroup } from "./timetables.graphql";
+import MiniTimeTable from "./MiniTimeTable.vue";
+
+export default defineComponent({
+  name: "GroupTimeTable",
+  extends: MiniTimeTable,
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    lessons() {
+      return this.lessonsGroup;
+    },
+    loading() {
+      return this.$apollo.queries.lessonsGroup.loading;
+    },
+  },
+  apollo: {
+    lessonsGroup: {
+      query: lessonsGroup,
+      variables() {
+        console.log(this.timeGrid, "TIMEGRID");
+        return {
+          timeGrid: this.timeGrid.id,
+          group: this.id,
+        };
+      },
+      skip() {
+        return this.timeGrid === null;
+      },
+    },
+  },
+});
+</script>

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>

aleksis/apps/lesrooster/frontend/index.js

@@ -10,6 +10,40 @@ export default {
     permission: "lesrooster.view_lesrooster_menu_rule",
   },
   children: [
+    {
+      path: "timetable/",
+      component: () => import("./components/timetables/Timetable.vue"),
+      name: "lesrooster.timetable",
+      meta: {
+        inMenu: true,
+        titleKey: "lesrooster.timetable.menu_title",
+        toolbarTitle: "lesrooster.timetable.menu_title",
+        icon: "mdi-grid",
+        permission: "chronos.view_timetable_overview_rule",
+        fullWidth: true,
+      },
+      children: [
+        {
+          path: ":timeGrid(\\d+)/",
+          component: () => import("./components/timetables/Timetable.vue"),
+          name: "lesrooster.timetableWithTimeGrid",
+          meta: {
+            permission: "chronos.view_timetable_overview_rule",
+            fullWidth: true,
+          },
+        },
+        {
+          path: ":timeGrid(\\d+)/:type(\\w+)/:id(\\d+)/",
+          component: () => import("./components/timetables/Timetable.vue"),
+          name: "lesrooster.timetableWithId",
+          meta: {
+            permission: "chronos.view_timetable_overview_rule",
+            fullWidth: true,
+          },
+        },
+      ],
+    },
+
     {
       path: "validity_ranges/",
       component: () => import("./components/validity_range/ValidityRange.vue"),
@@ -49,7 +83,7 @@ export default {
       },
     },
     {
-      path: "timetable/",
+      path: "timetable_management/",
       component: () =>
         import("./components/timetable_management/TimetableManagement.vue"),
       name: "lesrooster.timetable_management_select",

aleksis/apps/lesrooster/frontend/messages/en.json

@@ -127,6 +127,9 @@
         }
       }
     },
+    "timetable": {
+      "menu_title": "Timetables"
+    },
     "supervision": {
       "menu_title": "Supervisions",
       "title": "Supervision",