feat: enhance modal confirmation by adding customizable title and updating related components

Author: SerVitasik

adminforth/spa/src/adminforth.ts

@@ -118,11 +118,12 @@ class FrontendAPI implements FrontendAPIInterface {
 
   confirm(params: Parameters<FrontendAPIInterface['confirm']>[0]): ReturnType<FrontendAPIInterface['confirm']> {
     return new Promise((resolve, reject) => {
-      this.modalStore.setModalContent({ 
-        content: params.message, 
+      this.modalStore.setModalContent({
+        title: params.title,
+        content: params.message,
         contentHTML: params.messageHtml,
         acceptText: params.yes || 'Yes',
-        cancelText: params.no || 'Cancel' 
+        cancelText: params.no || 'Cancel'
       })
       this.modalStore.onAcceptFunction = resolve
       this.modalStore.onCancelFunction = reject

adminforth/spa/src/components/AcceptModal.vue

@@ -22,8 +22,8 @@
           </div>
         </div>
 
-          <h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
-            There are unsaved changes.
+          <h3 v-if="modalStore?.modalContent?.title" class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+            {{ modalStore.modalContent.title }}
           </h3>
 
           <div class="mb-2 text-[15px] text-gray-600 dark:text-gray-300">
@@ -35,7 +35,7 @@
 
           <div class="flex justify-center gap-4 w-full">
             <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
-                Stay and continue
+                {{ modalStore?.modalContent?.cancelText }}
             </button>
 
             <button 
@@ -47,7 +47,7 @@
                     border border-red-700 dark:border-red-600 
                     rounded-lg shadow-sm focus:z-10 focus:ring-4 
                     focus:ring-red-100 dark:focus:ring-red-900 gap-1">
-                Leave without saving
+                {{ modalStore?.modalContent?.acceptText }}
             </button>
           </div>
 

adminforth/spa/src/stores/modal.ts

@@ -32,7 +32,7 @@ export const useModalStore = defineStore('modal', () => {
   }
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
-      title: content.title || 'title',
+      title: content.title || '',
       content: content.content || '',
       contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',

adminforth/spa/src/utils/utils.ts

@@ -781,9 +781,10 @@ export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any,
         generateMessageHtmlForRecordChange(changedFields, t);
 
       const answer = await confirm({
+        title: t('There are unsaved changes'),
         messageHtml,
-        yes: t('Yes'),
-        no: t('No'),
+        yes: t('Leave without saving'),
+        no: t('Stay and continue'),
       });
 
       return answer;

adminforth/types/FrontendAPI.ts

@@ -160,6 +160,10 @@ export interface FrontendAPIInterface {
 }
 
 export type ConfirmParams = {
+    /**
+     * The title to display in the dialog
+     */
+    title?: string;
     /**
      * The message to display in the dialog
      */