From 8a8c5124d94d03d5a145876f75886175a96e821d Mon Sep 17 00:00:00 2001
From: Roslyn Wythe <roslynwythe@gmail.com>
Date: Thu, 5 Sep 2024 00:05:50 -0700
Subject: [PATCH 1/5] Implement filtering by Name, Address, Alt# and Created By
 Columns

---
 .../ProjectTableColumnHeader.js               |  3 +++
 .../Projects/ColumnHeaderPopups/TextPopup.js  | 27 ++++++++++++++++---
 .../src/components/Projects/ProjectsPage.js   |  6 +++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js b/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js
index fc42f0ef..677f7b14 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js
+++ b/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js
@@ -9,6 +9,7 @@ import VisibilityPopup from "./VisibilityPopup";
 import StatusPopup from "./StatusPopup";
 
 const ProjectTableColumnHeader = ({
+  uniqueValues,
   header,
   criteria,
   setCriteria,
@@ -70,6 +71,7 @@ const ProjectTableColumnHeader = ({
               />
             ) : header.popupType === "text" ? (
               <TextPopup
+                selectOptions={uniqueValues}
                 close={close}
                 header={header}
                 criteria={criteria}
@@ -115,6 +117,7 @@ const ProjectTableColumnHeader = ({
 };
 
 ProjectTableColumnHeader.propTypes = {
+  uniqueValues: PropTypes.any,
   header: PropTypes.any,
   criteria: PropTypes.any,
   setCriteria: PropTypes.func,
diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
index 9acb11a8..0d04507b 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
+++ b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
@@ -4,8 +4,10 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
+import ReactSelect from "react-select";
 
 const TextPopup = ({
+  selectOptions,
   close,
   header,
   criteria,
@@ -67,15 +69,33 @@ const TextPopup = ({
         />
         <hr style={{ width: "100%" }} />
       </div>
-      <input
+      {/*  <div>
+        <ul>
+          {textAllCurrentProjects.map((text, index) => (
+            <li key={index}>{text}</li>
+          ))}
+        </ul>
+      </div> */}
+      {/* <input
         type="text"
         placeholder="Search by Partial Text"
         onChange={e => {
           setNewSearchString(e.target.value);
         }}
         value={newSearchString}
-      />
-
+      /> */}
+      <ReactSelect
+        options={selectOptions.map(text => ({
+          value: text,
+          label: text
+        }))}
+        onChange={e => {
+          setNewSearchString(e.value);
+        }}
+        defaultValue={newSearchString}
+        styles={{ maxHeight: 200 }}
+        placeholder="Search by Keyword"
+      ></ReactSelect>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
         <Button onClick={setDefault} variant="text">
@@ -94,6 +114,7 @@ const TextPopup = ({
 };
 
 TextPopup.propTypes = {
+  selectOptions: PropTypes.any,
   close: PropTypes.func,
   header: PropTypes.any,
   criteria: PropTypes.any,
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index 242e2525..26169b7e 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -732,9 +732,15 @@ const ProjectsPage = ({ contentContainerRef }) => {
                   <thead className={classes.thead}>
                     <tr className={classes.tr}>
                       {headerData.map(header => {
+                        //header.id can be used to index the property of the project object except for author
+                        const property =
+                          header.id == "author" ? "fullname" : header.id;
                         return (
                           <td key={header.id}>
                             <ProjectTableColumnHeader
+                              uniqueValues={[
+                                ...new Set(sortedProjects.map(p => p[property]))
+                              ].filter(value => value !== null)}
                               header={header}
                               criteria={criteria}
                               setCriteria={setCriteria}

From a775bd63223b176f0b33334dd15f9348d2796c58 Mon Sep 17 00:00:00 2001
From: Roslyn Wythe <roslynwythe@gmail.com>
Date: Thu, 5 Sep 2024 02:12:44 -0700
Subject: [PATCH 2/5] added search icon in placeholder

---
 .../Projects/ColumnHeaderPopups/TextPopup.js       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
index 0d04507b..db3462f6 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
+++ b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
@@ -5,6 +5,7 @@ import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
 import ReactSelect from "react-select";
+import SearchIcon from "../../../images/search.png";
 
 const TextPopup = ({
   selectOptions,
@@ -39,6 +40,17 @@ const TextPopup = ({
     setSelectAllChecked(false);
   };
 
+  const placeholderComponent = (
+    <div>
+      <img
+        style={{ position: "absolute", left: "16 px", top: "14 px" }}
+        src={SearchIcon}
+        alt="Search Icon"
+      />
+      <div style={{ marginLeft: "30px" }}> Search by Keyword</div>
+    </div>
+  );
+
   return (
     <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ display: "flex", justifyContent: "flex-end" }}>
@@ -94,7 +106,7 @@ const TextPopup = ({
         }}
         defaultValue={newSearchString}
         styles={{ maxHeight: 200 }}
-        placeholder="Search by Keyword"
+        placeholder={placeholderComponent}
       ></ReactSelect>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>

From 2e65de92fafca603d90460cc67a5534a1848fd47 Mon Sep 17 00:00:00 2001
From: Roslyn Wythe <roslynwythe@gmail.com>
Date: Sun, 8 Sep 2024 00:43:17 -0700
Subject: [PATCH 3/5] Use custom UniversalSelect component instead of
 React-Select

---
 .../Projects/ColumnHeaderPopups/TextPopup.js         | 12 ++++++++----
 client/src/components/Projects/ProjectsPage.js       |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
index db3462f6..a8b60843 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
+++ b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
@@ -4,8 +4,8 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
-import ReactSelect from "react-select";
 import SearchIcon from "../../../images/search.png";
+import UniversalSelect from "../../UI/UniversalSelect.jsx";
 
 const TextPopup = ({
   selectOptions,
@@ -96,18 +96,22 @@ const TextPopup = ({
         }}
         value={newSearchString}
       /> */}
-      <ReactSelect
+      <UniversalSelect
         options={selectOptions.map(text => ({
           value: text,
           label: text
         }))}
+        name="inputName"
+        disabled={false}
         onChange={e => {
-          setNewSearchString(e.value);
+          setNewSearchString(e.target.value);
+          console.log(e.target.value);
         }}
+        value={newSearchString}
         defaultValue={newSearchString}
         styles={{ maxHeight: 200 }}
         placeholder={placeholderComponent}
-      ></ReactSelect>
+      ></UniversalSelect>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
         <Button onClick={setDefault} variant="text">
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index 9bda470e..580dd057 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -743,7 +743,9 @@ const ProjectsPage = ({ contentContainerRef }) => {
                             <ProjectTableColumnHeader
                               uniqueValues={[
                                 ...new Set(sortedProjects.map(p => p[property]))
-                              ].filter(value => value !== null)}
+                              ]
+                                .filter(value => value !== null)
+                                .sort()}
                               header={header}
                               criteria={criteria}
                               setCriteria={setCriteria}

From 5a28e38cd655cea7b2db6a75aa5446a4daea60aa Mon Sep 17 00:00:00 2001
From: Roslyn Wythe <roslynwythe@gmail.com>
Date: Sun, 8 Sep 2024 00:45:30 -0700
Subject: [PATCH 4/5] update onChange

---
 client/src/components/Projects/ColumnHeaderPopups/TextPopup.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
index a8b60843..b7ed81e6 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
+++ b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.js
@@ -105,7 +105,6 @@ const TextPopup = ({
         disabled={false}
         onChange={e => {
           setNewSearchString(e.target.value);
-          console.log(e.target.value);
         }}
         value={newSearchString}
         defaultValue={newSearchString}

From 601ddefef53b50f3e40aa9156fbb6ca46c6a5017 Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Thu, 12 Sep 2024 08:08:41 -0700
Subject: [PATCH 5/5] Fix prob with filterdrawer text inputs

---
 client/src/components/Projects/FilterDrawer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/Projects/FilterDrawer.js b/client/src/components/Projects/FilterDrawer.js
index 35d87f4f..8a405626 100644
--- a/client/src/components/Projects/FilterDrawer.js
+++ b/client/src/components/Projects/FilterDrawer.js
@@ -153,6 +153,7 @@ const FilterPopup = ({
         <h4 className={classes.minorHeading}>Project Name</h4>
         <input
           type="text"
+          name="name"
           value={criteria.name}
           onChange={e => handleChange(e, "name")}
           className={classes.textInput}
@@ -161,6 +162,7 @@ const FilterPopup = ({
         <h4 className={classes.minorHeading}>Address</h4>
         <input
           type="text"
+          name="address"
           value={criteria.address}
           onChange={e => handleChange(e, "address")}
           className={classes.textInput}
@@ -170,6 +172,7 @@ const FilterPopup = ({
             <h4 className={classes.minorHeading}>Author</h4>
             <input
               type="text"
+              name="author"
               value={criteria.author}
               onChange={e => handleChange(e, "author")}
               className={classes.textInput}
@@ -180,6 +183,7 @@ const FilterPopup = ({
         <h4 className={classes.minorHeading}>Alternative Number</h4>
         <input
           type="text"
+          name="alternative"
           value={criteria.alternative}
           onChange={e => handleChange(e, "alternative")}
           className={classes.textInput}