Implement the Visibility and Status Column Filters on the My Project Page

[entrotech]

Overview

• Implement the Visibility and Status Column Filters on the My Projects Page per the Figma Prototype references in the Resources paragraph below to comply with the filter re-design of Issue #1578

Action Items

• [x] The prototype uses toggle buttons for specifying the sort order for both of these filters, but this makes no sense, since the choices should be mutually exclusive. Check with designers @yiranshan to see what they want to do.
• [x] Implement the filtering for the Visibility column
• [x] Implement the filtering for the Status column
• [x] Also add the word "(deleted)" to the text in the Status column cells if the project is deleted, and make the row background the same color as shown in the prototype.
• [x] The word "(deleted)" should no longer be appended to the Modified date.

Resources/Instructions

Refer to this 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

[ExperimentsInHonesty]

@Jonathanko52 Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[Jonathanko52]

1. Progress:
   • Contacting Yiran for clarification regarding the issues regarding excess fields and sorting conflicts in the "visibility" and status columns".
   • Sorted out what needs to be done to implement the new design for columns, sorting, and filtering.
   • From what I'm seeing, the redesign of the new Filtering UI means it requires more than changing how the Visibility and Status columns work. It requires integrating the Filter functionality into the table itself.
2. Blocker: None.
3. Availability: 10 hours a week.
4. ETA:

[Jonathanko52]

1. Create the modals.
2. Add ability to sort by visibility/draft/snapshot.
3. Send figma back for redesign.

[Jonathanko52]

1. Progress: Completed:
   1. Move the header to a separate component, using icons and colors from the new design. Next Steps:
   2. Create a filter dropdown for the columns.
   3. Implement functionality for said columns.
2. Blockers: None.
3. Availability: 5-10 hours a week.
4. ETA: Two weeks.
5. Pictures or links* (if necessary):

[entrotech]

@Jonathanko52 Since the filtering issues seemed stalled, I created an issue #1801 to lay the groundwork in code for all the colun heading filtering. Please read Issue #1801 and pull the latest develop branch. For this issue, all you will need to do is fill int he filtering logic for the VisibilityPopup and StatusPopup React components, following the example of the DatePopup.

[Jonathanko52]

The visibility filter is working.

Not yet functional, but setting the status filter to now include "deleted" projects, alongside the old snapshot, draft, snapshot and draft options. Also added an 'all' option.

[Jonathanko52]

Functionality for these filter options has been added.

[ExperimentsInHonesty]

@Jonathanko52 I see your screenshots above, but no PR. Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[Jonathanko52]

@ExperimentsInHonesty some final kinks that need to be ironed out. I'll be putting in a PR later tonight.

[Jonathanko52]

1. Progress: Making changes to pull request.
2. Blockers: None.
3. Availability: 1-2 hours this week.
4. ETA: Later this week. Certainly before next Tuesday.