Merge branch...

Merge branch '263-loading-animation-for-timetable-object-select-on-left-side-of-timetables' into 'master'

Resolve "Loading animation for timetable object select on left side of timetables"

Closes #263

See merge request !393

aleksis/apps/chronos/frontend/components/SelectTimetable.vue

 <script>
 import timetableTypes from "./timetableTypes";
+import Mascot from "aleksis.core/components/generic/mascot/Mascot.vue";
 
 export default {
   name: "SelectTimetable",
+  components: {
+    Mascot,
+  },
   props: {
     value: {
       type: Object,
@@ -13,6 +17,16 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    limitHeight: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -49,6 +63,7 @@ export default {
       <!-- Search field for timetables -->
       <v-text-field
         search
+        dense
         filled
         rounded
         clearable
@@ -57,11 +72,11 @@ export default {
         :placeholder="$t('chronos.timetable.search')"
         prepend-inner-icon="mdi-magnify"
         hide-details="auto"
-        class="mb-2"
+        class="mb-3"
       />
 
       <!-- Filter by timetable types -->
-      <v-btn-toggle v-model="selectedType" dense block class="d-flex">
+      <v-btn-toggle v-model="selectedType" dense block class="d-flex" mandatory>
         <v-btn
           v-for="type in types"
           :key="type.id"
@@ -80,6 +95,10 @@ export default {
       :search="search"
       single-expand
       disable-pagination
+      hide-default-footer
+      :loading="loading"
+      :style="{ height: limitHeight ? '600px' : null }"
+      :class="{ 'overflow-auto': limitHeight }"
     >
       <template #default="{ items, isExpanded, expand }">
         <v-list class="scrollable-list">
@@ -107,9 +126,23 @@ export default {
         </v-list>
       </template>
       <template #loading>
-        <v-skeleton-loader
-          type="list-item-avatar,list-item-avatar,list-item-avatar"
-        />
+        <v-skeleton-loader type="list-item-avatar@10" />
+      </template>
+      <template #no-results>
+        <div class="d-flex flex-column align-center justify-center">
+          <mascot type="searching" width="33%" min-width="250px" />
+          <div class="mb-2">
+            {{ $t("$vuetify.dataIterator.noResultsText") }}
+          </div>
+        </div>
+      </template>
+      <template #no-data>
+        <div class="d-flex flex-column align-center justify-center">
+          <mascot type="ready_for_items" width="33%" min-width="250px" />
+          <div class="mb-2">
+            {{ $t("chronos.timetable.no_timetables_in_term") }}
+          </div>
+        </div>
       </template>
     </v-data-iterator>
   </div>

aleksis/apps/chronos/frontend/components/TimetableWrapper.vue

@@ -134,6 +134,7 @@ export default {
           <select-timetable
             v-model="selected"
             @input="selectDialog = false"
+            :loading="$apollo.queries.availableTimetables.loading"
             :available-timetables="availableTimetables"
           />
         </v-card>
@@ -148,7 +149,9 @@ export default {
         <v-card>
           <select-timetable
             v-model="selected"
+            :loading="$apollo.queries.availableTimetables.loading"
             :available-timetables="availableTimetables"
+            limit-height
           />
         </v-card>
       </v-col>
@@ -161,7 +164,7 @@ export default {
 
         <!-- Calendar card-->
         <v-card v-else>
-          <div class="d-flex flex-column" v-if="$vuetify.breakpoint.smAndDown">
+          <div class="d-flex flex-column" v-if="$vuetify.breakpoint.mdAndDown">
             <v-card-title class="pt-2">
               <v-btn
                 icon

aleksis/apps/chronos/frontend/messages/de.json

@@ -46,6 +46,7 @@
       "menu_title_all": "Alle Stundenpläne",
       "menu_title_my": "Mein Stundenplan",
       "next": "Nächster Stundenplan",
+      "no_timetables_in_term": "Keine Stundenpläne im ausgewählten Schuljahr",
       "no_timetable_selected": {
         "description": "Wählen Sie auf der linken Seite einen Stundenplan aus, um ihn hier anzuzeigen",
         "title": "Kein Stundenplan ausgewählt"

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

@@ -17,7 +17,8 @@
         "groups": "Groups",
         "teachers": "Teachers",
         "rooms": "Rooms"
-      }
+      },
+      "no_timetables_in_term": "No timetables in the selected school term."
     },
     "lessons": {
       "menu_title_daily": "Daily lessons"