Extract coursebook errors into different component

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,

aleksis/apps/alsijil/frontend/components/CoursebookEmptyMessage.vue

+<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