Filters implemeted with new state, different selectors

hackforla · Sep 7, 2024 · b79c071 · b79c071
1 parent 9522386
commit b79c071
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 26 deletions.
diff --git a/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js b/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js
@@ -20,19 +20,28 @@ const StatusPopup = ({
     header.id !== orderBy ? null : order
   );
 
+  const [typeSetting, setTypeSetting] = useState(criteria.type);
+  const [showDeleted, setShowDeleted] = useState(criteria.status === "all");
+
   // TODO More state variables for status filtering go here
 
   const setDefault = () => {
     setCriteria({
       ...criteria,
-      [header.id]: ""
+      status: showDeleted ? "all" : "active",
+      type: "all"
     });
     setCheckedProjectIds([]);
     setSelectAllChecked(false);
   };
 
   const applyChanges = () => {
     // Set Criteria for status
+    setCriteria({
+      ...criteria,
+      status: showDeleted ? "all" : "active",
+      type: typeSetting
+    });
     if (newOrder) {
       setSort(header.id, newOrder);
     }
@@ -72,8 +81,40 @@ const StatusPopup = ({
         />
         <hr style={{ width: "100%" }} />
       </div>
-      <div>(Under Construction)</div>
-
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {/* If there is a dateSnapshotted (i.e., project is snapshot), property value is 1 */}
+        <RadioButton
+          label="Drafts"
+          value="draft"
+          checked={typeSetting == "draft"}
+          onChange={() => setTypeSetting("draft")}
+        />
+        <RadioButton
+          label="Snapshots"
+          value="snapshot"
+          checked={typeSetting === "snapshot"}
+          onChange={() => setTypeSetting("snapshot")}
+        />
+        <RadioButton
+          label="Drafts and Snapshots"
+          value="all"
+          checked={typeSetting === "all"}
+          onChange={() => setTypeSetting("all")}
+        />
+        <hr style={{ width: "100%" }} />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <label style={{ margin: "0.5em" }}>
+          <input
+            style={{ verticalAlign: "middle" }}
+            type="checkbox"
+            checked={showDeleted}
+            value="active"
+            onChange={() => setShowDeleted(!showDeleted)}
+          />
+          <span style={{ verticalAlign: "middle" }}> Show Deleted</span>
+        </label>
+      </div>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
         <Button onClick={setDefault} variant="text">

diff --git a/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.js b/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.js
@@ -20,19 +20,24 @@ const VisibilityPopup = ({
     header.id !== orderBy ? null : order
   );
 
-  // TODO More state variables for visibility filtering go here
+  const [visibilitySetting, setVisibilitySetting] = useState(
+    criteria.visibility
+  );
 
   const setDefault = () => {
     setCriteria({
       ...criteria,
-      [header.id]: ""
+      visibility: "visible"
     });
     setCheckedProjectIds([]);
     setSelectAllChecked(false);
   };
 
   const applyChanges = () => {
-    // Set Criteria for status
+    setCriteria({
+      ...criteria,
+      visibility: visibilitySetting
+    });
     if (newOrder) {
       setSort(header.id, newOrder);
     }
@@ -72,7 +77,27 @@ const VisibilityPopup = ({
         />
         <hr style={{ width: "100%" }} />
       </div>
-      <div>(Under Construction)</div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {/* If there is a dateSnapshotted (i.e., project is snapshot), property value is 1 */}
+        <RadioButton
+          label="Visible"
+          value="visible"
+          checked={visibilitySetting == "visible"}
+          onChange={() => setVisibilitySetting("visible")}
+        />
+        <RadioButton
+          label="Hidden"
+          value="hidden"
+          checked={visibilitySetting === "hidden"}
+          onChange={() => setVisibilitySetting("hidden")}
+        />
+        <RadioButton
+          label="All"
+          value="all"
+          checked={visibilitySetting === "all"}
+          onChange={() => setVisibilitySetting("all")}
+        />
+      </div>
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>

diff --git a/client/src/components/Projects/ProjectTableRow.js b/client/src/components/Projects/ProjectTableRow.js
@@ -78,21 +78,6 @@ const ProjectTableRow = ({
     return value !== "undefined" ? value : "";
   };
 
-  // Last Modified Date column should display the Last Modified date, unless the project is
-  // deleted, in which case it will show the deleted date followed by "-Deleted" in red.
-  const dateModifiedDisplay = () => {
-    if (project.dateTrashed) {
-      return (
-        <span>
-          {formatDate(project.dateTrashed)}
-          <span style={{ color: "red" }}>-Deleted</span>
-        </span>
-      );
-    }
-
-    return <span>{formatDate(project.dateModified)}</span>;
-  };
-
   const dateSubmittedDisplay = () => {
     if (project.dateSubmitted) {
       return <span>{formatDate(project.dateSubmitted)}</span>;
@@ -101,7 +86,10 @@ const ProjectTableRow = ({
   };
 
   return (
-    <tr key={project.id}>
+    <tr
+      key={project.id}
+      style={{ background: project.dateTrashed ? "#ffdcdc" : "" }}
+    >
       <td className={classes.tdCenterAlign}>
         <input
           style={{ height: "15px" }}
@@ -127,6 +115,7 @@ const ProjectTableRow = ({
       </td>
       <td className={classes.td}>
         {project.dateSnapshotted ? "Snapshot" : "Draft"}
+        {project.dateTrashed ? <span> (deleted)</span> : null}
       </td>
       <td className={classes.td}>
         <Link to={`/calculation/1/${project.id}`}>{project.name}</Link>
@@ -139,10 +128,10 @@ const ProjectTableRow = ({
       <td className={classes.tdRightAlign}>
         {formatDate(project.dateCreated)}
       </td>
-
-      <td className={classes.td}>{dateModifiedDisplay()}</td>
+      <td className={classes.td}>
+        <span>{formatDate(project.dateModified)}</span>
+      </td>
       <td className={classes.td}>{dateSubmittedDisplay()}</td>
-
       <td className={classes.actionIcons}>
         {projectRules && (
           <div>