pkp/pkp-lib#8880 Add assign editors button to submission lists

src/components/Container/SubmissionsPage.vue

@@ -53,6 +53,7 @@ export default {
 		return {
 			activeFilters: {},
 			apiUrl: '',
+			assignParticipantUrl: '',
 			count: 30,
 			currentViewId: '',
 			filtersForm: {},
@@ -91,6 +92,15 @@ export default {
 			return this.views.find((view) => view.id === this.currentViewId);
 		},
 
+		/**
+		 * 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));
+		},
+
 		/**
 		 * The number of pages available
 		 *
@@ -196,6 +206,42 @@ export default {
 			});
 		},
 
+		/**
+		 * 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
+			);
+		},
+
+		/**
+		 * Load a modal displaying the assign participant options
+		 */
+		openAssignParticipant(submission) {
+			lastFocusedEl = document.activeElement;
+
+			var opts = {
+				title: this.__('submission.list.assignEditor'),
+				url: this.assignParticipantUrl
+					.replace('__id__', submission.id)
+					.replace('__stageId__', submission.stageId),
+				closeCallback: () => {
+					this.resetFocusToList();
+				},
+			};
+
+			$(
+				'<div id="' +
+					$.pkp.classes.Helper.uuid() +
+					'" ' +
+					'class="pkp_modal pkpModalWrapper" tabIndex="-1"></div>'
+			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
+		},
+
 		/**
 		 * Open the panel to select filters
 		 */

src/docs/components/SubmissionsPage/previews/PreviewSubmissionsPage.vue

@@ -107,7 +107,15 @@
 							</stage-bubble>
 						</table-cell>
 						<table-cell>{{ submission.daysInStage }}</table-cell>
-						<table-cell>TODO</table-cell>
+						<table-cell>
+							<pkp-button
+								v-if="isManager && needsEditors(submission)"
+								@click="openAssignParticipant(submission)"
+							>
+								Assign Editors
+							</pkp-button>
+							<template v-else>TODO</template>
+						</table-cell>
 						<table-cell>
 							<pkp-button
 								class="submissions__list__item__view"
@@ -212,11 +220,13 @@
 
 <script>
 import SubmissionsPage from '../../../../components/Container/SubmissionsPage.vue';
+import dialog from '../../../../mixins/dialog';
 import submissions from '../../../data/submissions';
 import form from '../../Form/helpers/form-base';
 
 export default {
 	extends: SubmissionsPage,
+	mixins: [dialog],
 	data() {
 		return {
 			count: 10,
@@ -304,7 +314,7 @@ export default {
 	},
 	methods: {
 		/**
-		 * Get submissions matching the current request params
+		 * Override the get method to fake a request
 		 *
 		 * @param {Function} cb A callback function to fire when successful
 		 */
@@ -321,6 +331,17 @@ export default {
 				}
 			}, 1000);
 		},
+
+		/**
+		 * Override the request to open a modal to assign a participant
+		 */
+		openAssignParticipant(submission) {
+			this.openDialog({
+				name: 'assignParticipant',
+				title: 'Assign Editor',
+				message: '...',
+			});
+		},
 	},
 };
 </script>