Story: Filter List of CANs

[jonnalley]

User Story

As a budget team member, I want to filter the list of all CANs to find one or more specific CANs easily.

Acceptance Criteria

• User can filter a listing of CANs by by the active period(s), Method(s) of Transfer, Portfolio(s), and FY budget range
• Within a given criteria, multiple options are evaluated using boolean OR logic (ex. 1 year or 2 year active period)
• The combination of the above criteria are cumulative/additive filters (boolean AND)
• After a filter is applied, any and all applied filters are shown to the user so that the user is aware of what filters are limiting the CANs being returned to them.
• A given filter criteria can then be individually removed.
• The user can also choose to reset and clear all of the above filtering/criteria in one interaction.
• User can choose one and only one fiscal year to filter the list of CANs by. The selection of this FY would persist across all tabs the user chooses for this page. Additionally, any selection of fiscal year would be additive and supplementary to the filters chosen above.
• By default, the fiscal year selected and thusly filtered would be the current fiscal year based on the current date.

---

Tasks

UX

• Design is done in View list of CANs #346

Dev

• Filter My CANs #2868
• filter by Fiscal Year #2878
• filter by active period(s) #2888
• method(s) of transfer #2892
• portfolio filter #2901
• create Range Slider component #2907
• FY budget range filter #2910
• filter pills #2909
• Clear Filters

Definition of Done Checklist

• UI works as designed (UX team)
• PR(s) have been merged to main
• Design/tech debt eliminated
• New design/tech debt documented (if applicable)
• [-] Build process updated
• [-] Documentation updated or added
• [-] Feature flags/toggles created

Additional Context & Resources

• react-range-slider
• uswds-range-slider
• Slider Design article

[fpigeonjr]

UX Review on 10/11/24

• pill color close button (# 264A64)
• reverse order of fiscal year dropdown
• full-width on comboBoxes

[fpigeonjr]

UX Review on 10/22/2024

• always show TBD amounts
• not show the Budget filters if user has not interacted with it

[fpigeonjr]

@jonnalley all sub-tasks are complete for this story