Merge branch 'develop' of https://github.com/hackforla/tdm-calculator …

…into 1649-modify-searchby-text-box

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

@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import SearchIcon from "../../../images/search.png";
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+  searchBarWrapper: {
+    position: "relative",
+    alignSelf: "center",
+    marginBottom: "0.5rem"
+  },
+  searchBar: {
+    maxWidth: "100%",
+    width: "20em",
+    padding: "12px 12px 12px 48px",
+    marginRight: "0.5rem"
+  },
+  searchIcon: {
+    position: "absolute",
+    left: "16px",
+    top: "14px"
+  },
+  listItem: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    height: "2rem",
+    "&:hover": {
+      backgroundColor: "lightblue"
+    }
+  }
+});
+
+const MultiSelectText = ({ options, selectedOptions, setSelectedOptions }) => {
+  const classes = useStyles();
+  const [searchString, setSearchString] = useState("");
+  const [selectedListItems, setSelectedListItems] = useState([
+    ...selectedOptions
+  ]);
+
+  const filteredOptions = options
+    .filter(o => !!o)
+    .filter(opt => opt.toLowerCase().includes(searchString.toLowerCase()));
+
+  const onChangeSearchString = e => {
+    setSearchString(e.target.value);
+  };
+
+  const handleCheckboxChange = e => {
+    const optionValue = e.target.name;
+    if (selectedListItems.find(so => so.value == optionValue)) {
+      const newSelectedListItems = selectedListItems.filter(
+        selectedOption => selectedOption.value !== optionValue
+      );
+      setSelectedListItems(newSelectedListItems);
+      setSelectedOptions(newSelectedListItems);
+    } else {
+      const newSelectedListItems = [
+        ...selectedListItems,
+        { value: optionValue, label: optionValue }
+      ];
+      setSelectedListItems(newSelectedListItems);
+      setSelectedOptions(newSelectedListItems);
+    }
+  };
+
+  const isChecked = optionValue => {
+    const checked = selectedListItems.find(
+      option => option.value == optionValue
+    );
+    return !!checked;
+  };
+
+  return (
+    <>
+      <div className={classes.searchBarWrapper}>
+        <input
+          type="text"
+          value={searchString}
+          onChange={onChangeSearchString}
+          placeholder="Search"
+          className={classes.searchBar}
+        />
+        <img
+          className={classes.searchIcon}
+          src={SearchIcon}
+          alt="Search Icon"
+        />
+      </div>
+
+      <div style={{ overflow: "scroll", maxHeight: "15rem" }}>
+        <pre>{JSON.stringify(selectedOptions, null, 2)}</pre>
+        {/*  <pre>{JSON.stringify(options, null, 2)}</pre> */}
+
+        {filteredOptions.map(o => (
+          <div key={o} className={classes.listItem}>
+            <input
+              style={{ height: "1.5rem" }}
+              type="checkbox"
+              name={o}
+              checked={isChecked(o)}
+              onChange={handleCheckboxChange}
+            />
+            <span>{o}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+MultiSelectText.propTypes = {
+  options: PropTypes.any,
+  selectedOptions: PropTypes.any,
+  setSelectedOptions: PropTypes.func
+};
+
+export default MultiSelectText;

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

@@ -1,15 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "react-datepicker/dist/react-datepicker.css";
-import { MdFilterAlt } from "react-icons/md";
+import { MdFilterAlt, MdFilterList } 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";
+import { useTheme } from "react-jss";
 
 const ProjectTableColumnHeader = ({
-  uniqueValues,
+  projects,
+  filter,
   header,
   criteria,
   setCriteria,
@@ -19,10 +21,36 @@ const ProjectTableColumnHeader = ({
   setCheckedProjectIds,
   setSelectAllChecked
 }) => {
+  const theme = useTheme();
+
+  // Filter is considered Applied if it is not set
+  // to the default criteria values.
+  const isFilterApplied = () => {
+    let propertyName = header.id;
+    if (header.popupType === "text") {
+      propertyName += "List";
+      return criteria[propertyName].length > 0;
+    }
+    if (header.popupType === "datetime") {
+      return (
+        criteria[header.startDatePropertyName] ||
+        criteria[header.endDatePropertyName]
+      );
+    }
+    if (header.id === "dateHidden") {
+      return criteria.visibility !== "visible";
+    }
+    if (header.id === "dateSnapshotted") {
+      return criteria.type !== "all" || criteria.status !== "active";
+    }
+    return false;
+  };
+
   return (
     <div style={{ width: "100%", height: "100%" }}>
       {header.id !== "checkAllProjects" && header.id !== "contextMenu" ? (
         <Popup
+          lockScroll={true}
           trigger={
             <div
               style={{
@@ -31,14 +59,25 @@ const ProjectTableColumnHeader = ({
               }}
             >
               <span>{header.label}</span>
-              <MdFilterAlt
-                style={{
-                  backgroundColor: "transparent",
-                  color: "white",
-                  marginLeft: "0.5rem"
-                }}
-                alt={`Show column filter and sort popup`}
-              />
+              {isFilterApplied() ? (
+                <MdFilterAlt
+                  style={{
+                    backgroundColor: "transparent",
+                    color: "white",
+                    marginLeft: "0.5rem"
+                  }}
+                  alt={`Show column filter and sort popup`}
+                />
+              ) : (
+                <MdFilterList
+                  style={{
+                    backgroundColor: "transparent",
+                    color: theme.colorLightGray,
+                    marginLeft: "0.5rem"
+                  }}
+                  alt={`Show column filter and sort popup`}
+                />
+              )}
               {/* <FontAwesomeIcon
                 style={{
                   backgroundColor: "transparent",
@@ -71,7 +110,6 @@ const ProjectTableColumnHeader = ({
               />
             ) : header.popupType === "text" ? (
               <TextPopup
-                selectOptions={uniqueValues}
                 close={close}
                 header={header}
                 criteria={criteria}
@@ -81,6 +119,8 @@ const ProjectTableColumnHeader = ({
                 setSort={setSort}
                 setCheckedProjectIds={setCheckedProjectIds}
                 setSelectAllChecked={setSelectAllChecked}
+                projects={projects}
+                filter={filter}
               />
             ) : header.popupType === "visibility" ? (
               <VisibilityPopup
@@ -117,7 +157,8 @@ const ProjectTableColumnHeader = ({
 };
 
 ProjectTableColumnHeader.propTypes = {
-  uniqueValues: PropTypes.any,
+  projects: PropTypes.any,
+  filter: PropTypes.func,
   header: PropTypes.any,
   criteria: PropTypes.any,
   setCriteria: PropTypes.func,

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

@@ -26,6 +26,8 @@ const StatusPopup = ({
   // TODO More state variables for status filtering go here
 
   const setDefault = () => {
+    setTypeSetting("all");
+    setShowDeleted(false);
     setCriteria({
       ...criteria,
       status: showDeleted ? "all" : "active",