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

Author: jardakotesovec

src/components/Form/Form.vue

@@ -566,8 +566,17 @@ export default {
 					'[id*="' + this.id + '-' + field.name + '"]',
 				);
 				if ($el) {
+					// Handle scrolling within new side modals
+					const containers = document.querySelectorAll(
+						'div.pkp-modal-scroll-container',
+					);
+					const lastContainer =
+						containers.length > 0
+							? containers[containers.length - 1]
+							: undefined;
 					this.$scrollTo($el, 500, {
 						offset: -50,
+						container: lastContainer,
 					});
 				} else {
 					this.setCurrentPage(group.pageId);

src/components/Form/fields/FieldAffiliations.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="pkpFormField pkpFormField--affiliations">
+	<!-- To be able to scroll to this field on error-->
+	<div
+		:id="`${props.formId}-${props.name}`"
+		class="pkpFormField pkpFormField--affiliations"
+	>
 		<div class="pkpFormField__heading">
 			<label class="pkpFormFieldLabel">
 				{{ t('user.affiliations', {}) }}
@@ -70,7 +74,12 @@
 									/>
 									{{ translations(affiliation).label }}
 								</a>
-								<div v-if="affiliationIndex === indexEditMode">
+								<div
+									v-if="
+										affiliationIndex === indexEditMode ||
+										errors?.[affiliationIndex]?.name
+									"
+								>
 									<div
 										v-for="[affiliationNameLocale] in Object.entries(
 											affiliation.name,
@@ -80,38 +89,27 @@
 										<div
 											v-if="supportedLocales.includes(affiliationNameLocale)"
 										>
-											<div>
-												<span class="text-lg-semibold">
-													{{ getTextFieldLabel(affiliationNameLocale) }}
-												</span>
-												<span
-													v-if="affiliationNameLocale === primaryLocale"
-													class="pkpFormFieldLabel__required"
-												>
-													<span class="aria-hidden">*</span>
-													<span class="-screenReader">Required</span>
-												</span>
-											</div>
-											<div class="pkpFormField--sizelarge">
-												<input
-													:id="
-														'contributors-affiliations-' +
-														affiliationIndex +
-														'-' +
-														affiliationNameLocale
-													"
-													v-model="affiliation.name[affiliationNameLocale]"
-													:name="
-														'contributors-affiliations-' +
-														affiliationIndex +
-														'-' +
+											<FieldText
+												:label="getTextFieldLabel(affiliationNameLocale)"
+												:value="affiliation.name[affiliationNameLocale]"
+												name="name"
+												:all-errors="{
+													name: errors?.[affiliationIndex]?.name?.[
 														affiliationNameLocale
-													"
-													class="pkpFormField__input pkpFormField--text__input"
-													type="text"
-													:aria-invalid="false"
-												/>
-											</div>
+													],
+												}"
+												size="large"
+												:is-required="affiliationNameLocale === primaryLocale"
+												@change="
+													(fieldName, _, fieldValue) => {
+														updateAffiliationName(
+															affiliationIndex,
+															affiliationNameLocale,
+															fieldValue,
+														);
+													}
+												"
+											/>
 										</div>
 									</div>
 								</div>
@@ -121,7 +119,6 @@
 							<DropdownActions
 								v-if="!(affiliationIndex === indexEditMode)"
 								v-bind="rowActionsArgs(affiliationIndex)"
-								:class="'dropDownActions border-transparent'"
 								@action="rowActionsHandler"
 							/>
 						</TableCell>
@@ -312,17 +309,11 @@ const {fetch: postRorObject} = useFetch(apiUrl.value, {
 	body: rorObjectToBeUpdated,
 });
 
-computed(() => {
+const errors = computed(() => {
 	if (!Object.keys(props.allErrors).includes(props.name)) {
 		return [];
 	}
-	let errors = props.allErrors[props.name];
-	if (props.isMultilingual && Object.keys(errors).includes(props.localeKey)) {
-		return errors[props.localeKey];
-	} else if (!props.isMultilingual) {
-		return errors;
-	}
-	return [];
+	return props.allErrors[props.name];
 });
 
 // new affiliation form
@@ -417,7 +408,7 @@ const rowActionsArgs = function (index) {
 		label: t('user.affiliations.translationActionsAriaLabel', {}),
 		ariaLabel: t('user.affiliations.translationActionsAriaLabel', {}),
 		direction: 'left',
-		displayAsEllipsis: true,
+		buttonVariant: 'ellipsis',
 	};
 };
 
@@ -476,6 +467,21 @@ function deleteRow(index) {
 	});
 }
 
+function updateAffiliationName(affiliationIndex, locale, value) {
+	currentValue.value = currentValue.value.map((affiliation, index) => {
+		if (index !== affiliationIndex) {
+			return affiliation;
+		}
+		return {
+			...affiliation,
+			name: {
+				...affiliation.name,
+				[locale]: value,
+			},
+		};
+	});
+}
+
 // helper methods
 
 function getLocaleDisplayName(locale) {

src/components/Modal/SideModalBody.vue

@@ -46,7 +46,10 @@
 					</div>
 				</div>
 			</div>
-			<div class="relative mt-6 flex-1 overflow-y-scroll">
+			<!-- pkp-modal-scroll-container is important for scrolling within form-->
+			<div
+				class="pkp-modal-scroll-container relative mt-6 flex-1 overflow-y-scroll"
+			>
 				<!-- @slot Body content -->
 				<slot :close-modal="closeModal" />
 			</div>