From 46efd6aad088b61fd40f7c06d889951520e0a4b3 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Tue, 20 Feb 2024 18:51:01 +0100
Subject: [PATCH] Display loader and messages for empty coursebook correctly
using slots of crud-iterator
---
.../frontend/components/Coursebook.vue | 126 ++++++++++--------
.../apps/alsijil/frontend/messages/de.json | 4 +-
.../apps/alsijil/frontend/messages/en.json | 4 +-
3 files changed, 79 insertions(+), 55 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
index e8495f952..6f921697d 100644
--- a/aleksis/apps/alsijil/frontend/components/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
@@ -31,59 +31,79 @@
/>
</template>
<template #default="{ items }">
- <template v-if="!$refs.iterator.loading">
- <v-list-item v-for="day in groupDocsByDay(items)" two-line>
- <v-list-item-content>
- <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
- <v-list max-width="100%">
- <v-list-item v-for="doc in day.slice(1)">
- <documentation-modal
- :documentation="doc"
- :affected-query="lastQuery"
- />
- </v-list-item>
- </v-list>
- </v-list-item-content>
- </v-list-item>
- </template>
- <template v-else>
- <v-list-item v-for="_ in 10">
- <v-list-item-content>
- <v-list-item-title>
- <v-skeleton-loader type="heading"/>
- </v-list-item-title>
- <v-list max-width="100%">
- <v-list-item v-for="_ in 5">
- <v-card class="my-2 full-width">
- <div class="full-width d-flex flex-column align-stretch flex-md-row">
- <v-card-text>
- <v-skeleton-loader
- type="avatar, heading, chip"
- class="d-flex full-width align-center gap"
- height="100%"
- />
- </v-card-text>
- <v-card-text>
- <v-skeleton-loader
- type="heading@2"
- class="d-flex full-width align-center gap"
- height="100%"
- />
- </v-card-text>
- <v-card-text>
- <v-skeleton-loader
- type="chip@3"
- class="d-flex full-width align-center justify-end gap"
- height="100%"
- />
- </v-card-text>
- </div>
- </v-card>
- </v-list-item>
- </v-list>
- </v-list-item-content>
- </v-list-item>
- </template>
+ <v-list-item v-for="day in groupDocsByDay(items)" two-line>
+ <v-list-item-content>
+ <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
+ <v-list max-width="100%">
+ <v-list-item v-for="doc in day.slice(1)">
+ <documentation-modal
+ :documentation="doc"
+ :affected-query="lastQuery"
+ />
+ </v-list-item>
+ </v-list>
+ </v-list-item-content>
+ </v-list-item>
+ </template>
+ <template #loading>
+ <v-list-item v-for="_ in 10">
+ <v-list-item-content>
+ <v-list-item-title>
+ <v-skeleton-loader type="heading"/>
+ </v-list-item-title>
+ <v-list max-width="100%">
+ <v-list-item v-for="_ in 5">
+ <v-card class="my-2 full-width">
+ <div class="full-width d-flex flex-column align-stretch flex-md-row">
+ <v-card-text>
+ <v-skeleton-loader
+ type="avatar, heading, chip"
+ class="d-flex full-width align-center gap"
+ height="100%"
+ />
+ </v-card-text>
+ <v-card-text>
+ <v-skeleton-loader
+ type="heading@2"
+ class="d-flex full-width align-center gap"
+ height="100%"
+ />
+ </v-card-text>
+ <v-card-text>
+ <v-skeleton-loader
+ type="chip@3"
+ class="d-flex full-width align-center justify-end gap"
+ height="100%"
+ />
+ </v-card-text>
+ </div>
+ </v-card>
+ </v-list-item>
+ </v-list>
+ </v-list-item-content>
+ </v-list-item>
+ </template>
+
+ <template #no-data>
+ <v-list-item>
+ <v-list-item-content class="d-flex justify-center align-center flex-column full-width">
+ <div class="mb-4">
+ <v-icon large color="primary">mdi-book-off-outline</v-icon>
+ </div>
+ <v-list-item-title>{{ $t("alsijil.coursebook.no_data") }}</v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
+ </template>
+
+ <template #no-results>
+ <v-list-item>
+ <v-list-item-content class="d-flex justify-center align-center flex-column full-width">
+ <div class="mb-4">
+ <v-icon large color="primary">mdi-book-alert-outline</v-icon>
+ </div>
+ <v-list-item-title>{{ $t("alsijil.coursebook.no_results", { search: $refs.iterator.search }) }}</v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</template>
</c-r-u-d-iterator>
</template>
diff --git a/aleksis/apps/alsijil/frontend/messages/de.json b/aleksis/apps/alsijil/frontend/messages/de.json
index 2a689c6de..ad85a2b6a 100644
--- a/aleksis/apps/alsijil/frontend/messages/de.json
+++ b/aleksis/apps/alsijil/frontend/messages/de.json
@@ -53,7 +53,9 @@
"groups": "Klassen",
"courses": "Kurse",
"filter_for_obj": "Nach Klasse und Kurs filtern"
- }
+ },
+ "no_data": "Keine Stunden der ausgewählten Gruppen und Kurse im aktuellen Zeitraum",
+ "no_results": "Keine Suchergebnisse für {search}"
}
}
}
diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json
index c9a267ef4..36791b8fa 100644
--- a/aleksis/apps/alsijil/frontend/messages/en.json
+++ b/aleksis/apps/alsijil/frontend/messages/en.json
@@ -53,7 +53,9 @@
"groups": "School classes",
"courses": "Courses",
"filter_for_obj": "Filter for school class and course"
- }
+ },
+ "no_data": "No lessons for the selected groups and courses in this period",
+ "no_results": "No search results for {search}"
}
}
}
--
GitLab