1646 visibility and status #1815

Jonathanko52 · 2024-09-04T04:15:39Z

What changes did you make?

-Edited CSS for table header.
-Edited color change for header when a filter dropdown is selected
-Implemented filter functionality for Visibility Column
-Implemented filter functionality for Status Column
-Removed "deleted" from modified date
-Moved "delete" test to status column and changed the background for deleted rows.

Why did you make the changes (we will use this info to test)?

Part of the revamp for the filtering.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

entrotech · 2024-09-04T15:58:36Z

client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js

@@ -1,27 +1,54 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "react-datepicker/dist/react-datepicker.css";
-import { MdFilterAlt } from "react-icons/md";
+import { MdFilterList } from "react-icons/md";


You probably got the idea for this icon from the prototype, but, the prototype is several months old, and the design team has changed the icons they want to use in the design guide See https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g2e77662f2ce_0_10 page 17. The upshot is that you need to change the icon back to MdFilterAlt.

entrotech · 2024-09-04T16:09:28Z

client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js

  criteria,
  setCriteria,
  order,
  orderBy,
  setSort,
  setCheckedProjectIds,
-  setSelectAllChecked
+  setSelectAllChecked,


We don't want any of these five new props. You should be getting and setting criteria via the criteria and setCriteria props.

entrotech · 2024-09-04T16:13:20Z

client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js

@@ -4,6 +4,7 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
+import UniversalSelect from "../../UI/UniversalSelect";


I just figured out a day or two ago that the UniversalSelect control is not working. If it is used as a controlled input, it does not not track the existing controlled value when it is first rendered. We need to either fix it, or go back to using a standard react control.

I think this was what resulted in me going out of scope for this task. I discovered that when I attempted to change the sorting option, it would reset the filter option. I believe that the issue was that the StatusPopup component was being rendered each time, and so the existing controlled value was lost. I decided the best approach to fixing this was to save that value in state of the Project page.

entrotech · 2024-09-04T16:14:50Z

client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.js

@@ -4,6 +4,7 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
+import UniversalSelect from "../../UI/UniversalSelect";


The prototype calls for using a set of Radio Buttons, so you don't need a select drop-down. As we discussed last week, the search box in the prototype does not make sense and should be dropped.

entrotech · 2024-09-04T16:18:04Z

client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.js

@@ -41,6 +49,9 @@ const VisibilityPopup = ({
    close();
  };

+  const handleChangeVisibility = visibilityValue => {


Don't want to apply the change to the filter when the user picks a choice from the list - need to wait until they click on the Apply button.

entrotech · 2024-09-04T16:28:10Z

client/src/components/Projects/ProjectTableRow.js

-          <span style={{ color: "red" }}>-Deleted</span>
-        </span>
-      );
+      return <span>{formatDate(project.dateTrashed)}</span>;


I don't know why you moved the deleted indicator to the visibility column. Maybe you misunderstood our conversation last week where I pointed out that the Date Modified column is where you would see that the deleted date is displayed if the project is deleted, per Emily's request, but we don't want to move it to the Status column.

For this one, I refered to the figma and checklist of action items.

#1646

Link to 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

entrotech · 2024-09-04T16:41:58Z

client/src/components/Projects/ProjectsPage.js

@@ -733,16 +746,29 @@ const ProjectsPage = ({ contentContainerRef }) => {
                    <tr className={classes.tr}>
                      {headerData.map(header => {
                        return (
-                          <td key={header.id}>
+                          <td


I guess what you are trying to do here is change the header appearance while it's corresponding popup is open. This is outside the scope of this issue, and will be addressed by a separate issue, but if we wanted to do this, you don't need any new props at all. The reactjs-popup has a feature that allows you to change the trigger (i.e. Column Header appearance, depending on whether the popup is open or not - See the Trigger section on the page https://react-popup.elazizi.com/component-api

entrotech · 2024-09-04T16:51:04Z

client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js

@@ -72,7 +118,10 @@ const StatusPopup = ({
        />
        <hr style={{ width: "100%" }} />
      </div>
-      <div>(Under Construction)</div>
+      <UniversalSelect


You need two controls on this popup. One controls criteria.type, which should have possible values ["draft", "snapshot", or "all"]. This should probably be a set of radio buttons, with the labels ["Draft", "Snapshot", "Draft and Snapshot"]. It could also be done as a drop-down list, but my preference would be radio buttons, since there are only three choices, and a choice can be made with a single click.
The second controls criteria.status, which should have possible values of ["active", "deleted" or "all"], which I would prefer to see as another set of Radio Buttons, but to be somewhat consistent with the prototype, we can make it a checkbox, where unchecked sets criteria.status to "all" and checked sets the criteria.type to "active". Note that it is not possible to set the criteria.status to "deleted" to see only deleted projects.

entrotech

This PR is a lot more complicated than the issue calls for, and tries to implement changes outside the scope of the issue. I'd like you to try again. This time:

Do not make changes to any components except VisibilityPopup and StatusPopup. For this issue, you should not need to add any props to either component.
Make sure that filter and sorting criteria are not applied until the user clicks the Apply button.
The Visibility Popup should use a set of three radio buttons to do specify the filtering as in the prototype, but you should omit the superfluous textbox found in the prototype.
The Status Popup should be different from the prototype and use a set of three radio buttons to choose "Draft", "Snapshot or "Draft and Snapshot". There should be a checkbox like the prototype that is labelled "Deleted Projects". If it is checked, then show both active and deleted projects, if it unchecked, only show active projects.

Jonathanko52 added 7 commits August 28, 2024 14:10

initial push

c1d3f89

pulled from develop

f145f62

CSS on header

1d4fb27

Visibility filter working

eeae814

mvp done. Looking into css

e7ff9d3

fixed issue of filter values not being saved in dropdown

bfdd279

Delete label and row background added

720c1d9

entrotech reviewed Sep 4, 2024

View reviewed changes

entrotech requested changes Sep 4, 2024

View reviewed changes

Jonathanko52 closed this Sep 10, 2024

Jonathanko52 deleted the 1646-Visibility-And-Status branch September 10, 2024 00:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1646 visibility and status #1815

1646 visibility and status #1815

Jonathanko52 commented Sep 4, 2024

entrotech Sep 4, 2024

entrotech Sep 4, 2024

entrotech Sep 4, 2024

Jonathanko52 Sep 4, 2024

entrotech Sep 4, 2024 •

edited

Loading

entrotech Sep 4, 2024

entrotech Sep 4, 2024

Jonathanko52 Sep 4, 2024

entrotech Sep 4, 2024

entrotech Sep 4, 2024 •

edited

Loading

entrotech left a comment

1646 visibility and status #1815

1646 visibility and status #1815

Conversation

Jonathanko52 commented Sep 4, 2024

What changes did you make?

Why did you make the changes (we will use this info to test)?

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

entrotech Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

entrotech Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

entrotech left a comment

Choose a reason for hiding this comment

entrotech Sep 4, 2024 •

edited

Loading

entrotech Sep 4, 2024 •

edited

Loading