diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js index f2f1bd7c7..beac13296 100644 --- a/src/stores/modalStore.js +++ b/src/stores/modalStore.js @@ -18,12 +18,14 @@ export const useModalStore = defineStore('modal', () => { } return 0; }); - /** dialogProps coming from openDialog */ const dialogProps = ref({}); const dialogOpened = ref(false); function openDialog(_dialogProps) { + if (_dialogProps.bodyComponent) { + _dialogProps.bodyComponent = markRaw(_dialogProps.bodyComponent); + } dialogProps.value = _dialogProps; dialogOpened.value = true; } @@ -105,45 +107,16 @@ export const useModalStore = defineStore('modal', () => { sideModal1.value = opts; } else if (!sideModal2.value?.opened || sideModal2.value?.toBeClosed) { sideModal2.value = opts; + } else if (!sideModal3.value?.opened || sideModal3.value?.toBeClosed) { + sideModal3.value = opts; } } - function closeSideModal(triggerLegacyCloseHandler = true, _modalId) { - let modalToClose = null; - if (sideModal1?.value?.modalId === _modalId && sideModal1?.value?.opened) { - modalToClose = sideModal1; - } - - if (sideModal2?.value?.modalId === _modalId && sideModal2?.value?.opened) { - modalToClose = sideModal2; - } - - // it might have been replaced with other modal - if (!modalToClose) { - return; - } - - modalToClose.value.opened = false; - if (modalToClose.value.onClose) { - modalToClose.value.onClose(); - } - // To keep the side modal animation nice, it needs to keep the component&props around for bit longer - setTimeout(() => { - if (!modalToClose.value?.opened) { - modalToClose.value = null; - } - }, 300); - - // When closing legacy modal its always important to do legacy handler clean up. - // Therefore it depends if the close request is coming from the legacy handler, in such - // case the clean up will be done as part of that. - // Or whether close is triggered by clicking on close button or outside of the modal, which needs - // to trigger handler modalClose explicitelly - if ( - triggerLegacyCloseHandler && - modalToClose.value?.props?.options?.modalHandler - ) { - modalToClose.value?.props?.options?.modalHandler.modalClose(); + function closeSideModal(component, returnData) { + if (sideModal1?.value?.component === component) { + closeSideModalById(false, sideModal1?.value?.modalId, returnData); + } else if (sideModal2?.value?.component === component) { + closeSideModalById(false, sideModal2?.value?.modalId, returnData); } } @@ -203,7 +176,7 @@ export const useModalStore = defineStore('modal', () => { } // Listener for open modal requests coming from legacy handler. - pkp.eventBus.$on('open-modal-vue', (_args) => { + pkp?.eventBus?.$on('open-modal-vue', (_args) => { const props = _args.options?.props || {}; openSideModal( _args.component, @@ -214,7 +187,7 @@ export const useModalStore = defineStore('modal', () => { // For special case when the closing modal is delayed, but we know it will be closed. // Therefore any quick subsequent modal open should replace this one rather than creating second level - pkp.eventBus.$on('close-modal-vue-soon', (_args) => { + pkp?.eventBus?.$on('close-modal-vue-soon', (_args) => { const modalId = _args.modalId; if (sideModal1.value?.modalId === modalId) { sideModal1.value.toBeClosed = true; @@ -222,20 +195,24 @@ export const useModalStore = defineStore('modal', () => { if (sideModal2.value?.modalId === modalId) { sideModal2.value.toBeClosed = true; } + + if (sideModal3.value?.modalId === modalId) { + sideModal3.value.toBeClosed = true; + } }); // Listener for close modal requests coming from legacy handler. - pkp.eventBus.$on('close-modal-vue', (_args) => { - closeSideModal(false, _args.modalId); + pkp?.eventBus?.$on('close-modal-vue', (_args) => { + closeSideModalById(false, _args.modalId); }); // Listener for open dialog modals coming from legacy handler. - pkp.eventBus.$on('open-dialog-vue', (_args) => { + pkp?.eventBus?.$on('open-dialog-vue', (_args) => { openDialog(_args.dialogProps); }); // Listener for close dialog modals coming from legacy handler. - pkp.eventBus.$on('close-dialog-vue', (_args) => { + pkp?.eventBus?.$on('close-dialog-vue', (_args) => { closeDialog(false); });