Merge pull request #351 from devforth/AdminForth/688

feat: add possibility to add buttons in adminforth.alert method

Author: ivictbor

adminforth/spa/src/adminforth.ts

@@ -97,13 +97,24 @@ class FrontendAPI implements FrontendAPIInterface {
     })
   }
 
-  alert(params: AlertParams): void {
-    this.toastStore.addToast({
+  alert(params: AlertParams): void | Promise<string> | string {
+    const toats = {
       message: params.message,
       messageHtml: params.messageHtml,
       variant: params.variant,
-      timeout: params.timeout  
-    })
+      timeout: params.timeout,
+      buttons: params.buttons,  
+    }
+    if (params.buttons && params.buttons.length > 0) {
+      return new Promise<string>((resolve) => {
+        this.toastStore.addToast({
+          ...toats,
+          onResolve: (value?: any) => resolve(String(value ?? '')),
+        })
+      })
+    } else {
+      this.toastStore.addToast({...toats})
+    }
   }
 
   listFilterValidation(filter: FilterParams): boolean {

adminforth/spa/src/components/Toast.vue

@@ -30,7 +30,18 @@
     </div>
 
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
-    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>
+        <div class="flex flex-col items-center justify-center">
+            {{toast.message}}
+            <div class="flex justify-center mt-2 gap-2">
+                <div v-for="button in toast.buttons" class="rounded-md bg-lightButtonsBackground hover:bg-lightButtonsHover text-lightButtonsText dark:bg-darkPrimary dark:hover:bg-darkButtonsBackground  dark:text-darkButtonsText">
+                    <button @click="onButtonClick(button.value)" class="px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/10">
+                        {{ button.label }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
     <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
         <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
@@ -53,16 +64,28 @@ const props = defineProps<{
         variant: string;
         id: string;
         timeout?: number|'unlimited';
+        buttons?: { value: any; label: string }[];
     }
 }>();
 function closeToast() {
+    // resolve with undefined on close (X button)
+    toastStore.resolveToast(props.toast.id);
+    emit('close');
+}
+
+function onButtonClick(value: any) {
+    toastStore.resolveToast(props.toast.id, value);
     emit('close');
 }
 
 onMounted(() => {
     if (props.toast.timeout === 'unlimited') return;
     else { 
-      setTimeout(() => {emit('close');}, (props.toast.timeout || 10) * 1e3 );
+      setTimeout(() => {
+        // resolve with undefined on auto-timeout
+        toastStore.resolveToast(props.toast.id);
+        emit('close');
+      }, (props.toast.timeout || 10) * 1e3 );
     }
 });
 

adminforth/spa/src/stores/toast.ts

@@ -12,19 +12,38 @@ export const useToastStore = defineStore('toast', () => {
     watch(route, () => {
         // on route change clear all toasts older then 5 seconds
         const now = +new Date();
-        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+        toasts.value = toasts.value.filter((t) => t?.timeout === 'unlimited' || now - t.createdAt < 5000);
     });
 
-    const addToast = (toast: { message: string; variant: string }) => {
+    const addToast = (toast: { 
+        message?: string; 
+        messageHtml?: string; 
+        variant: string; 
+        timeout?: number | 'unlimited';
+        buttons?: { value: any; label: string }[];
+        onResolve?: (value?: any) => void;
+    }): string => {
         const toastId = uuid();
         toasts.value.push({
             ...toast,
             id: toastId,
             createdAt: +new Date(),
         });
+        return toastId;
     };
     const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
-    return { toasts, addToast, removeToast };
+
+    const resolveToast = (toastId: string, value?: any) => {
+        const t = toasts.value.find((x) => x.id === toastId);
+        try {
+            t?.onResolve?.(value);
+        } catch {
+            // no-op
+        }
+        toasts.value = toasts.value.filter((x) => x.id !== toastId);
+    };
+
+    return { toasts, addToast, removeToast, resolveToast };
 });

adminforth/types/FrontendAPI.ts

@@ -55,7 +55,7 @@ export interface FrontendAPIInterface {
      * 
      * @param params - The parameters of the alert
      */
-    alert(params:AlertParams): void;
+    alert(params:AlertParams): void | Promise<string> | string;
 
 
     list: {
@@ -179,7 +179,12 @@ export type AlertParams = {
      * Default is 10 seconds;
      */
     timeout?: number | 'unlimited';
-    
+
+    /**
+     * Optional buttons to display in the alert
+     */
+    buttons?: {value: any, label: string}[];
+
 }