Initial Workflow side modal implementation (#412)

* Initial Workflow side modal implementation

src/components/Dropdown/Dropdown.vue

@@ -15,6 +15,12 @@
 			<slot name="button">
 				<Icon v-if="icon" :icon="icon" :inline="true" />
 				{{ label }}
+				<Icon
+					v-if="hasDropdownIcon"
+					class="-mr-1 h-5 w-5 text-primary"
+					icon="Dropdown"
+					aria-hidden="true"
+				/>
 			</slot>
 		</PkpButton>
 		<div
@@ -72,6 +78,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		hasDropdownIcon: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

src/components/Form/fields/FieldSelectIssue.vue

@@ -35,7 +35,7 @@
 					v-if="button"
 					v-bind="button"
 					class="pkpFormField--selectIssue__button"
-					@click="emitGlobal(button.event)"
+					@click="selectIssue"
 				>
 					{{ button.label }}
 				</PkpButton>
@@ -111,15 +111,8 @@ export default {
 		 */
 		button() {
 			let button = null;
-			if (this.publicationStatus === pkp.const.STATUS_SCHEDULED) {
+			if (this.publicationStatus !== pkp.const.STATUS_PUBLISHED) {
 				button = {
-					event: 'unpublish:publication',
-					isWarnable: true,
-					label: this.unscheduleLabel,
-				};
-			} else if (this.publicationStatus !== pkp.const.STATUS_PUBLISHED) {
-				button = {
-					event: 'schedule:publication',
 					label: this.value ? this.changeIssueLabel : this.assignLabel,
 				};
 			}
@@ -162,6 +155,23 @@ export default {
 		},
 	},
 	methods: {
+		async selectIssue() {
+			// workaround to avoid circular dependencies in storybook
+			// There is chain if imports, and some of them imported form
+			// which seems to be causing circular dependency
+			const {useSubmissionSummaryStore} = await import(
+				'@/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js'
+			);
+
+			const summaryStore = useSubmissionSummaryStore();
+
+			summaryStore.workflowAssignToIssue({}, (finishedData) => {
+				if (finishedData.data.issueId) {
+					this.currentValue = finishedData.data.issueId;
+				}
+			});
+		},
+
 		/**
 		 * Emit a global event
 		 *

src/components/Form/mocks/field-select-issue.js

@@ -41,7 +41,7 @@ export default {
 	assignLabel: 'Assign to Issue',
 	assignedNoticeBase:
 		'This has been assigned to <a href="{$issueUrl}">{$issueName}</a> but it has not been scheduled for publication.',
-	changeIssue: 'Change Issue',
+	changeIssueLabel: 'Change Issue',
 	publishedNoticeBase:
 		'Published in <a href="http://example.com/issue/__issueId__">{$issueName}</a>.',
 	scheduledNoticeBase:

src/components/Icon/Icon.stories.js

@@ -67,7 +67,10 @@ export const iconGallery = {
 			'Cancel',
 			'Catalog',
 			'Complete',
+			'ChevronDown',
+			'ChevronUp',
 			'Dashboard',
+			'DefaultDocument',
 			'DecreaseTextSize',
 			'DisableUser',
 			'Dropdown',
@@ -76,7 +79,6 @@ export const iconGallery = {
 			'Email',
 			'EmailOpened',
 			'Expand',
-			'DefaultDocument',
 			'FileAudio',
 			'FileDoc',
 			'FileEpub',
@@ -87,6 +89,7 @@ export const iconGallery = {
 			'FileVideo',
 			'FileZip',
 			'Help',
+			'History',
 			'InProgress',
 			'IncreaseTextSize',
 			'InsertContent',
@@ -99,6 +102,7 @@ export const iconGallery = {
 			'MySubmissions',
 			'NavDoi',
 			'NavAdmin',
+			'New',
 			'Notifications',
 			'OpenReview',
 			'Orcid',
@@ -107,6 +111,7 @@ export const iconGallery = {
 			'Publication',
 			'ReadRecommendation',
 			'ReviewAssignments',
+			'ReviewRequestDeclined',
 			'ReviewSent',
 			'Search',
 			'Settings',

src/components/Icon/Icon.vue

@@ -44,6 +44,8 @@ import Bold from './icons/Bold.vue';
 import Bullets from './icons/Bullets.vue';
 import Cancel from './icons/Cancel.vue';
 import Catalog from './icons/Catalog.vue';
+import ChevronDown from './icons/ChevronDown.vue';
+import ChevronUp from './icons/ChevronUp.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
@@ -65,6 +67,7 @@ import FilePdf from './icons/FilePdf.vue';
 import FileVideo from './icons/FileVideo.vue';
 import FileZip from './icons/FileZip.vue';
 import Help from './icons/Help.vue';
+import History from './icons/History.vue';
 import InProgress from './icons/InProgress.vue';
 import IncreaseTextSize from './icons/IncreaseTextSize.vue';
 import InsertContent from './icons/InsertContent.vue';
@@ -77,6 +80,7 @@ import MoreOptions from './icons/MoreOptions.vue';
 import MySubmissions from './icons/MySubmissions.vue';
 import NavDoi from './icons/NavDoi.vue';
 import NavAdmin from './icons/NavAdmin.vue';
+import New from './icons/New.vue';
 import Notifications from './icons/Notifications.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
@@ -108,6 +112,8 @@ const svgIcons = {
 	Cancel,
 	Catalog,
 	Complete,
+	ChevronDown,
+	ChevronUp,
 	Dashboard,
 	DefaultDocument,
 	DecreaseTextSize,
@@ -128,6 +134,7 @@ const svgIcons = {
 	FileVideo,
 	FileZip,
 	Help,
+	History,
 	InProgress,
 	IncreaseTextSize,
 	InsertContent,
@@ -140,6 +147,7 @@ const svgIcons = {
 	MySubmissions,
 	NavDoi,
 	NavAdmin,
+	New,
 	Notifications,
 	OpenReview,
 	Orcid,

src/components/Icon/icons/ChevronDown.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M11.9999 13.9394L17.4696 8.46973L18.5303 9.53039L11.9999 16.0607L5.46961 9.53039L6.53027 8.46973L11.9999 13.9394Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

src/components/Icon/icons/ChevronUp.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12.0001 10.0606L6.53039 15.5303L5.46973 14.4696L12.0001 7.93929L18.5304 14.4696L17.4697 15.5303L12.0001 10.0606Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

src/components/Icon/icons/History.vue

@@ -0,0 +1,26 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="24" height="24" />
+		<g clip-path="url(#clip0_7755_18920)">
+			<path
+				d="M11.9999 7.46094C11.8525 7.46094 11.7112 7.51947 11.6071 7.62366C11.5029 7.72784 11.4443 7.86915 11.4443 8.01649V12.8609L14.7221 15.0832C14.8451 15.1613 14.9939 15.188 15.1365 15.1574C15.279 15.1269 15.4038 15.0415 15.4839 14.9198C15.5641 14.7981 15.5932 14.6497 15.565 14.5067C15.5368 14.3638 15.4536 14.2376 15.3332 14.1554L12.5554 12.272V8.01649C12.5554 7.86915 12.4969 7.72784 12.3927 7.62366C12.2885 7.51947 12.1472 7.46094 11.9999 7.46094Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M12 3.11133C10.4129 3.11689 8.8559 3.54489 7.48899 4.35137C6.12207 5.15785 4.99452 6.31372 4.2222 7.70022V4.88911C4.2222 4.74176 4.16366 4.60046 4.05948 4.49627C3.95529 4.39208 3.81398 4.33355 3.66664 4.33355C3.5193 4.33355 3.37799 4.39208 3.2738 4.49627C3.16962 4.60046 3.11108 4.74176 3.11108 4.88911V9.778H7.99997C8.14732 9.778 8.28862 9.71946 8.39281 9.61528C8.497 9.51109 8.55553 9.36978 8.55553 9.22244C8.55553 9.0751 8.497 8.93379 8.39281 8.8296C8.28862 8.72542 8.14732 8.66688 7.99997 8.66688H4.9722C5.67288 7.1881 6.82213 5.96799 8.25639 5.18018C9.69065 4.39236 11.3369 4.07699 12.9607 4.27893C14.5846 4.48088 16.1034 5.18985 17.301 6.30496C18.4986 7.42007 19.314 8.88451 19.6312 10.4899C19.9483 12.0952 19.7511 13.7597 19.0675 15.2465C18.3839 16.7332 17.2487 17.9665 15.8236 18.7708C14.3985 19.575 12.7561 19.9094 11.13 19.7261C9.5039 19.5429 7.97702 18.8515 6.76664 17.7502C6.71265 17.701 6.64949 17.6628 6.58077 17.638C6.51205 17.6132 6.4391 17.6021 6.36611 17.6055C6.29311 17.6088 6.22149 17.6265 6.15533 17.6575C6.08917 17.6886 6.02977 17.7323 5.98053 17.7863C5.93128 17.8403 5.89315 17.9035 5.86832 17.9722C5.84348 18.0409 5.83242 18.1139 5.83578 18.1869C5.83913 18.2599 5.85683 18.3315 5.88786 18.3976C5.91889 18.4638 5.96265 18.5232 6.01664 18.5724C7.0845 19.5449 8.37323 20.2424 9.77131 20.6048C11.1694 20.9672 12.6347 20.9834 14.0405 20.6521C15.4462 20.3208 16.7501 19.6519 17.8393 18.7034C18.9284 17.7549 19.77 16.5552 20.2913 15.2083C20.8125 13.8614 20.9977 12.4077 20.8308 10.9731C20.6639 9.5385 20.15 8.16617 19.3335 6.97486C18.5169 5.78355 17.4224 4.80914 16.1446 4.13596C14.8668 3.46277 13.4443 3.11108 12 3.11133Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_7755_18920">
+				<rect width="20" height="20" transform="translate(2 2)" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>

src/components/Icon/icons/New.vue

@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M20.5477 4.79141V14.8916C20.5471 15.0505 20.4836 15.2028 20.3713 15.3151C20.2589 15.4275 20.1067 15.491 19.9477 15.4916H16.9717V18.6141C16.9714 18.7732 16.9081 18.9256 16.7956 19.038C16.6832 19.1505 16.5308 19.2138 16.3717 19.2141H4.05215C3.89312 19.2138 3.7407 19.1505 3.62825 19.038C3.5158 18.9256 3.45248 18.7732 3.45215 18.6141V8.51393C3.45248 8.3549 3.5158 8.20249 3.62825 8.09004C3.7407 7.97759 3.89312 7.91427 4.05215 7.91393H7.02815V4.79141C7.02848 4.63238 7.0918 4.47996 7.20425 4.36751C7.3167 4.25506 7.46912 4.19174 7.62815 4.19141H19.9477C20.1068 4.19174 20.2592 4.25506 20.3716 4.36751C20.4841 4.47996 20.5474 4.63238 20.5477 4.79141ZM15.5709 15.4916H7.62941C7.47049 15.491 7.31826 15.4275 7.20588 15.3151C7.0935 15.2028 7.03008 15.0505 7.02941 14.8916V10.8962H4.85046V17.8133H15.5709V15.4916ZM19.1481 7.17372H8.42773V14.0908H19.1481V7.17372Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

src/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -293,6 +293,7 @@ export default {
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.t('grid.action.addContributor');
 			const {openSideModal} = useModal();
+
 			openSideModal(ContributorsEditModal, {
 				title: this.activeFormTitle,
 				activeForm: this.activeForm,

src/components/Modal/AjaxModalWrapper.vue

@@ -26,6 +26,10 @@ const contentDiv = ref(null);
 // eslint-disable-next-line no-unused-vars
 const pkp = window.pkp;
 
+// to collect data change events, which are passed on close
+// used in galleys when the new galley id is needed to open upload modal
+const dataChangedEvents = [];
+
 // Fetches html content from legacy endpoints
 const {data: modalData, fetch: fetchModalData} = useFetch(legacyOptions.url);
 
@@ -74,6 +78,8 @@ function passToHandlerElement(...args) {
 		const eventType = args?.[0]?.type;
 
 		if (eventType === 'dataChanged') {
+			dataChangedEvents.push(args?.[1]);
+
 			// Naive implementation to check for notifications for the actions in modals that are now opened from Vue.js, instead of the grid.
 			// Logic to trigger these notifications is LinkActionHandler.dataChangedHandler_
 			$('body').trigger('notifyUser');
@@ -88,14 +94,14 @@ function passToHandlerElement(...args) {
 				'wizardCancel',
 			].includes(eventType)
 		) {
-			closeModal();
+			closeModal({dataChanged: dataChangedEvents});
 		}
 	}
 
 	return;
 }
 
-function onVueFormSuccess(formId) {
+function onVueFormSuccess(formId, data) {
 	if (
 		legacyOptions.closeOnFormSuccessId &&
 		legacyOptions.closeOnFormSuccessId === formId
@@ -104,7 +110,7 @@ function onVueFormSuccess(formId) {
 			if (legacyOptions.modalHandler) {
 				legacyOptions.modalHandler.modalClose();
 			} else {
-				closeModal();
+				closeModal({formId, data});
 			}
 		}, 1000);
 	}

src/components/Modal/Dialog.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script setup>
-import {ref, watch} from 'vue';
+import {ref} from 'vue';
 import PkpButton from '@/components/Button/Button.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 
@@ -121,19 +121,6 @@ const emit = defineEmits(['close']);
 
 const isLoading = ref(false);
 
-// resetting state after close
-// this is not ideal approach, but given how little state the dialog has
-// its less complex than splitting dialog into two components to have proper life cycle
-// as we do with SideModal and SideModalBody
-watch(
-	() => props.opened,
-	(prevOpened, nextOpened) => {
-		if (prevOpened === true && nextOpened === false) {
-			isLoading.value = false;
-		}
-	},
-);
-
 function onClose() {
 	if (props.close) {
 		props.close();

src/components/Modal/ModalManager.vue

@@ -1,12 +1,14 @@
 <template>
 	<SideModal
+		:key="sideModal1?.modalId"
 		close-label="Close"
 		:open="sideModal1?.opened || false"
 		:modal-level="1"
-		@close="() => close(sideModal1?.modalId)"
+		@close="(returnData) => close(sideModal1?.modalId, returnData)"
 	>
 		<component :is="component1" v-bind="sideModal1?.props" />
 		<PkpDialog
+			:key="JSON.stringify(dialogProps)"
 			:opened="dialogOpened && dialogLevel === 1"
 			v-bind="dialogProps"
 			@close="closeDialog"
@@ -16,10 +18,15 @@
 			close-label="Close"
 			:modal-level="2"
 			:open="sideModal2?.opened || false"
-			@close="() => close(sideModal2?.modalId)"
+			@close="(returnData) => close(sideModal2?.modalId, returnData)"
 		>
-			<component :is="component2" v-bind="sideModal2?.props" />
+			<component
+				:is="component2"
+				:key="sideModal2?.modalId"
+				v-bind="sideModal2?.props"
+			/>
 			<PkpDialog
+				:key="JSON.stringify(dialogProps)"
 				:opened="dialogOpened && dialogLevel === 2"
 				v-bind="dialogProps"
 				@close="closeDialog"
@@ -28,13 +35,18 @@
 				close-label="Close"
 				:modal-level="3"
 				:open="sideModal3?.opened || false"
-				@close="() => close(sideModal3?.modalId)"
+				@close="(returnData) => close(sideModal3?.modalId, returnData)"
 			>
-				<component :is="component3" v-bind="sideModal3?.props" />
+				<component
+					:is="component3"
+					:key="sideModal3?.modalId"
+					v-bind="sideModal3?.props"
+				/>
 			</SideModal>
 		</SideModal>
 	</SideModal>
 	<PkpDialog
+		:key="JSON.stringify(dialogProps)"
 		:opened="dialogOpened && dialogLevel === 0"
 		v-bind="dialogProps"
 		@close="closeDialog"
@@ -84,8 +96,8 @@ const component3 = computed(() => {
 	return GlobalModals[sideModal3.value.component] || sideModal3.value.component;
 });
 
-function close(modalId) {
-	modalStore.closeSideModalById(true, modalId);
+function close(modalId, returnData) {
+	modalStore.closeSideModalById(true, modalId, returnData);
 }
 
 function closeDialog() {

src/components/Modal/SideModal.vue

@@ -65,13 +65,11 @@ function registerCloseCallback(callback) {
 	closeCallbacks.value.push(callback);
 }
 
-function handleClose(event) {
+function handleClose(data) {
 	let canClose = true;
 	closeCallbacks.value.forEach((callback) => (canClose = callback()));
 	if (canClose) {
-		emit('close');
-	} else {
-		console.log('not closing yet');
+		emit('close', data);
 	}
 }