multiple author affiliations

public/globals.js

@@ -747,6 +747,21 @@ window.pkp = {
 			"Invitation not accepted. You're logged in as a different user.",
 		'acceptInvitation.authorization.message':
 			'Please log out and sign in with the correct account to accept this invitation.',
+		'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': 'Translation',
+		'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': '{$translated} 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 institution <strong>{$institution}</strong> will be deleted.',
+		'user.affiliations.searchPhraseLabel': 'Type the institute name in {$language}',
+		'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found'
 	},
 
 	tinyMCE: {

src/components/DropdownActions/DropdownActions.vue

@@ -124,7 +124,9 @@ const emit = defineEmits([
 ]);
 
 const emitAction = (action) => {
-	if (action.name) {
+	if (action.name && (action.id || action.id === 0)) {
+		emit('action', [action.name, action.id]);
+	} else if (action.name) {
 		emit('action', action.name);
 	}
 };

src/components/Form/FormGroup.vue

@@ -53,6 +53,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 +85,7 @@ import {shouldShowFieldWithinGroup} from './formHelpers';
 export default {
 	name: 'FormGroup',
 	components: {
+		FieldAffiliations,
 		FieldArchivingPn,
 		FieldAutosuggestPreset,
 		FieldBaseAutosuggest,

src/components/Form/fields/FieldAffiliations.mdx

@@ -0,0 +1,26 @@
+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,40 @@
+import FieldAffiliations from './FieldAffiliations.vue';
+import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations';
+import {http, HttpResponse} from "msw";
+
+const args = {...FieldAffiliationsMock};
+
+export default {
+	title: 'Forms/FieldAffiliations',
+	component: FieldAffiliations,
+	args: {},
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/rors/?searchPhrase=Simon+Fraser+University',
+					async () => {
+						return HttpResponse.json(args.apiResponse);
+					},
+				),
+			],
+		},
+	},
+	render: (args) => ({
+		components: {FieldAffiliations},
+		setup() {
+			return {args}
+		},
+		template: `
+			<FieldAffiliations v-bind="args"/>`
+	}),
+	decorators: [
+		() => ({
+			template: '<div style="height: 600px"><story/></div>',
+		}),
+	],
+};
+
+export const Base = {
+	args: {...FieldAffiliationsMock},
+};