Update notification management

Author: ValentinCrochemore

templates/quasar/components/foo/UpdateComponent.vue

@@ -28,7 +28,7 @@ import { storeToRefs } from 'pinia';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { onBeforeUnmount } from 'vue';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { displaySuccessNotification } from 'src/utils/notifications';
+import { useNotifications } from 'src/composables/notifications';
 import { useI18n } from 'vue-i18n';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
@@ -38,6 +38,7 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
+const { displaySuccessNotification } = useNotifications();
 
 const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
 const {
@@ -78,7 +79,7 @@ async function submitForm(item: {{titleUcFirst}}) {
     return;
   }
 
-  displaySuccessNotification(`${item['@id']} ${t('updated')}.`, t('close'));
+  displaySuccessNotification(`${item['@id']} ${t('updated')}.`);
 }
 
 useWatchErrors([error, deleteError]);

templates/quasar/composables/errors.ts

@@ -1,19 +1,18 @@
 import { Ref, watch } from 'vue';
-import { displayErrorNotification } from 'src/utils/notifications';
-import { useI18n } from 'vue-i18n';
+import { useNotifications } from './notifications';
 
 export function useWatchErrors(
   errors: (Ref<string | undefined> | undefined)[]
 ) {
-  const { t } = useI18n();
+  const { displayErrorNotification } = useNotifications();
 
   watch(errors, (newErrors) => {
     newErrors.forEach((newError) => {
       if (!newError?.value) {
         return;
       }
 
-      displayErrorNotification(newError.value, t('close'));
+      displayErrorNotification(newError.value);
     });
   });
 }

templates/quasar/composables/notifications.ts

@@ -0,0 +1,30 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useNotifications() {
+  const $q = useQuasar();
+  const { t } = useI18n();
+
+  const displayErrorNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'red',
+      icon: 'error',
+      closeBtn: t('close'),
+    });
+  };
+
+  const displaySuccessNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'green',
+      icon: 'tag_faces',
+      closeBtn: t('close'),
+    });
+  };
+
+  return {
+    displayErrorNotification,
+    displaySuccessNotification,
+  };
+}