add reviewer mockups

Author: ipula

public/globals.js

@@ -1018,7 +1018,10 @@ window.pkp = {
 		'reviewer.reviewDueDate':'Review Response Due Date',
 		'reviewer.reviewTypes':'Review Types',
 		'reviewerInvitation.modal.message':'{$email} has been invited to review the submission "{$articleTitle}"<br><br> You can be updated about the user\'s descision on the reviewer panel in the review workflow or through email and OJS notifications',
-		'reviewerInvitation.modal.button':'View submission'
+		'reviewerInvitation.modal.button':'View submission',
+		'reviewerInvitation.reviewTypes.anonymusAuthorOrReviewer':'Anonymus Reviewer / Anonymus Author',
+		'reviewerInvitation.reviewTypes.disclosedAuthor':'Anonymus Reviewer / Disclosed Author',
+		'reviewerInvitation.reviewTypes.open':'Open'
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

src/pages/userInvitation/ReviewerReviewDetailsStep.vue

@@ -2,11 +2,11 @@
 	<FieldOptions
 		:is-required="false"
 		component="field-options"
-		:all-errors="{}"
 		name="reviewTypes"
 		:label="t('reviewer.reviewTypes')"
 		type="radio"
 		:options="options"
+		:all-errors="sectionErrors"
 		@change="
 			(fieldName, propName, newValue, localeKey) =>
 				updateReviewDetails(index, fieldName, newValue)
@@ -19,7 +19,7 @@
 			input-type="date"
 			:is-required="true"
 			value=""
-			:all-errors="{}"
+			:all-errors="sectionErrors"
 			@change="
 				(fieldName, propName, newValue, localeKey) =>
 					updateReviewDetails(index, fieldName, newValue)
@@ -31,7 +31,7 @@
 			input-type="date"
 			:is-required="true"
 			value=""
-			:all-errors="{}"
+			:all-errors="sectionErrors"
 			@change="
 				(fieldName, propName, newValue, localeKey) =>
 					updateReviewDetails(index, fieldName, newValue)
@@ -40,30 +40,45 @@
 	</div>
 </template>
 <script setup>
-import {defineProps} from 'vue';
+import {defineProps, computed} from 'vue';
 import FieldOptions from '@/components/Form/fields/FieldOptions.vue';
 import FieldText from '@/components/Form/fields/FieldText.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 
-defineProps({
-	validateFields: {
-		type: Array,
-		default() {
-			return null;
-		},
-	},
+const props = defineProps({
+	validateFields: {type: Array, required: true},
 });
 
 const store = useUserInvitationPageStore();
 const {t} = useLocalize();
 const options = [
-	{value: 'anonymus', label: 'Anonymus Reviewer / Anonymus Author'},
-	{value: 'disclosed', label: 'Anonymus Reviewer / Disclosed Author'},
-	{value: 'open', label: 'open'},
+	{
+		value: 'anonymus',
+		label: t('reviewerInvitation.reviewTypes.anonymusAuthorOrReviewer'),
+	},
+	{
+		value: 'disclosed',
+		label: t('reviewerInvitation.reviewTypes.disclosedAuthor'),
+	},
+	{value: 'open', label: t('reviewerInvitation.reviewTypes.open')},
 ];
 
+props.validateFields.forEach((field) => {
+	store.updatePayload(field, '', false);
+});
+
 function updateReviewDetails(index, fieldName, newValue) {
+	delete store.errors[fieldName];
 	store.updatePayload(fieldName, newValue, false);
 }
+
+const sectionErrors = computed(() => {
+	return props.validateFields.reduce((obj, key) => {
+		if (store.errors[key]) {
+			obj[key] = store.errors[key];
+		}
+		return obj;
+	}, {});
+});
 </script>

src/pages/userInvitation/UserInvitationPage.stories.js

@@ -132,7 +132,7 @@ export const Reviewer = {
 		msw: {
 			handlers: [
 				http.post(
-					'https://mock/index.php/publicknowledge/api/v1/invitations/add/reviewerAccess',
+					'https://mock/index.php/publicknowledge/api/v1/invitations/add/reviewerAccessInvite',
 					() => {
 						return HttpResponse.json({invitationId: 15});
 					},
@@ -142,6 +142,7 @@ export const Reviewer = {
 					async ({request}) => {
 						const data = await request.json();
 						let errors = {};
+						console.log(data.invitationData);
 
 						data.invitationData.userGroupsToAdd.forEach((element, index) => {
 							Object.keys(element).forEach((key) => {
@@ -166,6 +167,18 @@ export const Reviewer = {
 							errors['givenName'] = ['This field is required'];
 						}
 
+						if (data.invitationData.responseDueDate === '') {
+							errors['responseDueDate'] = ['This field is required'];
+						}
+
+						if (data.invitationData.reviewDueDate === '') {
+							errors['reviewDueDate'] = ['This field is required'];
+						}
+
+						if (data.invitationData.reviewTypes === '') {
+							errors['reviewTypes'] = ['This field is required'];
+						}
+
 						if (data.invitationData.emailComposer) {
 							Object.keys(data.invitationData.emailComposer).forEach(
 								(element) => {

src/pages/userInvitation/UserInvitationPage.vue

@@ -91,6 +91,7 @@ import UserInvitationHeader from './UserInvitationHeader.vue';
 import UserInvitationDetailsFormStep from './UserInvitationDetailsFormStep.vue';
 import UserInvitationSearchFormStep from './UserInvitationSearchFormStep.vue';
 import UserInvitationEmailComposerStep from './UserInvitationEmailComposerStep.vue';
+import ReviewerReviewDetailsStep from './ReviewerReviewDetailsStep.vue';
 
 const props = defineProps({
 	/** steps for invite user */
@@ -140,5 +141,7 @@ const userInvitationComponents = {
 	UserInvitationDetailsFormStep,
 	UserInvitationSearchFormStep,
 	UserInvitationEmailComposerStep,
+	ReviewerReviewDetailsStep,
 };
+console.log(props);
 </script>

src/pages/userInvitation/UserInvitationPageStore.js

@@ -7,7 +7,8 @@ import {useModal} from '@/composables/useModal';
 export const useUserInvitationPageStore = defineComponentStore(
 	'userInvitationPage',
 	(pageInitConfig) => {
-		const INVITATION_USER_ROLE_ASSIGNMENT = 'userRoleAssignment';
+		const invitationUserRoleAssignment = 'userRoleAssignment';
+		const invitationReviewerAccessInvite = 'reviewerAccessInvite';
 		const {openDialog} = useModal();
 		const {t} = useLocalize();
 		/**
@@ -77,6 +78,14 @@ export const useUserInvitationPageStore = defineComponentStore(
 			return currentStepIndex.value === steps.value.length - 1;
 		});
 
+		const isUserRoleAssignment = computed(() => {
+			return invitationType.value === invitationUserRoleAssignment;
+		});
+
+		const isReviewerAccess = computed(() => {
+			return invitationType.value === invitationReviewerAccessInvite;
+		});
+
 		/**
 		 * Add a step change to the browser history so the
 		 * user can use the browser's back button
@@ -341,7 +350,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 					openDialog({
 						title: t('userInvitation.modal.title'),
 						message:
-							invitationType.value === INVITATION_USER_ROLE_ASSIGNMENT
+							invitationType.value === invitationUserRoleAssignment
 								? t('userInvitation.modal.message', {
 										email: invitationPayload.value.inviteeEmail,
 									})
@@ -352,7 +361,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 						actions: [
 							{
 								label:
-									invitationType.value === INVITATION_USER_ROLE_ASSIGNMENT
+									invitationType.value === invitationUserRoleAssignment
 										? t('userInvitation.modal.button')
 										: t('reviewerInvitation.modal.button'),
 								callback: (close) => {
@@ -423,6 +432,8 @@ export const useUserInvitationPageStore = defineComponentStore(
 			registerActionForStepId,
 			emailTemplatesApiUrl,
 			invitationUserData,
+			isUserRoleAssignment,
+			isReviewerAccess,
 
 			currentStep,
 			currentStepIndex,

src/pages/userInvitation/UserInvitationUserGroupsTable.vue

@@ -66,6 +66,7 @@
 					<TableCell>
 						<FieldSelect
 							name="userGroupId"
+							:disabled="store.isReviewerAccess"
 							:label="t('invitation.role.selectRole')"
 							:is-required="true"
 							:value="userGroupToAdd.userGroupId"
@@ -119,8 +120,9 @@
 					<TableCell>
 						<PkpButton
 							v-if="
-								store.invitationPayload.userGroupsToAdd.length > 1 ||
-								isUserGroupsToAddPopulated()
+								(store.invitationPayload.userGroupsToAdd.length > 1 ||
+									isUserGroupsToAddPopulated()) &&
+								store.isUserRoleAssignment
 							"
 							:is-warnable="true"
 							@click="removeInvitedUserGroup(index)"
@@ -131,7 +133,7 @@
 				</TableRow>
 			</template>
 		</TableBody>
-		<template #bottom-controls>
+		<template v-if="store.isUserRoleAssignment" #bottom-controls>
 			<PkpButton
 				:is-disabled="store.invitationPayload.disabled"
 				@click="addUserGroup()"

src/pages/userInvitation/mocks/reviewerPageInitConfig.js

@@ -39,7 +39,7 @@ export default {
 	pageTitleDescription:
 		'You are inviting a user to take a role in OJS along with appearing in the journal masthead',
 	primaryLocale: 'en',
-	invitationType: 'reviewerAccess',
+	invitationType: 'reviewerAccessInvite',
 	invitationMode: 'create',
 	invitationPayload: {
 		userId: null,
@@ -48,7 +48,10 @@ export default {
 		givenName: '',
 		familyName: '',
 		orcidValidation: false,
-		userGroupsToAdd: [{userGroupId: null, dateStart: null, masthead: null}],
+		responseDueDate: '',
+		reviewDueDate: '',
+		reviewTypes: '',
+		userGroupsToAdd: [{userGroupId: 16, dateStart: null, masthead: null}],
 		currentUserGroups: [],
 		userGroupsToRemove: [],
 		emailComposer: {
@@ -561,14 +564,15 @@ export default {
 			stepLabel: '{$step} - Enter Review Details',
 			description: 'You can add review related details',
 			nextButtonLabel: 'Invite user to the role (t)',
+			skipInvitationUpdate: false,
 			sections: [
 				{
 					id: 'reviewDetails',
 					description:
 						'<p>Please provide the following details to help us manage your submission in our system.</p>',
 					sectionComponent: 'ReviewerReviewDetailsStep',
 					props: {
-						validateFields: [],
+						validateFields: ['responseDueDate', 'reviewTypes', 'reviewDueDate'],
 					},
 				},
 			],