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

Calendar widget for date field filters #181

Open
brylie opened this Issue Mar 23, 2018 · 8 comments

Comments

Projects
None yet
4 participants
@brylie

brylie commented Mar 23, 2018

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.

@siddharthlatest

This comment has been minimized.

Member

siddharthlatest commented Mar 23, 2018

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.

@divyanshu013

This comment has been minimized.

Member

divyanshu013 commented Mar 24, 2018

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.

@divyanshu013

This comment has been minimized.

Member

divyanshu013 commented Mar 26, 2018

Here's a more detailed explanation if someone wishes to take this up:

  1. The DataTable component at table/DataTable.js passes the mappingObj to the Column component at table/Column.js.
  2. The Column component filters out the datatype for the current column in the datatype variable.
  3. The Column component renders a FilterDropdown component passing it the datatype.
  4. The FilterDropdown component renders a component SingleMenuItem which picks the filter value from the dropdown directly via DOM.
  5. It would probably be best to create a new component and use it instead of SingleMenuItem since it's hard to refactor. Also reading values from the DOM is not a good idea especially here.
  6. One thing to keep in mind is to make the logic work for all formats. I'm handling this in the Cell component at table/Cell.js in the handleDatetimeChange method.
  7. Check the usage of 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; }
	}}
/>
  1. For selecting a date range check the docs on react-datetime.
  2. Once the filter is applied it would execute the 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.

@siddharthlatest siddharthlatest added this to the 2.0.0 milestone Mar 31, 2018

@MPierre9

This comment has been minimized.

Contributor

MPierre9 commented Apr 12, 2018

Hello! Can I try to implement this?

@divyanshu013

This comment has been minimized.

Member

divyanshu013 commented Apr 12, 2018

Sure, please feel free to take it up :)

@MPierre9

This comment has been minimized.

Contributor

MPierre9 commented Apr 14, 2018

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.

Example

dejavudate

Code for React Datetime

<DateTime dateFormat='YYYY-MM-DD' closeOnSelect= {true} timeFormat= {false} inputProps={{ placeholder: 'select date', id: keyInput, className: 'form-control' }} />

@divyanshu013

This comment has been minimized.

Member

divyanshu013 commented Apr 14, 2018

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.

@MPierre9

This comment has been minimized.

Contributor

MPierre9 commented Apr 15, 2018

Sure thing @divyanshu013, thanks for the help! I'll try it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment