pkp/pkp-lib#4246 Pin last round reviewers to reviewer selection list

NateWr · Mar 17, 2022 · 70d4640 · 70d4640
1 parent e20c4e8
commit 70d4640
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 27 deletions.
diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -55,10 +55,35 @@
 					</div>
 				</div>
 
+				<div v-if="currentlyAssigned" class="listPanel__item--reviewer__notice">
+					<icon icon="exclamation-triangle" :inline="true" />
+					{{ currentlyAssignedLabel }}
+				</div>
+				<div
+					v-else-if="assignedToLastRound"
+					class="listPanel__item--reviewer__notice"
+				>
+					<icon icon="thumb-tack" :inline="true" />
+					{{ assignedToLastRoundLabel }}
+				</div>
+				<div
+					v-else-if="warnOnAssignment && !isWarningBypassed"
+					class="listPanel__item--reviewer__notice"
+				>
+					<icon icon="lock" :inline="true" />
+					{{ warnOnAssignmentLabel }}
+					<button
+						@click.prevent="unlockAssignment"
+						class="listPanel__item--reviewer__noticeAction"
+					>
+						{{ warnOnAssignmentUnlockLabel }}
+					</button>
+				</div>
+
 				<!-- use aria-hidden on these details because the information can be
 					more easily acquired by screen readers from the details panel. -->
 				<div
-					v-if="canSelect"
+					v-else-if="canSelect"
 					class="listPanel__item--reviewer__brief"
 					aria-hidden="true"
 				>
@@ -78,32 +103,22 @@
 						{{ interestsString }}
 					</span>
 				</div>
-
-				<div v-if="currentlyAssigned" class="listPanel__item--reviewer__notice">
-					<icon icon="exclamation-triangle" :inline="true" />
-					{{ currentlyAssignedLabel }}
-				</div>
-				<div
-					v-else-if="warnOnAssignment && !isWarningBypassed"
-					class="listPanel__item--reviewer__notice"
-				>
-					<icon icon="lock" :inline="true" />
-					{{ warnOnAssignmentLabel }}
-					<button
-						@click.prevent="unlockAssignment"
-						class="listPanel__item--reviewer__noticeAction"
-					>
-						{{ warnOnAssignmentUnlockLabel }}
-					</button>
-				</div>
 			</div>
 
 			<div class="listPanel__itemActions">
 				<pkp-button v-if="canSelect" @click="select">
-					<span aria-hidden="true">{{ selectReviewerLabel }}</span>
-					<span class="-screenReader">
-						{{ __('common.selectWithName', {name: item.fullName}) }}
-					</span>
+					<template v-if="assignedToLastRound">
+						<span aria-hidden="true">{{ reassignLabel }}</span>
+						<span class="-screenReader">
+							{{ reassignWithName }}
+						</span>
+					</template>
+					<template v-else>
+						<span aria-hidden="true">{{ selectReviewerLabel }}</span>
+						<span class="-screenReader">
+							{{ __('common.selectWithName', {name: item.fullName}) }}
+						</span>
+					</template>
 				</pkp-button>
 				<expander
 					:isExpanded="isExpanded"
@@ -203,6 +218,14 @@ export default {
 			type: String,
 			required: true
 		},
+		assignedToLastRound: {
+			type: Boolean,
+			required: true
+		},
+		assignedToLastRoundLabel: {
+			type: String,
+			required: true
+		},
 		averageCompletionLabel: {
 			type: String,
 			required: true
@@ -255,6 +278,14 @@ export default {
 			type: String,
 			required: true
 		},
+		reassignLabel: {
+			type: String,
+			required: true
+		},
+		reassignWithNameLabel: {
+			type: String,
+			required: true
+		},
 		reviewerRatingLabel: {
 			type: String,
 			required: true
@@ -356,6 +387,13 @@ export default {
 				.join(this.__('common.commaListSeparator'));
 		},
 
+		/**
+		 * An accessible label for the button to reassign a user
+		 */
+		reassignWithName() {
+			return this.reassignWithNameLabel.replace('{$name}', this.item.fullName);
+		},
+
 		/**
 		 * An array of booleans matching the stars for the reviewerRating. True is
 		 * a filled-in star. False is an empty star.

diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.vue b/src/components/ListPanel/users/SelectReviewerListPanel.vue
@@ -4,7 +4,7 @@
 			<list-panel
 				class="listPanel--selectReviewer"
 				:isSidebarVisible="isSidebarVisible"
-				:items="items"
+				:items="currentReviewers"
 			>
 				<pkp-header slot="header">
 					<h2>
@@ -59,6 +59,8 @@
 					<select-reviewer-list-item
 						:activeReviewsCountLabel="activeReviewsCountLabel"
 						:activeReviewsLabel="activeReviewsLabel"
+						:assignedToLastRound="lastRoundReviewerIds.includes(item.id)"
+						:assignedToLastRoundLabel="assignedToLastRoundLabel"
 						:averageCompletionLabel="averageCompletionLabel"
 						:biographyLabel="biographyLabel"
 						:cancelledReviewsLabel="cancelledReviewsLabel"
@@ -75,6 +77,8 @@
 						:key="item.id"
 						:item="item"
 						:neverAssignedLabel="neverAssignedLabel"
+						:reassignLabel="reassignLabel"
+						:reassignWithNameLabel="reassignWithNameLabel"
 						:reviewerRatingLabel="reviewerRatingLabel"
 						:reviewInterestsLabel="reviewInterestsLabel"
 						:selectReviewerLabel="selectReviewerLabel"
@@ -100,7 +104,6 @@
 </template>
 
 <script>
-import PkpFilter from '@/components/Filter/Filter.vue';
 import FilterSlider from '@/components/Filter/FilterSlider.vue';
 import FilterSliderMultirange from '@/components/Filter/FilterSliderMultirange.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
@@ -112,7 +115,6 @@ import fetch from '@/mixins/fetch';
 
 export default {
 	components: {
-		PkpFilter,
 		FilterSlider,
 		FilterSliderMultirange,
 		ListPanel,
@@ -131,6 +133,10 @@ export default {
 			type: String,
 			required: true
 		},
+		assignedToLastRoundLabel: {
+			type: String,
+			required: true
+		},
 		averageCompletionLabel: {
 			type: String,
 			required: true
@@ -203,10 +209,24 @@ export default {
 				return 0;
 			}
 		},
+		lastRoundReviewers: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
 		neverAssignedLabel: {
 			type: String,
 			required: true
 		},
+		reassignLabel: {
+			type: String,
+			required: true
+		},
+		reassignWithNameLabel: {
+			type: String,
+			required: true
+		},
 		reviewerRatingLabel: {
 			type: String,
 			required: true
@@ -248,6 +268,29 @@ export default {
 			isSidebarVisible: false
 		};
 	},
+	computed: {
+		/**
+		 * The current reviewers merged with any preset reviewers
+		 */
+		currentReviewers() {
+			if (Object.keys(this.activeFilters).length) {
+				return this.items;
+			}
+			return [
+				...this.lastRoundReviewers,
+				...this.items.filter(
+					reviewer => !this.lastRoundReviewerIds.includes(reviewer.id)
+				)
+			];
+		},
+
+		/**
+		 * The user IDs of reviewers from the last round
+		 */
+		lastRoundReviewerIds() {
+			return this.lastRoundReviewers.map(reviewer => reviewer.id);
+		}
+	},
 	methods: {
 		/**
 		 * Add a filter to the activeFilters object

diff --git a/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue b/src/docs/components/ListPanel/previews/PreviewSelectReviewerListPanel.vue
@@ -3,12 +3,13 @@
 		apiUrl="http://httpbin.org/get"
 		activeReviewsCountLabel="{$count} active"
 		activeReviewsLabel="Active reviews currently assigned"
+		assignedToLastRoundLabel="This reviewer completed a review in the last round."
 		averageCompletionLabel="Average days to complete review"
 		biographyLabel="Biography"
 		cancelledReviewsLabel="Reviews cancelled"
 		completedReviewsLabel="Reviews completed"
 		:currentlyAssigned="[5]"
-		currentlyAssignedLabel="This reviewer has already been assigned to review this submission."
+		currentlyAssignedLabel="This reviewer has already been assigned to this review round."
 		daySinceLastAssignmentLabel="Yesterday"
 		daysSinceLastAssignmentLabel="{$days} days ago"
 		daysSinceLastAssignmentDescriptionLabel="Days since last review assigned"
@@ -20,6 +21,8 @@
 		:items="items"
 		:itemsMax="items.length"
 		neverAssignedLabel="Never assigned"
+		reassignLabel="Reassign"
+		reassignWithNameLabel="Reassign {$name}"
 		reviewerRatingLabel="Reviewer rating: {$rating}"
 		reviewInterestsLabel="Reviewing Interests"
 		selectReviewerLabel="Select Reviewer"