supportedFormLocales; refactoring

Author: GaziYucel

src/components/Form/fields/FieldAffiliations.vue

@@ -24,8 +24,8 @@
 						<TableCell>
 							<span class="text-lg-semibold">
 								{{
-									row.name[currentLocale]
-										? row.name[currentLocale]
+									row.name[primaryLocale]
+										? row.name[primaryLocale]
 										: getAlternativeDisplayName(row.name)
 								}}
 							</span>
@@ -50,7 +50,7 @@
 								>
 									<div>
 										<label
-											v-if="supportedLocales.includes(localeName)"
+											v-if="supportedFormLocalesKeys.includes(localeName)"
 											:for="
 												'contributors-affiliations-' +
 												indexRow +
@@ -71,7 +71,7 @@
 									</div>
 									<div>
 										<input
-											v-if="supportedLocales.includes(localeName)"
+											v-if="supportedFormLocalesKeys.includes(localeName)"
 											:id="
 												'contributors-affiliations-' +
 												indexRow +
@@ -83,7 +83,7 @@
 											class="pkpFormField__input pkpFormField--text__input"
 											type="text"
 											name="searchPhraseInput"
-											aria-invalid="0"
+											aria-invalid="false"
 										/>
 									</div>
 								</div>
@@ -131,7 +131,7 @@
 									class="pkpFormField__input pkpFormField--text__input"
 									type="text"
 									name="affiliationsSearchPhraseInput"
-									aria-invalid="0"
+									aria-invalid="false"
 									@keyup="searchPhraseChanged"
 								/>
 								&nbsp;
@@ -158,8 +158,8 @@
 											@click="selectRorOrganization(organization)"
 										>
 											{{
-												organization.name[currentLocale]
-													? organization.name[currentLocale]
+												organization.name[primaryLocale]
+													? organization.name[primaryLocale]
 													: organization.name[organization.displayLocale] +
 														' [' +
 														getLocaleDisplayName(organization.displayLocale) +
@@ -203,7 +203,7 @@
 								>
 									<div>
 										<span
-											v-if="supportedLocales.includes(localeAddMode)"
+											v-if="supportedFormLocalesKeys.includes(localeAddMode)"
 											class="text-lg-normal"
 										>
 											{{
@@ -218,7 +218,7 @@
 									</div>
 									<div>
 										<input
-											v-if="supportedLocales.includes(localeAddMode)"
+											v-if="supportedFormLocalesKeys.includes(localeAddMode)"
 											:id="
 												'contributors-affiliations-newAffiliation' +
 												'-' +
@@ -229,7 +229,7 @@
 											class="pkpFormField__input pkpFormField--text__input"
 											type="text"
 											name="affiliationsNewAffiliationPendingInput"
-											aria-invalid="0"
+											aria-invalid="false"
 										/>
 									</div>
 								</div>
@@ -275,31 +275,44 @@ import {useFetch} from '@/composables/useFetch';
 import {useModal} from '@/composables/useModal';
 
 const props = defineProps({
-	currentLocale: {type: String, default: 'en'},
-	supportedLocales: {type: Object, default: () => {}},
-	localeDisplayNames: {type: Object, default: () => {}},
-	value: {type: Array, default: () => []},
-	authorId: {type: Number, default: null},
+	authorId: {
+		type: Number,
+		default: null,
+	},
+	primaryLocale: {
+		type: String,
+		default: 'en',
+	},
+	supportedFormLocales: {
+		type: Array,
+		default: () => {},
+	},
+	value: {
+		type: Array,
+		default: () => [],
+	},
 });
 
-const localeDisplayNames = props.localeDisplayNames;
-const currentLocale = props.currentLocale;
-const supportedLocales = props.supportedLocales;
-const currentValue = props.value;
 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[currentLocale] = searchPhrase.value;
+	newAffiliationPending.value.name[primaryLocale] = searchPhrase.value;
 	apiResponse.value = [];
 };
 const selectRorOrganization = function (item) {
 	newAffiliationPending.value = getNewItemTemplate();
 	newAffiliationPending.value.ror = item.ror;
-	supportedLocales.forEach((locale) => {
+	supportedFormLocalesKeys.forEach((locale) => {
 		if (typeof item.name[locale] !== 'undefined') {
 			newAffiliationPending.value.name[locale] = item.name[locale];
 		}
@@ -320,7 +333,7 @@ const deleteAffiliation = function (index) {
 		name: 'sendAuthorEmail',
 		title: t('user.affiliations.deleteModal.title', {}),
 		message: t('user.affiliations.deleteModal.message', {
-			institution: currentValue[index]['name'][currentLocale],
+			institution: currentValue[index]['name'][primaryLocale],
 		}),
 		actions: [
 			{
@@ -407,11 +420,11 @@ const closeEditMode = function () {
 };
 const translations = function (row) {
 	let names = row.name;
-	let total = supportedLocales.length;
+	let total = supportedFormLocalesKeys.length;
 	let translated = 0;
 
 	for (let key in names) {
-		if (supportedLocales.includes(key) && names[key].length > 0) {
+		if (supportedFormLocalesKeys.includes(key) && names[key].length > 0) {
 			translated++;
 		}
 	}
@@ -444,7 +457,7 @@ async function searchPhraseChanged() {
 
 	if (searchPhrase.value.length >= 3) {
 		const {apiUrl} = useApiUrl(`rors/?searchPhrase=${searchPhrase.value}`);
-		const {data, isSuccess, fetch} = useFetch(apiUrl, {method: 'GET'});
+		const {data, isSuccess, fetch} = useFetch(apiUrl.value, {method: 'GET'});
 
 		await fetch();
 
@@ -461,7 +474,7 @@ async function searchPhraseChanged() {
 
 function makeCurrentValueCompatible() {
 	Object.keys(currentValue).forEach((index) => {
-		supportedLocales.forEach((locale) => {
+		supportedFormLocalesKeys.forEach((locale) => {
 			if (!(locale in currentValue[index].name)) {
 				currentValue[index].name[locale] = '';
 			}
@@ -477,24 +490,22 @@ function getNewItemTemplate() {
 		name: {},
 	};
 
-	supportedLocales.forEach((locale) => {
+	supportedFormLocalesKeys.forEach((locale) => {
 		newItem.name[locale] = '';
 	});
 
 	return newItem;
 }
 
 function getLocaleDisplayName(locale) {
-	return typeof localeDisplayNames[locale] !== 'undefined'
-		? localeDisplayNames[locale]
-		: locale;
-
-	// Gives sometimes errors
-	// if (typeof Intl === 'undefined') {
-	// 	return locale;
-	// }
-	// const localeNames = new Intl.DisplayNames([currentLocale], {type: 'language'});
-	// return localeNames.of(locale.replace('_', '-'));
+	let displayName = locale;
+	supportedFormLocales.forEach((language) => {
+		if (language['key'] === locale) {
+			displayName = language['label'];
+		}
+	});
+
+	return displayName;
 }
 
 function getAlternativeDisplayName(names) {

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();
@@ -396,6 +403,8 @@ export default {
 								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];