1801 my projects filtering (#1803)

* submit database migration and route * submit database migration and route * Update date format for Submit Date * made slight modifications to frontend code * Temporarily hide Submit Button from Page 5 * Work on My Projects filters * My Project Page filtering changes --------- Co-authored-by: heejung1180 <[email protected]>
hackforla · Aug 28, 2024 · 620f744 · 620f744
1 parent 78f8a53
commit 620f744
Show file tree

Hide file tree

Showing 11 changed files with 657 additions and 58 deletions.
diff --git a/client/src/components/PdfPrint/PdfFooter.js b/client/src/components/PdfPrint/PdfFooter.js
@@ -98,7 +98,7 @@ const PdfFooter = ({ project }) => {
 };
 
 PdfFooter.propTypes = {
-  project: PropTypes.shape
+  project: PropTypes.shape(PropTypes.any)
 };
 
 export default PdfFooter;
diff --git a/client/src/components/Projects/ColumnHeaderPopups/DatePopup.js b/client/src/components/Projects/ColumnHeaderPopups/DatePopup.js
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Button from "../../Button/Button";
+import RadioButton from "../../UI/RadioButton";
+import "react-datepicker/dist/react-datepicker.css";
+import DateRangePicker from "../../UI/DateRangePicker";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const DatePopup = ({
+  close,
+  header,
+  criteria,
+  setCriteria,
+  order,
+  orderBy,
+  setSort,
+  setCheckedProjectIds,
+  setSelectAllChecked
+}) => {
+  const [newOrder, setNewOrder] = useState(
+    header.id !== orderBy ? null : order
+  );
+  const [newStartDate, setNewStartDate] = useState(
+    criteria[header.startDatePropertyName]
+  );
+  const [newEndDate, setNewEndDate] = useState(
+    criteria[header.endDatePropertyName]
+  );
+
+  const setDefault = () => {
+    setNewStartDate(null);
+    setNewEndDate(null);
+    setNewOrder(null);
+    setCheckedProjectIds([]);
+    setSelectAllChecked(false);
+  };
+
+  const applyChanges = () => {
+    setCriteria({
+      ...criteria,
+      [header.startDatePropertyName]: newStartDate,
+      [header.endDatePropertyName]: newEndDate
+    });
+    if (newOrder) {
+      setSort(header.id, newOrder);
+    }
+    setCheckedProjectIds([]);
+    setSelectAllChecked(false);
+    close();
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <FontAwesomeIcon
+          style={{
+            backgroundColor: "transparent",
+            color: "black",
+            position: "absolute",
+            top: "0.5rem",
+            right: "0.5rem"
+          }}
+          icon={faX}
+          alt={`Close popup`}
+          onClick={close}
+        />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <RadioButton
+          label="Sort Newest to Oldest"
+          value="desc"
+          checked={newOrder === "desc"}
+          onChange={() => setNewOrder("desc")}
+        />
+        <RadioButton
+          label="Sort Oldest to Newest"
+          value="asc"
+          checked={newOrder === "asc"}
+          onChange={() => setNewOrder("asc")}
+        />
+        <hr style={{ width: "100%" }} />
+      </div>
+      <DateRangePicker
+        startDate={newStartDate}
+        endDate={newEndDate}
+        setStartDate={date => {
+          setNewStartDate(date);
+        }}
+        setEndDate={date => {
+          setNewEndDate(date);
+        }}
+        startDatePlaceholder="Start Date"
+        endDatePlaceholder="End Date"
+      />
+      <hr style={{ width: "100%" }} />
+      <div style={{ display: "flex" }}>
+        <Button onClick={setDefault} variant="text">
+          Reset
+        </Button>
+        <Button
+          onClick={applyChanges}
+          variant="contained"
+          color={"colorPrimary"}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+DatePopup.propTypes = {
+  close: PropTypes.func,
+  header: PropTypes.any,
+  criteria: PropTypes.any,
+  setCriteria: PropTypes.func,
+  order: PropTypes.string,
+  orderBy: PropTypes.string,
+  setSort: PropTypes.func,
+  setCheckedProjectIds: PropTypes.func,
+  setSelectAllChecked: PropTypes.func
+};
+
+export default DatePopup;
diff --git a/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js b/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js
@@ -0,0 +1,129 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "react-datepicker/dist/react-datepicker.css";
+import { MdFilterAlt } from "react-icons/md";
+import Popup from "reactjs-popup";
+import DatePopup from "./DatePopup";
+import TextPopup from "./TextPopup";
+import VisibilityPopup from "./VisibilityPopup";
+import StatusPopup from "./StatusPopup";
+
+const ProjectTableColumnHeader = ({
+  header,
+  criteria,
+  setCriteria,
+  order,
+  orderBy,
+  setSort,
+  setCheckedProjectIds,
+  setSelectAllChecked
+}) => {
+  return (
+    <div style={{ width: "100%", height: "100%" }}>
+      {header.id !== "checkAllProjects" && header.id !== "contextMenu" ? (
+        <Popup
+          trigger={
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between"
+              }}
+            >
+              <span>{header.label}</span>
+              <MdFilterAlt
+                style={{
+                  backgroundColor: "transparent",
+                  color: "white",
+                  marginLeft: "0.5rem"
+                }}
+                alt={`Show column filter and sort popup`}
+              />
+              {/* <FontAwesomeIcon
+                style={{
+                  backgroundColor: "transparent",
+                  color: "white",
+                  marginLeft: "0.5rem"
+                }}
+                icon={faFilter}
+                alt={`Show column filter and sort popup`}
+              /> */}
+            </div>
+          }
+          position="bottom center"
+          offsetY={10}
+          arrow={false}
+          contentStyle={{ width: "auto" }}
+        >
+          {close => {
+            return !header.popupType ? null : header.popupType ===
+              "datetime" ? (
+              <DatePopup
+                close={close}
+                header={header}
+                criteria={criteria}
+                setCriteria={setCriteria}
+                order={order}
+                orderBy={orderBy}
+                setSort={setSort}
+                setCheckedProjectIds={setCheckedProjectIds}
+                setSelectAllChecked={setSelectAllChecked}
+              />
+            ) : header.popupType === "text" ? (
+              <TextPopup
+                close={close}
+                header={header}
+                criteria={criteria}
+                setCriteria={setCriteria}
+                order={order}
+                orderBy={orderBy}
+                setSort={setSort}
+                setCheckedProjectIds={setCheckedProjectIds}
+                setSelectAllChecked={setSelectAllChecked}
+              />
+            ) : header.popupType === "visibility" ? (
+              <VisibilityPopup
+                close={close}
+                header={header}
+                criteria={criteria}
+                setCriteria={setCriteria}
+                order={order}
+                orderBy={orderBy}
+                setSort={setSort}
+                setCheckedProjectIds={setCheckedProjectIds}
+                setSelectAllChecked={setSelectAllChecked}
+              />
+            ) : header.popupType === "status" ? (
+              <StatusPopup
+                close={close}
+                header={header}
+                criteria={criteria}
+                setCriteria={setCriteria}
+                order={order}
+                orderBy={orderBy}
+                setSort={setSort}
+                setCheckedProjectIds={setCheckedProjectIds}
+                setSelectAllChecked={setSelectAllChecked}
+              />
+            ) : null;
+          }}
+        </Popup>
+      ) : (
+        <span>{header.label}</span>
+      )}
+    </div>
+  );
+};
+
+ProjectTableColumnHeader.propTypes = {
+  header: PropTypes.any,
+  criteria: PropTypes.any,
+  setCriteria: PropTypes.func,
+  order: PropTypes.string,
+  orderBy: PropTypes.string,
+  setSort: PropTypes.func,
+
+  setCheckedProjectIds: PropTypes.func,
+  setSelectAllChecked: PropTypes.func
+};
+
+export default ProjectTableColumnHeader;
diff --git a/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js b/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js
@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Button from "../../Button/Button";
+import RadioButton from "../../UI/RadioButton";
+import "react-datepicker/dist/react-datepicker.css";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const StatusPopup = ({
+  close,
+  header,
+  criteria,
+  setCriteria,
+  order,
+  orderBy,
+  setSort,
+  setCheckedProjectIds,
+  setSelectAllChecked
+}) => {
+  const [newOrder, setNewOrder] = useState(
+    header.id !== orderBy ? null : order
+  );
+
+  // TODO More state variables for status filtering go here
+
+  const setDefault = () => {
+    setCriteria({
+      ...criteria,
+      [header.id]: ""
+    });
+    setCheckedProjectIds([]);
+    setSelectAllChecked(false);
+  };
+
+  const applyChanges = () => {
+    // Set Criteria for status
+    if (newOrder) {
+      setSort(header.id, newOrder);
+    }
+    setCheckedProjectIds([]);
+    setSelectAllChecked(false);
+    close();
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <FontAwesomeIcon
+          style={{
+            backgroundColor: "transparent",
+            color: "black",
+            position: "absolute",
+            top: "0.5rem",
+            right: "0.5rem"
+          }}
+          icon={faX}
+          alt={`Close popup`}
+          onClick={close}
+        />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {/* If there is a dateSnapshotted (i.e., project is snapshot), property value is 1 */}
+        <RadioButton
+          label="Sort Drafts First"
+          value="asc"
+          checked={newOrder == "asc"}
+          onChange={() => setNewOrder("asc")}
+        />
+        <RadioButton
+          label="Sort Snapshots First"
+          value="desc"
+          checked={newOrder === "desc"}
+          onChange={() => setNewOrder("desc")}
+        />
+        <hr style={{ width: "100%" }} />
+      </div>
+      <div>(Under Construction)</div>
+
+      <hr style={{ width: "100%" }} />
+      <div style={{ display: "flex" }}>
+        <Button onClick={setDefault} variant="text">
+          Reset
+        </Button>
+        <Button
+          onClick={applyChanges}
+          variant="contained"
+          color={"colorPrimary"}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+StatusPopup.propTypes = {
+  close: PropTypes.func,
+  header: PropTypes.any,
+  criteria: PropTypes.any,
+  setCriteria: PropTypes.func,
+  order: PropTypes.string,
+  orderBy: PropTypes.string,
+  setSort: PropTypes.func,
+  setCheckedProjectIds: PropTypes.func,
+  setSelectAllChecked: PropTypes.func
+};
+
+export default StatusPopup;