Merge pull request #625 from devforth/feature/AdminForth/1629/search-bulk-ai-pluggin-problem

fix: fix close dialog logic

Author: SerVitasik

adminforth/spa/src/afcl/Dialog.vue

@@ -77,6 +77,56 @@ interface DialogButton {
   options?: Record<string, any> 
 }
 
+const modalRef = ref();
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  header: '',
+  headerCloseButton: true,
+  buttons: () => [],
+  clickToCloseOutside: false,
+  closeByEsc: true,
+  closeByClickOutside: true,
+  beforeCloseFunction: null,
+  beforeOpenFunction: null,
+  closable: false,
+  askForCloseConfirmation: false,
+  closeConfirmationText: 'Are you sure you want to close this dialog?',
+  removeFromDomOnClose: false,
+})
+
+const buttons = computed<DialogButton[]>(() => {
+  if (props.buttons && props.buttons.length > 0) {
+    return props.buttons;
+  }
+  return [
+    {
+      label: 'Close',
+      onclick: (dialog: any) => {
+        tryToHideModal();
+      },
+      options: {}
+    }
+  ];
+});
+
+
+function open() {
+  modalRef.value.open();
+}
+
+function close() {
+  modalRef.value.close();
+}
+
+defineExpose({
+  open: open,
+  close: close,
+  tryToHideModal: tryToHideModal,
+})
+
+function tryToHideModal() {
+  modalRef.value?.tryToHideModal();
+}
 
 interface DialogProps {
   /**
@@ -114,7 +164,7 @@ interface DialogProps {
   /**
    * Function that will be called before the dialog is closed. 
    */
-  beforeCloseFunction?: (() => void | Promise<void>) | null
+  beforeCloseFunction?: (() => void | Promise<void | boolean>) | null
 
   /**
    * Function that will be called before the dialog is opened. 
@@ -167,58 +217,4 @@ const dialog: Ref<Dialog> = ref(
 );
 /*************************************************************/
 
-
-
-const modalRef = ref();
-
-const props = withDefaults(defineProps<DialogProps>(), {
-  header: '',
-  headerCloseButton: true,
-  buttons: () => [],
-  clickToCloseOutside: false,
-  closeByEsc: true,
-  closeByClickOutside: true,
-  beforeCloseFunction: null,
-  beforeOpenFunction: null,
-  closable: false,
-  askForCloseConfirmation: false,
-  closeConfirmationText: 'Are you sure you want to close this dialog?',
-  removeFromDomOnClose: false,
-})
-
-const buttons = computed<DialogButton[]>(() => {
-  if (props.buttons && props.buttons.length > 0) {
-    return props.buttons;
-  }
-  return [
-    {
-      label: 'Close',
-      onclick: (dialog: any) => {
-        tryToHideModal();
-      },
-      options: {}
-    }
-  ];
-});
-
-
-function open() {
-  modalRef.value.open();
-}
-
-function close() {
-  modalRef.value.close();
-}
-
-defineExpose({
-  open: open,
-  close: close,
-  tryToHideModal: tryToHideModal,
-})
-
-function tryToHideModal() {
-  modalRef.value?.tryToHideModal();
-}
-
-
 </script>

adminforth/spa/src/afcl/Modal.vue

@@ -68,7 +68,7 @@ const removeFromDom = computed(() => {
 interface DialogProps {
   closeByClickOutside?: boolean
   closeByEsc?: boolean
-  beforeCloseFunction?: (() => void | Promise<void>) | null
+  beforeCloseFunction?: (() => void | Promise<void | boolean>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
   askForCloseConfirmation?: boolean
   closeConfirmationText?: string
@@ -101,7 +101,10 @@ async function open() {
 
 async function close() {
   if (props.beforeCloseFunction) {
-    await props.beforeCloseFunction?.();
+    const shouldClose =  await props.beforeCloseFunction?.();
+    if (shouldClose === false) {
+      return;
+    }
   }
   isModalOpen.value = false;
 }