Display recommendations both for decising editor and recommendOnly ed…

…itor

src/composables/useSubmission.js

@@ -226,6 +226,14 @@ export function useSubmission() {
 		return ['OpenReview', 'OpenReview'];
 	}
 
+	function getRecommendOnlyUserIdsForStage(submission, stageId) {
+		const stage = getStageById(submission, stageId);
+
+		return stage.stageAssignments
+			.filter((assignment) => assignment.recommendOnly)
+			.map((assignment) => assignment.userId);
+	}
+
 	return {
 		getSubmissionById,
 		getActiveStage,
@@ -248,5 +256,6 @@ export function useSubmission() {
 		getOpenReviewAssignmentsForRound,
 		getReviewMethodIcons,
 		InProgressReviewAssignmentStatuses,
+		getRecommendOnlyUserIdsForStage,
 	};
 }

src/managers/ParticipantManager/ParticipantManager.vue

@@ -31,6 +31,12 @@
 							<div class="text-sm-normal text-secondary">
 								{{ participant.roleName }}
 							</div>
+							<div
+								v-if="participant.recommendOnly"
+								class="mt-0.5 text-xs-normal text-heading"
+							>
+								{{ t('dashboard.recommendOnly.onlyAllowedToRecommend') }}
+							</div>
 						</div>
 					</div>
 					<div>

src/managers/ParticipantManager/participantManagerStore.js

@@ -53,6 +53,7 @@ export const useParticipantManagerStore = defineComponentStore(
 						roleName: localize(stageAssignment.stageAssignmentUserGroup.name),
 						roleId: stageAssignment.stageAssignmentUserGroup.roleId,
 						userGroupId: stageAssignment.stageAssignmentUserGroup.id,
+						recommendOnly: stageAssignment.recommendOnly,
 					});
 				});
 			});

src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue

@@ -120,7 +120,9 @@ import PublicationForm from './primaryItems/PublicationForm.vue';
 import PublicationJats from './primaryItems/PublicationJats.vue';
 import PublicationVersionControl from './publicationControls/PublicationVersionControl.vue';
 import ActionButton from './actionItems/ActionButton.vue';
-import WorkflowRecommendationControls from './actionItems/WorkflowRecommendationControls.vue';
+import WorkflowRecommendOnlyControls from './actionItems/WorkflowRecommendOnlyControls.vue';
+import WorkflowRecommendOnlyListingRecommendations from './components/WorkflowRecommendOnlyListingRecommendations.vue';
+
 import BasicMetadata from './metaItems/BasicMetadata.vue';
 import SubmissionStatus from './primaryItems/SubmissionStatus.vue';
 import GalleyManager from '@/managers/GalleyManager/GalleyManager.vue';
@@ -141,7 +143,8 @@ const Components = {
 	ParticipantManager,
 	GalleyManager,
 	ActionButton,
-	WorkflowRecommendationControls,
+	WorkflowRecommendOnlyControls,
+	WorkflowRecommendOnlyListingRecommendations,
 	WorkflowNotificationDisplay,
 	BasicMetadata,
 	WorkflowPaymentDropdown,

src/pages/dashboard/SubmissionSummaryModal/actionItems/WorkflowRecommendOnlyControls.vue

@@ -0,0 +1,147 @@
+<template>
+	<div
+		v-if="!isLoading && currentRecommendation"
+		class="w-full border border-light"
+	>
+		<div class="p-4">
+			<h2 class="uppercase text-heading">
+				{{ t('editor.submission.recommendation') }}
+			</h2>
+		</div>
+		<div class="flex flex-col border-t border-light p-4">
+			<p class="text-lg-normal text-default">
+				{{ currentRecommendation.label }}
+			</p>
+			<span v-if="!showRecommendationActions" class="-ms-4 mt-2">
+				<PkpButton class="" is-link @click="showActions">
+					{{ t('editor.submission.workflowDecision.changeDecision') }}
+				</PkpButton>
+			</span>
+		</div>
+	</div>
+	<div v-if="showRecommendationActions" class="flex flex-col gap-y-2">
+		<PkpButton
+			v-for="actionItem in actionItems"
+			:key="actionItem.action"
+			:is-secondary="true"
+			@click="() => handleAction(actionItem.action)"
+		>
+			{{ actionItem.label }}
+		</PkpButton>
+	</div>
+</template>
+<script setup>
+import PkpButton from '@/components/Button/Button.vue';
+import {computed, ref, watch} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useSubmissionSummaryStore} from '../submissionSummaryStore';
+import {useUrl} from '@/composables/useUrl';
+import {useFetch} from '@/composables/useFetch';
+
+import {Actions as DecisionActions} from '../../composables/useWorkflowDecisions';
+import {Actions as WorkflowActions} from '../../composables/useWorkflowActions';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	submissionId: {type: Number, required: true},
+	reviewRoundId: {type: Number, required: true},
+	stageId: {type: Number, required: true},
+	userId: {type: Number, required: true},
+});
+
+const RecommendOnlyDecisions = [
+	pkp.const.DECISION_RECOMMEND_ACCEPT,
+	pkp.const.DECISION_RECOMMEND_DECLINE,
+	pkp.const.DECISION_RECOMMEND_PENDING_REVISIONS,
+	pkp.const.DECISION_RECOMMEND_RESUBMIT,
+];
+
+const explicitelyShowRecommendationActions = ref(false);
+
+const showRecommendationActions = computed(() => {
+	if (explicitelyShowRecommendationActions.value) {
+		return true;
+	}
+
+	if (!isLoading.value && !currentRecommendation.value) {
+		return true;
+	}
+
+	return false;
+});
+function showActions() {
+	explicitelyShowRecommendationActions.value = true;
+}
+
+function getRecommendationActions() {
+	const actions = [];
+
+	actions.push({
+		label: t('editor.submission.recommend.revisions'),
+		action: WorkflowActions.WORKFLOW_RECOMMEND_REVISION,
+	});
+
+	actions.push({
+		label: t('editor.submission.recommend.accept'),
+		action: DecisionActions.DECISION_RECOMMEND_ACCEPT,
+	});
+
+	actions.push({
+		label: t('editor.submission.recommend.decline'),
+		action: DecisionActions.DECISION_RECOMMEND_DECLINE,
+	});
+
+	return actions;
+}
+
+const actionItems = computed(() => {
+	return getRecommendationActions();
+});
+
+const {apiUrl: recommendationApiUrl} = useUrl(
+	// TODO improve url when the query params are available
+	`submissions/${props.submissionId}/decisions`,
+);
+
+const {
+	data: recommendations,
+	fetch: fetchRecommendations,
+	isLoading,
+} = useFetch(recommendationApiUrl);
+
+fetchRecommendations();
+watch(props, () => fetchRecommendations());
+
+const currentRecommendation = computed(() => {
+	if (!recommendations) {
+		return null;
+	}
+
+	let recommendationsFromLatest = [...recommendations.value].reverse();
+
+	const myLastRecommendation = recommendationsFromLatest.find(
+		(recommendation) => {
+			return (
+				recommendation.editorId === props.userId &&
+				recommendation.reviewRoundId === props.reviewRoundId &&
+				RecommendOnlyDecisions.includes(recommendation.decision)
+			);
+		},
+	);
+
+	if (myLastRecommendation) {
+		return {label: myLastRecommendation.label};
+	} else {
+		return null;
+	}
+});
+
+const summaryStore = useSubmissionSummaryStore();
+function handleAction(actionName) {
+	summaryStore[actionName]({
+		reviewRoundId: props.reviewRoundId,
+		stageId: props.stageId,
+	});
+}
+</script>

src/pages/dashboard/SubmissionSummaryModal/components/WorkflowRecommendOnlyListingRecommendations.vue

@@ -0,0 +1,88 @@
+<template>
+	<div
+		v-if="!isLoading && currentRecommendations"
+		class="w-full border border-light"
+	>
+		<div class="p-4">
+			<h2 class="uppercase text-heading">
+				{{ t('editor.submission.recommendation') }}
+			</h2>
+		</div>
+		<div class="flex flex-col border-t border-light p-4">
+			<p class="text-lg-normal text-default">
+				{{ currentRecommendations }}
+			</p>
+		</div>
+	</div>
+</template>
+<script setup>
+import {computed, watch} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUrl} from '@/composables/useUrl';
+import {useFetch} from '@/composables/useFetch';
+import {useSubmission} from '@/composables/useSubmission';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	submission: {type: Object, required: true},
+	reviewRoundId: {type: Number, required: true},
+	stageId: {type: Number, required: true},
+});
+
+const RecommendOnlyDecisions = [
+	pkp.const.DECISION_RECOMMEND_ACCEPT,
+	pkp.const.DECISION_RECOMMEND_DECLINE,
+	pkp.const.DECISION_RECOMMEND_PENDING_REVISIONS,
+	pkp.const.DECISION_RECOMMEND_RESUBMIT,
+];
+
+const {apiUrl: recommendationApiUrl} = useUrl(
+	// TODO improve url when the query params are available
+	`submissions/${props.submission.id}/decisions`,
+);
+
+const {
+	data: recommendations,
+	fetch: fetchRecommendations,
+	isLoading,
+} = useFetch(recommendationApiUrl);
+
+fetchRecommendations();
+watch(props, () => fetchRecommendations());
+
+const currentRecommendations = computed(() => {
+	if (!recommendations.value) {
+		return '';
+	}
+
+	let recommendationsFromLatest = [...recommendations.value].reverse();
+
+	const {getRecommendOnlyUserIdsForStage} = useSubmission(
+		props.submission,
+		props.stageId,
+	);
+
+	const recommendOnlyEditorIds = getRecommendOnlyUserIdsForStage(
+		props.submission,
+		props.stageId,
+	);
+
+	const recommendationLabels = recommendOnlyEditorIds
+		.map((editorId) => {
+			return recommendationsFromLatest.find(
+				(recommendation) =>
+					recommendation.editorId === editorId &&
+					recommendation.reviewRoundId === props.reviewRoundId &&
+					RecommendOnlyDecisions.includes(recommendation.decision),
+			);
+		})
+		.filter((recommendation) => !!recommendation)
+		.map((recommendation) => recommendation.label);
+
+	if (recommendationLabels.length === 0) {
+		return '';
+	}
+	return recommendationLabels.join(t('common.commaListSeparator'));
+});
+</script>