diff --git a/aleksis/apps/chronos/frontend/components/SelectTimetable.vue b/aleksis/apps/chronos/frontend/components/SelectTimetable.vue index 3839ca4fb89c3289f2d993bc5a28e4d64930a848..5d4166431e14db4fcc412d7ddc7ed4fe69ce6008 100644 --- a/aleksis/apps/chronos/frontend/components/SelectTimetable.vue +++ b/aleksis/apps/chronos/frontend/components/SelectTimetable.vue @@ -1,8 +1,12 @@ <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> diff --git a/aleksis/apps/chronos/frontend/components/TimetableWrapper.vue b/aleksis/apps/chronos/frontend/components/TimetableWrapper.vue index d3228681ac045848c0d04c98b96f01e7e7bda508..7c20ad9f35f640761fe780936fd64c817201436a 100644 --- a/aleksis/apps/chronos/frontend/components/TimetableWrapper.vue +++ b/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 diff --git a/aleksis/apps/chronos/frontend/messages/de.json b/aleksis/apps/chronos/frontend/messages/de.json index adab92e71b393416e57743324d0e2134888b586e..22f1d39408366e190c21e38b2f338c0f96118e76 100644 --- a/aleksis/apps/chronos/frontend/messages/de.json +++ b/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" diff --git a/aleksis/apps/chronos/frontend/messages/en.json b/aleksis/apps/chronos/frontend/messages/en.json index 7ca0d3ee9fcc7774032eb2c2fa13950c361d898f..2f1145662f4cc77518ae28c4ad2405b99afa5d3e 100644 --- a/aleksis/apps/chronos/frontend/messages/en.json +++ b/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"