Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upload Page Template + React: Look ups for dropdowns #62

Open
1 of 3 tasks
ekate opened this issue Sep 22, 2021 · 12 comments
Open
1 of 3 tasks

Upload Page Template + React: Look ups for dropdowns #62

ekate opened this issue Sep 22, 2021 · 12 comments
Assignees

Comments

@ekate
Copy link
Contributor

ekate commented Sep 22, 2021

Upload form has drop down menu for several fields "Languages", "Resource types", "Subjects", "Alternate identifier", "Related works". "Languages" and "Subjects" allow user to do the lookup but other require to scroll through the whole list. During UI testing many users asked to add the functionality the "Upload" form has for "Languages" filed to "Resource types", "Alternate Identifiers" and "Related works"
Tasks

  • Add lookup for "Resource Type"
  • Add lookup for "Alternate Identifiers"
  • Add lookup for "Related works"
@Sinclert Sinclert self-assigned this Sep 22, 2021
@Sinclert
Copy link
Contributor

Hi @ekate 👋🏻

Could you provide a bit of context? Please consider I have been thrown into this sprint without much context of previous discussions.

  • Which HTML template do you want to be updated? and how? (a link would help)
  • What do you what to do with the drop-downs? create them? fix them? ...

@ekate
Copy link
Contributor Author

ekate commented Oct 1, 2021

Module which generates the upload form is react-invenio-deposit.

@Sinclert
Copy link
Contributor

Sinclert commented Oct 5, 2021

It seems that react-invenio-deposit is not the module to modify / extend.

According to the Invenio developers (Discord response reference), we are "on our own", given that the tuning of the Upload form can only be achieved by a combination of:

  • Creating our own JS module (reference).
  • Adding it to the Webpack theme list (reference).
  • Adding it as a new entry-point (reference) [Optional].
  • Injecting it into our custom deposit.html page (reference).

@ekate
Copy link
Contributor Author

ekate commented Oct 7, 2021

The task completion is not feasible in the duration of the current Sprint but we will start work on the new
ultraviolet-deposit-module

@Sinclert
Copy link
Contributor

Sinclert commented Oct 7, 2021

As discussed over Slack, i just created a new repository to serve as home for the deposit form customizations named ultraviolet-deposit-module. It contains documentation about how to create / distribute a repository-independent module.

@dismorfo
Copy link
Contributor

dismorfo commented Oct 8, 2021

I see that the field "Languages" calls the endpoint /api/vocabularies/languages for suggestions.

Can someone share the link to Invenio API documentation? I would like to see if there is an endpoint to query suggestions for "Alternate Identifiers" and "Related works".

By "Resource types", do you mean the field under "Basic information" or the one that is part of "Related works"? The field looks like a dropdown with a already defined set of valid input. Can you tell me more about the behavior you like to have? Make it an auto-complete? We might not need to change JS, we can try to use <datalist>. See: https://www.sitepoint.com/html5-datalist-autocomplete/

I'm talking about /uploads/new; let me know if I'm looking in the wrong place.

@Sinclert
Copy link
Contributor

Sinclert commented Oct 8, 2021

Hi @dismorfo,

I think this is the module we would need to customize: https://github.com/inveniosoftware/react-invenio-deposit. Sadly, it does not have any public documentation, as it is not thought to be re-used in any other context (that is literally what I was told in their Discord #newcomers-help channel).

Regarding the usage of <datalist>... I am afraid that would not make the trick. We should not depend on a static HTML list of options when rendering the drop-down menu options. The correct way to do it is by relying on the underlying APIs, which access the languages, resource-types... loaded into the DB.

Please, coordinate with @ekate if you want to know more about this. I will not check this issue any longer.

@ekate
Copy link
Contributor Author

ekate commented Oct 8, 2021

@dismorfo you can list all available endpoint by running pipenv run invenio routes in ultraviolet root directory. Unfortunately there is no route for resource type and affiliation. We need to add those. I will do that part. Till this is done could you look at this one - #63

@dismorfo
Copy link
Contributor

dismorfo commented Oct 8, 2021

@ekate Thanks. I tried $ pipenv run invenio routes | grep api and nothing, not even '/api/vocabularies/languages' that I know exist because of the "Languages" field.

@dismorfo
Copy link
Contributor

dismorfo commented Oct 8, 2021

See:

@ekate
Copy link
Contributor Author

ekate commented Oct 8, 2021

As I said above unfortunately there is no route for resource type and affiliation. We need to add those. I am looking at that part now. We need to discuss module structure. Do we want to keep python and javascript parts in one repo or separate ? What do you think

@dismorfo
Copy link
Contributor

I have a prototype working for the "Resource types".

We can change the field type to be "RemoteSelectField" and then is a matter of configuring suggestionAPIUrl to use /api/vocabularies/resourcetypes and pass a fn prop serializeSuggestions for the title.

@ekate ekate assigned dismorfo and unassigned Sinclert Oct 15, 2021
@ekate ekate assigned kunalkashyap855 and unassigned dismorfo May 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants