pkp/pkp-lib#7135 Multiple author affiliations (Ror)

Author: GaziYucel

public/globals.js

@@ -158,6 +158,7 @@ window.pkp = {
 		'article.metadata': 'Metadata',
 		'author.users.contributor.principalContact': 'Primary Contact',
 		'author.users.contributor.setPrincipalContact': 'Set Primary Contact',
+		'common.add': 'Add',
 		'common.addCCBCC': 'Add CC/BCC',
 		'common.assign': 'Assign',
 		'common.attachFiles': 'Attach Files',
@@ -811,6 +812,22 @@ window.pkp = {
 			'The submission has been advanced to the next round of review',
 		'workflow.submissionNextReviewRoundInFutureStage':
 			'The submission advanced to the next review round, was accepted, and is currently in the {$stage} stage.',
+		'user.affiliations': 'Affiliations',
+		'user.affiliations.description': 'Enter the full name of the institution below, avoiding any acronyms. Select the name from the dropdown and click "Add" to include the affiliation in your profile. (e.g. "Simon Fraser University")',
+		'user.affiliations.institution': 'Institution',
+		'user.affiliations.translation': 'More information',
+		'user.affiliations.translationEditActionLabel': 'Edit institution name',
+		'user.affiliations.translationDeleteActionLabel': 'Remove institution',
+		'user.affiliations.translationActionsAriaLabel': 'Click to edit or delete',
+		'user.affiliations.translationsAllAvailable': 'All translations available',
+		'user.affiliations.translationsSomeAvailable': '{$count} of {$total} languages completed',
+		'user.affiliations.typeTranslationNameInLanguageLabel': 'Type the institute name in {$language}',
+		'user.affiliations.translationNameInLanguage': 'Institute name in {$language}',
+		'user.affiliations.deleteModal.title': 'Are you sure?',
+		'user.affiliations.deleteModal.message': 'The affiliation <strong>{$affiliation}</strong> will be deleted.',
+		'user.affiliations.searchPhraseLabel': 'Type the institute name in {$language}',
+		'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found',
+		'user.affiliations.primaryLocaleRequired': 'The primary language {$primaryLocale} is required',
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

src/components/Form/FormGroup.vue

@@ -43,6 +43,8 @@
 						:key="field.name"
 						:all-errors="errors"
 						:form-id="formId"
+						:primary-locale="primaryLocale"
+						:locales="availableLocales"
 						@change="fieldChanged"
 						@set-errors="setFieldErrors"
 					></component>
@@ -53,6 +55,7 @@
 </template>
 
 <script>
+import FieldAffiliations from './fields/FieldAffiliations.vue';
 import FieldArchivingPn from './fields/FieldArchivingPn.vue';
 import FieldAutosuggestPreset from './fields/FieldAutosuggestPreset.vue';
 import FieldBaseAutosuggest from './fields/FieldBaseAutosuggest.vue';
@@ -84,6 +87,7 @@ import {shouldShowFieldWithinGroup} from './formHelpers';
 export default {
 	name: 'FormGroup',
 	components: {
+		FieldAffiliations,
 		FieldArchivingPn,
 		FieldAutosuggestPreset,
 		FieldBaseAutosuggest,

src/components/Form/fields/FieldAffiliations.mdx

@@ -0,0 +1,23 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as FieldAffiliationsStories from './FieldAffiliations.stories.js';
+
+<Meta of={FieldAffiliationsStories} />
+
+# FieldAffiliation
+
+## Usage
+
+A special component to maintain affiliations (institutions) of authors (contributors).
+
+The Affiliations currently saved are shown in a tabular way.
+
+The default locale name and a clickable status message is shown, which shows which translations are saved. The affiliation name can be retrieved from an API or entered manually. If retrieved from the API, the values will be read only.
+
+The data of the API is from a cached data dump from https://ror.org. Getting and saving the data dump is done with the classes in the namespace "PKP\ror".
+
+The `value` are an array of Affiliation objects.
+
+<Primary />
+<Controls />
+<Stories />

src/components/Form/fields/FieldAffiliations.stories.js

@@ -0,0 +1,47 @@
+import {http, HttpResponse} from 'msw';
+import FieldAffiliations from './FieldAffiliations.vue';
+import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations';
+
+export default {
+	title: 'Forms/FieldAffiliations',
+	component: FieldAffiliations,
+	render: (args) => ({
+		components: {FieldAffiliations},
+		setup() {
+			function change(name, prop, newValue, localeKey) {
+				if (localeKey) {
+					args[prop][localeKey] = newValue;
+				} else {
+					args[prop] = newValue;
+				}
+			}
+
+			return {args, change};
+		},
+		template: '<FieldAffiliations v-bind="args" @change="change"/>',
+	}),
+	parameters: {
+		msw: {
+			handlers: [
+				http.get('https://api.ror.org/v2/organizations', async () => {
+					return HttpResponse.json(FieldAffiliationsMock.organizations);
+				}),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/rors/',
+					async () => {
+						return HttpResponse.json();
+					},
+				),
+			],
+		},
+		docs: {
+			story: {
+				height: '500px',
+			},
+		},
+	},
+};
+
+export const Base = {
+	args: {...FieldAffiliationsMock},
+};