diff --git a/src/components/_toast.vue b/src/components/_toast.vue index aa54b38..891fb23 100644 --- a/src/components/_toast.vue +++ b/src/components/_toast.vue @@ -27,9 +27,9 @@ import { Toast } from 'bootstrap' export type ToastContent = { id: string - autoHide: boolean | undefined - color: string | undefined - delay: number | undefined + autoHide?: boolean + color?: string + delay?: number text: string } diff --git a/src/components/_toaster.vue b/src/components/_toaster.vue index dcffe1c..1fbc2d1 100644 --- a/src/components/_toaster.vue +++ b/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(), })) }, diff --git a/src/helpers/toasts.ts b/src/helpers/toasts.ts new file mode 100644 index 0000000..417cd02 --- /dev/null +++ b/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 } diff --git a/src/main.ts b/src/main.ts index ced9c87..8caeed9 100644 --- a/src/main.ts +++ b/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, { - autoHide: false, - color: 'danger', - text: errorText, - } as ToastContent) + this.bus.emit(BusEventTypes.Toast, errorToast(errorText)) throw new Error(`login failed, status=${resp.status}`) }