modal store changes pulled in

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,28 +187,32 @@ 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;
 		}
 		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);
 	});