Merge pull request #2 from tuckner/filter

Add board filter to header
tuckner · Dec 16, 2023 · 5d896af · 5d896af
2 parents d24596a + 2c072ba
commit 5d896af
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/src/components/Board/TaskItem.tsx b/src/components/Board/TaskItem.tsx
@@ -23,6 +23,7 @@ export default function TaskItem({ tasks, index }: Props) {
         {(provided, snapshot) => {
           return (
             <div
+              id="task-item"
               ref={provided.innerRef}
               data-snapshot={snapshot}
               {...provided.draggableProps}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -14,7 +14,7 @@ import SideBar from "./SideBar";
 import { useSelector } from "react-redux";
 import { appData } from "redux/boardSlice";
 import { IBoard } from "types";
-import { exportConfig, resetBoard } from "utilis";
+import { exportConfig, resetBoard, handleFilterChange } from "utilis";
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -69,7 +69,20 @@ export default function Header() {
                   </span>
                 </div>
               )}
+
+              <div className="flex items-center">
+              <div className="pr-4"></div>
               <div className="flex items-center">
+                <label htmlFor="Search" className="sr-only"> Search </label>
+                <input
+                  type="text"
+                  id="Search"
+                  placeholder="Filter..."
+                  onChange={(e) => handleFilterChange(e.target.value)}
+                  className="w-full rounded-md border-gray-200 py-2.5 pl-3 pe-10 shadow-sm sm:text-sm"
+                />
+              </div>
+              <div className="pr-4"></div>
                 <button
                   aria-label="Add capability"
                   onClick={() => setIsOpen(true)}

diff --git a/src/utilis/index.ts b/src/utilis/index.ts
@@ -63,6 +63,25 @@ export const importConfig = (file: File) => {
   }
 };
 
+export const handleFilterChange = (newFilter: string | null) => {
+  if (newFilter !== null) {
+    const taskItems = document.querySelectorAll("div#task-item");
+    taskItems.forEach((taskItem) => {
+      const taskName = taskItem.textContent?.toLowerCase();
+      if (taskName && taskName.includes(newFilter.toLowerCase())) {
+        (taskItem as HTMLElement).style.opacity = "1";
+      } else {
+        (taskItem as HTMLElement).style.opacity = "0.2";
+      }
+    });
+  } else {
+    const taskItems = document.querySelectorAll("div#task-item");
+    taskItems.forEach((taskItem) => {
+      (taskItem as HTMLElement).style.display = "1";
+    });
+  }
+};
+
 export const saveState = (state: any) => {
   try {
     const serializesState = JSON.stringify(state);