diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue index cb5a5fe47d31f073efc96b27387f0a689b0c23f6..6af4f3d26190ea3a17e5c5b59981fa56ab817318 100644 --- a/aleksis/apps/alsijil/frontend/components/Coursebook.vue +++ b/aleksis/apps/alsijil/frontend/components/Coursebook.vue @@ -56,33 +56,15 @@ </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> + <CoursebookEmptyMessage icon="mdi-book-off-outline"> + {{ $t("alsijil.coursebook.no_data") }} + </CoursebookEmptyMessage> </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> + <CoursebookEmptyMessage icon="mdi-book-alert-outline"> + {{ $t("alsijil.coursebook.no_results", { search: $refs.iterator.search }) }} + </CoursebookEmptyMessage> </template> </c-r-u-d-iterator> </template> @@ -90,17 +72,15 @@ <script> import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue"; import DocumentationModal from "./documentation/DocumentationModal.vue"; -import { DateTime } from "luxon"; -import { - coursesOfTeacher, - documentationsForCoursebook, - groupsByOwner, -} from "./coursebook.graphql"; +import {DateTime} from "luxon"; +import {coursesOfTeacher, documentationsForCoursebook, groupsByOwner,} from "./coursebook.graphql"; import CoursebookLoader from "./CoursebookLoader.vue"; +import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue"; export default { name: "Coursebook", components: { + CoursebookEmptyMessage, CoursebookLoader, CRUDIterator, DocumentationModal, diff --git a/aleksis/apps/alsijil/frontend/components/CoursebookEmptyMessage.vue b/aleksis/apps/alsijil/frontend/components/CoursebookEmptyMessage.vue new file mode 100644 index 0000000000000000000000000000000000000000..059d613c3b4fb0a1d6b8234ae0c74c2d7a673cec --- /dev/null +++ b/aleksis/apps/alsijil/frontend/components/CoursebookEmptyMessage.vue @@ -0,0 +1,25 @@ +<template> + <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">{{ icon }}</v-icon> + </div> + <v-list-item-title> + <slot></slot> + </v-list-item-title> + </v-list-item-content> + </v-list-item> +</template> +<script> +export default { + name: 'CoursebookEmptyMessage', + props: { + icon: { + type: String, + default: 'mdi-book-alert-outline', + }, + }, +} +</script> \ No newline at end of file