From b86e5257f947efa11db61cdbee7fb9736df98388 Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Fri, 12 Apr 2024 20:19:10 -0400
Subject: [PATCH 1/5] added search functionality for tags

---
 compass/components/TagsInput/Index.tsx | 7 +++++--
 compass/package-lock.json              | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index ca0c947..7ae393e 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -20,9 +20,12 @@ const TagsInput: React.FC<TagsInputProps> = ({
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
+    setOptions(() => {
+      const newOptions = presetOptions.filter(item => item.includes(e.target.value.toLowerCase()));
+      return new Set(newOptions);
+    })
+    setInputValue(e.target.value); // Update input value state
   };
-
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim()) {
       setTags((prevTags) => new Set(prevTags).add(inputValue));
diff --git a/compass/package-lock.json b/compass/package-lock.json
index 1c26973..fd7ab14 100644
--- a/compass/package-lock.json
+++ b/compass/package-lock.json
@@ -4395,4 +4395,3 @@
     }
   }
 }
-

From e3b31b086192fa958eefa9f8bba4cc1071c78e71 Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Sat, 13 Apr 2024 10:36:40 -0400
Subject: [PATCH 2/5] progress on handling clicks.

---
 compass/components/TagsInput/Index.tsx | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index 7ae393e..7e3b26f 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "tailwindcss/tailwind.css";
 import { TagsArray } from "./TagsArray"; 
 import { TagDropdown } from "./TagDropdown";
@@ -18,6 +18,25 @@ const TagsInput: React.FC<TagsInputProps> = ({
     new Set(presetValue ? [presetValue] : [])
   );
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
+  const dropdown = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    console.log(cellSelected);
+    if (!cellSelected) {
+      return;
+    }
+    function handleClick(event: MouseEvent) {
+      if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
+        setCellSelected(false);
+      }
+    }
+
+    if (cellSelected){
+      window.addEventListener("click", handleClick);
+    }
+
+    return () => window.removeEventListener("click", handleClick);
+  }, [cellSelected])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOptions(() => {
@@ -85,10 +104,14 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
 
   return (
-    <div className="cursor-pointer" onClick={() => setCellSelected(true)}>
+    <div className="cursor-pointer" onClick={(e) => {
+      e.stopPropagation();
+      setCellSelected(true)
+    }}>
       {!cellSelected ? (
         <TagsArray handleDelete={handleDeleteTag} tags={tags} />
       ) : (
+        <div ref={dropdown}>
         <div className="absolute w-64 z-50 -ml-3 -mt-7">
           <div className="rounded-md border border-gray-200 shadow">
             <div className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
@@ -117,6 +140,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
             </div>
           </div>
         </div>
+        </div>
       )}
     </div>
   );

From 316a986f33a17ff4644d9f03df8eefe2e9f5dc60 Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Mon, 15 Apr 2024 00:43:35 -0400
Subject: [PATCH 3/5] fixed problem where multiple tag dropdowns could be open
 at once.

---
 compass/components/Table/Index.tsx     |  7 +++-
 compass/components/TagsInput/Index.tsx | 51 ++++++++++++++++----------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 7b5ee92..5e1f49b 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -8,7 +8,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { RowOptionMenu } from "./RowOptionMenu";
 import { RowOpenAction } from "./RowOpenAction";
 import { TableAction } from "./TableAction";
@@ -32,6 +32,8 @@ type User = {
 
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
+
+
   const columns = [
     columnHelper.display({
       id: "options",
@@ -42,7 +44,8 @@ export const Table = () => {
       cell: (info) => <RowOpenAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
-      cell: (info) => <TagsInput presetValue={info.getValue() }presetOptions={["administrator","volunteer","employee"]}  />,
+      cell: (info) => <TagsInput presetValue={info.getValue() }
+      presetOptions={["administrator","volunteer","employee"]}/>,
     }),
     columnHelper.accessor("email", {
       header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,
diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index 7e3b26f..6590a88 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -20,23 +20,41 @@ const TagsInput: React.FC<TagsInputProps> = ({
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
   const dropdown = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    console.log(cellSelected);
+  // useEffect(() => {
+  //   if (!cellSelected) {
+  //     return;
+  //   }
+  //   function handleOutsideClick(event: MouseEvent) {
+  //     if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
+  //       console.log("here2")
+  //       setCellSelected(false);
+  //     }
+  //   }
+
+  //   if (cellSelected){
+  //     window.addEventListener("click", handleOutsideClick);
+  //   }
+
+  //   return () => window.removeEventListener("click", handleOutsideClick);
+  // }, [cellSelected])
+
+  const handleClick = () => {
     if (!cellSelected) {
-      return;
-    }
-    function handleClick(event: MouseEvent) {
-      if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
-        setCellSelected(false);
-      }
+      setCellSelected(true);
+      // Add event listener only after setting cellSelected to true
+      setTimeout(() => {
+        window.addEventListener("click", handleOutsideClick);
+      }, 100);
     }
+  }
 
-    if (cellSelected){
-      window.addEventListener("click", handleClick);
+  const handleOutsideClick = (event) => {
+    if (dropdown.current && !dropdown.current.contains(event.target)) {
+      setCellSelected(false);
+      // Remove event listener after handling outside click
+      window.removeEventListener("click", handleOutsideClick);
     }
-
-    return () => window.removeEventListener("click", handleClick);
-  }, [cellSelected])
+  };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOptions(() => {
@@ -100,14 +118,9 @@ const TagsInput: React.FC<TagsInputProps> = ({
       });
     }
   };
-  
-
 
   return (
-    <div className="cursor-pointer" onClick={(e) => {
-      e.stopPropagation();
-      setCellSelected(true)
-    }}>
+    <div className="cursor-pointer" onClick={handleClick}>
       {!cellSelected ? (
         <TagsArray handleDelete={handleDeleteTag} tags={tags} />
       ) : (

From b1b3313de0c50b21166170e5c33825cc584e7299 Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Mon, 15 Apr 2024 00:54:50 -0400
Subject: [PATCH 4/5] New options now display on all rows

---
 compass/components/Table/Index.tsx     |  8 +++++++-
 compass/components/TagsInput/Index.tsx | 23 ++++-------------------
 compass/components/TagsInput/Tag.tsx   |  3 ++-
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 5e1f49b..fdc11bd 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -32,7 +32,11 @@ type User = {
 
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
+  const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]);
 
+  const handleAddTag = (newTag) => {
+    setPresetOptions((prevOptions) => [...prevOptions, newTag]);
+  }
 
   const columns = [
     columnHelper.display({
@@ -45,7 +49,9 @@ export const Table = () => {
     }),
     columnHelper.accessor("role", {
       cell: (info) => <TagsInput presetValue={info.getValue() }
-      presetOptions={["administrator","volunteer","employee"]}/>,
+      presetOptions={presetOptions}
+      addOption={handleAddTag}
+      />,
     }),
     columnHelper.accessor("email", {
       header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,
diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index 6590a88..ab9a98f 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
 import "tailwindcss/tailwind.css";
 import { TagsArray } from "./TagsArray"; 
 import { TagDropdown } from "./TagDropdown";
@@ -11,6 +11,7 @@ interface TagsInputProps {
 const TagsInput: React.FC<TagsInputProps> = ({
   presetValue,
   presetOptions,
+  addOption,
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [cellSelected, setCellSelected] = useState(false);
@@ -20,24 +21,6 @@ const TagsInput: React.FC<TagsInputProps> = ({
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
   const dropdown = useRef<HTMLDivElement>(null);
 
-  // useEffect(() => {
-  //   if (!cellSelected) {
-  //     return;
-  //   }
-  //   function handleOutsideClick(event: MouseEvent) {
-  //     if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
-  //       console.log("here2")
-  //       setCellSelected(false);
-  //     }
-  //   }
-
-  //   if (cellSelected){
-  //     window.addEventListener("click", handleOutsideClick);
-  //   }
-
-  //   return () => window.removeEventListener("click", handleOutsideClick);
-  // }, [cellSelected])
-
   const handleClick = () => {
     if (!cellSelected) {
       setCellSelected(true);
@@ -63,8 +46,10 @@ const TagsInput: React.FC<TagsInputProps> = ({
     })
     setInputValue(e.target.value); // Update input value state
   };
+
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim()) {
+      addOption(inputValue);
       setTags((prevTags) => new Set(prevTags).add(inputValue));
       setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
       setInputValue("");
diff --git a/compass/components/TagsInput/Tag.tsx b/compass/components/TagsInput/Tag.tsx
index 1d5999c..f44ba9c 100644
--- a/compass/components/TagsInput/Tag.tsx
+++ b/compass/components/TagsInput/Tag.tsx
@@ -1,4 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
+import React, { useState } from "react";
 
 export const Tag = ({ children, handleDelete, active = false }) => {
 
@@ -12,4 +13,4 @@ export const Tag = ({ children, handleDelete, active = false }) => {
       )}
     </span>
   );
-};
+};
\ No newline at end of file

From 8667ef64314289602e908bfd80216a913bcffb5e Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Mon, 15 Apr 2024 01:32:26 -0400
Subject: [PATCH 5/5] cleanup and checkpoint

---
 compass/components/Table/Index.tsx     | 16 ++++++++++++----
 compass/components/TagsInput/Index.tsx | 10 ++++++++--
 compass/components/TagsInput/Tag.tsx   |  4 +++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index fdc11bd..0cc773b 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -33,10 +33,16 @@ type User = {
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
   const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]);
+  const [tagColors, setTagColors] = useState(new Map());
 
-  const handleAddTag = (newTag) => {
-    setPresetOptions((prevOptions) => [...prevOptions, newTag]);
-  }
+  const getTagColor = (tag: string) => {
+    if (!tagColors.has(tag)) {
+      const colors = ["bg-cyan-100", "bg-blue-100", "bg-green-100", "bg-yellow-100", "bg-purple-100"];
+      const randomColor = colors[Math.floor(Math.random() * colors.length)];
+      setTagColors(new Map(tagColors).set(tag, randomColor));
+    }
+    return tagColors.get(tag);
+  };
 
   const columns = [
     columnHelper.display({
@@ -50,7 +56,9 @@ export const Table = () => {
     columnHelper.accessor("role", {
       cell: (info) => <TagsInput presetValue={info.getValue() }
       presetOptions={presetOptions}
-      addOption={handleAddTag}
+      setPresetOptions={setPresetOptions}
+      getTagColor={getTagColor}
+      setTagColors={setTagColors}
       />,
     }),
     columnHelper.accessor("email", {
diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index ab9a98f..60f695c 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -11,7 +11,8 @@ interface TagsInputProps {
 const TagsInput: React.FC<TagsInputProps> = ({
   presetValue,
   presetOptions,
-  addOption,
+  setPresetOptions,
+  getTagColor
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [cellSelected, setCellSelected] = useState(false);
@@ -49,7 +50,11 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim()) {
-      addOption(inputValue);
+      // setPresetOptions((prevPreset) => {
+      //   const uniqueSet = new Set(presetOptions);
+      //   uniqueSet.add(inputValue);
+      //   return Array.from(uniqueSet);
+      // });
       setTags((prevTags) => new Set(prevTags).add(inputValue));
       setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
       setInputValue("");
@@ -72,6 +77,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
   };
 
   const handleDeleteTagOption = (tagToDelete: string) => {
+    // setPresetOptions(presetOptions.filter(tag => tag !== tagToDelete));
     setOptions((prevOptions) => {
       const updatedOptions = new Set(prevOptions);
       updatedOptions.delete(tagToDelete);
diff --git a/compass/components/TagsInput/Tag.tsx b/compass/components/TagsInput/Tag.tsx
index f44ba9c..c31950f 100644
--- a/compass/components/TagsInput/Tag.tsx
+++ b/compass/components/TagsInput/Tag.tsx
@@ -1,8 +1,10 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 export const Tag = ({ children, handleDelete, active = false }) => {
 
+  const [tagColor, setTagColor] = useState('');
+
   return (
     <span className={`font-normal bg-cyan-100 text-gray-800 flex flex-row p-1 px-2 rounded-lg`}>
       {children}