keystone icon indicating copy to clipboard operation
keystone copied to clipboard

feat(list-page): add filtering options by timestamp

Open pnodet opened this issue 1 year ago • 21 comments

Currently in the list page we can't filter by dates.

To prevent issues with multiple nested popover (wrong behaviour of on click outside) I had to create a BlockDatePicker component (Calendar not wrapped in popover)

There might be a better way but it was the easiest non-breaking idea.

Screenshot 2023-12-15 at 18 04 45

pnodet avatar Dec 15 '23 11:12 pnodet

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8e816f7923077b5b4d49a174902c1120a2bffb6d:

Sandbox Source
@keystone-6/sandbox Configuration

codesandbox-ci[bot] avatar Dec 15 '23 11:12 codesandbox-ci[bot]

do you plan to add time field as well?

gautamsi avatar Dec 15 '23 19:12 gautamsi

@gautamsi I'm not a maintainer of the repo, I don't even know if this PR will be accepted. I'm not sure what you mean by time fields? This works for dates / timestamps

pnodet avatar Dec 15 '23 21:12 pnodet

@gautamsi Sorry missed that you were a member haha. Still not sure of what you mean, to be honest I built this because we needed it but I can add support for other fields I guess.

pnodet avatar Dec 15 '23 21:12 pnodet

Btw I didn't see any prettier /formatter config, any suggestions?

pnodet avatar Dec 15 '23 21:12 pnodet

I am a member as part of restricted preview group long time ago, I have not much permission :(

I meant time part of this timestamp field, what you have is only date part from the screenshot.

gautamsi avatar Dec 15 '23 21:12 gautamsi

@gautamsi Okay np. I think time would be a bit more challenging to implement, is it something you would use rather than filtering by date?

pnodet avatar Dec 15 '23 21:12 pnodet

I had to do this for a customer, I took different approach.

in v5 the timestamp field was using chrono-node for parsing humanized dates, I gave him that instead of dropdown.

gautamsi avatar Dec 15 '23 21:12 gautamsi

I see… I think in our use case precise times are not really useful since we might be dealing with more long term objects I'll think about it

pnodet avatar Dec 15 '23 22:12 pnodet

If you are not covering general use case I am not sure if this PR will be any useful,

This can be for reference for others to implement such custom view.

gautamsi avatar Dec 16 '23 07:12 gautamsi

Yes sure took me a bit of time to understand how to implement this and maybe others will benefit from it.

What I meant was I need this feature so I built it in hope that it will be merged and that I don't have to maintain a fork etc. I'd be willing to implement other filters has well but I re-used an existing component (the date picker) in order to make minimal changes. But you can surely implement chrono-node with the same logic

pnodet avatar Dec 16 '23 09:12 pnodet

you do not have to maintain a fork, you can use custom view which will replace the current filters, we have implemented several other type of filters with custom views for our clients

gautamsi avatar Dec 16 '23 18:12 gautamsi

Oh so good, do you know where I can find some docs?

this look empty: https://keystonejs.com/docs/guides/custom-field-views#title

pnodet avatar Dec 16 '23 20:12 pnodet

@dcousens sorry for this pings, same question with this PR. Is this something you are inserted in / intend to merge?

pnodet avatar Jan 02 '24 07:01 pnodet

@dcousens curious to have your reaction on this as well, when you have some time

pnodet avatar Jan 25 '24 03:01 pnodet

As this is a timestamp, we should show a complete timestamp. A timestamp could default to 00:00:00 of the particular date selected.

As for suitability, I'm not against only showing a date picker for now. It isn't perfect, but, it's more functionality than the user had previously.

I think I agree with @gautamsi that https://www.npmjs.com/package/chrono-node might be a better option; as if you only need date precision, why not use the calendarDay field?

dcousens avatar Jan 25 '24 03:01 dcousens

As for suitability, I'm not against only showing a date picker for now. It isn't perfect, but, it's more functionality than the user had previously.

For timestamps I think we could do a date picker first and another PR for timestamps if needed?

I think I agree with @gautamsi that https://www.npmjs.com/package/chrono-node might be a better option

I'm okay to update this PR to use the package but tbh I'm not quite sure I understand how this would look like. I mean what does the user input visually looks like if we were to use chrono-node?

if you only need date precision, why not use the calendarDay field?

I think with time we have moved away from calendarDay, finding them hard to use for broader usage in growing applications. Timestamps have shown to be more versatiles / flexible. But maybe it's a pre-conceived idea and time to reconsider. Are calendarDay filterable in a search page?

pnodet avatar Jan 29 '24 10:01 pnodet

Hi @dcousens sorry to bother you! What are the blocking points for this PR? It's something we'd like to have in keystone

pnodet avatar Mar 14 '24 08:03 pnodet