Simplify toast code

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/components/_toast.vue

@@ -27,9 +27,9 @@ import { Toast } from 'bootstrap'
 
 export type ToastContent = {
   id: string
-  autoHide: boolean | undefined
+  autoHide?: boolean
-  color: string | undefined
+  color?: string
-  delay: number | undefined
+  delay?: number
   text: string
 }
 

src/components/_toaster.vue

@@ -32,7 +32,7 @@ export default defineComponent({
   mounted() {
     this.bus.on(BusEventTypes.Toast, (toast: ToastContent) => this.toasts.push({
       ...toast,
-      id: crypto.randomUUID(),
+      id: toast.id || crypto.randomUUID(),
     }))
   },
 

src/helpers/toasts.ts

@@ -0,0 +1,40 @@
+import { ToastContent } from '../components/_toast.vue'
+
+/**
+ * Create the content of an error-toast
+ *
+ * @param text The message to display to the user
+ * @returns The {ToastContent} for usage in `this.bus.emit(BusEventTypes.Toast, errorToast(...))`
+ */
+const errorToast = (text: string): ToastContent => ({
+  autoHide: false,
+  color: 'danger',
+  id: crypto.randomUUID(),
+  text,
+})
+
+/**
+ * Create the content of an info-toast
+ *
+ * @param text The message to display to the user
+ * @returns The {ToastContent} for usage in `this.bus.emit(BusEventTypes.Toast, infoToast(...))`
+ */
+const infoToast = (text: string): ToastContent => ({
+  color: 'info',
+  id: crypto.randomUUID(),
+  text,
+})
+
+/**
+ * Create the content of an success-toast
+ *
+ * @param text The message to display to the user
+ * @returns The {ToastContent} for usage in `this.bus.emit(BusEventTypes.Toast, successToast(...))`
+ */
+const successToast = (text: string): ToastContent => ({
+  color: 'success',
+  id: crypto.randomUUID(),
+  text,
+})
+
+export { errorToast, infoToast, successToast }

src/main.ts

@@ -10,7 +10,7 @@ import mitt from 'mitt'
 
 import BusEventTypes from './helpers/busevents'
 import ConfigNotifyListener from './helpers/configNotify'
-import { ToastContent } from './components/_toast.vue'
+import { errorToast } from './helpers/toasts'
 
 import router from './router'
 import App from './components/app.vue'
@@ -159,11 +159,7 @@ const app = createApp({
             }
 
             this.bus.emit(BusEventTypes.LoginProcessing, false)
-            this.bus.emit(BusEventTypes.Toast, {
+            this.bus.emit(BusEventTypes.Toast, errorToast(errorText))
-              autoHide: false,
-              color: 'danger',
-              text: errorText,
-            } as ToastContent)
             throw new Error(`login failed, status=${resp.status}`)
           }