From b2f2b54cde7e17dfcbf4a6a2019109e12e9d1ff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 8 Jan 2024 11:27:34 +0100
Subject: [PATCH] pkp/pkp-lib#9527 refine modals

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 src/components/Container/Page.vue             |  3 +
 src/components/Modal/AjaxModalWrapper.vue     | 37 +++++--
 src/components/Modal/Dialog.vue               | 96 +++++++++----------
 src/components/Modal/LegacyModalManager.vue   | 43 +++++++++
 src/components/Modal/SideModalBody.vue        | 43 ++++++---
 src/components/Modal/SideModalBodyAjax.vue    | 19 ++++
 src/pages/submissions/ColumnActivity.vue      | 58 +++++------
 .../submissions/SubmissionSummaryModal.vue    | 86 ++++++++---------
 src/stores/dialogStore.js                     |  2 +
 11 files changed, 243 insertions(+), 154 deletions(-)
 create mode 100644 src/components/Modal/LegacyModalManager.vue
 create mode 100644 src/components/Modal/SideModalBodyAjax.vue

diff --git a/package-lock.json b/package-lock.json
index 4df24fc21..59ebd81ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.6.5",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "3.4",
         "vite": "^4.4.9",
         "vitest": "^1.0.4"
       }
@@ -15321,9 +15321,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
-      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
diff --git a/package.json b/package.json
index 44d02504e..610705d4e 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.5",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4",
     "vite": "^4.4.9",
     "vitest": "^1.0.4"
   },
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index 66a297ad8..37c641f0a 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -2,6 +2,8 @@
 import {mapStores} from 'pinia';
 import Container from '@/components/Container/Container.vue';
 import PkpDialog from '@/components/Modal/Dialog.vue';
+import LegacyModalManager from '@/components/Modal/LegacyModalManager.vue';
+
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 // store
 import {useDialogStore} from '@/stores/dialogStore.js';
@@ -11,6 +13,7 @@ export default {
 	components: {
 		PkpDialog,
 		PkpAnnouncer,
+		LegacyModalManager,
 	},
 	extends: Container,
 	setup() {
diff --git a/src/components/Modal/AjaxModalWrapper.vue b/src/components/Modal/AjaxModalWrapper.vue
index 30ca8e2b8..a9ce50e94 100644
--- a/src/components/Modal/AjaxModalWrapper.vue
+++ b/src/components/Modal/AjaxModalWrapper.vue
@@ -5,9 +5,10 @@
 import {ref, onMounted, inject, defineProps} from 'vue';
 import {useFetch} from '@/composables/useFetch';
 
-const props = defineProps({
-	contentUrl: {
-		type: String,
+const {options} = defineProps({
+	options: {
+		type: Object,
+		default: () => {},
 	},
 });
 
@@ -15,8 +16,9 @@ const contentDiv = ref(null);
 // eslint-disable-next-line no-unused-vars
 const pkp = window.pkp;
 
-const {data: assignParticipantPageData, fetch: fetchAssignParticipantPage} =
-	useFetch(props.contentUrl);
+const {data: modalData, fetch: fetchAssignParticipantPage} = useFetch(
+	options.url,
+);
 
 const closeModal = inject('closeModal');
 const registerCloseCallback = inject('registerCloseCallback');
@@ -48,14 +50,35 @@ function catchInsideClick(e) {
 	}
 }
 
+function passToBridge(jQueryEvent) {
+	// If we have an event bridge configured then re-trigger
+	// the event on the target object.
+	if (options.eventBridge) {
+		$('[id^="' + options.eventBridge + '"]').trigger(
+			jQueryEvent.type,
+			jQueryEvent.data,
+		);
+	}
+}
+
 onMounted(async () => {
 	await fetchAssignParticipantPage();
-	if (assignParticipantPageData.value) {
-		$(contentDiv.value).html(assignParticipantPageData.value.content);
+	if (modalData.value) {
+		// TODO CONSIDER REMOVE BINDS ON UNMOUNT
+		$(contentDiv.value).html(modalData.value.content);
 		$(contentDiv.value).bind('formSubmitted', closeModal);
 		$(contentDiv.value).bind('formCanceled', closeModal);
 		$(contentDiv.value).bind('ajaxHtmlError', closeModal);
 		$(contentDiv.value).bind('modalFinished', closeModal);
+
+		// Publish some otherwise private events triggered
+		// by nested widgets so that they can be handled by
+		// the element that opened the modal.
+
+		$(contentDiv.value).bind('redirectRequested', passToBridge);
+		$(contentDiv.value).bind('dataChanged', passToBridge);
+		$(contentDiv.value).bind('updateHeader', passToBridge);
+		$(contentDiv.value).bind('gridRefreshRequested', passToBridge);
 	}
 });
 </script>
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index e97239571..3a92c9960 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
-	<TransitionRoot as="template" :show="open">
-		<HLDialog class="modal" :class="'modal--' + type" @close="onClose">
+	<TransitionRoot as="template" :show="opened">
+		<HLDialog class="modal" :class="'modal--popup'" @close="onClose">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -31,29 +31,29 @@
 							class="modal__panel modal__panel--dialog rounded-lg shadow-xl relative mx-3 w-10/12 max-w-3xl transform overflow-hidden bg-lightest text-left transition-all sm:my-8"
 						>
 							<div class="modal__header">
-								<DialogTitle v-if="title" class="modal__title">
-									{{ title }}
+								<DialogTitle v-if="dialogProps.title" class="modal__title">
+									{{ dialogProps.title }}
 								</DialogTitle>
 								<button class="modal__closeButton" @click="onClose">
 									<span :aria-hidden="true">×</span>
 									<span class="-screenReader">
-										{{ closeLabel || t('common.close') }}
+										{{ dialogProps.closeLabel || t('common.close') }}
 									</span>
 								</button>
 							</div>
 							<div class="modal__content">
-								<div v-html="message" />
+								<div v-html="dialogProps.message" />
 							</div>
 							<div class="modal__footer">
-								<spinner v-if="isLoading" />
+								<spinner v-if="dialogProps.isLoading" />
 								<pkp-button
-									v-for="action in actions"
+									v-for="action in dialogProps.actions"
 									:key="action.label"
 									:element="action.element || 'button'"
 									:href="action.href || null"
 									:is-primary="action.isPrimary || null"
 									:is-warnable="action.isWarnable || null"
-									:is-disabled="isLoading"
+									:is-disabled="dialogProps.isLoading"
 									@click="
 										action.callback ? fireCallback(action.callback) : null
 									"
@@ -69,7 +69,10 @@
 	</TransitionRoot>
 </template>
 
-<script>
+<script setup>
+import {ref, computed, onMounted, onUnmounted} from 'vue';
+import {storeToRefs} from 'pinia';
+
 import {
 	Dialog as HLDialog,
 	DialogTitle,
@@ -78,17 +81,41 @@ import {
 	TransitionChild,
 } from '@headlessui/vue';
 
-import Modal from './Modal.vue';
+import {useDialogStore} from '@/stores/dialogStore';
+const modalLevel = ref(0);
+const dialogStore = useDialogStore();
+const {dialogProps, dialogOpened, currentLevel} = storeToRefs(dialogStore);
+const {closeDialog} = dialogStore;
+
+const opened = computed(
+	() => dialogOpened.value && modalLevel.value === currentLevel.value,
+);
+
+const isLoading = ref(false);
+
+function onClose() {
+	isLoading.value = false;
+	closeDialog();
+}
 
-export default {
-	components: {
-		HLDialog,
-		DialogTitle,
-		DialogPanel,
-		TransitionRoot,
-		TransitionChild,
-	},
-	extends: Modal,
+function fireCallback(callback) {
+	isLoading.value = true;
+	if (typeof callback === 'function') {
+		callback(() => {
+			onClose();
+		});
+	}
+}
+
+onMounted(() => {
+	currentLevel.value = currentLevel.value + 1;
+	modalLevel.value = currentLevel.value;
+});
+
+onUnmounted(() => {
+	currentLevel.value = currentLevel.value - 1;
+});
+/*export default {
 	props: {
 		actions: {
 			type: Array,
@@ -117,32 +144,5 @@ export default {
 				return '';
 			},
 		},
-	},
-	data() {
-		return {
-			isLoading: false,
-		};
-	},
-	mounted() {},
-	unmounted() {
-		if (typeof this.close === 'function') {
-			this.close();
-		}
-	},
-	methods: {
-		fireCallback(callback) {
-			this.isLoading = true;
-			if (typeof callback === 'function') {
-				callback(() => {
-					this.onClose();
-				});
-			}
-		},
-		onClose() {
-			// reset state;
-			this.isLoading = false;
-			this.$emit('close');
-		},
-	},
-};
+	},*/
 </script>
diff --git a/src/components/Modal/LegacyModalManager.vue b/src/components/Modal/LegacyModalManager.vue
new file mode 100644
index 000000000..5f4974a95
--- /dev/null
+++ b/src/components/Modal/LegacyModalManager.vue
@@ -0,0 +1,43 @@
+<template>
+	<SideModal close-label="Close" :open="isOpened" @close="close">
+		<SideModalBodyAjax :options="options" />
+		<SideModal close-label="Close" :open="isOpened2" @close="close2">
+			<SideModalBodyAjax :options="options2" />
+		</SideModal>
+	</SideModal>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import SideModal from '@/components/Modal/SideModal.vue';
+import SideModalBodyAjax from '@/components/Modal/SideModalBodyAjax.vue';
+
+const isOpened = ref(false);
+const isOpened2 = ref(false);
+
+const options = ref(null);
+const options2 = ref(null);
+
+function close() {
+	isOpened.value = false;
+	options.value = null;
+}
+
+function close2() {
+	isOpened2.value = false;
+	options2.value = null;
+}
+
+// 			pkp.eventBus.$emit('open-tab', tab);
+
+pkp.eventBus.$on('open-modal-vue', (_options) => {
+	console.log('open modal vue:', _options);
+	if (options.value) {
+		options2.value = _options;
+		isOpened2.value = true;
+		return;
+	}
+	options.value = _options;
+	isOpened.value = true;
+});
+</script>
diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
index 0b0aaabf1..aed3cfd48 100644
--- a/src/components/Modal/SideModalBody.vue
+++ b/src/components/Modal/SideModalBody.vue
@@ -26,12 +26,23 @@
 						</button>
 					</div>
 					<div class="ml-8 mr-8 flex-grow">
-						<slot name="header" :close-modal="closeModal" />
-						<!--<DialogTitle
-							class="text-gray-900 font-semibold leading-6 text-base"
-						>
-							Panel title
-						</DialogTitle>-->
+						<div class="flex">
+							<div class="flex-grow">
+								<div class="text-xl-medium"><slot name="pre-title"></slot></div>
+								<DialogTitle as="h1" class="mt-1 text-4xl-bold">
+									<slot name="title"></slot>
+								</DialogTitle>
+								<DialogDescription class="mt-1 text-3xl-normal">
+									<slot name="description"></slot>
+								</DialogDescription>
+								<div class="mt-1">
+									<slot name="post-description"></slot>
+								</div>
+							</div>
+							<div class="flex items-center">
+								<slot name="actions" />
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -39,17 +50,19 @@
 				<slot :close-modal="closeModal" />
 			</div>
 		</div>
+		<PkpDialog></PkpDialog>
 	</DialogPanel>
 </template>
 
-<script>
-import {DialogPanel /*DialogTitle*/} from '@headlessui/vue';
+<script setup>
+import {inject} from 'vue';
+import {DialogPanel, DialogTitle, DialogDescription} from '@headlessui/vue';
 import Icon from '@/components/Icon/Icon.vue';
-export default {
-	components: {Icon, DialogPanel /*DialogTitle*/},
-	inject: ['closeModal'],
-	props: {
-		secondary: Boolean,
-	},
-};
+import PkpDialog from '@/components/Modal/Dialog.vue';
+
+const {secondary} = defineProps({
+	secondary: {type: Boolean, default: () => false},
+});
+
+const closeModal = inject('closeModal');
 </script>
diff --git a/src/components/Modal/SideModalBodyAjax.vue b/src/components/Modal/SideModalBodyAjax.vue
new file mode 100644
index 000000000..52a85f6fc
--- /dev/null
+++ b/src/components/Modal/SideModalBodyAjax.vue
@@ -0,0 +1,19 @@
+<template>
+	<SideModalBody :secondary="true">
+		<template #header><h1 class="text-4xl-bold">Assign editors</h1></template>
+		<div class="p-4">
+			<div class="bg-lightest p-4">
+				<AjaxModalWrapper :options="options" />
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import AjaxModalWrapper from '@/components/Modal/AjaxModalWrapper.vue';
+
+const {options} = defineProps({options: {type: Object, default: null}});
+console.log('side modal body ajax:', options);
+</script>
diff --git a/src/pages/submissions/ColumnActivity.vue b/src/pages/submissions/ColumnActivity.vue
index 3ac2d3b9c..bd5349d4d 100644
--- a/src/pages/submissions/ColumnActivity.vue
+++ b/src/pages/submissions/ColumnActivity.vue
@@ -1,7 +1,7 @@
 <template>
 	<TableCell>
 		<PkpButton
-			v-if="isManager && needsEditors(submission)"
+			v-if="canAssignEditor"
 			@click="submissionsPageStore.openAssignParticipantModal(submission)"
 		>
 			{{ t('submission.list.assignEditor') }}
@@ -12,42 +12,32 @@
 	</TableCell>
 </template>
 
-<script>
+<script setup>
+import {defineProps, computed} from 'vue';
 import TableCell from '@/components/TableNext/TableCell.vue';
 import ActivityIndicatorPopup from '@/components/ActivityIndicatorPopup/ActivityIndicatorPopup.vue';
-import {mapStores} from 'pinia';
 import {useSubmissionsPageStore} from '@/pages/submissions/submissionsPageStore';
 import PkpButton from '@/components/Button/Button.vue';
-export default {
-	components: {
-		PkpButton,
-		TableCell,
-		ActivityIndicatorPopup,
-	},
-	props: {
-		submission: Object,
-	},
-	computed: {...mapStores(useSubmissionsPageStore)},
-	methods: {
-		/**
-		 * Whether or not a submission needs an editor to be assigned
-		 */
-		needsEditors(submission) {
-			return !!submission.stages.find(
-				(stage) =>
-					stage.id === pkp.const.WORKFLOW_STAGE_ID_SUBMISSION &&
-					!!stage.statusId &&
-					stage.statusId === pkp.const.STAGE_STATUS_SUBMISSION_UNASSIGNED,
-			);
-		},
-		/**
-		 * Whether the current user is a manager (or admin)
-		 */
-		isManager() {
-			const roles = [pkp.const.ROLE_ID_MANAGER, pkp.const.ROLE_ID_SITE_ADMIN];
 
-			return !!pkp.currentUser.roles.find((role) => roles.includes(role));
-		},
-	},
-};
+const {submission} = defineProps({submission: Object});
+
+const submissionsPageStore = useSubmissionsPageStore();
+
+const needsEditors = computed(
+	() =>
+		!!submission.stages.find(
+			(stage) =>
+				stage.id === pkp.const.WORKFLOW_STAGE_ID_SUBMISSION &&
+				!!stage.statusId &&
+				stage.statusId === pkp.const.STAGE_STATUS_SUBMISSION_UNASSIGNED,
+		),
+);
+
+const roles = [pkp.const.ROLE_ID_MANAGER, pkp.const.ROLE_ID_SITE_ADMIN];
+
+const isManager = computed(
+	() => !!pkp.currentUser.roles.find((role) => roles.includes(role)),
+);
+
+const canAssignEditor = computed(() => isManager.value && needsEditors.value);
 </script>
diff --git a/src/pages/submissions/SubmissionSummaryModal.vue b/src/pages/submissions/SubmissionSummaryModal.vue
index 65b220999..4ea2146de 100644
--- a/src/pages/submissions/SubmissionSummaryModal.vue
+++ b/src/pages/submissions/SubmissionSummaryModal.vue
@@ -1,50 +1,46 @@
 <template>
 	<SideModalBody>
-		<template #header>
-			<div class="flex">
-				<div class="flex-grow">
-					{{ hola }}
-					<div class="text-xl-medium">{{ submission.id }}</div>
-					<h2 class="mt-1 text-4xl-bold underline">
-						{{ submission.publications[0].authorsStringShort }}
-					</h2>
-					<div class="mt-1 text-3xl-normal">
-						{{ submission.publications[0].fullTitle.en }}
-					</div>
-					<div class="mt-1">
-						<StageBubble :stage-id="submission.stageId">
-							<span class="text-lg-normal">
-								{{ submission.stageName }}
-							</span>
-							<template
-								v-if="
-									(submission.stageId ===
-										pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW ||
-										submission.stageId ===
-											pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW) &&
-									submission.reviewRounds.length
-								"
-							>
-								{{
-									t('common.inParenthesis', {
-										text: t('common.reviewRoundNumber', {
-											round:
-												submission.reviewRounds[
-													submission.reviewRounds.length - 1
-												].round,
-										}),
-									})
-								}}
-							</template>
-						</StageBubble>
-					</div>
-				</div>
-				<div class="flex items-center">
-					<PkpButton element="a" :href="submission.urlWorkflow">
-						View submission in detail
-					</PkpButton>
-				</div>
-			</div>
+		<template #pre-title>
+			{{ submission.id }}
+		</template>
+		<template #title>
+			<span class="underline">
+				{{ submission.publications[0].authorsStringShort }}
+			</span>
+		</template>
+		<template #description>
+			{{ submission.publications[0].fullTitle.en }}
+		</template>
+		<template #post-description>
+			<StageBubble :stage-id="submission.stageId">
+				<span class="text-lg-normal">
+					{{ submission.stageName }}
+				</span>
+				<template
+					v-if="
+						(submission.stageId ===
+							pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW ||
+							submission.stageId ===
+								pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW) &&
+						submission.reviewRounds.length
+					"
+				>
+					{{
+						t('common.inParenthesis', {
+							text: t('common.reviewRoundNumber', {
+								round:
+									submission.reviewRounds[submission.reviewRounds.length - 1]
+										.round,
+							}),
+						})
+					}}
+				</template>
+			</StageBubble>
+		</template>
+		<template #actions>
+			<PkpButton element="a" :href="submission.urlWorkflow">
+				View submission in detail
+			</PkpButton>
 		</template>
 		<div class="border-ligh flex w-full border-r border-t border-light">
 			<div class="w-3/5 border-r border-light p-4">
diff --git a/src/stores/dialogStore.js b/src/stores/dialogStore.js
index 3b8aaa605..c79dbc965 100644
--- a/src/stores/dialogStore.js
+++ b/src/stores/dialogStore.js
@@ -2,6 +2,7 @@ import {defineStore} from 'pinia';
 import {ref} from 'vue';
 import {t} from '@/utils/i18n';
 export const useDialogStore = defineStore('dialog', () => {
+	const currentLevel = ref(0);
 	const dialogProps = ref({});
 	const dialogOpened = ref(false);
 
@@ -32,6 +33,7 @@ export const useDialogStore = defineStore('dialog', () => {
 	}
 
 	return {
+		currentLevel,
 		dialogProps,
 		dialogOpened,
 		openDialogNetworkError,