pkp/pkp-lib#10988 Add support for 4th level of side modal, as there a…

…re use cases requiring that
jardakotesovec · Feb 26, 2025 · 5c73d99 · 5c73d99
1 parent 5593cc2
commit 5c73d99
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/src/components/Modal/ModalManager.vue b/src/components/Modal/ModalManager.vue
@@ -52,6 +52,33 @@
 					:key="sideModal3?.modalId"
 					v-bind="sideModal3?.props"
 				/>
+				<PkpDialog
+					:key="JSON.stringify(dialogProps)"
+					:opened="dialogOpened && dialogLevel === 3"
+					v-bind="dialogProps"
+					@close="closeDialog"
+				></PkpDialog>
+				<SideModal
+					:data-cy="
+						activeModalId === sideModal4?.modalId ? 'active-modal' : undefined
+					"
+					close-label="Close"
+					:modal-level="4"
+					:open="sideModal4?.opened || false"
+					@close="(returnData) => close(sideModal4?.modalId, returnData)"
+				>
+					<component
+						:is="component4"
+						:key="sideModal4?.modalId"
+						v-bind="sideModal4?.props"
+					/>
+					<PkpDialog
+						:key="JSON.stringify(dialogProps)"
+						:opened="dialogOpened && dialogLevel === 4"
+						v-bind="dialogProps"
+						@close="closeDialog"
+					></PkpDialog>
+				</SideModal>
 			</SideModal>
 		</SideModal>
 	</SideModal>
@@ -79,13 +106,16 @@ const {
 	sideModal1,
 	sideModal2,
 	sideModal3,
+	sideModal4,
 	dialogProps,
 	dialogOpened,
 	dialogLevel,
 } = storeToRefs(useModalStore());
 
 const activeModalId = computed(() => {
-	if (sideModal3.value?.opened) {
+	if (sideModal4.value?.opened) {
+		return sideModal4.value.modalId;
+	} else if (sideModal3.value?.opened) {
 		return sideModal3.value.modalId;
 	} else if (sideModal2.value?.opened) {
 		return sideModal2.value.modalId;
@@ -118,6 +148,13 @@ const component3 = computed(() => {
 	return GlobalModals[sideModal3.value.component] || sideModal3.value.component;
 });
 
+const component4 = computed(() => {
+	if (!sideModal4.value?.component) {
+		return null;
+	}
+	return GlobalModals[sideModal4.value.component] || sideModal4.value.component;
+});
+
 function close(modalId, returnData) {
 	modalStore.closeSideModalById(true, modalId, returnData);
 }

diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
@@ -68,6 +68,10 @@ const {t} = useLocalize();
 
 /** Handle styling for nested SideModals */
 const levelClasses = computed(() => {
+	if (modalLevel.value === 4) {
+		return 'max-w-[72vw]';
+	}
+
 	if (modalLevel.value === 3) {
 		return 'max-w-[79vw]';
 	}

diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js
@@ -11,7 +11,11 @@ export const useModalStore = defineStore('modal', () => {
 	 */
 
 	const dialogLevel = computed(() => {
-		if (sideModal2?.value?.opened) {
+		if (sideModal4?.value?.opened) {
+			return 4;
+		} else if (sideModal3?.value?.opened) {
+			return 3;
+		} else if (sideModal2?.value?.opened) {
 			return 2;
 		} else if (sideModal1?.value?.opened) {
 			return 1;
@@ -72,6 +76,9 @@ export const useModalStore = defineStore('modal', () => {
 	// object structure: { modalId, props, opened, component}
 	const sideModal3 = ref(null);
 
+	// object structure: { modalId, props, opened, component}
+	const sideModal4 = ref(null);
+
 	// creating unique modalId to ensure correct modal is being closed
 	let modalIdCounter = 1;
 
@@ -113,6 +120,8 @@ export const useModalStore = defineStore('modal', () => {
 			sideModal2.value = opts;
 		} else if (!sideModal3.value?.opened || sideModal3.value?.toBeClosed) {
 			sideModal3.value = opts;
+		} else if (!sideModal4.value?.opened || sideModal4.value?.toBeClosed) {
+			sideModal4.value = opts;
 		}
 	}
 
@@ -121,6 +130,10 @@ export const useModalStore = defineStore('modal', () => {
 			closeSideModalById(false, sideModal1?.value?.modalId, returnData);
 		} else if (sideModal2?.value?.component === component) {
 			closeSideModalById(false, sideModal2?.value?.modalId, returnData);
+		} else if (sideModal3?.value?.component === component) {
+			closeSideModalById(false, sideModal3?.value?.modalId, returnData);
+		} else if (sideModal4?.value?.component === component) {
+			closeSideModalById(false, sideModal4?.value?.modalId, returnData);
 		}
 	}
 
@@ -129,6 +142,10 @@ export const useModalStore = defineStore('modal', () => {
 			return true;
 		} else if (sideModal2?.value?.component === component) {
 			return true;
+		} else if (sideModal3?.value?.component === component) {
+			return true;
+		} else if (sideModal4?.value?.component === component) {
+			return true;
 		}
 		return false;
 	}
@@ -151,6 +168,10 @@ export const useModalStore = defineStore('modal', () => {
 			modalToClose = sideModal3;
 		}
 
+		if (sideModal4?.value?.modalId === _modalId && sideModal4?.value?.opened) {
+			modalToClose = sideModal4;
+		}
+
 		// it might have been replaced with other modal
 		if (!modalToClose) {
 			return;
@@ -203,6 +224,10 @@ export const useModalStore = defineStore('modal', () => {
 		if (sideModal3.value?.modalId === modalId) {
 			sideModal3.value.toBeClosed = true;
 		}
+
+		if (sideModal4.value?.modalId === modalId) {
+			sideModal4.value.toBeClosed = true;
+		}
 	});
 
 	// Listener for close modal requests coming from legacy handler.
@@ -236,5 +261,6 @@ export const useModalStore = defineStore('modal', () => {
 		sideModal1,
 		sideModal2,
 		sideModal3,
+		sideModal4,
 	};
 });