Implement Code Infrastructure for new My Projects Sorting and Filtering

[entrotech]

Overview

• The design team created a new design for the the UX for filtering and sorting on the My Projects page grid in Issue Design Mockup: Redesign the My Projects Filtering UI #1578. We need to implement something close to this design. This issue lays the groundwork for this change in code by creating components for the various pop-up windows triggered by clicking on the column headers.

Action Items

• In the time since the design team created the prototype referenced in the Resources section below, the design specification has standardized the icons to Material Design based icons, so the filter icons in the header should be MdFilterAlt.
• The prototype used buttons that are not part of our design standard, so I am replacing the Reset button styling with our standard Cancel button style and the "Show Result" button style with the primary Call to Action button style (both as seen on the Duplicate modal dialog accessed from the "Duplicate" menu item from the kebab menu on the My Project Page.
• The Prototype used toggle buttons to specify the sort order on each popup. This doesn't make sense, since we can't sort in moth ascending and descending order at the same time, so I replaced this with radio buttons, which will both be disabled if the column is not part of the sort order, or only one can be selected if the user chooses to sort by the corresponding value. We do not have a design standard for Radio Buttons, so I just used the default styling, which may need to be refined.
• The component organization needs to be consistent across all the column headers, so I took the step of creating "starter" components for each type of drop-down required and wired them up to the My Projects page, and implemented the sorting features, leaving the filtering features for additional issues that can be handed off to other developers.
• I left the filter drawer and the search text box intact temporarily, for purposes of exercising the existing functionality. These should eventually be removed once all the column heading sort/filter features are complete.
• I partially implemented components VisibilityPopup (Issue Implement the Visibility and Status Column Filters on the My Project Page #1646), StatusPopup (Issue Implement the Visibility and Status Column Filters on the My Project Page #1646) and TextPopup (Issue Implement Filtering by Name, Address, Alt #, Building Permit, Created By from Column Headers on My Project Page #1647) that includes the sorting feature, but not the filtering features for the corresponding columns. These are to be completed under the corresponding development issues. When working on these issues, use the component DatePopup as an example (Issue Implement Filtering By Created, Modified, Submitted (Date) from Col Headers on My Projects Page #1648).

Resources/Instructions

Figma Prototype:
https://www.figma.com/proto/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=12173-2052&t=wQuxLI1JbOw0OzLn-1&scaling=scale-down&page-id=2499%3A11472&starting-point-node-id=11997%3A885

Style Guide

[entrotech]

Here is what the result looks like with the DatePopup expanded for the Created On column: