From de574ac7891098897682d2194ab42777d937b11f Mon Sep 17 00:00:00 2001
From: Touhidur Rahman <abir.ruet@gmail.com>
Date: Wed, 30 Oct 2024 18:24:32 +0600
Subject: [PATCH] pkp/pkp-lib#4787 reviewer adding from suggestion working

---
 .../users/SelectReviewerListPanel.vue         | 10 +-
 .../SelectReviewerSuggestionListItem.vue      | 51 +++++++----
 .../ReviewerSuggestionManager.vue             | 66 ++++++++++++++
 .../reviewerSuggestionManagerStore.js         | 91 +++++++++++++++++++
 .../useReviewerSuggestionManagerActions.js    | 50 ++++++++++
 src/pages/workflow/WorkflowPageOJS.vue        |  2 +
 .../useWorkflowConfig/useWorkflowConfigOJS.js |  1 +
 .../workflowConfigEditorialOJS.js             | 19 +++-
 8 files changed, 262 insertions(+), 28 deletions(-)
 create mode 100644 src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
 create mode 100644 src/managers/ReviewerSuggestionManager/reviewerSuggestionManagerStore.js
 create mode 100644 src/managers/ReviewerSuggestionManager/useReviewerSuggestionManagerActions.js

diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.vue b/src/components/ListPanel/users/SelectReviewerListPanel.vue
index 2bababa11..190d4e2dc 100644
--- a/src/components/ListPanel/users/SelectReviewerListPanel.vue
+++ b/src/components/ListPanel/users/SelectReviewerListPanel.vue
@@ -29,8 +29,10 @@
 					<SelectReviewerSuggestionListItem
 						:key="item.id"
 						:item="item"
+						:submission-id="getParams.submissionId"
+						:stage-id="getParams.reviewStage"
+						:review-round-id="getParams.reviewRoundId"
 						:select-reviewer-label="selectReviewerLabel"
-						:api-url="suggestionAddApiUrl"
 					/>
 				</template>
 			</ListPanel>
@@ -354,12 +356,6 @@ export default {
 				return [];
 			},
 		},
-		suggestionAddApiUrl: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
 	},
 	emits: [
 		/**  Emitted when a prop should be changed. Payload: `(id, newProps)`  */
diff --git a/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue b/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
index 2eeb7e398..704bdcbc2 100644
--- a/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
+++ b/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
@@ -3,6 +3,7 @@
 		<div class="listPanel__itemSummary">
 			<div class="listPanel__itemIdentity">
 				<div class="listPanel__itemTitle">
+					<!-- TODO: check why localize(fullName) causing error -->
 					{{ fullName }}
 					<Badge class="listPanel__item--reviewer__active">
 						{{ affiliation }}
@@ -11,6 +12,7 @@
 
 				<div class="listPanel__itemSubtitle">
 					<div class="listPanel__item--reviewer__affiliation">
+						<!-- TODO: how to show without v-html -->
 						{{ suggestionReason }}
 					</div>
 				</div>
@@ -29,20 +31,15 @@
 </template>
 
 <script>
-// import List from '@/components/List/List.vue';
-// import ListItem from '@/components/List/ListItem.vue';
 import Badge from '@/components/Badge/Badge.vue';
 import PkpButton from '@/components/Button/Button.vue';
-
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
-// import cloneDeep from 'clone-deep';
-// import {useModal} from '@/composables/useModal';
+import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
+import {useLocalize} from '@/composables/useLocalize';
 
 export default {
 	components: {
-		// List,
-		// ListItem,
 		Badge,
 		PkpButton,
 	},
@@ -52,11 +49,19 @@ export default {
 			type: Object,
 			required: true,
 		},
-		selectReviewerLabel: {
-			type: String,
+		submissionId: {
+			type: Number,
 			required: true,
 		},
-		apiUrl: {
+		stageId: {
+			type: Number,
+			required: true,
+		},
+		reviewRoundId: {
+			type: Number,
+			required: true,
+		},
+		selectReviewerLabel: {
 			type: String,
 			required: true,
 		},
@@ -100,21 +105,27 @@ export default {
 		 * @param
 		 */
 		select() {
+			const {t} = useLocalize();
+
 			// this.$emit('select', this.item);
 			// pkp.eventBus.$emit('selected:reviewerSuggestion', this.item);
 
-			$.ajax({
-				url: this.apiUrl,
-				type: 'POST',
-				error: this.ajaxErrorCallback,
-				context: this,
-				success(response) {
-					// console.log(response)
-				},
-				complete(r) {
-					// this.isLoading = false;
+			const {openLegacyModal} = useLegacyGridUrl({
+				component: 'grid.users.reviewer.ReviewerGridHandler',
+				op: 'showReviewerForm',
+				params: {
+					submissionId: this.submissionId,
+					stageId: this.stageId,
+					reviewRoundId: this.reviewRoundId,
+					selectionType: pkp.const.REVIEWER_SELECT_CREATE,
+					reviewerSuggestionId: this.item.id,
 				},
 			});
+
+			openLegacyModal(
+				{title: t('editor.submission.addReviewer')},
+				function () {},
+			);
 		},
 	},
 };
diff --git a/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue b/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
new file mode 100644
index 000000000..ae5a106af
--- /dev/null
+++ b/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
@@ -0,0 +1,66 @@
+<template v-if="reviewerSuggestionManagerStore.reviewerSuggestionsList?.length">
+	<div class="border border-light" data-cy="reviewer-sguuestion-manager">
+		<div class="flex items-center justify-between bg-default p-5">
+			<h3 class="text-2xl-bold uppercase text-heading">
+				{{ t('editor.submission.reviewerSuggestions') }}
+			</h3>
+		</div>
+		<ul class="flex flex-col" role="list">
+			<li
+				v-for="reviewerSuggestion in reviewerSuggestionManagerStore.reviewerSuggestionsList"
+				:key="reviewerSuggestion.id"
+				class="border-t border-light p-4 text-base-normal even:bg-tertiary"
+			>
+				<div class="flex items-center justify-between">
+					<div class="flex">
+						<div>
+							<UserAvatar
+								:user-id="reviewerSuggestion.id"
+								:user-full-name="reviewerSuggestion.fullName"
+							></UserAvatar>
+						</div>
+						<div class="ms-2 flex flex-col justify-center">
+							<div class="text-base-bold">
+								{{ reviewerSuggestion.fullName }}
+							</div>
+							<div class="text-sm-normal text-secondary">
+								{{ reviewerSuggestion.suggestionReason }}
+							</div>
+						</div>
+					</div>
+					<div>
+						<DropdownActions
+							:actions="reviewerSuggestionManagerStore.itemActions"
+							:label="`${reviewerSuggestion.fullName} ${t('common.moreActions')}`"
+							:display-as-ellipsis="true"
+							@action="
+								(actionName) =>
+									reviewerSuggestionManagerStore[actionName]({
+										reviewerSuggestion: reviewerSuggestion,
+										stageAssignmen,
+									})
+							"
+						/>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import UserAvatar from '@/components/UserAvatar/UserAvatar.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useReviewerSuggestionManagerStore} from './reviewerSuggestionManagerStore';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+
+const props = defineProps({
+	submission: {type: Object, required: true},
+	submissionStageId: {type: String, required: true},
+	reviewRoundId: {type: Number, required: true},
+});
+
+const reviewerSuggestionManagerStore = useReviewerSuggestionManagerStore(props);
+
+const {t} = useLocalize();
+</script>
diff --git a/src/managers/ReviewerSuggestionManager/reviewerSuggestionManagerStore.js b/src/managers/ReviewerSuggestionManager/reviewerSuggestionManagerStore.js
new file mode 100644
index 000000000..cb08f628d
--- /dev/null
+++ b/src/managers/ReviewerSuggestionManager/reviewerSuggestionManagerStore.js
@@ -0,0 +1,91 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+
+import {ref, computed, watch} from 'vue';
+
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+
+import {useLocalize} from '@/composables/useLocalize';
+import {useReviewerSuggestionManagerActions} from './useReviewerSuggestionManagerActions';
+import {useDataChanged} from '@/composables/useDataChanged';
+
+export const useReviewerSuggestionManagerStore = defineComponentStore(
+	'reviewerSuggestionManager',
+	(props) => {
+		const {localize} = useLocalize();
+
+		const submissionId = ref(props.submission.id);
+
+		const relativeUrl = computed(() => {
+			return `submissions/${encodeURIComponent(submissionId.value)}/reviewers/suggestions?approved=false`;
+		});
+
+		const {apiUrl: reviewerSuggestionApiUrl} = useUrl(relativeUrl);
+
+		const {data: reviewerSuggestions, fetch: fetchreviewerSuggestion} =
+			useFetch(reviewerSuggestionApiUrl);
+
+		watch(relativeUrl, () => {
+			reviewerSuggestions.value = null;
+			fetchreviewerSuggestion();
+		});
+
+		fetchreviewerSuggestion();
+
+		const {triggerDataChange} = useDataChanged(() => fetchreviewerSuggestion());
+
+		function triggerDataChangeCallback() {
+			triggerDataChange();
+		}
+
+		const reviewerSuggestionsList = computed(() => {
+			if (!reviewerSuggestions.value) {
+				return [];
+			}
+
+			const list = [];
+
+			reviewerSuggestions.value.items.forEach((reviewerSuggestion) => {
+				list.push({
+					id: reviewerSuggestion.id,
+					fullName: localize(reviewerSuggestion.fullName),
+					affiliation: localize(reviewerSuggestion.affiliation),
+					suggestionReason: localize(reviewerSuggestion.suggestionReason),
+				});
+			});
+
+			return list;
+		});
+
+		/**
+		 * Handling actions
+		 */
+
+		const _actionFns = useReviewerSuggestionManagerActions();
+
+		const itemActions = computed(() => _actionFns.getItemActions({}));
+
+		function enrichActionArg(args) {
+			return {
+				submissionStageId: props.submissionStageId,
+				submission: props.submission,
+				reviewRoundId: props.reviewRoundId,
+				...args,
+			};
+		}
+
+		function reviewerSuggestionApprove({reviewerSuggestion}) {
+			_actionFns.reviewerSuggestionApprove(
+				enrichActionArg({reviewerSuggestion}),
+				triggerDataChangeCallback,
+			);
+		}
+
+		return {
+			reviewerSuggestionsList,
+			_actionFns,
+			itemActions,
+			reviewerSuggestionApprove,
+		};
+	},
+);
diff --git a/src/managers/ReviewerSuggestionManager/useReviewerSuggestionManagerActions.js b/src/managers/ReviewerSuggestionManager/useReviewerSuggestionManagerActions.js
new file mode 100644
index 000000000..ad11d7a9e
--- /dev/null
+++ b/src/managers/ReviewerSuggestionManager/useReviewerSuggestionManagerActions.js
@@ -0,0 +1,50 @@
+import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
+import {useLocalize} from '@/composables/useLocalize';
+
+export const Actions = {
+	REVIEWER_SUGGESTION_APPROVE: 'reviewerSuggestionApprove',
+};
+
+export function useReviewerSuggestionManagerActions() {
+	const {t} = useLocalize();
+
+	function reviewerSuggestionApprove(
+		{submissionStageId, submission, reviewRoundId, reviewerSuggestion},
+		finishedCallback,
+	) {
+		const {openLegacyModal} = useLegacyGridUrl({
+			component: 'grid.users.reviewer.ReviewerGridHandler',
+			op: 'showReviewerForm',
+			params: {
+				submissionId: submission.id,
+				stageId: submissionStageId,
+				reviewRoundId: reviewRoundId,
+				selectionType: pkp.const.REVIEWER_SELECT_CREATE,
+				reviewerSuggestionId: reviewerSuggestion.id,
+			},
+		});
+
+		openLegacyModal(
+			{title: t('editor.submission.addReviewer')},
+			finishedCallback,
+		);
+	}
+
+	function getItemActions() {
+		const {t} = useLocalize();
+		const actions = [];
+
+		actions.push({
+			label: t('editor.submission.addReviewer'),
+			name: Actions.REVIEWER_SUGGESTION_APPROVE,
+			icon: 'Add',
+		});
+
+		return actions;
+	}
+
+	return {
+		getItemActions,
+		reviewerSuggestionApprove,
+	};
+}
diff --git a/src/pages/workflow/WorkflowPageOJS.vue b/src/pages/workflow/WorkflowPageOJS.vue
index 2f707ed34..bf4bc16d1 100644
--- a/src/pages/workflow/WorkflowPageOJS.vue
+++ b/src/pages/workflow/WorkflowPageOJS.vue
@@ -13,6 +13,7 @@ import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManager from '@/managers/DiscussionManager/DiscussionManager.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
+import ReviewerSuggestionManager from '@/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue';
 import GalleyManager from '@/managers/GalleyManager/GalleyManager.vue';
 import WorkflowActionButton from './components/action/WorkflowActionButton.vue';
 import WorkflowRecommendOnlyControls from './components/action/WorkflowRecommendOnlyControls.vue';
@@ -42,6 +43,7 @@ const Components = markRaw({
 	DiscussionManager,
 	ContributorManager,
 	ParticipantManager,
+	ReviewerSuggestionManager,
 	GalleyManager,
 	WorkflowActionButton,
 	WorkflowRecommendOnlyControls,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/useWorkflowConfigOJS.js b/src/pages/workflow/composables/useWorkflowConfig/useWorkflowConfigOJS.js
index 6e21e56fc..9118a3269 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/useWorkflowConfigOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/useWorkflowConfigOJS.js
@@ -28,6 +28,7 @@ export function useWorkflowConfigOJS({dashboardPage}) {
 		if (selectedMenuState.stageId) {
 			const itemsArgs = {
 				submission,
+				pageInitConfig,
 				selectedPublication,
 				selectedPublicationId,
 				selectedStageId: selectedMenuState.stageId,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index 01cb9447e..6d05b07d3 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -280,7 +280,12 @@ export const WorkflowConfig = {
 
 			return items;
 		},
-		getSecondaryItems: ({submission, selectedReviewRound, selectedStageId}) => {
+		getSecondaryItems: ({
+			submission,
+			selectedReviewRound,
+			selectedStageId,
+			pageInitConfig,
+		}) => {
 			const items = [];
 			if (!selectedReviewRound) {
 				return [];
@@ -299,6 +304,7 @@ export const WorkflowConfig = {
 					},
 				});
 			}
+
 			items.push({
 				component: 'ParticipantManager',
 				props: {
@@ -307,6 +313,17 @@ export const WorkflowConfig = {
 				},
 			});
 
+			if (pageInitConfig.publicationSettings.isReviewerSuggestionEnabled) {
+				items.push({
+					component: 'ReviewerSuggestionManager',
+					props: {
+						submission,
+						submissionStageId: selectedStageId,
+						reviewRoundId: selectedReviewRound.id,
+					},
+				});
+			}
+
 			return items;
 		},
 		getActionItems: ({submission, selectedStageId, selectedReviewRound}) => {