From 06ad4e15ca5cfccae66331897244c3ce5a9da2b6 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 29 Feb 2024 15:01:48 +0100
Subject: [PATCH] Extract coursebook errors into different component
---
.../frontend/components/Coursebook.vue | 40 +++++--------------
.../components/CoursebookEmptyMessage.vue | 25 ++++++++++++
2 files changed, 35 insertions(+), 30 deletions(-)
create mode 100644 aleksis/apps/alsijil/frontend/components/CoursebookEmptyMessage.vue
diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
index cb5a5fe47..6af4f3d26 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 000000000..059d613c3
--- /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
--
GitLab