Use primevue toast for alert messages

assets/css/scss/index.scss

@@ -11,6 +11,7 @@
 @import 'layout/sidebar';
 @import "layout/breadcrumb";
 @import 'layout/main_container';
+@import 'layout/toast';
 
 @import 'forums';
 @import 'exercise';

assets/css/scss/layout/_toast.scss

@@ -0,0 +1,86 @@
+.p-toast {
+  @apply opacity-95;
+
+  .p-toast-message {
+    @apply mb-4 shadow-sm rounded-md border-0;
+
+    .p-toast-message-content {
+      @apply py-3 px-4;
+
+      .p-toast-message-text {
+        @apply ml-4;
+      }
+
+      .p-toast-message-icon {
+        @apply leading-normal;
+      }
+
+      .p-toast-summary {
+        @apply mb-2;
+
+        &:empty {
+          @apply hidden;
+        }
+      }
+
+      .p-toast-detail {
+      }
+    }
+
+    .p-toast-icon-close {
+      @apply rounded-full transition duration-200 w-6 h-6;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      &:focus {
+        @apply outline-none outline-offset-0 shadow-none;
+      }
+    }
+  }
+  .p-toast-message.p-toast-message-info {
+    @apply bg-blue-500 text-white;
+
+    .p-toast-message-icon {
+      @apply text-white;
+    }
+
+    .p-toast-icon-close {
+      @apply text-white;
+    }
+  }
+  .p-toast-message.p-toast-message-success {
+    @apply bg-green-500 text-white;
+
+    .p-toast-message-icon {
+      @apply text-white;
+    }
+
+    .p-toast-icon-close {
+      @apply text-white;
+    }
+  }
+  .p-toast-message.p-toast-message-warn {
+    @apply bg-yellow-500 text-neutral-900;
+
+    .p-toast-message-icon {
+      @apply text-neutral-900;
+    }
+
+    .p-toast-icon-close {
+      @apply text-neutral-900;
+    }
+  }
+  .p-toast-message.p-toast-message-error {
+    @apply bg-red-500 text-white;
+
+    .p-toast-message-icon {
+      @apply text-white;
+    }
+
+    .p-toast-icon-close {
+      @apply text-white;
+    }
+  }
+}

assets/vue/App.vue

@@ -8,6 +8,9 @@
       id="legacy_content"
       v-html="legacyContent"
     />
+    <Toast
+      position="top-center"
+    />
   </component>
 </template>
 
@@ -19,7 +22,8 @@ import {ApolloClient, createHttpLink, InMemoryCache} from '@apollo/client/core';
 import {useStore} from "vuex";
 import axios from "axios";
 import {isEmpty} from "lodash";
-import showMessage from "./utils/showMessage";
+import Toast from "primevue/toast";
+import {useToast} from 'primevue/usetoast';
 
 const apolloClient = new ApolloClient({
   link: createHttpLink({
@@ -32,6 +36,7 @@ provide(DefaultApolloClient, apolloClient);
 
 const route = useRoute();
 const router = useRouter();
+const toast = useToast();
 
 const layout = computed(
   () => {
@@ -130,7 +135,11 @@ if (app && app.hasAttribute('data-flashes')) {
 
   for (const key in flashes) {
     for (const flashText in flashes[key]) {
-      showMessage(flashes[key][flashText], key);
+      toast.add({
+        severity: key,
+        detail: flashes[key][flashText],
+        life: 5000,
+      });
     }
   }
 }
@@ -139,11 +148,17 @@ axios.interceptors.response.use(
   undefined,
   (error) => new Promise(() => {
     if (401 === error.response.status) {
-      showMessage(error.response.data.error, 'warning');
+      toast.add({
+        severity: 'warn',
+        detail: error.response.data.error,
+        life: 5000,
+      });
     } else if (500 === error.response.status) {
-      if (error.response) {
-        showMessage(error.response.data.detail, 'warning');
-      }
+      toast.add({
+        severity: 'warn',
+        detail: error.response.data.detail,
+        life: 5000,
+      });
     }
 
     throw error;

assets/vue/main.js

@@ -230,12 +230,14 @@ import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 import Column from 'primevue/column';
 import ColumnGroup from 'primevue/columngroup';
+import ToastService from 'primevue/toastservice';
 
 // import 'primevue/resources/themes/tailwind-light/theme.css';
 import 'primevue/resources/primevue.min.css';
 // import 'primeflex/primeflex.css';
 import "primeicons/primeicons.css";
 
+app.use(ToastService);
 app.component('Dialog', Dialog);
 app.component('DataView', DataView);
 app.component('DataTable', DataTable);

assets/vue/utils/showMessage.js

@@ -1,33 +0,0 @@
-import {useQuasar} from "quasar";
-
-const showMessage = function (message, type = 'success') {
-    const $q = useQuasar();
-
-    let color = 'primary';
-
-    switch (type) {
-        case 'info':
-            break;
-        case 'success':
-            color = 'green';
-            break;
-        case 'error':
-        case 'danger':
-            color = 'red';
-            break;
-        case 'warning':
-            color = 'yellow';
-            break
-    }
-
-    $q.notify({
-        position: 'top',
-        timeout: 10000,
-        message: message,
-        color: color,
-        html: true,
-        multiLine: true,
-    });
-};
-
-export default showMessage;