You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@airavata.apache.org by "Marcus Christie (Jira)" <ji...@apache.org> on 2020/06/19 22:00:03 UTC
[jira] [Updated] (AIRAVATA-3324) Custom input editor: autocomplete
input editor
[ https://issues.apache.org/jira/browse/AIRAVATA-3324?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Marcus Christie updated AIRAVATA-3324:
--------------------------------------
Description:
Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.
The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.
h3. Configuring autocomplete input editor
{code}
{
"editor": {
"ui-component-id": "autocomplete-input-editor",
"config": {
"url": "/custom/search/"
}
}
}
{code}
h3. Backend URL contract
- URL is called with query parameter {{search}} with value of whatever the user has currently typed
- URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
{code}
{
"search": "mammal",
"results": [
{
"text": "Horse",
"value": "horse"
},
{
"text": "Mouse",
"value": "mouse"
}
]
}
{code}
- URL can also be called with query parameter {{exact}} with a value that was previously returned. This call is made by the UI to retrieve the "text" value to display to the user for this value. The JSON response should be similar to the above except that it should only have one result:
{code}
{
"search": "horse",
"results": [
{
"text": "Horse",
"value": "horse"
}
]
}
{code}
- If the {{exact}} query parameter is specified and there is no match for that value, the JSON response should have HTTP status 404. The error reason can be added to the "detail" key of the response body, for example:
{code}
{
"detail": "No matching value was found."
}
{code}
h5. TODO
- [x] Load search results as user types
- [x] do we need a search mode where it searches for a unique value? This way the text to display could be queried for when re-editing.
- [x] load the text for a unique value when re-editing
- [x] get url from input metadata
- [x] better UI for displaying/cancelling selected value
- [x] simplify contract for looking up a value by id
- [x] debounce updates to the search string?
- [x] documentation
was:
Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.
The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.
h3. Configuring autocomplete input editor
{code}
{
"editor": {
"ui-component-id": "autocomplete-input-editor",
"config": {
"url": "/custom/search/"
}
}
}
{code}
h3. Backend URL contract
- URL is called with query parameter {{search}} with value of whatever the user has currently typed
- URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
{code}
{
"search": "mammal",
"results": [
{
"text": "Horse",
"value": "horse"
},
{
"text": "Mouse",
"value": "mouse"
}
]
}
{code}
- URL can also be called with query parameter {{exact}} with a value that was previously returned. This call is made by the UI to retrieve the "text" value to display to the user for this value. The JSON response should be similar to the above except that it should only have one result:
{code}
{
"search": "horse",
"results": [
{
"text": "Horse",
"value": "horse"
}
]
}
{code}
- If the {{exact}} query parameter is specified and there is no match for that value, the JSON response should have HTTP status 404. The error reason can be added to the "detail" key of the response body, for example:
{code}
{
"detail": "No matching value was found."
}
{code}
h5. TODO
- [x] Load search results as user types
- [x] do we need a search mode where it searches for a unique value? This way the text to display could be queried for when re-editing.
- [x] load the text for a unique value when re-editing
- [x] get url from input metadata
- [x] better UI for displaying/cancelling selected value
- [x] simplify contract for looking up a value by id
- [x] debounce updates to the search string?
- [ ] documentation
> Custom input editor: autocomplete input editor
> ----------------------------------------------
>
> Key: AIRAVATA-3324
> URL: https://issues.apache.org/jira/browse/AIRAVATA-3324
> Project: Airavata
> Issue Type: New Feature
> Components: Django Portal
> Reporter: Marcus Christie
> Assignee: Marcus Christie
> Priority: Major
>
> Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.
> The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.
> h3. Configuring autocomplete input editor
> {code}
> {
> "editor": {
> "ui-component-id": "autocomplete-input-editor",
> "config": {
> "url": "/custom/search/"
> }
> }
> }
> {code}
> h3. Backend URL contract
> - URL is called with query parameter {{search}} with value of whatever the user has currently typed
> - URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
> {code}
> {
> "search": "mammal",
> "results": [
> {
> "text": "Horse",
> "value": "horse"
> },
> {
> "text": "Mouse",
> "value": "mouse"
> }
> ]
> }
> {code}
> - URL can also be called with query parameter {{exact}} with a value that was previously returned. This call is made by the UI to retrieve the "text" value to display to the user for this value. The JSON response should be similar to the above except that it should only have one result:
> {code}
> {
> "search": "horse",
> "results": [
> {
> "text": "Horse",
> "value": "horse"
> }
> ]
> }
> {code}
> - If the {{exact}} query parameter is specified and there is no match for that value, the JSON response should have HTTP status 404. The error reason can be added to the "detail" key of the response body, for example:
> {code}
> {
> "detail": "No matching value was found."
> }
> {code}
> h5. TODO
> - [x] Load search results as user types
> - [x] do we need a search mode where it searches for a unique value? This way the text to display could be queried for when re-editing.
> - [x] load the text for a unique value when re-editing
> - [x] get url from input metadata
> - [x] better UI for displaying/cancelling selected value
> - [x] simplify contract for looking up a value by id
> - [x] debounce updates to the search string?
> - [x] documentation
--
This message was sent by Atlassian Jira
(v8.3.4#803005)