Experiment: Try two different implementations of filtering text columns on the My Projects Page

[entrotech]

Overview

We need to converge on a design for the column header filter UI for text-based columns. To let the designers, PMs and stakeholders get some experience with the general approaches, implement two different approaches on different text columns. Eventually, we should get feedback from the above parties to decide on the best UX.

Action Items

• Implement a text column heading filter for the Address column that implements a stripped-down Google Sheets style filter control, similar to the prototype. This can be re-styled to better comply with the style guide. I would suggest adding additional features found in the Google Sheets control (i.e, a "Select all n" link, a "clear" link, a indication of how many items are currently selected).
• For other text columns (e.g., Name, Alternative Number) implement a more traditional multi-select drop-down filter. With some effort, we can probably re-style the badges indicating what is selected, add check boxes to the list items, and get the styling of all the elements of the control be more compliant with the style guide.
• Solicit feedback from designers, PMs and possibly stakeholders.

Resources/Instructions

Prototype

Google Sheets / Prototype Style:

[entrotech]

Adjustments requested on 9/19/24:

1. Center the Reset and Apply buttons on the Text Search popup
2. Move the search icon to the right of the input box on the Address style TextPopup
3. Remove the placeholder text from the input box on the Address style TextPopup.
4. Change the placeholder text on the Name style TextPopup to "Filter".
5. On Name style TextPopup, make it so the list box does not close when you select each item from the list.
6. Try to contain the drop-down list in the Name style TextPopup to stay within the popup boundaries.