Headers completion suggestions
albertotn opened this issue · 8 comments
This could be a good helper to improve experience
Hi @mirkoperillo, I was looking this issue. Basically I had two approaches
- First one was using
datalist
tag. The problem is that there is no Knockoutjs binding fordatalist
tag. This is not allowing me to useforeach
binding for list all headers from an array (I haven't used much KO and I may be wrong here, please correct me). - Second one is to use a floating div(using position: absolute & z-index) when the input is in focus. The issue here is that many features like using
tab
key ordown
key to select an item are lost and will need implementation. Some aria features will be missing as well. But this one is relatively easy to implement
Any help on this would be appreciated 🙇
@nikhilraojl I have to think a little bit about it.
Meanwhile some details.
This feature should be added to the entry-list
component.
entry-list
component is used in many place in Resting, everywhere a list of values is needed. So it is used in:
- context dialog,
Line 247 in 9d2fece
- Request: Headers tab,
Line 177 in 9d2fece
- Request: Body tab
- type: form-data,
- type: x-www-form-urlencoded,
- Request: Querystring tab,
Line 178 in 9d2fece
The suggestion feature as presented here is interesting only for the Headers tab, so this feature should be optional (possible to enable/disable). Something like it has been already implemented for the file field
This is a very useful feature and it is good to implement as soon as possible, but we should find an easy way to do it without too many effort, because the long-term idea is to move everything from knockoutjs to vuejs (as we have already started doing).
First one was using datalist tag. The problem is that there is no Knockoutjs binding for datalist tag. This is not allowing me to use foreach binding for list all headers from an array (I haven't used much KO and I may be wrong here, please correct me).
@nikhilraojl I think datalist
is the most easy solution to implement. You can do something like this (an example using solar system planets)
in the html (entry-list/entryList_view.html)
<input type="text" list="planets" data-bind="value: planet"/>
<datalist id="planets">
<!-- ko foreach: solarPlanets -->
<option><span data-bind="text: $data"></span></option>
<!-- /ko -->
</datalist>
in the js file (entry-list/entryLisVm.js)
function AppViewModel {
this.planet = ko.observable('')
this.solarPlanets = ko.observableArray(["Plutone", "Giove", "Terra"])
}
If you are interested into work on this, open a draft pull request with work-in-progress code and I will be happy to help and advise you about
@mirkoperillo Please take a look at #191 when possible, thanks
@nikhilraojl I am going to give it a look in the next days. Thank you for your help
@mirkoperillo you mentioned in this issue that the idea is to move to vuejs. I am interested in helping with this. Please let me know if there is anything I can help with any current issues to focus before transitioning or any blockers
@nikhilraojl yes this is absolutely the roadmap. The idea is an incremental and total move to vuejs in the next period.
I'm very happy to know you are interesting in helping with the project.
Watch the project because in the next period I'm going to open some issues about these activities.