|
1 | 1 | <template>
|
2 |
| - <div class="pkpFormField pkpFormField--affiliations"> |
| 2 | + <!-- To be able to scroll to this field on error--> |
| 3 | + <div |
| 4 | + :id="`${props.formId}-${props.name}`" |
| 5 | + class="pkpFormField pkpFormField--affiliations" |
| 6 | + > |
3 | 7 | <div class="pkpFormField__heading">
|
4 | 8 | <label class="pkpFormFieldLabel">
|
5 | 9 | {{ t('user.affiliations', {}) }}
|
|
70 | 74 | />
|
71 | 75 | {{ translations(affiliation).label }}
|
72 | 76 | </a>
|
73 |
| - <div v-if="affiliationIndex === indexEditMode"> |
| 77 | + <div |
| 78 | + v-if=" |
| 79 | + affiliationIndex === indexEditMode || |
| 80 | + errors?.[affiliationIndex]?.name |
| 81 | + " |
| 82 | + > |
74 | 83 | <div
|
75 | 84 | v-for="[affiliationNameLocale] in Object.entries(
|
76 | 85 | affiliation.name,
|
|
80 | 89 | <div
|
81 | 90 | v-if="supportedLocales.includes(affiliationNameLocale)"
|
82 | 91 | >
|
83 |
| - <div> |
84 |
| - <span class="text-lg-semibold"> |
85 |
| - {{ getTextFieldLabel(affiliationNameLocale) }} |
86 |
| - </span> |
87 |
| - <span |
88 |
| - v-if="affiliationNameLocale === primaryLocale" |
89 |
| - class="pkpFormFieldLabel__required" |
90 |
| - > |
91 |
| - <span class="aria-hidden">*</span> |
92 |
| - <span class="-screenReader">Required</span> |
93 |
| - </span> |
94 |
| - </div> |
95 |
| - <div class="pkpFormField--sizelarge"> |
96 |
| - <input |
97 |
| - :id=" |
98 |
| - 'contributors-affiliations-' + |
99 |
| - affiliationIndex + |
100 |
| - '-' + |
101 |
| - affiliationNameLocale |
102 |
| - " |
103 |
| - v-model="affiliation.name[affiliationNameLocale]" |
104 |
| - :name=" |
105 |
| - 'contributors-affiliations-' + |
106 |
| - affiliationIndex + |
107 |
| - '-' + |
| 92 | + <FieldText |
| 93 | + :label="getTextFieldLabel(affiliationNameLocale)" |
| 94 | + :value="affiliation.name[affiliationNameLocale]" |
| 95 | + name="name" |
| 96 | + :all-errors="{ |
| 97 | + name: errors?.[affiliationIndex]?.name?.[ |
108 | 98 | affiliationNameLocale
|
109 |
| - " |
110 |
| - class="pkpFormField__input pkpFormField--text__input" |
111 |
| - type="text" |
112 |
| - :aria-invalid="false" |
113 |
| - /> |
114 |
| - </div> |
| 99 | + ], |
| 100 | + }" |
| 101 | + size="large" |
| 102 | + :is-required="affiliationNameLocale === primaryLocale" |
| 103 | + @change=" |
| 104 | + (fieldName, _, fieldValue) => { |
| 105 | + updateAffiliationName( |
| 106 | + affiliationIndex, |
| 107 | + affiliationNameLocale, |
| 108 | + fieldValue, |
| 109 | + ); |
| 110 | + } |
| 111 | + " |
| 112 | + /> |
115 | 113 | </div>
|
116 | 114 | </div>
|
117 | 115 | </div>
|
@@ -305,17 +303,11 @@ const {fetch: postRorObject} = useFetch(apiUrl.value, {
|
305 | 303 | body: rorObjectToBeUpdated,
|
306 | 304 | });
|
307 | 305 |
|
308 |
| -computed(() => { |
| 306 | +const errors = computed(() => { |
309 | 307 | if (!Object.keys(props.allErrors).includes(props.name)) {
|
310 | 308 | return [];
|
311 | 309 | }
|
312 |
| - let errors = props.allErrors[props.name]; |
313 |
| - if (props.isMultilingual && Object.keys(errors).includes(props.localeKey)) { |
314 |
| - return errors[props.localeKey]; |
315 |
| - } else if (!props.isMultilingual) { |
316 |
| - return errors; |
317 |
| - } |
318 |
| - return []; |
| 310 | + return props.allErrors[props.name]; |
319 | 311 | });
|
320 | 312 |
|
321 | 313 | // new affiliation form
|
@@ -410,7 +402,7 @@ const rowActionsArgs = function (index) {
|
410 | 402 | label: t('user.affiliations.translationActionsAriaLabel', {}),
|
411 | 403 | ariaLabel: t('user.affiliations.translationActionsAriaLabel', {}),
|
412 | 404 | direction: 'left',
|
413 |
| - displayAsEllipsis: true, |
| 405 | + buttonVariant: 'ellipsis', |
414 | 406 | };
|
415 | 407 | };
|
416 | 408 |
|
@@ -464,6 +456,21 @@ function deleteRow(index) {
|
464 | 456 | });
|
465 | 457 | }
|
466 | 458 |
|
| 459 | +function updateAffiliationName(affiliationIndex, locale, value) { |
| 460 | + currentValue.value = currentValue.value.map((affiliation, index) => { |
| 461 | + if (index !== affiliationIndex) { |
| 462 | + return affiliation; |
| 463 | + } |
| 464 | + return { |
| 465 | + ...affiliation, |
| 466 | + name: { |
| 467 | + ...affiliation.name, |
| 468 | + [locale]: value, |
| 469 | + }, |
| 470 | + }; |
| 471 | + }); |
| 472 | +} |
| 473 | +
|
467 | 474 | // helper methods
|
468 | 475 |
|
469 | 476 | function getLocaleDisplayName(locale) {
|
|
0 commit comments