From 1e0b32d32d1cc354b7a2236d65824378d45267ef Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Thu, 11 Apr 2024 00:39:33 +0200
Subject: [PATCH] Added search and some design changes

---
 frontend/src/Components/ProjectListAdmin.tsx | 41 ++++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Components/ProjectListAdmin.tsx b/frontend/src/Components/ProjectListAdmin.tsx
index 294a131..9c98855 100644
--- a/frontend/src/Components/ProjectListAdmin.tsx
+++ b/frontend/src/Components/ProjectListAdmin.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
 import MemberInfoModal from "./MemberInfoModal";
+import InputField from "./InputField";
 
 /**
  * A list of projects for admin manage projects page, that sets an onClick
@@ -21,6 +22,7 @@ export function ProjectListAdmin(props: {
   const [projectName, setProjectName] = useState("");
   const [userModalVisible, setUserModalVisible] = useState(false);
   const [username, setUsername] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleClickUser = (username: string): void => {
     setUsername(username);
@@ -44,6 +46,7 @@ export function ProjectListAdmin(props: {
 
   return (
     <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>
       {projectModalVisible && (
         <ProjectInfoModal
           onClose={handleCloseProject}
@@ -59,18 +62,32 @@ export function ProjectListAdmin(props: {
         />
       )}
       <div>
-        <ul className="font-bold underline text-[30px] cursor-pointer padding">
-          {props.projects.map((project) => (
-            <li
-              className="pt-5"
-              key={project.name}
-              onClick={() => {
-                handleClickProject(project.name);
-              }}
-            >
-              {project.name}
-            </li>
-          ))}
+        <InputField
+          placeholder={"Search"}
+          type={"Text"}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
+        <ul className="mt-3 border-2 text-left border-black rounded-2xl px-2 divide-y divide-gray-300 font-semibold text-[30px] cursor-pointer overflow-auto h-[65vh] w-[50vw]">
+          {props.projects
+            .filter((project) => {
+              return search.toLowerCase() === ""
+                ? project.name
+                : project.name.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((project) => (
+              <li
+                className="hover:font-extrabold hover:underline p-1"
+                key={project.name}
+                onClick={() => {
+                  handleClickProject(project.name);
+                }}
+              >
+                {project.name}
+              </li>
+            ))}
         </ul>
       </div>
     </>