SORT: Add sorting for patient name & dates | eCR Library table

[sarahtress]

User Story

As somebody viewing the eCR Library, I want to be able to sort by Patient Name, Received Date, and Encounter Date, so that I can more easily find the eCRs I'm interested in and better group them within the table

Acceptance Criteria

• [ ] Sorting is available for 3 columns in the eCR Library Table:

  • [ ] Patient Name
  • [ ] Received Date
  • [ ] Encounter Date

• [ ] Sorting styling and functionality matches what's outlined in USWDS table component guidance

• [ ] The default sort is that the table is sorted by Received Date, with the most recent eCRs at the top. The arrow next to Received Date should be pointing up by default always to indicate this sort, but the column should not be highlighted blue until somebody clicks the arrow again

• [ ] When any sort is applied, a Refresh button appears to the right of the filters, like in the screenshot below. Clicking the button resets any user defined sorting and filters:

  

• [ ] If there is significant loading time, show shimmer loading effect to let the user know it's processing the request (this can be broken into another ticket if it's too much work for this ticket)

• [ ] When the user refreshes the browser, sorting is NOT refreshed

Scenarios

Scenario 1:

• When I open the eCR Library page
• I see double arrow icons to the right of Patient and Encounter Date column headers, and a single arrow pointing up to the right of Received Date column header
• The table should be sorted by default by Received Date, with the most recent eCR at the top

Scenario 2:

• When I click for the first time on the Patient arrow icon
• The column is highlighted in blue, the arrow is pointing up, and the Patients are now sorted from A to Z
• I also see a Reset button to the right of the filters
• When I click on the Patient arrow icon again
• The arrow is pointing down, and the Patients are now Sorted from Z to A
• When I click the Reset button, the sort goes back to the default sort and there are no columns highlighted in blue

Scenario 3:

• When I click for the first time on the Encounter Date arrow icon
• The column is highlighted in blue, the arrow is pointing up, and the Dates are now sorted from most recent to oldest (newest at the top)
• I also see a Reset button to the right of the filters
• When I click on the Encounter Date arrow icon again
• The arrow is pointing down, and the Dates are now Sorted from oldest to newest (oldest at the top)
• When I click the Reset button, the sort goes back to the default sort and there are no columns highlighted in blue

Scenario 4:

• When I click for the first time on the Received Date arrow icon
• The arrow is pointing down, and the Dates are now Sorted from oldest to newest (oldest at the top)
• I also see a Reset button to the right of the filters
• When I click the Reset button, the sort goes back to the default sort and there are no columns highlighted in blue

Design Notes

No Figma designs specific to sorting since there isn't anything to prototype beyond what's already built into USWDS table component!

Additional context

We will likely add sorting for Condition, and maybe Rule Summary, but for now we're starting with the higher priority columns to add sorting functionality

[sarahtress]

for now I added sorting for all 3 columns into 1 ticket, but we could split up into more tickets if that were to make sense

[sarahtress]

this is blocked until filters are implemented (because of Reset button and styling around it)