From 81d494cdeadadfe506536848acd46d8a78234398 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Sun, 17 Nov 2024 21:28:00 +0100 Subject: [PATCH 01/19] Resolve PR conflicts --- 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 | 2 +- src/components/Icon/icons/Ror.vue | 45 ++ .../contributors/ContributorsListPanel.vue | 12 + 10 files changed, 1093 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 3d90f042c..f5a6beb70 100644 --- a/public/globals.js +++ b/public/globals.js @@ -804,6 +804,21 @@ window.pkp = { 'The submission has been advanced to the next round of review', 'workflow.submissionNextReviewRoundInFutureStage': 'The submission advanced to the next review round, was accepted, and is currently in the {$stage} stage.', + '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 {$institution} will be deleted.', + 'user.affiliations.searchPhraseLabel': 'Type the institute name in {$language}', + 'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found' }, tinyMCE: { skinUrl: '/styles/tinymce', diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue index 2b1737629..ba02eaed8 100644 --- a/src/components/DropdownActions/DropdownActions.vue +++ b/src/components/DropdownActions/DropdownActions.vue @@ -127,7 +127,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 @@ + + 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 1dae02bac..595a82cde 100644 --- a/src/components/Icon/Icon.stories.js +++ b/src/components/Icon/Icon.stories.js @@ -49,7 +49,7 @@ export const IconGallery = { template: `
- +
{{icon}}
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 @@ + diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue index ec832a321..af83b1f48 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]; } From 6ec0bb5fb1874d0cdbec2f15e0a86064c1f8328d Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Mon, 18 Nov 2024 11:14:39 +0100 Subject: [PATCH 02/19] Do not copy ror to author_affiliation_settings; --- public/globals.js | 3 +- .../Form/fields/FieldAffiliations.vue | 130 +++-- .../Form/mocks/field-affiliations.js | 543 ++++++++++-------- 3 files changed, 362 insertions(+), 314 deletions(-) diff --git a/public/globals.js b/public/globals.js index f5a6beb70..9288f955e 100644 --- a/public/globals.js +++ b/public/globals.js @@ -818,7 +818,8 @@ window.pkp = { 'user.affiliations.deleteModal.title': 'Are you sure?', 'user.affiliations.deleteModal.message': 'The institution {$institution} will be deleted.', 'user.affiliations.searchPhraseLabel': 'Type the institute name in {$language}', - 'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found' + 'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found', + 'user.affiliations.primaryLocaleRequired': 'The primary language {$primaryLocale} is required', }, tinyMCE: { skinUrl: '/styles/tinymce', diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 32e5fbbd8..51b4fc3d8 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -22,11 +22,21 @@ - + + {{ row.name[primaryLocale] }} + + + {{ - row.name[primaryLocale] - ? row.name[primaryLocale] - : getAlternativeDisplayName(row.name) + t('user.affiliations.primaryLocaleRequired', { + primaryLocale: getLocaleDisplayName(primaryLocale), + }) }} @@ -50,7 +60,7 @@ >
@@ -106,13 +106,13 @@ :class="'dropDownActions border-transparent'" @action="rowActionsHandler" /> - + @@ -208,7 +208,7 @@ ? t( 'user.affiliations.typeTranslationNameInLanguageLabel', {language: getLocaleDisplayName(localeAddMode)}, - ) + ) : getLocaleDisplayName(localeAddMode) }} @@ -234,20 +234,20 @@
- +
- +
@@ -573,6 +573,11 @@ function sortNamesPrimaryFirst(names) { .dropDownActions svg { width: 1.5em; } + + .link-disabled { + opacity: 0.5; + pointer-events: none; + } } .pkpFormField--affiliations__control .searchPhraseResults { From f4ac0691cbbcc76e44dba42e6f7f9ed987f633fb Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Wed, 20 Nov 2024 10:36:37 +0100 Subject: [PATCH 04/19] currentValue getter/setter refactoring for better understanding documentation properties, variables, functions --- public/globals.js | 5 +- .../Form/fields/FieldAffiliations.stories.js | 8 +- .../Form/fields/FieldAffiliations.vue | 393 ++++++++++++------ .../Form/mocks/field-affiliations.js | 6 +- .../contributors/ContributorsListPanel.vue | 4 +- 5 files changed, 271 insertions(+), 145 deletions(-) diff --git a/public/globals.js b/public/globals.js index 9288f955e..7f039209c 100644 --- a/public/globals.js +++ b/public/globals.js @@ -158,6 +158,7 @@ window.pkp = { 'article.metadata': 'Metadata', 'author.users.contributor.principalContact': 'Primary Contact', 'author.users.contributor.setPrincipalContact': 'Set Primary Contact', + 'common.add': 'Add', 'common.addCCBCC': 'Add CC/BCC', 'common.assign': 'Assign', 'common.attachFiles': 'Attach Files', @@ -812,11 +813,11 @@ window.pkp = { '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.translationsSomeAvailable': '{$count} 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 {$institution} will be deleted.', + 'user.affiliations.deleteModal.message': 'The affiliation {$affiliation} will be deleted.', 'user.affiliations.searchPhraseLabel': 'Type the institute name in {$language}', 'user.affiliations.searchPhraseNothingFound': 'Your search phrase could not be found', 'user.affiliations.primaryLocaleRequired': 'The primary language {$primaryLocale} is required', diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index 967f7ef95..b7f7e87ad 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,6 +1,6 @@ import FieldAffiliations from './FieldAffiliations.vue'; import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; -import {http, HttpResponse} from "msw"; +import {http, HttpResponse} from 'msw'; const args = {...FieldAffiliationsMock}; @@ -14,7 +14,7 @@ export default { http.get( 'https://mock/index.php/publicknowledge/api/v1/rors/?searchPhrase=Simon+Fraser+University', async () => { - return HttpResponse.json(args.apiResponse); + return HttpResponse.json(args.searchResults); }, ), ], @@ -23,10 +23,10 @@ export default { render: (args) => ({ components: {FieldAffiliations}, setup() { - return {args} + return {args}; }, template: ` - ` + `, }), decorators: [ () => ({ diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index b7eb4706c..2c283768a 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -20,17 +20,23 @@   - + - - {{ row.name[primaryLocale] }} + + {{ affiliation.name[primaryLocale] }} {{ @@ -39,7 +45,7 @@ }) }} - +   @@ -48,48 +54,65 @@ -
+
- {{ t('common.close', {}) }} - + @@ -155,8 +178,8 @@
  • -
    +
    {{ - newAffiliationPending.ror + newAffiliation.ror ? t( 'user.affiliations.typeTranslationNameInLanguageLabel', - {language: getLocaleDisplayName(localeAddMode)}, - ) - : getLocaleDisplayName(localeAddMode) + { + language: getLocaleDisplayName( + newAffiliationNameLocale, + ), + }, + ) + : getLocaleDisplayName(newAffiliationNameLocale) }}
    - @@ -258,10 +300,11 @@ @@ -573,11 +703,6 @@ function sortNamesPrimaryFirst(names) { .dropDownActions svg { width: 1.5em; } - - .link-disabled { - opacity: 0.5; - pointer-events: none; - } } .pkpFormField--affiliations__control .searchPhraseResults { diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js index 664aae1b0..86be1b039 100644 --- a/src/components/Form/mocks/field-affiliations.js +++ b/src/components/Form/mocks/field-affiliations.js @@ -3,7 +3,7 @@ export default { component: 'author-affiliations', authorId: 1, primaryLocale: 'en', - supportedFormLocales: [ + locales: [ {key: 'en', label: 'English'}, {key: 'fr_CA', label: 'French (Canada)'}, {key: 'de', label: 'German'}, @@ -41,7 +41,7 @@ export default { }, }, ], - apiResponse: { + searchResults: { itemsMax: 110723, items: [ { @@ -376,7 +376,7 @@ export default { }, ], }, - newAffiliationPending: { + newAffiliation: { id: null, authorId: 1, ror: null, diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue index af83b1f48..ab901f5f0 100644 --- a/src/components/ListPanel/contributors/ContributorsListPanel.vue +++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue @@ -297,7 +297,7 @@ export default { activeForm.fields = activeForm.fields.map((field) => { if (field.name === 'affiliations') { field.primaryLocale = activeForm.primaryLocale; - field.supportedFormLocales = activeForm.supportedFormLocales; + field.locales = activeForm.supportedFormLocales; } return field; }); @@ -405,7 +405,7 @@ export default { } else if (field.name === 'affiliations') { field.authorId = author['id']; field.primaryLocale = activeForm.primaryLocale; - field.supportedFormLocales = activeForm.supportedFormLocales; + field.locales = activeForm.supportedFormLocales; field.value = author[field.name]; } else if (Object.keys(author).includes(field.name)) { field.value = author[field.name]; From 54401aac733a803450a9f4ae9184aa98cf18a3e6 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Thu, 19 Dec 2024 17:54:25 +0100 Subject: [PATCH 05/19] Remove ror logo; replaced by Jarda --- .../Form/fields/FieldAffiliations.vue | 6 +-- src/components/Icon/icons/Ror.vue | 45 ------------------- 2 files changed, 1 insertion(+), 50 deletions(-) delete mode 100644 src/components/Icon/icons/Ror.vue diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 2c283768a..e15085ede 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -47,7 +47,7 @@   - + @@ -699,10 +699,6 @@ function sortNamesPrimaryFirst(names) { table td:nth-child(3) { text-align: right; } - - .dropDownActions svg { - width: 1.5em; - } } .pkpFormField--affiliations__control .searchPhraseResults { diff --git a/src/components/Icon/icons/Ror.vue b/src/components/Icon/icons/Ror.vue deleted file mode 100644 index 5bee17284..000000000 --- a/src/components/Icon/icons/Ror.vue +++ /dev/null @@ -1,45 +0,0 @@ - From c2f73a16f4ec586ec6f6e94ccd4496581b4b5f9c Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Fri, 20 Dec 2024 09:39:28 +0100 Subject: [PATCH 06/19] ROR logo; minor css tweaking --- src/components/Form/fields/FieldAffiliations.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index e15085ede..c855f5625 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -186,7 +186,11 @@ @click="selectRorOrganization(organization)" > {{ organization.displayName }}   - + Date: Fri, 20 Dec 2024 09:41:21 +0100 Subject: [PATCH 07/19] ROR logo --- src/components/Form/fields/FieldAffiliations.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index c855f5625..c5df0e5f3 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -223,7 +223,11 @@ class="inline-block py-2" target="_blank" > - +
    Date: Fri, 20 Dec 2024 17:11:45 +0100 Subject: [PATCH 08/19] translations icons; tweaking search results --- .../Form/fields/FieldAffiliations.vue | 64 ++++++++++++------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index c5df0e5f3..a3e273d3b 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -56,11 +56,15 @@ class="pkpButton cursor-pointer border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline" @click="toggleEditMode(affiliationIndex)" > -   {{ translations(affiliation).label }} @@ -100,7 +104,7 @@ }}
    -
    +
    - +
    • @@ -207,11 +214,15 @@
    -   {{ translations(newAffiliation).label }} @@ -259,7 +270,7 @@ }}
    -
    +
    +

    -
    - -   -
    -
    - +
    -
    +
    {{ t('common.add', {}) }}
    @@ -335,11 +283,9 @@ 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'; +import FieldAffiliationsRorAutoSuggest from '@/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue'; -/** Define component props */ const props = defineProps({ /** Field key used for form submission */ name: { @@ -384,41 +330,26 @@ const props = defineProps({ default: true, }, }); - -/** Emits component events */ -const emit = defineEmits(['change', 'set-errors']); - -/** Stores the ID of the author associated with this component */ const authorId = props.authorId; - -/** Stores the primary locale of the form */ const primaryLocale = props.primaryLocale; - -/** Stores the list of supported locales */ const locales = props.locales; - -/** Current value of the field, with a setter to emit changes */ const currentValue = computed({ get: () => props.value, set: (newVal) => emit('change', props.name, 'value', newVal), }); +const supportedFormLocaleKeys = props.locales.map((language) => language.key); +const defaultLocale = 'en'; +const autoSuggestRef = ref(null); +const autoSuggestSelected = computed({ + get: () => autoSuggestRef.value?.currentSelected, + set: (newVal) => (autoSuggestRef.value.currentSelected = newVal), +}); -/** Current search input for affiliations */ -const searchPhrase = ref(''); - -/** Results from the search */ -const searchResults = ref([]); - -/** New affiliation being created */ +const indexEditMode = ref(-1); const newAffiliation = ref({}); -/** Keys of supported locales */ -const supportedFormLocaleKeys = props.locales.map((language) => language.key); - -/** Default locale for the application */ -const defaultLocale = 'en'; +const emit = defineEmits(['change', 'set-errors']); -/** Computed property to determine error messages for the field */ computed(() => { if (!Object.keys(props.allErrors).includes(props.name)) { return []; @@ -432,70 +363,77 @@ computed(() => { return []; }); -/** Handles selecting a custom organization */ -const selectCustomOrganization = function () { - newAffiliation.value = getNewItemTemplate(); - newAffiliation.value.name[primaryLocale] = searchPhrase.value; - searchResults.value = []; -}; +watch( + currentValue, + () => { + makeCurrentValueCompatible(); + }, + {immediate: true}, +); -/** Handles selecting an organization from the ROR API results */ -const selectRorOrganization = function (item) { - newAffiliation.value = getNewItemTemplate(); - newAffiliation.value.ror = item.ror; - newAffiliation.value.name[primaryLocale] = item.displayName; - supportedFormLocaleKeys.forEach((locale) => { - if (typeof item.name[locale] !== 'undefined') { - newAffiliation.value.name[locale] = item.name[locale]; - } - }); - searchResults.value = []; -}; +/* new affiliation form */ + +const showNewAffiliationForm = computed(() => { + return typeof newAffiliation.value.id !== 'undefined'; +}); + +watch(autoSuggestSelected, () => { + if (typeof autoSuggestSelected.value.value !== 'undefined') { + addToNewAffiliationForm(autoSuggestSelected.value.value); + } +}); -/** Adds a new affiliation to the current value */ -const addAffiliation = function () { +function addToNewAffiliationForm(item) { + switch (typeof item) { + case 'string': + newAffiliation.value = getNewAffiliationTemplate(); + newAffiliation.value.name[primaryLocale] = item; + break; + case 'object': + newAffiliation.value = getNewAffiliationTemplate(); + newAffiliation.value.ror = item.ror; + newAffiliation.value.name[primaryLocale] = + item['name'][item['displayLocale']]; + supportedFormLocaleKeys.forEach((locale) => { + if (typeof item.name[locale] !== 'undefined') { + newAffiliation.value.name[locale] = item.name[locale]; + } + }); + break; + default: + break; + } +} + +function closeNewAffiliationForm() { + newAffiliation.value = {}; +} + +function insertToAffiliationsList() { if (typeof newAffiliation.value.id !== 'undefined') { currentValue.value.push(JSON.parse(JSON.stringify(newAffiliation.value))); newAffiliation.value = {}; - searchPhrase.value = ''; - searchResults.value = []; + autoSuggestSelected.value = {}; } -}; +} -/** Deletes an affiliation with a confirmation dialog */ -const deleteAffiliation = function (index) { - const {openDialog} = useModal(); - openDialog({ - name: 'sendAuthorEmail', - title: t('user.affiliations.deleteModal.title', {}), - message: t('user.affiliations.deleteModal.message', { - affiliation: currentValue.value[index]['name'][primaryLocale], - }), - actions: [ - { - label: t('common.yes', {}), - isWarnable: true, - callback: async (close) => { - currentValue.value.splice(index, 1); - close(); - }, - }, - { - label: t('common.no', {}), - isPrimary: true, - callback: (close) => { - close(); - }, - }, - ], - close: () => {}, +function getNewAffiliationTemplate() { + let names = {}; + names[primaryLocale] = ''; + supportedFormLocaleKeys.forEach((locale) => { + names[locale] = ''; }); -}; + names = sortNamesPrimaryLocaleFirst(names); + return { + id: null, + authorId: authorId, + ror: null, + name: names, + }; +} -/** Tracks the row being edited */ -const indexEditMode = ref(-1); +/* row methods */ -/** Provides the arguments for row action buttons */ const rowActionsArgs = function (index) { let actions = []; if (!currentValue.value[index].ror) { @@ -520,8 +458,7 @@ const rowActionsArgs = function (index) { }; }; -/** Handles row action events */ -const rowActionsHandler = function (param) { +function rowActionsHandler(param) { if (typeof param === 'object' && param.length === 2) { const name = param[0].trim(); const index = param[1]; @@ -531,143 +468,70 @@ const rowActionsHandler = function (param) { toggleEditMode(index); break; case 'delete': - deleteAffiliation(index); + deleteRow(index); break; default: console.error(`No handler for action: ${name}`); } } -}; - -/** Determines whether to show the search results dropdown */ -const showSearchResults = computed(() => { - return ( - (searchPhrase.value.length > 0 && searchResults.value.length > 0) || - (searchPhrase.value.length > 0 && searchResults.value.length === 0) || - !(searchPhrase.value.length === 0) - ); -}); +} -/** Toggles edit mode for a specific row */ -const toggleEditMode = function (index) { +function toggleEditMode(index) { if (indexEditMode.value === index) { indexEditMode.value = -1; } else { indexEditMode.value = index; } -}; +} -/** Exits edit mode */ -const closeEditMode = function () { +function closeEditMode() { indexEditMode.value = -1; -}; - -/** Determines whether to show the new affiliation form */ -const showNewAffiliation = computed(() => { - return typeof newAffiliation.value.id !== 'undefined'; -}); - -/** Closes the new affiliation form */ -const closeNewAffiliation = function () { - newAffiliation.value = {}; -}; +} -/** Returns the translation status of an affiliation */ -const translations = function (affiliation) { - let result = { - label: '', - count: 0, - total: supportedFormLocaleKeys.length, - }; - let names = affiliation.name; - Object.keys(names).forEach((key) => { - if (supportedFormLocaleKeys.includes(key) && names[key].length > 0) { - result.count++; - } +function deleteRow(index) { + const {openDialog} = useModal(); + openDialog({ + name: 'sendAuthorEmail', + title: t('user.affiliations.deleteModal.title', {}), + message: t('user.affiliations.deleteModal.message', { + affiliation: currentValue.value[index]['name'][primaryLocale], + }), + actions: [ + { + label: t('common.yes', {}), + isWarnable: true, + callback: async (close) => { + currentValue.value.splice(index, 1); + close(); + }, + }, + { + label: t('common.no', {}), + isPrimary: true, + callback: (close) => { + close(); + }, + }, + ], + close: () => {}, }); - if (result.total === result.count) { - result.label = t('user.affiliations.translationsAllAvailable', {}); - } else { - result.label = t('user.affiliations.translationsSomeAvailable', { - count: result.count, - total: result.total, - }); - } - return result; -}; - -/** Watch for changes in currentValue to ensure compatibility */ -watch( - currentValue, - () => { - makeCurrentValueCompatible(); - }, - {immediate: true}, -); - -/** On component mount, ensure currentValue is compatible */ -onMounted(() => { - makeCurrentValueCompatible(); -}); - -/** Before unmounting, reset any errors for this field */ -onBeforeUnmount(() => { - emit('set-errors', props.name, []); -}); - -/** Updates search results based on the search phrase */ -async function searchPhraseChanged() { - newAffiliation.value = {}; - searchResults.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) { - searchResults.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']]; - searchResults.value.push(row); - } - } - } - } } -/** Ensures current value has a compatible structure with the expected locale keys */ +/* helper methods */ + function makeCurrentValueCompatible() { currentValue.value.forEach((value, index) => { supportedFormLocaleKeys.forEach((locale) => { if (!(locale in currentValue.value[index].name)) { currentValue.value[index].name[locale] = ''; } - currentValue.value[index].name = sortNamesPrimaryFirst( + currentValue.value[index].name = sortNamesPrimaryLocaleFirst( currentValue.value[index].name, ); }); }); } -/** Returns a template for creating a new affiliation */ -function getNewItemTemplate() { - let names = {}; - names[primaryLocale] = ''; - supportedFormLocaleKeys.forEach((locale) => { - names[locale] = ''; - }); - names = sortNamesPrimaryFirst(names); - return { - id: null, - authorId: authorId, - ror: null, - name: names, - }; -} - -/** Returns the display name for a given locale */ function getLocaleDisplayName(locale) { let displayName = locale; locales.forEach((language) => { @@ -678,8 +542,7 @@ function getLocaleDisplayName(locale) { return displayName; } -/** Ensures the primary locale name is listed first in the names object */ -function sortNamesPrimaryFirst(names) { +function sortNamesPrimaryLocaleFirst(names) { let nameFirst = {}; let nameRest = {}; Object.keys(names).forEach((key) => { @@ -691,6 +554,37 @@ function sortNamesPrimaryFirst(names) { }); return {...nameFirst, ...nameRest}; } + +function translations(affiliation) { + let result = { + label: '', + count: 0, + total: supportedFormLocaleKeys.length, + }; + let names = affiliation.name; + Object.keys(names).forEach((key) => { + if (supportedFormLocaleKeys.includes(key) && names[key].length > 0) { + result.count++; + } + }); + if (result.total === result.count) { + result.label = t('user.affiliations.translationsAllAvailable', {}); + } else { + result.label = t('user.affiliations.translationsSomeAvailable', { + count: result.count, + total: result.total, + }); + } + return result; +} + +onMounted(() => { + makeCurrentValueCompatible(); +}); + +onBeforeUnmount(() => { + emit('set-errors', props.name, []); +}); diff --git a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.stories.js b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.stories.js new file mode 100644 index 000000000..5ec2e8aa2 --- /dev/null +++ b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.stories.js @@ -0,0 +1,36 @@ +import {http, HttpResponse} from 'msw'; +import FieldAffiliationsRorAutoSuggest from './FieldAffiliationsRorAutoSuggest.vue'; +import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; + +export default { + title: 'Forms/FieldAffiliationsRorAutoSuggest', + component: FieldAffiliationsRorAutoSuggest, + render: (args) => ({ + components: {FieldAffiliationsRorAutoSuggest}, + setup() { + return {args}; + }, + template: '', + }), + parameters: { + msw: { + handlers: [ + http.get( + 'https://mock/index.php/publicknowledge/api/v1/rors/?searchPhrase=Simon+Fraser+University', + async () => { + return HttpResponse.json(FieldAffiliationsMock.searchResults); + }, + ), + ], + }, + docs: { + story: { + height: '300px', + }, + }, + }, +}; + +export const Default = { + args: {...FieldAffiliationsMock}, +}; diff --git a/src/components/Form/fields/FieldRorAutosuggest.vue b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue similarity index 86% rename from src/components/Form/fields/FieldRorAutosuggest.vue rename to src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue index 356f3cfae..d477801b5 100644 --- a/src/components/Form/fields/FieldRorAutosuggest.vue +++ b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue @@ -59,15 +59,16 @@ import Autosuggest from './Autosuggest.vue'; import Icon from '@/components/Icon/Icon.vue'; import {useFetch} from '@/composables/useFetch'; import {useId} from '@/composables/useId'; +import {useApiUrl} from '@/composables/useApiUrl'; const {generateId} = useId(); -const currentSelected = ref([]); +const currentSelected = ref({}); const inputValue = ref(''); const isFocused = ref(false); -const url = 'https://api.ror.org/v2/organizations'; +const {apiUrl} = useApiUrl(`rors/`); const queryParams = computed(() => ({ - query: inputValue.value, + searchPhrase: inputValue.value, })); const autosuggestContainerId = generateId(); @@ -76,7 +77,7 @@ const { data: suggestions, isLoading, fetch: fetchSuggestions, -} = useFetch(url, { +} = useFetch(apiUrl.value, { query: queryParams, }); @@ -97,16 +98,11 @@ const autoSuggestProps = computed(() => ({ const mappedSuggestions = computed(() => { return suggestions.value?.items.map((item) => { - // get the name from "ror_display" type - const name = item.names?.find((i) => - i.types.includes('ror_display'), - )?.value; - return { - value: item.id, - label: name, + value: item, + label: item['name'][item['displayLocale']], hasSlot: true, - href: item.id, + href: item.ror, }; }); }); @@ -139,8 +135,8 @@ function handleSelect(suggestion) { }; } - if (!currentSelected.value.some((item) => item.value === suggestion.value)) { - currentSelected.value.push(suggestion); + if (currentSelected.value !== suggestion.value) { + currentSelected.value = suggestion; } } @@ -149,4 +145,8 @@ function handleDeselect(item) { (selected) => selected.value !== item.value, ); } + +defineExpose({ + currentSelected, +}); diff --git a/src/components/Form/fields/FieldRorAutosuggest.stories.js b/src/components/Form/fields/FieldRorAutosuggest.stories.js deleted file mode 100644 index 68a75679f..000000000 --- a/src/components/Form/fields/FieldRorAutosuggest.stories.js +++ /dev/null @@ -1,40 +0,0 @@ -import {http, HttpResponse} from 'msw'; -import FieldRorAutosuggest from './FieldRorAutosuggest.vue'; -import InstitutionsMock from '@/mocks/institutions.json'; - -export default { - title: 'Components/FieldRorAutosuggest', - component: FieldRorAutosuggest, - render: (args) => ({ - components: {FieldRorAutosuggest}, - setup() { - return {args}; - }, - template: '', - }), - parameters: { - msw: { - handlers: [ - http.get('https://api.ror.org/v2/organizations', async () => { - return HttpResponse.json(InstitutionsMock); - }), - ], - }, - docs: { - story: { - height: '300px', - }, - }, - }, -}; - -export const Default = { - render: (args) => ({ - components: {FieldRorAutosuggest}, - setup() { - return {args}; - }, - template: '', - }), - args: {}, -}; diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js index 86be1b039..df48b006b 100644 --- a/src/components/Form/mocks/field-affiliations.js +++ b/src/components/Form/mocks/field-affiliations.js @@ -48,7 +48,6 @@ export default { id: 1, isActive: true, displayLocale: 'en', - displayName: 'RMIT University', name: { en: 'RMIT University', fr_CA: '', @@ -59,7 +58,6 @@ export default { id: 2, isActive: true, displayLocale: 'en', - displayName: 'La Trobe University', name: { en: 'La Trobe University', fr_CA: '', @@ -70,7 +68,6 @@ export default { id: 3, isActive: true, displayLocale: 'en', - displayName: 'Victoria University', name: { en: 'Victoria University', fr_CA: '', @@ -81,7 +78,6 @@ export default { id: 4, isActive: true, displayLocale: 'en', - displayName: 'University of New England', name: { en: 'University of New England', fr_CA: '', @@ -92,7 +88,6 @@ export default { id: 5, isActive: true, displayLocale: 'en', - displayName: 'Griffith University', name: { en: 'Griffith University', fr_CA: '', @@ -103,7 +98,6 @@ export default { id: 6, isActive: true, displayLocale: 'en', - displayName: 'Central Queensland University', name: { en: 'Central Queensland University', fr_CA: '', @@ -114,7 +108,6 @@ export default { id: 7, isActive: true, displayLocale: 'en', - displayName: 'University of South Australia', name: { en: 'University of South Australia', fr_CA: '', @@ -125,7 +118,6 @@ export default { id: 8, isActive: true, displayLocale: 'en', - displayName: 'Bond University', name: { en: 'Bond University', fr_CA: '', @@ -136,7 +128,6 @@ export default { id: 9, isActive: true, displayLocale: 'en', - displayName: 'Charles Sturt University', name: { en: 'Charles Sturt University', fr_CA: '', @@ -147,7 +138,6 @@ export default { id: 10, isActive: true, displayLocale: 'en', - displayName: 'Federation University', name: { en: 'Federation University', fr_CA: '', @@ -158,7 +148,6 @@ export default { id: 11, isActive: true, displayLocale: 'en', - displayName: 'Burnet Institute', name: { en: 'Burnet Institute', fr_CA: '', @@ -169,7 +158,6 @@ export default { id: 12, isActive: true, displayLocale: 'en', - displayName: 'Mater Research', name: { en: 'Mater Research', fr_CA: '', @@ -180,7 +168,6 @@ export default { id: 13, isActive: true, displayLocale: 'en', - displayName: 'St Vincents Institute of Medical Research', name: { en: 'St Vincents Institute of Medical Research', fr_CA: '', @@ -191,7 +178,6 @@ export default { id: 14, isActive: true, displayLocale: 'en', - displayName: 'The Heart Research Institute', name: { en: 'The Heart Research Institute', fr_CA: '', @@ -202,7 +188,6 @@ export default { id: 15, isActive: true, displayLocale: 'en', - displayName: 'University Mental Health Research Institute', name: { en: 'University Mental Health Research Institute', fr_CA: '', @@ -213,7 +198,6 @@ export default { id: 16, isActive: true, displayLocale: 'en', - displayName: 'Rolls-Royce (United Kingdom)', name: { en: 'Rolls-Royce (United Kingdom)', fr_CA: '', @@ -224,7 +208,6 @@ export default { id: 17, isActive: true, displayLocale: 'en', - displayName: 'BP (United Kingdom)', name: { en: 'BP (United Kingdom)', fr_CA: '', @@ -235,7 +218,6 @@ export default { id: 18, isActive: true, displayLocale: 'en', - displayName: 'Rio Tinto (United Kingdom)', name: { en: 'Rio Tinto (United Kingdom)', fr_CA: '', @@ -246,7 +228,6 @@ export default { id: 19, isActive: true, displayLocale: 'en', - displayName: 'Arup Group (United States)', name: { en: 'Arup Group (United States)', fr_CA: '', @@ -257,7 +238,6 @@ export default { id: 20, isActive: true, displayLocale: 'en', - displayName: 'BT Group (United Kingdom)', name: { en: 'BT Group (United Kingdom)', fr_CA: '', @@ -268,7 +248,6 @@ export default { id: 21, isActive: true, displayLocale: 'en', - displayName: 'Mater Health Services', name: { en: 'Mater Health Services', fr_CA: '', @@ -279,7 +258,6 @@ export default { id: 22, isActive: true, displayLocale: 'en', - displayName: 'Pilkington (United Kingdom)', name: { en: 'Pilkington (United Kingdom)', fr_CA: '', @@ -290,7 +268,6 @@ export default { id: 23, isActive: true, displayLocale: 'en', - displayName: 'Trojan Technologies (Canada)', name: { en: 'Trojan Technologies (Canada)', fr_CA: '', @@ -301,7 +278,6 @@ export default { id: 24, isActive: true, displayLocale: 'en', - displayName: 'The Alfred Hospital', name: { en: 'The Alfred Hospital', fr_CA: '', @@ -312,7 +288,6 @@ export default { id: 25, isActive: true, displayLocale: 'en', - displayName: 'Washington State Department of Health', name: { en: 'Washington State Department of Health', fr_CA: '', @@ -323,7 +298,6 @@ export default { id: 26, isActive: true, displayLocale: 'en', - displayName: "Women's and Children's Hospital", name: { en: "Women's and Children's Hospital", fr_CA: '', @@ -334,7 +308,6 @@ export default { id: 27, isActive: true, displayLocale: 'en', - displayName: 'Xstrata (United Kingdom)', name: { en: 'Xstrata (United Kingdom)', fr_CA: '', @@ -345,7 +318,6 @@ export default { id: 28, isActive: true, displayLocale: 'en', - displayName: 'Teck (Canada)', name: { en: 'Teck (Canada)', fr_CA: '', @@ -356,7 +328,6 @@ export default { id: 29, isActive: true, displayLocale: 'en', - displayName: 'Hunter New England Local Health District', name: { en: 'Hunter New England Local Health District', fr_CA: '', @@ -367,7 +338,6 @@ export default { id: 30, isActive: true, displayLocale: 'en', - displayName: 'Cancer Council Victoria', name: { en: 'Cancer Council Victoria', fr_CA: '', From ac86a3369e7276a5fe0fa6c15a161babf465cd73 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Mon, 13 Jan 2025 16:00:19 +0100 Subject: [PATCH 11/19] bug fix: select custom does not work if no suggestions --- src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue index d477801b5..2c0e2effe 100644 --- a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue +++ b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue @@ -125,7 +125,7 @@ function changeFocus(focused) { function handleSelect(suggestion) { if (!suggestion) { - if (!inputValue.value || !mappedSuggestions.value.length) { + if (!inputValue.value) { return; } From 81b68d3deaf385aea872d3b8bb4b231186648a2e Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Tue, 14 Jan 2025 16:43:53 +0100 Subject: [PATCH 12/19] map locale labels for fr_CA types --- src/components/Form/fields/FieldAffiliations.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 353a0cc6e..1fab18d9b 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -397,6 +397,8 @@ function addToNewAffiliationForm(item) { supportedFormLocaleKeys.forEach((locale) => { if (typeof item.name[locale] !== 'undefined') { newAffiliation.value.name[locale] = item.name[locale]; + } else if (typeof item.name[locale.substring(0, 2)] !== 'undefined') { + newAffiliation.value.name[locale] = item.name[locale.substring(0, 2)]; } }); break; From 1eb84190471321c7967fa951850854c3f86b2292 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Tue, 14 Jan 2025 16:44:34 +0100 Subject: [PATCH 13/19] start lookups from 3+ characters --- .../Form/fields/FieldAffiliationsRorAutoSuggest.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue index 2c0e2effe..ce76c9e35 100644 --- a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue +++ b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue @@ -108,7 +108,9 @@ const mappedSuggestions = computed(() => { }); watch(queryParams, () => { - getSuggestions(); + if (inputValue.value.length > 3) { + getSuggestions(); + } }); async function getSuggestions() { From 7dea09755b00e21f62b1541c7f4cc4667148b057 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Sat, 18 Jan 2025 17:49:31 +0100 Subject: [PATCH 14/19] currentSelected changed to array type --- .../Form/fields/FieldAffiliationsRorAutoSuggest.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue index ce76c9e35..06ea17b8a 100644 --- a/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue +++ b/src/components/Form/fields/FieldAffiliationsRorAutoSuggest.vue @@ -63,7 +63,7 @@ import {useApiUrl} from '@/composables/useApiUrl'; const {generateId} = useId(); -const currentSelected = ref({}); +const currentSelected = ref([]); const inputValue = ref(''); const isFocused = ref(false); const {apiUrl} = useApiUrl(`rors/`); @@ -138,7 +138,7 @@ function handleSelect(suggestion) { } if (currentSelected.value !== suggestion.value) { - currentSelected.value = suggestion; + currentSelected.value = [suggestion]; } } From 0a2323f9c7b2ab16beba25892ae356ce56c1a369 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Sat, 18 Jan 2025 18:02:28 +0100 Subject: [PATCH 15/19] Delete FieldAffiliationsTest.stories.js FieldAffiliationsTest.vue --- .../fields/FieldAffiliationsTest.stories.js | 13 -------- .../Form/fields/FieldAffiliationsTest.vue | 31 ------------------- 2 files changed, 44 deletions(-) delete mode 100644 src/components/Form/fields/FieldAffiliationsTest.stories.js delete mode 100644 src/components/Form/fields/FieldAffiliationsTest.vue diff --git a/src/components/Form/fields/FieldAffiliationsTest.stories.js b/src/components/Form/fields/FieldAffiliationsTest.stories.js deleted file mode 100644 index db29d04a0..000000000 --- a/src/components/Form/fields/FieldAffiliationsTest.stories.js +++ /dev/null @@ -1,13 +0,0 @@ -import FieldAffiliationsTest from './FieldAffiliationsTest.vue'; - -export default { - title: 'Forms/FieldAffiliationsTest', -}; - -export const Default = { - component: FieldAffiliationsTest, - render: () => ({ - components: {FieldAffiliationsTest}, - template: '', - }), -}; diff --git a/src/components/Form/fields/FieldAffiliationsTest.vue b/src/components/Form/fields/FieldAffiliationsTest.vue deleted file mode 100644 index 498e03028..000000000 --- a/src/components/Form/fields/FieldAffiliationsTest.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - From b256d1d7a6aeb9c84211a648cf26c5d5fdb7e6c2 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Sun, 19 Jan 2025 17:20:15 +0100 Subject: [PATCH 16/19] More information --- public/globals.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/globals.js b/public/globals.js index 7f039209c..7b0b23921 100644 --- a/public/globals.js +++ b/public/globals.js @@ -808,7 +808,7 @@ window.pkp = { '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.translation': 'More information', 'user.affiliations.translationEditActionLabel': 'Edit institution name', 'user.affiliations.translationDeleteActionLabel': 'Remove institution', 'user.affiliations.translationActionsAriaLabel': 'Click to edit or delete', From 01d93be053f448aec194b19607ea49ca2311c31a Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Sun, 19 Jan 2025 17:20:47 +0100 Subject: [PATCH 17/19] Show translations for custom input / hide for ror affiliations --- .../Form/fields/FieldAffiliations.vue | 384 +++++++++--------- 1 file changed, 200 insertions(+), 184 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 1fab18d9b..21286a543 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -25,33 +25,35 @@ :key="affiliationIndex" > - - {{ affiliation.name[primaryLocale] }} - - - - {{ - t('user.affiliations.primaryLocaleRequired', { - primaryLocale: getLocaleDisplayName(primaryLocale), - }) - }} - - -   - - +
    + + {{ affiliation.name[primaryLocale] }} + + + + +
    +
    + + {{ + t('user.affiliations.primaryLocaleRequired', { + primaryLocale: getLocaleDisplayName(primaryLocale), + }) + }} + +
    -
    +
    + + {{ affiliation.ror }} + +
    + -
    -
    -
    - -
    -
    - +
    +
    +
    + + {{ + t( + 'user.affiliations.typeTranslationNameInLanguageLabel', + { + language: getLocaleDisplayName( + affiliationNameLocale, + ), + }, + ) + }} + + + * + Required + +
    +
    + + +
    @@ -144,120 +156,130 @@ -
    - - -
    + +
    -
    - - -   - {{ translations(newAffiliation).label }} +
    + + {{ newAffiliation.ror }} -  
    -
    +
    - - {{ - newAffiliation.ror - ? t( - 'user.affiliations.typeTranslationNameInLanguageLabel', - { - language: getLocaleDisplayName( - newAffiliationNameLocale, - ), - }, - ) - : getLocaleDisplayName(newAffiliationNameLocale) - }} + + + {{ translations(newAffiliation).label }}
    -
    - +
    +
    + + {{ + t( + 'user.affiliations.typeTranslationNameInLanguageLabel', + { + language: getLocaleDisplayName( + newAffiliationNameLocale, + ), + }, + ) + }} + + + * + Required + +
    +
    + + +
    -
    +