Add customization support for FieldBaseAutosuggest options

[blesildaramirez]

Issue Description

The FieldBaseAutosuggest component needs to support customization of dropdown options to align with new designs for selecting affiliations when adding contributors. This includes adding icons and other elements to improve usability and meet design requirements.

Action

Improve the FieldBaseAutosuggest component to allow customization of each dropdown option. This includes ability to add icons, links, or other elements by using named slots. Ensure the component retains its default rendering behavior for cases where customization is not required.

Mockup

---

Pull request:
pkp/ui-library#449 (closed)
pkp/ui-library#458

Test only (OJS):
pkp/ojs#4541

[Tribunal33]

@blesildaramirez how can I test this? I tried adding contributor and not seeing the auto suggest feature locally.

[Tribunal33]

Hello @blesildaramirez I gave it a look. It isn't clear what I can check exactly but I tried out submission keywords and it had auto populated content. Also if I added a keyword in one it would autosuggest in another. Are there other locations I should test for this autosuggest?
I can see it working in submissions -> publication -> metadata -> keywords

However affiliations didn't seem to work when adding them while creating a new submission (adding contributor)?

[GaziYucel]

Hello @blesildaramirez / @jardakotesovec

thanks for the components FieldBaseAutosuggest and FieldRorAutosuggest.

I also saw that you added the ROR icon, I removed mine and using yours.

Are you sure that this is as @Devika008 intended for adding custom affiliations? What I understood with the video she created was that this should be similar as adding the ROR affiliations:

• select/click to show the editable input fields for different locales
• fill in locale names
• clicking Add should add the affiliation to the list

I miss selecting the custom affiliation in the drop down. This should be there, even if the affiliation is found or not in the ROR database.

I have already implemented a lookup with plain html/css. Below you can see a screen recording of how this is working now.

[blesildaramirez]

Hi @GaziYucel , thanks for pointing out the missing ability to allow custom affiliation names. I just updated the main branch from ui-library to be able to use it.

Just a few confirmations on this:

1. When selecting an affiliation from ROR database, am I right to assume that the value we should set to the component is the id of the institution that came from the search result dataset from ROR api? (e.g. value is "https://ror.org/00e0c0q64")
   
2. When selecting custom affiliation name, what value do we expect to set in the component field? At the moment, I've set this to be the actual text due to the id not being available from ROR api.

Thanks, and let me know if you have any questions on this.

[blesildaramirez]

Hi @Tribunal33 , thanks for testing this!
At the moment, the affiliation work to integrate with ROR API is not yet testable in main branch. As an initial work for this feature, we have updated the existing autosuggest component on this issue to make it available for the ROR work. As such, we need to test the current existing features that use the autosuggest component. I've listed down the areas we can test in the application for this initial work:

1. Composing an email (adding To: field)

• Making a decision on the submission
• Sending user invitation

2. Adding keywords to a submission (Submission -> Publication -> Metadata -> Keywords)
3. Assigning a submission to an issue (Submission -> Publication -> Issue)
4. Adding new monograph (OMP -> Catalog -> Add Entry)
5. Filtering submissions by "Assigned To Editor"

Let me know if you have any questions regarding this. Thanks!

[GaziYucel]

Hi @blesildaramirez,

thank you for your quick reply/actions.

I assumed that I was going to make further changes to the new FieldRorAutosuggest component to fit my needs, that's why I didn't write more in depth above. Now with your questions I realize that there is some misunderstanding regarding the internal workings.

I have written some more depth and just added it here #7135 (comment), because I think that's a better place for this information.

I am not sure how to translate all this to your work, AutoSuggest and to decide what and who does what next. But I think it's important to understand what is happening. I am afraid we do work which we will throw away later.

@ jardakotesovec and @ bozana could you maybe give us feedback on this and how to proceed. (no need, sorry)

[bozana]

Hi all, just to be sure if @blesildaramirez got the right answer for her question above i.e. for me to be informed about the current status and also to know how to use what (for later when I review the code)...

It seems you cleared it all and everything is clear now?

[blesildaramirez]

Hi @bozana , yes - for the questions I have above. I'm waiting on the new updates on the API that @GaziYucel had worked on and integrate with the UI. Thanks for checking!

[GaziYucel]

Hi @blesildaramirez. I found the bug in the import of the datadump of ror.org. Apparently, there are columns added to the csv file, which changed the mapping. I changed the php code, so that the column names are dynamically mapped to our OJS naming. The imports should be correct now.

[blesildaramirez]

Closing this issue, the proper implementation will be handled on the main issue: #7135