pkp/pkp-lib#9453 useModal, improved incomplete state

public/globals.js

@@ -289,6 +289,8 @@ window.pkp = {
 		'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.reviewNotCompleted':
+			'The review was not completed.',
 		'reviewer.submission.reviewRound.files': 'Files For Review',
 		'reviewer.submission.reviewRound.files.description':
 			'These files were sent to you for review',

src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js

@@ -4,7 +4,7 @@ import {http, HttpResponse} from 'msw';
 import ReviewerSubmissionPage from './ReviewerSubmissionPage.vue';
 import Review1Completed from './mocks/review1_completed.js';
 import Review2Declined from './mocks/review2_declined.js';
-import Review3Unfinished from './mocks/review3_unfinished.js';
+import Review3Incomplete from './mocks/review3_incomplete.js';
 
 import {allModes} from '../../../.storybook/modes.js';
 
@@ -68,7 +68,7 @@ export default {
 				http.get(
 					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/17',
 					async (r) => {
-						return HttpResponse.json(Review3Unfinished);
+						return HttpResponse.json(Review3Incomplete);
 					},
 				),
 			],
@@ -108,7 +108,7 @@ export const OpenModalDeclined = {
 	],
 };
 
-export const OpenModalUnfinished = {
+export const OpenModalIncomplete = {
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
 		const canvas = within(canvasElement);

src/pages/reviewerSubmission/ReviewerSubmissionPage.vue

@@ -25,20 +25,10 @@
 			</PkpButton>
 		</p>
 	</div>
-	<SideModal
-		:open="store.isRoundHistoryModalOpened"
-		@close="store.closeRoundHistoryModal"
-	>
-		<RoundHistoryModal
-			v-bind="store.roundHistoryModalProps"
-		></RoundHistoryModal>
-	</SideModal>
 </template>
 
 <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';

src/pages/reviewerSubmission/RoundHistoryModal.vue

@@ -31,29 +31,35 @@
 						</p>
 					</div>
 
-					<div
-						v-if="store.reviewRoundHistory.declineEmail"
-						class="border border-light"
-					>
+					<div class="border border-light">
 						<div class="border-b border-light p-4">
 							<h2 class="text-lg-bold text-heading">
 								{{ t('reviewer.submission.reviewRound.emailLog') }}
 							</h2>
 						</div>
 						<div class="p-4">
-							<p
-								class="mb-4 text-lg-normal text-secondary"
-								v-html="store.reviewRoundHistory.declineEmail.subject"
-							></p>
-							<p
-								class="mt-4"
-								v-html="store.reviewRoundHistory.declineEmail.body"
-							></p>
+							<div v-if="store.reviewRoundHistory.declineEmail">
+								<p
+									class="mb-4 text-lg-normal text-secondary"
+									v-html="store.reviewRoundHistory.declineEmail.subject"
+								></p>
+								<p
+									class="mt-4"
+									v-html="store.reviewRoundHistory.declineEmail.body"
+								></p>
+							</div>
+							<p v-else>
+								{{
+									t('reviewer.submission.reviewRound.emailLog.defaultMessage')
+								}}
+							</p>
 						</div>
 					</div>
-					<p v-else>
-						{{ t('reviewer.submission.reviewRound.emailLog.defaultMessage') }}
-					</p>
+				</div>
+				<div v-else-if="store.isIncomplete">
+					<h2 class="text-lg-bold text-heading">
+						{{ t('reviewer.submission.reviewRound.reviewNotCompleted') }}
+					</h2>
 				</div>
 				<div v-else>
 					<div

src/pages/reviewerSubmission/reviewerSubmissionPageStore.js

@@ -1,25 +1,26 @@
-import {ref} from 'vue';
 import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useModal} from '@/composables/useModal';
+import RoundHistoryModal from './RoundHistoryModal.vue';
 
 export const useReviewerSubmissionPageStore = defineComponentStore(
 	'reviewerSubmissionPage',
 	(pageInitConfig) => {
-		const isRoundHistoryModalOpened = ref(false);
-		const roundHistoryModalProps = ref(null);
-		function openRoundHistoryModal({submissionId, reviewRoundId, reviewRoundNumber}) {
-			roundHistoryModalProps.value = {submissionId, reviewRoundId, reviewRoundNumber};
-			isRoundHistoryModalOpened.value = true;
-		}
-		function closeRoundHistoryModal() {
-			isRoundHistoryModalOpened.value = false;
-			roundHistoryModalProps.value = null;
+		const {openSideModal} = useModal();
+
+		function openRoundHistoryModal({
+			submissionId,
+			reviewRoundId,
+			reviewRoundNumber,
+		}) {
+			openSideModal(RoundHistoryModal, {
+				submissionId,
+				reviewRoundId,
+				reviewRoundNumber,
+			});
 		}
 
 		return {
-			isRoundHistoryModalOpened,
 			openRoundHistoryModal,
-			closeRoundHistoryModal,
-			roundHistoryModalProps,
 			reviewRoundHistories: pageInitConfig.reviewRoundHistories,
 		};
 	},

src/pages/reviewerSubmission/roundHistoryModalStore.js

@@ -25,10 +25,11 @@ export const useRoundHistoryModalStore = defineComponentStore(
 
 		// even incomplete submission consider as declined to keep it simple
 		const isDeclined = computed(() => {
-			return (
-				reviewRoundHistory.value?.reviewAssignment?.declined ||
-				!reviewRoundHistory.value?.reviewAssignment?.dateCompleted
-			);
+			return reviewRoundHistory.value?.reviewAssignment?.declined;
+		});
+
+		const isIncomplete = computed(() => {
+			return !reviewRoundHistory.value?.reviewAssignment?.dateCompleted;
 		});
 
 		const articleMetadata = computed(() => {
@@ -113,6 +114,7 @@ export const useRoundHistoryModalStore = defineComponentStore(
 
 		return {
 			isDeclined,
+			isIncomplete,
 			reviewRoundHistory,
 			articleMetadata,
 			generalInformation,