Open brylie opened 6 years ago
This is a good point @brylie. We can show a calendar from / to widget to filter on the dates. I am adding this as an enhancement.
We will also add some pointers on how to implement this, so if someone is interested in seeing this sooner - they can pick it up.
We're using react-datetime for editing date fields. It should be possible to extend this for use in the filters. This may require refactoring of existing components.
Here's a more detailed explanation if someone wishes to take this up:
DataTable
component at table/DataTable.js
passes the mappingObj
to the Column
component at table/Column.js
.Column
component filters out the datatype for the current column in the datatype
variable.Column
component renders a FilterDropdown
component passing it the datatype
.FilterDropdown
component renders a component SingleMenuItem
which picks the filter value from the dropdown directly via DOM.SingleMenuItem
since it's hard to refactor. Also reading values from the DOM is not a good idea especially here.Cell
component at table/Cell.js
in the handleDatetimeChange
method.DateTime
component in Cell
since a similar approach can be utilized for selecting dates via the filter dropdown.
<Datetime
defaultValue={moment(this.state.data, getMomentDate(this.props.datatype.format))}
dateFormat={
this.props.datatype.format === 'basic_time' || this.props.datatype.format === 'basic_time_no_millis' ?
false :
getMomentDate(this.props.datatype.format)
}
timeFormat={
!(this.props.datatype.format === 'YYYY/MM/DD' || this.props.datatype.format === 'basic_date' || this.props.datatype.format === 'date')
}
onBlur={(e) => {
this.handleDatetimeChange(e);
this.setState({ active: false });
}}
inputProps={{
ref: (node) => { this.select = node; }
}}
/>
applyFilter
method in HomePage
component. This component uses some global variables to run the filtered query from feed.js
. If the query gets applied correctly, the data should get updated in the view.Hello! Can I try to implement this?
Sure, please feel free to take it up :)
I got the react datetime to work with FilterDropdown, however, I can't seem to find a workaround to retrieve the calendars value and apply it. Right now it seems like were using onKeyUp to retrieve the input tags value but this doesn't really work when the user clicks a date with react datetime. When I manually type in the date input tag it works and I can apply the date filter but it isn't really practical for production.
Is there a way to grab input field values when the user clicks apply? I think this may work better than using onKeyUp to grab the value.
Thanks @divyanshu013 for the great explanation.
<DateTime dateFormat='YYYY-MM-DD' closeOnSelect= {true} timeFormat= {false} inputProps={{ placeholder: 'select date', id: keyInput, className: 'form-control' }} />
Hey @MPierre9, great work, I think you're quite close 😸
The onKeyUp
isn't a good approach (I didn't notice we were using it). I think you should try onValueChange
which should cover all usecases. Just a heads up, you might need some changes in the rangeChange
method to make it work. Also when you're done making the changes, can you also test and see if it's working for other fields (besides date) too.
Sure thing @divyanshu013, thanks for the help! I'll try it out.
hello , is the feature coming soon ? thanks
using: Docker version: 1.5.0
Context
When filtering columns with date data, the user is expected to input the filter string manually (e.g. > or <).
Feature request
When defining a filter for ES date fields, it would be helpful if the user could select date value(s) from a calendar widget.