FILTER: Filter By Date (Part 2 - Custom selection) - Githubissues

CDCgov / phdi

https://cdcgov.github.io/dibbs-site/

Creative Commons Zero v1.0 Universal

35 stars 14 forks source link

FILTER: Filter By Date (Part 2 - Custom selection) #2753

Open emmastephenson opened 1 month ago

emmastephenson commented 1 month ago

WIP

User Story

As a user of the eCR Library, I want to filter by custom dates, so that I can only see eCRs from within a specific range I'm interested in.

Example: I only want to see eCRs for the 10 days, so I can identify issues.

Acceptance Criteria

[ ] "Filter By Received Date" implemented for custom date range
[ ] When a user chooses "Custom date range", they must populate the start and end dates
[ ] When user applies the custom filter, only eCRs received in that date range are included
[ ] My selection is shown as the button text (e.g. "From 10/7/2024 to 10/10/2024")

Scenarios

Scenario 1

I click on the date filter button
I choose "custom date filter"
I select start date
A modal datepicker appears and I choose my date
I choose my end date
When "Apply Filter" is clicked, only eCRs from within my range appear

Design Notes

Link to Figma design in Dev mode Link to Figma prototype

Screenshots below should not be used for working on this ticket - always refer to Figma design for most up-to-date designs:

Screenshot 2024-10-11 at 8.35.39 AM.png

Additional context

This ticket includes both the frontend design implementation and the backend querying needed for full functionality.

emmastephenson commented 1 week ago

Not totally sure which date picker component to use (USWDS or input type date). Will need to chat with Ashton + possibly SR developers to determine what's been done elsewhere.