Contributor Roles and Type

Author: jyhein

src/components/Form/Form.vue

@@ -78,7 +78,7 @@
 <script>
 import FormLocales from './FormLocales.vue';
 import FormPage from './FormPage.vue';
-import {shouldShowField} from './formHelpers';
+import {shouldShowField, requireWhen} from './formHelpers';
 import Icon from '@/components/Icon/Icon.vue';
 
 export default {
@@ -88,6 +88,11 @@ export default {
 		FormPage,
 		Icon,
 	},
+	provide() {
+		return {
+			requireWhen: (isRequired) => requireWhen(isRequired, this.fields),
+		};
+	},
 	props: {
 		/** Used by a parent component, such as `Container`, to identify events emitted from the form and update the form props when necessary. */
 		id: String,
@@ -380,7 +385,8 @@ export default {
 			this.fields.forEach((field) => {
 				if (
 					!field.isRequired ||
-					!shouldShowField(field, this.fields, this.groups)
+					!shouldShowField(field, this.fields, this.groups) ||
+					!requireWhen(field.isRequired, this.fields)
 				) {
 					return;
 				}

src/components/Form/FormFieldLabel.vue

@@ -7,7 +7,10 @@
 		<template v-else>
 			{{ label }}
 		</template>
-		<span v-if="isRequired" class="pkpFormFieldLabel__required">
+		<span
+			v-if="requireWhen ? requireWhen(isRequired) : isRequired"
+			class="pkpFormFieldLabel__required"
+		>
 			<span class="aria-hidden">*</span>
 			<span class="-screenReader">{{ requiredLabel }}</span>
 		</span>
@@ -17,14 +20,15 @@
 <script>
 export default {
 	name: 'FormFieldLabel',
+	inject: ['requireWhen', null],
 	props: {
 		labelId: String,
 		controlId: String,
 		label: String,
 		localeLabel: String,
 		multilingualLabel: String,
 		isRequired: {
-			type: Boolean,
+			type: [Boolean, Array],
 			default: false,
 		},
 		requiredLabel: String,

src/components/Form/fields/FieldBase.vue

@@ -42,8 +42,9 @@ export default {
 		},
 		/** Whether or not this field should be presented for each supported language. */
 		isMultilingual: Boolean,
-		/**  Whether or not a value for this field should be required. */
-		isRequired: Boolean,
+		/**  Whether or not a value for this field should be required.
+		 * You can also pass an array to require a specific value or multiple values. Similar as below 'showWhen'. */
+		isRequired: [Boolean, Array],
 		/** The `name` of another field which should have a truthy value before this field is shown.
 		 * You can also pass an array to require a specific value or multiple values. For example, `['primaryLocale', 'en_US']` would hide this field unless the `primaryLocale` field had a value of `en_US`. Or `['primaryLocale', ['en_US', 'fr_CA']]` to check for multiple values. */
 		showWhen: [String, Array],

src/components/Form/formHelpers.js

@@ -66,3 +66,20 @@ export function shouldShowField(field, fields, groups) {
 		shouldShowGroup(group, fields) && shouldShowFieldWithinGroup(field, fields)
 	);
 }
+
+/**
+ * Require when a field value
+ *
+ * @param {Boolean|Array} requireValue Require value
+ * @param {Object} fields All form fields
+ * @return {Boolean}
+ */
+
+export function requireWhen(requireValue, fields) {
+	if (!Array.isArray(requireValue)) return requireValue;
+
+	const [whenFieldName, whenValues] = requireValue;
+	const val = fields.find((field) => field.name === whenFieldName)?.value;
+
+	return whenValues.includes(val);
+}

src/components/Form/mocks/field-options-authors-role.js

@@ -1,13 +1,13 @@
 export default {
-	name: 'userGroupId',
+	name: 'contributorRoles',
 	component: 'field-options',
-	label: "Contributor's role",
-	type: 'radio',
-	isRequired: false,
-	value: 14,
+	label: "Contributor's roles",
+	type: 'checkbox',
+	isRequired: true,
+	value: ['AUTHOR'],
 	groupId: 'default',
 	options: [
-		{value: 14, label: 'Author'},
-		{value: 15, label: 'Translator'},
+		{value: 'AUTHOR', label: 'Author'},
+		{value: 'TRANSLATOR', label: 'Translator'},
 	],
 };

src/components/Form/mocks/form-contributors.js

@@ -7,6 +7,24 @@ export default {
 	method: 'POST',
 	action: '/submissions/9/publications/__publicationId__/contributors',
 	fields: [
+		{
+			name: 'contributorType',
+			component: 'field-options',
+			label: 'Contributor Type',
+			groupId: 'default',
+			isRequired: true,
+			isMultilingual: false,
+			isInert: false,
+			value: 'PERSON',
+			type: 'radio',
+			isOrderable: false,
+			allowOnlySorting: false,
+			options: [
+				{value: 'PERSON', label: 'Person'},
+				{value: 'ORGANIZATION', label: 'Organization or group'},
+				{value: 'ANONYMOUS', label: 'Anonymous'},
+			],
+		},
 		{
 			name: 'givenName',
 			component: 'field-text',
@@ -113,20 +131,20 @@ export default {
 			prefix: '',
 		},
 		{
-			name: 'userGroupId',
+			name: 'contributorRoles',
 			component: 'field-options',
 			label: "Contributor's role",
 			groupId: 'default',
-			isRequired: false,
+			isRequired: true,
 			isMultilingual: false,
 			isInert: false,
-			value: 14,
-			type: 'radio',
+			value: ['AUTHOR'],
+			type: 'checkbox',
 			isOrderable: false,
 			allowOnlySorting: false,
 			options: [
-				{value: 14, label: 'Author'},
-				{value: 15, label: 'Translator'},
+				{value: 'AUTHOR', label: 'Author'},
+				{value: 'TRANSLATOR', label: 'Translator'},
 			],
 		},
 		{

src/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -55,8 +55,11 @@
 				<template #item-title="{item}">
 					<div class="whitespace-normal text-justify">
 						{{ item.fullName }}
-						<Badge v-if="item.userGroupName">
-							{{ localize(item.userGroupName) }}
+						<Badge
+							v-for="(contributorRole, roleIdentifier) in item.contributorRoles"
+							:key="roleIdentifier"
+						>
+							{{ localize(contributorRole) }}
 						</Badge>
 					</div>
 				</template>
@@ -399,6 +402,8 @@ export default {
 						} else if (field.name === 'affiliations') {
 							field.authorId = author['id'];
 							field.value = author[field.name];
+						} else if (field.name === 'contributorRoles') {
+							field.value = Object.keys(author[field.name]);
 						} else if (Object.keys(author).includes(field.name)) {
 							field.value = author[field.name];
 						}

src/managers/UserInvitationManager/mocks/invitationMock.js

@@ -60,7 +60,7 @@ export default {
 			emailBody: null,
 			userGroupsToAdd: [
 				{
-					userGroupId: 16,
+					userGroupId: 15,
 					userGroupName: 'Reviewer',
 					masthead: true,
 					dateStart: '2024-09-10',

src/mocks/authors.js

@@ -22,11 +22,8 @@ export const dbarnes = {
 	},
 	publicationId: 17,
 	seq: 1,
-	userGroupId: 14,
-	userGroupName: {
-		fr_CA: '',
-		en: 'Author',
-	},
+	contributorType: 'PERSON',
+	contributorRoles: {AUTHOR: {en: 'Author', fr_CA: 'Auteur-e'}},
 };
 
 export const lipsum = {
@@ -54,11 +51,8 @@ export const lipsum = {
 	},
 	publicationId: 17,
 	seq: 1,
-	userGroupId: 14,
-	userGroupName: {
-		fr_CA: '',
-		en: 'Author',
-	},
+	contributorType: 'PERSON',
+	contributorRoles: {AUTHOR: {en: 'Author', fr_CA: 'Auteur-e'}},
 };
 
 export default [{...dbarnes}, {...lipsum}];

src/mocks/contributor.js

@@ -26,6 +26,6 @@ export default {
 	preferredPublicName: {en: '', es: '', fr_CA: '', pt: ''},
 	publicationId: 10,
 	seq: 0,
-	userGroupId: 14,
-	userGroupName: {en: 'Author', fr_CA: 'Auteur-e'},
+	contributorType: 'PERSON',
+	contributorRoles: {AUTHOR: {en: 'Author', fr_CA: 'Auteur-e'}},
 };