Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -2,12 +2,13 @@
 import { defineComponent } from "vue";
 import { slots } from "../../breaks_and_slots/slot.graphql";
 import LessonCard from "../LessonCard.vue";
+import MessageBox from "aleksis.core/components/generic/MessageBox.vue";
 
 export default defineComponent({
   name: "MiniTimeTable",
-  components: { LessonCard },
+  components: { LessonCard, MessageBox },
   props: {
-    validityRange: {
+    timeGrid: {
       type: Object,
       required: true,
     },
@@ -24,12 +25,12 @@ export default defineComponent({
       variables() {
         return {
           filters: JSON.stringify({
-            validity_range: this.validityRange.id,
+            time_grid: this.timeGrid.id,
           }),
         };
       },
       skip() {
-        return this.validityRange === null;
+        return this.timeGrid === null;
       },
       update: (data) => data.items,
       result({ data: { items } }) {
@@ -79,6 +80,8 @@ export default defineComponent({
 
 <template>
   <div class="timetable">
+    <!-- Empty div to fill top-left corner -->
+    <div></div>
     <v-card
       v-for="period in periods"
       :style="{
@@ -102,6 +105,13 @@ export default defineComponent({
       :style="styleForLesson(lesson)"
       :key="lesson.id"
     />
+
+    <message-box type="info" v-if="!lessons || lessons.length === 0">
+      {{ $t("lesrooster.timetable_management.no_lessons") }}
+    </message-box>
+    <message-box type="warning" v-if="!slots || slots.length === 0">
+      {{ $t("lesrooster.timetable_management.no_slots") }}
+    </message-box>
   </div>
 </template>