From 0f998976105e1d14acd7ac3d2377d1ba463ee224 Mon Sep 17 00:00:00 2001
From: GaziYucel <GaziYucel@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:28:00 +0100
Subject: [PATCH] multiple author affiliations

---
 public/globals.js                             |  15 +
 .../DropdownActions/DropdownActions.vue       |   4 +-
 src/components/Form/FormGroup.vue             |   2 +
 .../Form/fields/FieldAffiliations.mdx         |  26 +
 .../Form/fields/FieldAffiliations.stories.js  |  40 ++
 .../Form/fields/FieldAffiliations.vue         | 599 ++++++++++++++++++
 .../Form/mocks/field-affiliations.js          | 350 ++++++++++
 src/components/Icon/Icon.stories.js           |   1 +
 src/components/Icon/Icon.vue                  |  62 +-
 src/components/Icon/icons/Ror.vue             |  45 ++
 .../contributors/ContributorsListPanel.vue    |  12 +
 11 files changed, 1154 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Form/fields/FieldAffiliations.mdx
 create mode 100644 src/components/Form/fields/FieldAffiliations.stories.js
 create mode 100644 src/components/Form/fields/FieldAffiliations.vue
 create mode 100644 src/components/Form/mocks/field-affiliations.js
 create mode 100644 src/components/Icon/icons/Ror.vue

diff --git a/public/globals.js b/public/globals.js
index 0c8538abb..f3308d31a 100644
--- a/public/globals.js
+++ b/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: {
diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue
index 923fccb0a..ac379afbb 100644
--- a/src/components/DropdownActions/DropdownActions.vue
+++ b/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);
 	}
 };
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index ce7b6087c..843506640 100644
--- a/src/components/Form/FormGroup.vue
+++ b/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,
diff --git a/src/components/Form/fields/FieldAffiliations.mdx b/src/components/Form/fields/FieldAffiliations.mdx
new file mode 100644
index 000000000..7bf5e3833
--- /dev/null
+++ b/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 />
diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js
new file mode 100644
index 000000000..967f7ef95
--- /dev/null
+++ b/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},
+};
diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue
new file mode 100644
index 000000000..32e5fbbd8
--- /dev/null
+++ b/src/components/Form/fields/FieldAffiliations.vue
@@ -0,0 +1,599 @@
+<template>
+	<div class="pkpFormField pkpFormField--affiliations">
+		<div class="pkpFormField__heading">
+			<label class="pkpFormFieldLabel">
+				{{ t('user.affiliations', {}) }}
+			</label>
+		</div>
+		<div class="pkpFormField__description">
+			{{ t('user.affiliations.description', {}) }}
+		</div>
+		<div class="pkpFormField__control pkpFormField--affiliations__control">
+			<PkpTable aria-label="Affiliations">
+				<TableHeader>
+					<TableColumn id="">
+						{{ t('user.affiliations.institution', {}) }}
+					</TableColumn>
+					<TableColumn id="">
+						{{ t('user.affiliations.translation', {}) }}
+					</TableColumn>
+					<TableColumn id="">&nbsp;</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow v-for="(row, indexRow) in currentValue" :key="indexRow">
+						<TableCell>
+							<span class="text-lg-semibold">
+								{{
+									row.name[primaryLocale]
+										? row.name[primaryLocale]
+										: getAlternativeDisplayName(row.name)
+								}}
+							</span>
+							<a v-if="row.ror" :href="row.ror" target="_blank">
+								&nbsp;
+								<Icon :icon="'ror'" :class="'mr-2'" :inline="true" />
+							</a>
+						</TableCell>
+						<TableCell>
+							<div>
+								<a
+									class="pkpButton cursor-pointer border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline"
+									@click="toggleEditMode(indexRow)"
+								>
+									{{ translations(row) }}
+								</a>
+							</div>
+							<div v-if="indexRow === indexEditMode">
+								<div
+									v-for="([localeName], indexName) in Object.entries(row.name)"
+									:key="indexName"
+								>
+									<div>
+										<label
+											v-if="supportedFormLocalesKeys.includes(localeName)"
+											:for="
+												'contributors-affiliations-' +
+												indexRow +
+												'-' +
+												localeName
+											"
+											class="text-lg-semibold"
+										>
+											{{
+												row.ror
+													? getLocaleDisplayName(localeName)
+													: t(
+															'user.affiliations.typeTranslationNameInLanguageLabel',
+															{language: getLocaleDisplayName(localeName)},
+														)
+											}}
+										</label>
+									</div>
+									<div>
+										<input
+											v-if="supportedFormLocalesKeys.includes(localeName)"
+											:id="
+												'contributors-affiliations-' +
+												indexRow +
+												'-' +
+												localeName
+											"
+											v-model="row.name[localeName]"
+											:readonly="!!row.ror"
+											class="pkpFormField__input pkpFormField--text__input"
+											type="text"
+											name="searchPhraseInput"
+											aria-invalid="false"
+										/>
+									</div>
+								</div>
+							</div>
+						</TableCell>
+						<TableCell>
+							<Icon
+								class="h-5 w-5 text-primary"
+								icon="'MoreOptions'"
+								aria-hidden="true"
+							/>
+							<DropdownActions
+								v-if="!(indexRow === indexEditMode)"
+								v-bind="rowActionsArgs(indexRow)"
+								:class="'border-transparent'"
+								@action="rowActionsHandler"
+							/>
+							<button
+								v-if="indexRow === indexEditMode"
+								class="pkpButton border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline"
+								@click="closeEditMode()"
+							>
+								{{ t('common.close', {}) }}
+							</button>
+						</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>
+							<div>
+								<label
+									for="contributors-affiliations-searchPhrase-control"
+									class="text-lg-semibold"
+								>
+									{{
+										t('user.affiliations.searchPhraseLabel', {
+											language: getLocaleDisplayName('en'),
+										})
+									}}
+								</label>
+							</div>
+							<div>
+								<input
+									id="contributors-affiliations-searchPhrase-control"
+									v-model="searchPhrase"
+									class="pkpFormField__input pkpFormField--text__input"
+									type="text"
+									name="affiliationsSearchPhraseInput"
+									aria-invalid="false"
+									@keyup="searchPhraseChanged"
+								/>
+								&nbsp;
+							</div>
+							<div
+								v-if="showSearchResults"
+								class="searchPhraseResults text-primary shadow"
+							>
+								<ul>
+									<li>
+										<a
+											class="cursor-pointer border-transparent px-2 py-2 text-lg-normal text-primary hover:bg-hover hover:text-on-dark hover:enabled:underline"
+											@click="selectCustomOrganization"
+										>
+											{{ searchPhrase }}
+										</a>
+									</li>
+									<li
+										v-for="(organization, orgIndex) in apiResponse"
+										:key="orgIndex"
+									>
+										<a
+											class="cursor-pointer border-transparent px-2 py-2 text-lg-normal text-primary hover:bg-hover hover:text-on-dark hover:enabled:underline"
+											@click="selectRorOrganization(organization)"
+										>
+											{{ organization.displayName }} | &nbsp;
+											<Icon :icon="'ror'" :class="'mr-2'" :inline="true" />
+										</a>
+										<a
+											:href="organization.ror"
+											class="cursor-pointer border-transparent px-2 py-2 text-lg-normal text-primary hover:bg-hover hover:text-on-dark hover:enabled:underline"
+											target="_blank"
+										>
+											<Icon :icon="'external-link'" :inline="true" />
+										</a>
+									</li>
+								</ul>
+							</div>
+						</TableCell>
+						<TableCell>
+							<div v-if="showAddMode">
+								<div>
+									<span class="inline-block py-2 text-lg-semibold">
+										{{ translations(newAffiliationPending) }}
+									</span>
+									&nbsp;
+									<a
+										v-if="newAffiliationPending.ror"
+										:href="newAffiliationPending.ror"
+										class="inline-block py-2"
+										target="_blank"
+									>
+										<Icon :icon="'ror'" :class="'mr-2'" :inline="true" />
+									</a>
+								</div>
+								<div
+									v-for="([localeAddMode], indexNameAddMode) in Object.entries(
+										newAffiliationPending.name,
+									)"
+									:key="indexNameAddMode"
+								>
+									<div>
+										<span
+											v-if="supportedFormLocalesKeys.includes(localeAddMode)"
+											class="text-lg-normal"
+										>
+											{{
+												newAffiliationPending.ror
+													? t(
+															'user.affiliations.typeTranslationNameInLanguageLabel',
+															{language: getLocaleDisplayName(localeAddMode)},
+														)
+													: getLocaleDisplayName(localeAddMode)
+											}}
+										</span>
+									</div>
+									<div>
+										<input
+											v-if="supportedFormLocalesKeys.includes(localeAddMode)"
+											:id="
+												'contributors-affiliations-newAffiliation' +
+												'-' +
+												localeAddMode
+											"
+											v-model="newAffiliationPending.name[localeAddMode]"
+											:readonly="!!newAffiliationPending.ror"
+											class="pkpFormField__input pkpFormField--text__input"
+											type="text"
+											name="affiliationsNewAffiliationPendingInput"
+											aria-invalid="false"
+										/>
+									</div>
+								</div>
+							</div>
+						</TableCell>
+						<TableCell>
+							<div v-if="showAddMode">
+								<button
+									class="pkpButton border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline"
+									@click="addAffiliation"
+								>
+									{{ t('common.insert', {}) }}
+								</button>
+								<br />
+								<button
+									class="pkpButton border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline"
+									@click="closeAddMode"
+								>
+									{{ t('common.close', {}) }}
+								</button>
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</PkpTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, watch} from 'vue';
+import {t} from '@/utils/i18n';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import {useApiUrl} from '@/composables/useApiUrl';
+import {useFetch} from '@/composables/useFetch';
+import {useModal} from '@/composables/useModal';
+
+const props = defineProps({
+	authorId: {
+		type: Number,
+		default: null,
+	},
+	primaryLocale: {
+		type: String,
+		default: 'en',
+	},
+	supportedFormLocales: {
+		type: Array,
+		default: () => {},
+	},
+	value: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const authorId = props.authorId;
+const primaryLocale = props.primaryLocale;
+const supportedFormLocales = props.supportedFormLocales;
+const supportedFormLocalesKeys = supportedFormLocales.map(function (language) {
+	return language.key;
+});
+const currentValue = props.value;
+const apiResponse = ref([]);
+const newAffiliationPending = ref({});
+const searchPhrase = ref('');
+
+const selectCustomOrganization = function () {
+	newAffiliationPending.value = getNewItemTemplate();
+	newAffiliationPending.value.name[primaryLocale] = searchPhrase.value;
+	apiResponse.value = [];
+};
+const selectRorOrganization = function (item) {
+	newAffiliationPending.value = getNewItemTemplate();
+	newAffiliationPending.value.ror = item.ror;
+	supportedFormLocalesKeys.forEach((locale) => {
+		if (typeof item.name[locale] !== 'undefined') {
+			newAffiliationPending.value.name[locale] = item.name[locale];
+		}
+	});
+	apiResponse.value = [];
+};
+const addAffiliation = function () {
+	if (typeof newAffiliationPending.value.id !== 'undefined') {
+		currentValue.push(JSON.parse(JSON.stringify(newAffiliationPending.value)));
+		newAffiliationPending.value = {};
+		searchPhrase.value = '';
+		apiResponse.value = [];
+	}
+};
+const deleteAffiliation = function (index) {
+	const {openDialog} = useModal();
+	openDialog({
+		name: 'sendAuthorEmail',
+		title: t('user.affiliations.deleteModal.title', {}),
+		message: t('user.affiliations.deleteModal.message', {
+			institution: currentValue[index]['name'][primaryLocale],
+		}),
+		actions: [
+			{
+				label: t('common.yes', {}),
+				isWarnable: true,
+				callback: async (close) => {
+					currentValue.splice(index, 1);
+					close();
+				},
+			},
+			{
+				label: t('common.no', {}),
+				isPrimary: true,
+				callback: (close) => {
+					close();
+				},
+			},
+		],
+		close: () => {},
+	});
+};
+const rowActionsArgs = function (index) {
+	let actions = [];
+
+	if (!currentValue[index].ror) {
+		actions.push({
+			label: t('user.affiliations.translationEditActionLabel', {}),
+			name: 'edit',
+			id: index,
+		});
+	}
+
+	actions.push({
+		label: t('user.affiliations.translationDeleteActionLabel', {}),
+		name: 'delete',
+		isWarnable: true,
+		id: index,
+	});
+
+	return {
+		actions: actions,
+		label: t('user.affiliations.translationActionsAriaLabel', {}),
+		ariaLabel: t('user.affiliations.translationActionsAriaLabel', {}),
+		direction: 'left',
+		displayAsEllipsis: true,
+	};
+};
+const rowActionsHandler = function (param) {
+	if (typeof param === 'object' && param.length === 2) {
+		const name = param[0].trim();
+		const index = param[1];
+
+		switch (name) {
+			case 'edit':
+				toggleEditMode(index);
+				break;
+			case 'delete':
+				deleteAffiliation(index);
+				break;
+			default:
+				console.error(`No handler for action: ${name}`);
+		}
+	}
+};
+const indexEditMode = ref(-1);
+const showAddMode = computed(() => {
+	return typeof newAffiliationPending.value.id !== 'undefined';
+});
+const closeAddMode = function () {
+	newAffiliationPending.value = {};
+};
+const showSearchResults = computed(() => {
+	return (
+		(searchPhrase.value.length > 0 && apiResponse.value.length > 0) ||
+		(searchPhrase.value.length > 0 && apiResponse.value.length === 0) ||
+		!(searchPhrase.value.length === 0)
+	);
+});
+const toggleEditMode = function (index) {
+	if (indexEditMode.value === index) {
+		indexEditMode.value = -1;
+	} else {
+		indexEditMode.value = index;
+	}
+};
+const closeEditMode = function () {
+	indexEditMode.value = -1;
+};
+const translations = function (row) {
+	let names = row.name;
+	let total = supportedFormLocalesKeys.length;
+	let translated = 0;
+
+	for (let key in names) {
+		if (supportedFormLocalesKeys.includes(key) && names[key].length > 0) {
+			translated++;
+		}
+	}
+
+	if (total === translated) {
+		return t('user.affiliations.translationsAllAvailable', {});
+	} else {
+		return t('user.affiliations.translationsSomeAvailable', {
+			translated: translated,
+			total: total,
+		});
+	}
+};
+
+watch(
+	currentValue,
+	() => {
+		makeCurrentValueCompatible();
+	},
+	{immediate: true},
+);
+
+onMounted(() => {
+	makeCurrentValueCompatible();
+});
+
+async function searchPhraseChanged() {
+	newAffiliationPending.value = {};
+	apiResponse.value = [];
+
+	if (searchPhrase.value.length >= 3) {
+		const {apiUrl} = useApiUrl(`rors/?searchPhrase=${searchPhrase.value}`);
+		const {data, isSuccess, fetch} = useFetch(apiUrl.value, {method: 'GET'});
+
+		await fetch();
+
+		if (isSuccess) {
+			apiResponse.value = [];
+			if (data.value.items) {
+				for (let i = 0; i < data.value.items.length; i++) {
+					let row = data.value.items[i];
+					row['displayName'] =
+						data.value.items[i]['name'][row['displayLocale']];
+					apiResponse.value.push(row);
+				}
+			}
+		}
+	}
+}
+
+function makeCurrentValueCompatible() {
+	Object.keys(currentValue).forEach((index) => {
+		supportedFormLocalesKeys.forEach((locale) => {
+			if (!(locale in currentValue[index].name)) {
+				currentValue[index].name[locale] = '';
+			}
+		});
+
+		// position name for primaryLocale first
+		let namePrimaryLocale = {};
+		namePrimaryLocale[primaryLocale] = currentValue[index].name[primaryLocale];
+		let nameRest = Object.keys(currentValue[index].name)
+			.filter((key) => !primaryLocale.includes(key))
+			.reduce((obj, key) => {
+				obj[key] = currentValue[index].name[key];
+				return obj;
+			}, {});
+
+		currentValue[index].name = {...namePrimaryLocale, ...nameRest};
+	});
+}
+
+function getNewItemTemplate() {
+	let newItem = {
+		id: null,
+		authorId: authorId,
+		ror: null,
+		name: {},
+	};
+
+	supportedFormLocalesKeys.forEach((locale) => {
+		newItem.name[locale] = '';
+	});
+
+	return newItem;
+}
+
+function getLocaleDisplayName(locale) {
+	let displayName = locale;
+	supportedFormLocales.forEach((language) => {
+		if (language['key'] === locale) {
+			displayName = language['label'];
+		}
+	});
+
+	return displayName;
+}
+
+function getAlternativeDisplayName(names) {
+	let locale = '';
+	Object.keys(names).forEach((key) => {
+		if (names[key].length > 0) {
+			locale = key;
+			return false;
+		}
+	});
+
+	if (locale.length > 0) {
+		return names[locale] + ' [' + getLocaleDisplayName(locale) + ']';
+	}
+
+	return '';
+}
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+.pkpFormField--affiliations {
+	position: relative;
+}
+
+.pkpFormField--affiliations__control {
+	position: relative;
+
+	table th:nth-child(1) {
+		width: 45%;
+	}
+
+	table th:nth-child(3) {
+		width: 100px;
+	}
+
+	table td a {
+		display: inline-block;
+	}
+
+	table td:nth-child(3) {
+		text-align: right;
+	}
+}
+
+.pkpFormField--affiliations__control .searchPhraseResults {
+	background-color: #fff;
+	height: 140px;
+	overflow-y: scroll;
+	position: absolute;
+	z-index: 9999;
+	border: 1px solid #ccc;
+	min-width: 30%;
+
+	ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	ul li {
+		border-bottom: 1px solid #ccc;
+	}
+
+	ul li:nth-child(1) a {
+		width: 100%;
+		display: block;
+	}
+
+	ul li:nth-child(1n + 2) a:nth-child(1) {
+		width: calc(100% - 30px);
+	}
+
+	ul li:nth-child(1n + 2) a:nth-child(2) {
+		float: right;
+		width: 30px;
+	}
+}
+</style>
diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js
new file mode 100644
index 000000000..57f11f247
--- /dev/null
+++ b/src/components/Form/mocks/field-affiliations.js
@@ -0,0 +1,350 @@
+export default {
+	name: 'author-affiliations',
+	component: 'author-affiliations',
+	currentLocale: 'en',
+	supportedLocales: ['en', 'de', 'fr_CA'],
+	localeDisplayNames: {"en": "English", "fr_CA": "French (Canada)", "de": "German"},
+	apiResponse: {
+		"itemsMax": 110723,
+		"items": [
+			{
+				"displayLocale": "en",
+				"id": 1,
+				"isActive": true,
+				"name": {
+					"en": "RMIT University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/04ttjf776"
+			},
+			{
+				"displayLocale": "en",
+				"id": 2,
+				"isActive": true,
+				"name": {
+					"en": "La Trobe University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/01rxfrp27"
+			},
+			{
+				"displayLocale": "en",
+				"id": 3,
+				"isActive": true,
+				"name": {
+					"en": "Victoria University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/04j757h98"
+			},
+			{
+				"displayLocale": "en",
+				"id": 4,
+				"isActive": true,
+				"name": {
+					"en": "University of New England",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/04r659a56"
+			},
+			{
+				"displayLocale": "en",
+				"id": 5,
+				"isActive": true,
+				"name": {
+					"en": "Griffith University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/02sc3r913"
+			},
+			{
+				"displayLocale": "en",
+				"id": 6,
+				"isActive": true,
+				"name": {
+					"en": "Central Queensland University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/023q4bk22"
+			},
+			{
+				"displayLocale": "en",
+				"id": 7,
+				"isActive": true,
+				"name": {
+					"en": "University of South Australia",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/01p93h210"
+			},
+			{
+				"displayLocale": "en",
+				"id": 8,
+				"isActive": true,
+				"name": {
+					"en": "Bond University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/006jxzx88"
+			},
+			{
+				"displayLocale": "en",
+				"id": 9,
+				"isActive": true,
+				"name": {
+					"en": "Charles Sturt University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/00wfvh315"
+			},
+			{
+				"displayLocale": "en",
+				"id": 10,
+				"isActive": true,
+				"name": {
+					"en": "Federation University",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/05qbzwv83"
+			},
+			{
+				"displayLocale": "en",
+				"id": 11,
+				"isActive": true,
+				"name": {
+					"en": "Burnet Institute",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/05ktbsm52"
+			},
+			{
+				"displayLocale": "en",
+				"id": 12,
+				"isActive": true,
+				"name": {
+					"en": "Mater Research",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/00nx6aa03"
+			},
+			{
+				"displayLocale": "en",
+				"id": 13,
+				"isActive": true,
+				"name": {
+					"en": "St Vincents Institute of Medical Research",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/02k3cxs74"
+			},
+			{
+				"displayLocale": "en",
+				"id": 14,
+				"isActive": true,
+				"name": {
+					"en": "The Heart Research Institute",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/046fa4y88"
+			},
+			{
+				"displayLocale": "en",
+				"id": 15,
+				"isActive": true,
+				"name": {
+					"en": "University Mental Health Research Institute",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/02d439m40"
+			},
+			{
+				"displayLocale": "en",
+				"id": 16,
+				"isActive": true,
+				"name": {
+					"en": "Rolls-Royce (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/04h08p482"
+			},
+			{
+				"displayLocale": "en",
+				"id": 17,
+				"isActive": true,
+				"name": {
+					"en": "BP (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/01zctcs90"
+			},
+			{
+				"displayLocale": "en",
+				"id": 18,
+				"isActive": true,
+				"name": {
+					"en": "Rio Tinto (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/05m7zw681"
+			},
+			{
+				"displayLocale": "en",
+				"id": 19,
+				"isActive": true,
+				"name": {
+					"en": "Arup Group (United States)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/03awtex73"
+			},
+			{
+				"displayLocale": "en",
+				"id": 20,
+				"isActive": true,
+				"name": {
+					"en": "BT Group (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/00kv9pj15"
+			},
+			{
+				"displayLocale": "en",
+				"id": 21,
+				"isActive": true,
+				"name": {
+					"en": "Mater Health Services",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/03mjtdk61"
+			},
+			{
+				"displayLocale": "en",
+				"id": 22,
+				"isActive": true,
+				"name": {
+					"en": "Pilkington (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/04yyp8h20"
+			},
+			{
+				"displayLocale": "en",
+				"id": 23,
+				"isActive": true,
+				"name": {
+					"en": "Trojan Technologies (Canada)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/022rkxt86"
+			},
+			{
+				"displayLocale": "en",
+				"id": 24,
+				"isActive": true,
+				"name": {
+					"en": "The Alfred Hospital",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/01wddqe20"
+			},
+			{
+				"displayLocale": "en",
+				"id": 25,
+				"isActive": true,
+				"name": {
+					"en": "Washington State Department of Health",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/02x2akc96"
+			},
+			{
+				"displayLocale": "en",
+				"id": 26,
+				"isActive": true,
+				"name": {
+					"en": "Women's and Children's Hospital",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/03kwrfk72"
+			},
+			{
+				"displayLocale": "en",
+				"id": 27,
+				"isActive": true,
+				"name": {
+					"en": "Xstrata (United Kingdom)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/037mpqg03"
+			},
+			{
+				"displayLocale": "en",
+				"id": 28,
+				"isActive": true,
+				"name": {
+					"en": "Teck (Canada)",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/05cggb038"
+			},
+			{
+				"displayLocale": "en",
+				"id": 29,
+				"isActive": true,
+				"name": {
+					"en": "Hunter New England Local Health District",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/050b31k83"
+			},
+			{
+				"displayLocale": "en",
+				"id": 30,
+				"isActive": true,
+				"name": {
+					"en": "Cancer Council Victoria",
+					"fr_CA": ""
+				},
+				"ror": "https://ror.org/023m51b03"
+			}
+		]
+	},
+	value: [
+		{
+			"id": 12,
+			"authorId": 5,
+			"ror": "https://ror.org/0213rcc28",
+			"name": {
+				"en": "Simon Fraser University",
+				"fr_CA": "Simon Fraser University",
+				"de": "Simon Fraser University",
+			}
+		},
+		{
+			"id": 13,
+			"authorId": 5,
+			"ror": "https://ror.org/02e2c7k09",
+			"name": {
+				"en": "Delft University of Technology",
+				"fr_CA": "",
+				"de": "Technische Universität Delft",
+			}
+		},
+		{
+			"id": 14,
+			"authorId": 5,
+			"ror": "",
+			"name": {
+				"en": "German National Library of Science and Technology",
+				"fr_CA": "",
+				"de": "Technische Informationsbibliothek (TIB)",
+			}
+		},
+	],
+	newAffiliationPending: {
+		"id": null,
+		"authorId": null,
+		"ror": null,
+		"name": {}
+	}
+};
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index 7afae93da..d4cfe95e4 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -122,6 +122,7 @@ export const iconGallery = {
 			'ReviewAssignments',
 			'ReviewRequestDeclined',
 			'ReviewSent',
+			'Ror',
 			'Search',
 			'Settings',
 			'Sort',
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index a67339d1d..a51c7422a 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -27,6 +27,53 @@
 			/>
 		</g>
 	</svg>
+	<svg
+		v-if="icon === 'ror'"
+		class="pkpIcon--ror"
+		:class="classes"
+		aria-hidden="true"
+		width="100%"
+		height="100%"
+		viewBox="0 0 164 118"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		xml:space="preserve"
+		xmlns:serif="http://www.serif.com/"
+		style="
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			stroke-linejoin: round;
+			stroke-miterlimit: 2;
+		"
+	>
+		<g transform="matrix(0.994301,0,0,0.989352,0,0)">
+			<rect x="0" y="0" width="164.94" height="119.27" style="fill: white" />
+		</g>
+		<g transform="matrix(1,0,0,1,-0.945,-0.815)">
+			<path
+				d="M68.65,4.16L56.52,22.74L44.38,4.16L68.65,4.16Z"
+				style="fill: rgb(83, 186, 161); fill-rule: nonzero"
+			/>
+			<path
+				d="M119.41,4.16L107.28,22.74L95.14,4.16L119.41,4.16Z"
+				style="fill: rgb(83, 186, 161); fill-rule: nonzero"
+			/>
+			<path
+				d="M44.38,115.47L56.52,96.88L68.65,115.47L44.38,115.47Z"
+				style="fill: rgb(83, 186, 161); fill-rule: nonzero"
+			/>
+			<path
+				d="M95.14,115.47L107.28,96.88L119.41,115.47L95.14,115.47Z"
+				style="fill: rgb(83, 186, 161); fill-rule: nonzero"
+			/>
+			<path
+				d="M145.53,63.71C149.83,62.91 153.1,61 155.33,57.99C157.57,54.98 158.68,51.32 158.68,47.03C158.68,43.47 158.06,40.51 156.83,38.13C155.6,35.75 153.93,33.86 151.84,32.45C149.75,31.05 147.31,30.04 144.53,29.44C141.75,28.84 138.81,28.54 135.72,28.54L112.16,28.54L112.16,47.37C111.97,46.82 111.77,46.28 111.55,45.74C109.92,41.79 107.64,38.42 104.71,35.64C101.78,32.86 98.32,30.72 94.3,29.23C90.29,27.74 85.9,26.99 81.14,26.99C76.38,26.99 72,27.74 67.98,29.23C63.97,30.72 60.5,32.86 57.57,35.64C54.95,38.13 52.85,41.1 51.27,44.54C51.04,42.07 50.46,39.93 49.53,38.13C48.3,35.75 46.63,33.86 44.54,32.45C42.45,31.05 40.01,30.04 37.23,29.44C34.45,28.84 31.51,28.54 28.42,28.54L4.87,28.54L4.87,89.42L18.28,89.42L18.28,65.08L24.9,65.08L37.63,89.42L53.71,89.42L38.24,63.71C42.54,62.91 45.81,61 48.04,57.99C48.14,57.85 48.23,57.7 48.33,57.56C48.31,58.03 48.3,58.5 48.3,58.98C48.3,63.85 49.12,68.27 50.75,72.22C52.38,76.17 54.66,79.54 57.59,82.32C60.51,85.1 63.98,87.24 68,88.73C72.01,90.22 76.4,90.97 81.16,90.97C85.92,90.97 90.3,90.22 94.32,88.73C98.33,87.24 101.8,85.1 104.73,82.32C107.65,79.54 109.93,76.17 111.57,72.22C111.79,71.69 111.99,71.14 112.18,70.59L112.18,89.42L125.59,89.42L125.59,65.08L132.21,65.08L144.94,89.42L161.02,89.42L145.53,63.71ZM36.39,50.81C35.67,51.73 34.77,52.4 33.68,52.83C32.59,53.26 31.37,53.52 30.03,53.6C28.68,53.69 27.41,53.73 26.2,53.73L18.29,53.73L18.29,39.89L27.06,39.89C28.26,39.89 29.5,39.98 30.76,40.15C32.02,40.32 33.14,40.65 34.11,41.14C35.08,41.63 35.89,42.33 36.52,43.25C37.15,44.17 37.47,45.4 37.47,46.95C37.47,48.6 37.11,49.89 36.39,50.81ZM98.74,66.85C97.85,69.23 96.58,71.29 94.91,73.04C93.25,74.79 91.26,76.15 88.93,77.13C86.61,78.11 84.01,78.59 81.15,78.59C78.28,78.59 75.69,78.1 73.37,77.13C71.05,76.16 69.06,74.79 67.39,73.04C65.73,71.29 64.45,69.23 63.56,66.85C62.67,64.47 62.23,61.85 62.23,58.98C62.23,56.17 62.67,53.56 63.56,51.15C64.45,48.74 65.72,46.67 67.39,44.92C69.05,43.17 71.04,41.81 73.37,40.83C75.69,39.86 78.28,39.37 81.15,39.37C84.02,39.37 86.61,39.86 88.93,40.83C91.25,41.8 93.24,43.17 94.91,44.92C96.57,46.67 97.85,48.75 98.74,51.15C99.63,53.56 100.07,56.17 100.07,58.98C100.07,61.85 99.63,64.47 98.74,66.85ZM143.68,50.81C142.96,51.73 142.06,52.4 140.97,52.83C139.88,53.26 138.66,53.52 137.32,53.6C135.97,53.69 134.7,53.73 133.49,53.73L125.58,53.73L125.58,39.89L134.35,39.89C135.55,39.89 136.79,39.98 138.05,40.15C139.31,40.32 140.43,40.65 141.4,41.14C142.37,41.63 143.18,42.33 143.81,43.25C144.44,44.17 144.76,45.4 144.76,46.95C144.76,48.6 144.4,49.89 143.68,50.81Z"
+				style="fill: rgb(32, 40, 38); fill-rule: nonzero"
+			/>
+		</g>
+	</svg>
+
 	<span v-else-if="isSvgIcon" class="inline-block rtl:scale-x-[-1]">
 		<component :is="svgIcons[icon]"></component>
 	</span>
@@ -100,6 +147,7 @@ import ReadRecommendation from './icons/ReadRecommendation.vue';
 import ReviewAssignments from './icons/ReviewAssignments.vue';
 import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue';
 import ReviewSent from './icons/ReviewSent.vue';
+import Ror from './icons/Ror.vue';
 import Search from './icons/Search.vue';
 import Settings from './icons/Settings.vue';
 import Sort from './icons/Sort.vue';
@@ -176,6 +224,7 @@ const svgIcons = {
 	ReviewAssignments,
 	ReviewRequestDeclined,
 	ReviewSent,
+	Ror,
 	Search,
 	Settings,
 	Sort,
@@ -200,7 +249,8 @@ const isSvgIcon = computed(() => !!svgIcons[props.icon]);
 
 const classes = computed(() => {
 	let classes = [];
-	if (props.icon !== 'orcid') {
+	let nonFontAwesomeIcons = ['orcid', 'ror'];
+	if (!nonFontAwesomeIcons.includes(props.icon)) {
 		classes.push('fa-' + props.icon);
 	}
 	if (props.inline) {
@@ -249,4 +299,14 @@ const classes = computed(() => {
 		fill: #ffffff;
 	}
 }
+
+/**
+ * Ror icon
+ */
+.pkpIcon--ror {
+	display: inline-block;
+	width: 1.5em;
+	height: 1.5em;
+	vertical-align: middle;
+}
 </style>
diff --git a/src/components/Icon/icons/Ror.vue b/src/components/Icon/icons/Ror.vue
new file mode 100644
index 000000000..5bee17284
--- /dev/null
+++ b/src/components/Icon/icons/Ror.vue
@@ -0,0 +1,45 @@
+<template>
+	<svg
+		width="100%"
+		height="100%"
+		viewBox="0 0 164 118"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		xml:space="preserve"
+		xmlns:serif="http://www.serif.com/"
+		style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+	>
+    <g transform="matrix(0.994301,0,0,0.989352,0,0)">
+        <rect
+					x="0"
+					y="0"
+					width="164.94"
+					height="119.27"
+					style="fill:white;"
+				/>
+    </g>
+		<g transform="matrix(1,0,0,1,-0.945,-0.815)">
+			<path
+				d="M68.65,4.16L56.52,22.74L44.38,4.16L68.65,4.16Z"
+				style="fill:rgb(83,186,161);fill-rule:nonzero;"
+			/>
+			<path
+				d="M119.41,4.16L107.28,22.74L95.14,4.16L119.41,4.16Z"
+				style="fill:rgb(83,186,161);fill-rule:nonzero;"
+			/>
+			<path
+				d="M44.38,115.47L56.52,96.88L68.65,115.47L44.38,115.47Z"
+				style="fill:rgb(83,186,161);fill-rule:nonzero;"
+			/>
+			<path
+				d="M95.14,115.47L107.28,96.88L119.41,115.47L95.14,115.47Z"
+				style="fill:rgb(83,186,161);fill-rule:nonzero;"
+			/>
+			<path
+				d="M145.53,63.71C149.83,62.91 153.1,61 155.33,57.99C157.57,54.98 158.68,51.32 158.68,47.03C158.68,43.47 158.06,40.51 156.83,38.13C155.6,35.75 153.93,33.86 151.84,32.45C149.75,31.05 147.31,30.04 144.53,29.44C141.75,28.84 138.81,28.54 135.72,28.54L112.16,28.54L112.16,47.37C111.97,46.82 111.77,46.28 111.55,45.74C109.92,41.79 107.64,38.42 104.71,35.64C101.78,32.86 98.32,30.72 94.3,29.23C90.29,27.74 85.9,26.99 81.14,26.99C76.38,26.99 72,27.74 67.98,29.23C63.97,30.72 60.5,32.86 57.57,35.64C54.95,38.13 52.85,41.1 51.27,44.54C51.04,42.07 50.46,39.93 49.53,38.13C48.3,35.75 46.63,33.86 44.54,32.45C42.45,31.05 40.01,30.04 37.23,29.44C34.45,28.84 31.51,28.54 28.42,28.54L4.87,28.54L4.87,89.42L18.28,89.42L18.28,65.08L24.9,65.08L37.63,89.42L53.71,89.42L38.24,63.71C42.54,62.91 45.81,61 48.04,57.99C48.14,57.85 48.23,57.7 48.33,57.56C48.31,58.03 48.3,58.5 48.3,58.98C48.3,63.85 49.12,68.27 50.75,72.22C52.38,76.17 54.66,79.54 57.59,82.32C60.51,85.1 63.98,87.24 68,88.73C72.01,90.22 76.4,90.97 81.16,90.97C85.92,90.97 90.3,90.22 94.32,88.73C98.33,87.24 101.8,85.1 104.73,82.32C107.65,79.54 109.93,76.17 111.57,72.22C111.79,71.69 111.99,71.14 112.18,70.59L112.18,89.42L125.59,89.42L125.59,65.08L132.21,65.08L144.94,89.42L161.02,89.42L145.53,63.71ZM36.39,50.81C35.67,51.73 34.77,52.4 33.68,52.83C32.59,53.26 31.37,53.52 30.03,53.6C28.68,53.69 27.41,53.73 26.2,53.73L18.29,53.73L18.29,39.89L27.06,39.89C28.26,39.89 29.5,39.98 30.76,40.15C32.02,40.32 33.14,40.65 34.11,41.14C35.08,41.63 35.89,42.33 36.52,43.25C37.15,44.17 37.47,45.4 37.47,46.95C37.47,48.6 37.11,49.89 36.39,50.81ZM98.74,66.85C97.85,69.23 96.58,71.29 94.91,73.04C93.25,74.79 91.26,76.15 88.93,77.13C86.61,78.11 84.01,78.59 81.15,78.59C78.28,78.59 75.69,78.1 73.37,77.13C71.05,76.16 69.06,74.79 67.39,73.04C65.73,71.29 64.45,69.23 63.56,66.85C62.67,64.47 62.23,61.85 62.23,58.98C62.23,56.17 62.67,53.56 63.56,51.15C64.45,48.74 65.72,46.67 67.39,44.92C69.05,43.17 71.04,41.81 73.37,40.83C75.69,39.86 78.28,39.37 81.15,39.37C84.02,39.37 86.61,39.86 88.93,40.83C91.25,41.8 93.24,43.17 94.91,44.92C96.57,46.67 97.85,48.75 98.74,51.15C99.63,53.56 100.07,56.17 100.07,58.98C100.07,61.85 99.63,64.47 98.74,66.85ZM143.68,50.81C142.96,51.73 142.06,52.4 140.97,52.83C139.88,53.26 138.66,53.52 137.32,53.6C135.97,53.69 134.7,53.73 133.49,53.73L125.58,53.73L125.58,39.89L134.35,39.89C135.55,39.89 136.79,39.98 138.05,40.15C139.31,40.32 140.43,40.65 141.4,41.14C142.37,41.63 143.18,42.33 143.81,43.25C144.44,44.17 144.76,45.4 144.76,46.95C144.76,48.6 144.4,49.89 143.68,50.81Z"
+				style="fill:rgb(32,40,38);fill-rule:nonzero;"
+			/>
+    </g>
+</svg>
+</template>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
index 0ab52503b..9c5849371 100644
--- a/src/components/ListPanel/contributors/ContributorsListPanel.vue
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -294,6 +294,13 @@ export default {
 			let activeForm = cloneDeep(this.form);
 			activeForm.action = this.contributorsApiUrl;
 			activeForm.method = 'POST';
+			activeForm.fields = activeForm.fields.map((field) => {
+				if (field.name === 'affiliations') {
+					field.primaryLocale = activeForm.primaryLocale;
+					field.supportedFormLocales = activeForm.supportedFormLocales;
+				}
+				return field;
+			});
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.t('grid.action.addContributor');
 			const {openSideModal} = useModal();
@@ -395,6 +402,11 @@ export default {
 							field.isVerified = author['orcidIsVerified'] ?? false;
 							field.orcidVerificationRequested =
 								author['orcidVerificationRequested'];
+						} else if (field.name === 'affiliations') {
+							field.authorId = author['id'];
+							field.primaryLocale = activeForm.primaryLocale;
+							field.supportedFormLocales = activeForm.supportedFormLocales;
+							field.value = author[field.name];
 						} else if (Object.keys(author).includes(field.name)) {
 							field.value = author[field.name];
 						}