✨ 55 feature improve snackbar (#56)

* ✨ introduced the new snackbar queue with composable * 🔥 removed old snackbar and store * changed to new snackbar queue * changed to new snackbar queue * changed to new snackbar queue and changed api call to wait * changed to new snackbar queue and changed api call to wait * ✅ adjusted tests to fit new snackbar queue * moved eventbus to the composable --------- Co-authored-by: langehm <[email protected]>
it-at-m · Dec 3, 2024 · 5cce51f · 5cce51f
1 parent c9b010d
commit 5cce51f
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 163 deletions.
diff --git a/anzeigen-frontend/src/App.vue b/anzeigen-frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <the-snackbar />
+    <the-snackbar-queue />
     <v-app-bar color="primary">
       <v-container class="ad-max-width">
         <v-row
@@ -66,7 +66,7 @@ import { onMounted } from "vue";
 import { getUser } from "@/api/user-client";
 import Ad2ImageAvatar from "@/components/common/Ad2ImageAvatar.vue";
 import SearchAd from "@/components/Filter/SearchAd.vue";
-import TheSnackbar from "@/components/TheSnackbar.vue";
+import TheSnackbarQueue from "@/components/TheSnackbarQueue.vue";
 import { useApi } from "@/composables/useApi";
 import { useUserStore } from "@/stores/user";
 import User, { UserLocalDevelopment } from "@/types/User";

diff --git a/anzeigen-frontend/src/Constants.ts b/anzeigen-frontend/src/Constants.ts
@@ -11,3 +11,10 @@ export const ROUTER_TYPE = "hash";
  * EventBus Identifiers
  */
 export const EV_EDIT_AD_DIALOG = "eventbus-dialog";
+export const EV_SNACKBAR = "eventbus-snackbar";
+
+/**
+ * Messages
+ */
+export const API_ERROR_MSG =
+  "Ein Fehler ist aufgetreten. Bitte aktualisieren Sie die Seite oder versuchen Sie es später erneut.";
diff --git a/anzeigen-frontend/src/components/Filter/FilterAdCategory.vue b/anzeigen-frontend/src/components/Filter/FilterAdCategory.vue
@@ -51,12 +51,14 @@ import { onMounted, ref, watch } from "vue";
 import { Levels } from "@/api/error";
 import AdDisplayCard from "@/components/common/AdDisplayCard.vue";
 import { useGetCategories } from "@/composables/api/useGetCategories";
-import { useSnackbarStore } from "@/stores/snackbar";
+import { useSnackbar } from "@/composables/useSnackbar";
+import { API_ERROR_MSG } from "@/Constants";
+
+const snackbar = useSnackbar();
 
 const NO_CATEGORY = { id: -1, name: "Alle", standard: true };
 
 const { call: getCategories, data, loading, error } = useGetCategories();
-const snackbarStore = useSnackbarStore();
 
 const categoryQuery = useRouteQuery("categoryId");
 
@@ -68,10 +70,9 @@ onMounted(async () => {
 
   // error catching
   if (error.value) {
-    // TODO: Does not work yet
-    snackbarStore.showMessage({
-      message: "Hilfe hier ist ein Fehler aufgetreten",
+    snackbar.sendMessage({
       level: Levels.ERROR,
+      message: API_ERROR_MSG,
     });
   }
 

diff --git a/anzeigen-frontend/src/components/TheSnackbar.vue b/anzeigen-frontend/src/components/TheSnackbar.vue
diff --git a/anzeigen-frontend/src/components/TheSnackbarQueue.vue b/anzeigen-frontend/src/components/TheSnackbarQueue.vue
@@ -0,0 +1,57 @@
+<template>
+  <v-snackbar-queue v-model="queue">
+    <template #text="textData">
+      <v-layout class="align-center">
+        <v-icon
+          class="mr-3"
+          size="25"
+          :icon="textData.item.icon"
+        />
+        <p class="text-body-1">{{ textData.item.text }}</p>
+      </v-layout>
+    </template>
+  </v-snackbar-queue>
+</template>
+
+<script setup lang="ts">
+import type { SnackbarMessage } from "@/types/SnackbarMessage";
+
+import { ref } from "vue";
+import { VSnackbarQueue } from "vuetify/labs/VSnackbarQueue";
+
+import { Levels } from "@/api/error";
+import { snackbarBus } from "@/composables/useSnackbar";
+
+const queue = ref<SnackbarMessageInternal[]>([]);
+
+interface SnackbarMessageInternal {
+  text: string;
+  timeout: number;
+  color: string;
+  icon: string;
+}
+
+snackbarBus.on((message: SnackbarMessage) => {
+  queue.value.push({
+    color: message.level || "info",
+    text: message.message || "",
+    timeout: message.timeout || message.level === Levels.ERROR ? 10000 : 5000,
+    icon: getIcon(message.level || Levels.INFO),
+  });
+});
+
+const getIcon = (level: Levels) => {
+  switch (level) {
+    case Levels.INFO:
+      return "mdi-information-outline";
+    case Levels.ERROR:
+      return "mdi-alert-outline";
+    case Levels.SUCCESS:
+      return "mdi-check-circle-outline";
+    case Levels.WARNING:
+      return "mdi-alert-outline";
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/anzeigen-frontend/src/composables/api/useGetCategories.ts b/anzeigen-frontend/src/composables/api/useGetCategories.ts
@@ -16,35 +16,21 @@ export function useGetCategories() {
   const error = readonly(errorInternal);
   const data = readonly(dataInternal);
 
-  const call = async () => {
+  const call = () => {
     loadingInternal.value = true;
     errorInternal.value = false;
 
-    const result = api.getAllAdCategories();
-    result
+    return api
+      .getAllAdCategories()
       .then((data) => {
         dataInternal.value = data;
       })
       .catch(() => {
         errorInternal.value = true;
       })
-      .finally(() => (loadingInternal.value = false));
-
-    /*dataInternal.value = [
-        { id: 5, name: "Sonstiges", standard: true },
-        { id: 1, name: "Möbel, Ausstattung und Garten", standard: false },
-        { id: 2, name: "Bücher, Filme und Musik", standard: false },
-        { id: 4, name: "Freizeit, Sport und Hobby", standard: false },
-        { id: 3, name: "Immobilien und Wohnungen", standard: false },
-        { id: 6, name: "Auto und Motorrad", standard: false },
-        { id: 7, name: "Dienstleistungen", standard: false },
-        { id: 8, name: "Eintrittskarten und Tickets", standard: false },
-        { id: 9, name: "Elektronik", standard: false },
-        { id: 10, name: "Familie und Kind", standard: false },
-        { id: 12, name: "Kleidung", standard: false },
-        { id: 13, name: "Lost and Found (Fundsachen)", standard: false },
-        { id: 14, name: "Tausche Hilfe gegen Hilfe", standard: false },
-      ];*/
+      .finally(() => {
+        loadingInternal.value = false;
+      });
   };
 
   return {

diff --git a/anzeigen-frontend/src/composables/useSnackbar.ts b/anzeigen-frontend/src/composables/useSnackbar.ts
@@ -0,0 +1,15 @@
+import type { SnackbarMessage } from "@/types/SnackbarMessage";
+
+import { useEventBus } from "@vueuse/core";
+
+import { EV_SNACKBAR } from "@/Constants";
+
+export const snackbarBus = useEventBus<SnackbarMessage>(EV_SNACKBAR);
+
+export const useSnackbar = () => {
+  const sendMessage = (message: SnackbarMessage) => {
+    snackbarBus.emit(message);
+  };
+
+  return { sendMessage };
+};
diff --git a/anzeigen-frontend/src/stores/snackbar.ts b/anzeigen-frontend/src/stores/snackbar.ts
diff --git a/anzeigen-frontend/src/types/SnackbarMessage.ts b/anzeigen-frontend/src/types/SnackbarMessage.ts
@@ -0,0 +1,7 @@
+import { Levels } from "@/api/error";
+
+export interface SnackbarMessage {
+  message?: string | undefined;
+  level?: Levels;
+  timeout?: number;
+}
diff --git a/anzeigen-frontend/src/views/AdBoard.vue b/anzeigen-frontend/src/views/AdBoard.vue
@@ -23,17 +23,17 @@ import { checkHealth } from "@/api/health-client";
 import AdDialog from "@/components/Ad/Edit/AdDialog.vue";
 import AdList from "@/components/AdList.vue";
 import AdNavBar from "@/components/AdNavBar.vue";
-import { useSnackbarStore } from "@/stores/snackbar";
+import { useSnackbar } from "@/composables/useSnackbar";
 import HealthState from "@/types/HealthState";
 
-const snackbarStore = useSnackbarStore();
+const snackbar = useSnackbar();
 const status = ref("DOWN");
 
 onMounted(() => {
   checkHealth()
     .then((content: HealthState) => (status.value = content.status))
     .catch((error) => {
-      snackbarStore.showMessage(error);
+      snackbar.sendMessage(error);
     });
 });
 </script>

diff --git a/anzeigen-frontend/tests/unit/example.spec.ts b/anzeigen-frontend/tests/unit/example.spec.ts
@@ -5,7 +5,7 @@ import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 
-import TheSnackbar from "@/components/TheSnackbar.vue";
+import TheSnackbarQueue from "../../src/components/TheSnackbarQueue.vue";
 
 const pinia = createPinia();
 
@@ -26,7 +26,7 @@ describe("TheSnackbar.vue", () => {
 
   it("renders props.message when passed", () => {
     const message = "Hello_World";
-    const wrapper = shallowMount(TheSnackbar, {
+    const wrapper = shallowMount(TheSnackbarQueue, {
       global: {
         plugins: [pinia, vuetify],
       },