pkp/pkp-lib#9453 Let reviewers view their recommendations for previous rounds

public/globals.js

@@ -27,7 +27,6 @@ window.pkp = {
 	context: {
 		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
 	},
-
 	/**
 	 * Dummy constants required by components
 	 */
@@ -104,6 +103,7 @@ window.pkp = {
 		'common.commaListSeparator': ', ',
 		'common.delete': 'Delete',
 		'common.description': 'Description',
+		'common.download': 'Download',
 		'common.edit': 'Edit',
 		'common.editItem': 'Edit {$name}',
 		'common.error': 'Error',
@@ -143,6 +143,7 @@ window.pkp = {
 		'common.type': 'Type',
 		'common.unknownError':
 			'An unexpected error has occurred. Please reload the page and try again.',
+		'common.upload': 'Upload',
 		'common.uploadedBy': 'Uploaded by {$name}',
 		'common.uploadedByAndWhen': 'Uploaded by {$name} on {$date}',
 		'common.view': 'View',
@@ -250,9 +251,49 @@ window.pkp = {
 		'manager.dois.update.success': 'DOI(s) successfully updated',
 		'navigation.backTo': '\u27f5 Back to {$page}',
 		'navigation.submissions': 'Submissions',
+		'publication.jats.autoCreatedMessage':
+			'This JATS file is generated automatically by the submission metadata',
+		'publication.jats.confirmDeleteFileButton': 'Delete JATS File',
+		'publication.jats.confirmDeleteFileMessage':
+			'You are about to remove the existing JATS XML File from this publication. Are you sure?',
+		'publication.jats.confirmDeleteFileTitle': 'Confirm deleting JATS XML',
+		'publication.jats.lastModified':
+			'Last Modification at {$modificationDate} by {$username}',
 		'publication.status.published': 'Published',
 		'publication.status.unpublished': 'Unpublished',
 		'publication.version': 'Version {$version}',
+		'reviewer.article.recommendation': 'Recommendation',
+		'reviewer.submission.acceptedOn': 'Review Accepted On',
+		'reviewer.submission.responseDueDate': 'Response Due Date',
+		'reviewer.submission.reviewDueDate': 'Review Due Date',
+		'reviewer.submission.reviewRequestDate': "Editor's Request",
+		'reviewer.submission.reviewRound.attachments': 'Attachments',
+		'reviewer.submission.reviewRound.attachments.description':
+			'These are files that you attached along with your review',
+		'reviewer.submission.reviewRound.comments': 'Reviewer Comments',
+		'reviewer.submission.reviewRound.comments.authorAndEditor':
+			'For editors and authors',
+		'reviewer.submission.reviewRound.comments.editorOnly': 'For editors only',
+		'reviewer.submission.reviewRound.comments.prefix': 'Comment {$index}: ',
+		'reviewer.submission.reviewRound.emailLog': 'Decline reason sent by email',
+		'reviewer.submission.reviewRound.emailLog.defaultMessage':
+			'No reason given to the decline of the review invitation.',
+		'reviewer.submission.reviewRound.files': 'Files For Review',
+		'reviewer.submission.reviewRound.files.description':
+			'These files were sent to you for review',
+		'reviewer.submission.reviewRound.general': 'General Information',
+		'reviewer.submission.reviewRound.info': 'Previous Reviews',
+		'reviewer.submission.reviewRound.info.modal.title':
+			'Round {$round} Review submitted by you for',
+		'reviewer.submission.reviewRound.info.read': 'Read Round {$round} Review',
+		'reviewer.submission.reviewRound.info.submittedOn':
+			'Round {$round} Review Submitted on {$submittedOn}',
+		'reviewer.submission.reviewRound.metadata': 'Article Metadata',
+		'reviewer.submission.reviewRound.metadata.abstract': 'Abstract',
+		'reviewer.submission.reviewRound.metadata.keywords': 'Keywords',
+		'reviewer.submission.reviewRound.metadata.type': 'Type',
+		'reviewer.submission.reviewRound.reviewDeclineDate': 'Declined Date',
+		'reviewer.submission.submittedOn': 'Review Submitted On',
 		'stats.countWithYearlyAverage': '{$count} ({$average}/year)',
 		'stats.descriptionForStat': 'Description for {$stat}',
 		'submission.list.assignEditor': 'Assign Editor',
@@ -274,6 +315,7 @@ window.pkp = {
 		'submission.list.reviewsCompleted': 'Assigned reviews completed',
 		'submission.list.revisionsSubmitted': 'Revisions submitted',
 		'submission.submit.newSubmissionSingle': 'New Submission',
+		'submission.upload.percentComplete': 'Uploading {$percent}% complete',
 		'submissions.incomplete': 'Incomplete',
 		'validator.required': 'This field is required.',
 	},

src/components/File/File.vue

@@ -5,7 +5,7 @@
 			{{ fileId }}
 		</span>
 		<span class="ms-1">
-			<a v-if="url" class="underline" href="url" target="_blank">{{ name }}</a>
+			<a v-if="url" class="underline" :href="url" target="_blank">{{ name }}</a>
 			<template v-else>
 				{{ name }}
 			</template>
@@ -35,7 +35,6 @@ export default {
 			type: String,
 			required: true,
 		},
-
 		/** Optional. If the file should be be url to download file */
 		url: {
 			type: String,

src/components/ListPanel/listingFiles/ListingFilesListPanel.vue

@@ -1,5 +1,11 @@
 <template>
 	<ListPanel :title="title" :description="description" :items="files">
+		<template #header>
+			<h2 class="pkpHeader__title">
+				<span class="text-dark-accent">{{ title }}</span>
+			</h2>
+			<div v-if="description">{{ description }}</div>
+		</template>
 		<template #item="{item}">
 			<div class="flex items-center">
 				<div class="me-2 flex-grow truncate">

src/pages/reviewerSubmission/ReviewerSubmissionPage.mdx

@@ -0,0 +1,13 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as ReviewerSubmissionPageStories from './ReviewerSubmissionPage.stories.js';
+
+<Meta of={ReviewerSubmissionPageStories} />
+
+# Reviewer Page
+
+Only reviews history for now, until rest of the page is migrated from old stack.
+
+## Server side configuration
+
+<ArgTypes />

src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js

@@ -0,0 +1,86 @@
+import {within, userEvent} from '@storybook/testing-library';
+import {http, HttpResponse} from 'msw';
+
+import ReviewerSubmissionPage from './ReviewerSubmissionPage.vue';
+import Review1Mock from './mocks/review1';
+import Review2Mock from './mocks/review2';
+
+export default {
+	title: 'Pages/ReviewerSubmission',
+	component: ReviewerSubmissionPage,
+	render: (args) => ({
+		components: {ReviewerSubmissionPage},
+		setup() {
+			return {args};
+		},
+		template: '<ReviewerSubmissionPage v-bind="args.pageInitConfig" />',
+	}),
+	args: {
+		pageInitConfig: {
+			reviewRoundHistories: [
+				{
+					submissionId: 16,
+					reviewRoundId: 15,
+					reviewRoundNumber: 1,
+					submittedOn: '2024-02-08 12:45:38',
+				},
+				{
+					submissionId: 16,
+					reviewRoundId: 16,
+					reviewRoundNumber: 2,
+					submittedOn: '2024-02-08 12:51:12',
+				},
+			],
+		},
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/15',
+					async (r) => {
+						return HttpResponse.json(Review1Mock);
+					},
+				),
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/16',
+					async (r) => {
+						return HttpResponse.json(Review2Mock);
+					},
+				),
+			],
+		},
+	},
+};
+
+export const Base = {};
+
+export const OpenModalAccepted = {
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Read Round 1 Review'));
+	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 1200px"><story/></div>',
+		}),
+	],
+};
+
+export const OpenModalDeclined = {
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Read Round 2 Review'));
+	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 1200px"><story/></div>',
+		}),
+	],
+};

src/pages/reviewerSubmission/ReviewerSubmissionPage.vue

@@ -1,12 +1,24 @@
 <template>
-	<div class="mb-4 space-x-2">
-		<PkpButton
+	<div class="bg-lightest border border-light text-dark p-8 mb-4">
+		<h2 class="text-dark-accent">{{ t('reviewer.submission.reviewRound.info') }}</h2>
+		<p
 			v-for="review in store.reviewRoundHistories"
 			:key="review.reviewRoundId"
-			@click="store.openRoundHistoryModal(review)"
 		>
-			{{ t('submission.round', {round: review.reviewRoundNumber}) }}
-		</PkpButton>
+			<span class="text-lg-normal">
+				{{ t(
+					'reviewer.submission.reviewRound.info.submittedOn',
+					{round: review.reviewRoundNumber, submittedOn: formatShortDate(review.submittedOn)}
+				) }}
+			</span>
+			<PkpButton
+				is-link="true"
+				class="ms-4"
+				@click="store.openRoundHistoryModal(review)"
+			>
+				{{ t('reviewer.submission.reviewRound.info.read', {round: review.reviewRoundNumber}) }}
+			</PkpButton>
+		</p>
 	</div>
 	<SideModal
 		:open="store.isRoundHistoryModalOpened"
@@ -20,13 +32,15 @@
 
 <script setup>
 import {defineProps} from 'vue';
-
 import SideModal from '@/components/Modal/SideModal.vue';
 import RoundHistoryModal from './RoundHistoryModal.vue';
-
 import {useTranslation} from '@/composables/useTranslation';
-
 import {useReviewerSubmissionPageStore} from './reviewerSubmissionPageStore';
+import moment from 'moment';
+
+function formatShortDate(dateString) {
+	return moment(dateString).format('DD-MM-YYYY');
+}
 
 const {t} = useTranslation();