Added search functionality and inputfield for changing p-name

frontend/src/Components/ProjectInfoModal.tsx

@@ -4,19 +4,47 @@ import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import { Link } from "react-router-dom";
 import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
 import DeleteProject from "./DeleteProject";
+import InputField from "./InputField";
 
 function ProjectInfoModal(props: {
   projectname: string;
   onClose: () => void;
   onClick: (username: string) => void;
 }): JSX.Element {
+  const [showInput, setShowInput] = useState(false);
   const [users, setUsers] = useState<ProjectMember[]>([]);
   const [times, setTimes] = useState<projectTimes>();
+  const [search, setSearch] = useState("");
+  const [newProjName, setNewProjName] = useState("");
   const totalTime = useRef(0);
   GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
 
   GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
 
+  const handleChangeNameView = (): void => {
+    if (showInput) {
+      setShowInput(false);
+    } else {
+      setShowInput(true);
+    }
+  };
+
+  const handleClickChangeName = (): void => {
+    if (newProjName === "") return;
+
+    if (
+      confirm(
+        `Are you sure you want to change name of ${props.projectname} to ${newProjName}?`,
+      )
+    ) {
+      //TODO: change and insert change name functionality
+      alert("Not implemented yet");
+      setNewProjName("");
+    } else {
+      alert("Name was not changed!");
+    }
+  };
+
   useEffect(() => {
     if (times?.totalTime !== undefined) {
       totalTime.current = times.totalTime;
@@ -28,44 +56,90 @@ function ProjectInfoModal(props: {
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[64vh] w-[40] overflow-auto">
         <div className="pl-10 pr-10">
-          <h1 className="font-bold text-[32px] mb-[20px]">
+          <h1 className="font-bold text-[32px]">{props.projectname}</h1>
-            {props.projectname}
+          <p
-          </h1>
+            className="mb-4 hover:font-bold hover:cursor-pointer hover:underline"
-          <div className="p-1 text-center">
+            onClick={handleChangeNameView}
-            <h2 className="text-[20px] font-bold">Statistics:</h2>
+          >
-          </div>
+            (Change project name)
-          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
+          </p>
-            <p className="p-2">Number of members: {users.length}</p>
+          {showInput && (
-            <p className="p-2">
+            <>
+              <h2 className="text-[20px] font-bold pb-2">Change name:</h2>
+              <div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4">
+                <InputField
+                  type={"text"}
+                  value={newProjName}
+                  onChange={function (e): void {
+                    setNewProjName(e.target.value);
+                  }}
+                  placeholder={"Project Name"}
+                />
+                <div className="px-6 grid grid-cols-2 gap-10">
+                  <Button
+                    text={"Change"}
+                    onClick={function (): void {
+                      handleClickChangeName();
+                    }}
+                    type={"submit"}
+                  />
+                  <Button
+                    text={"Close"}
+                    onClick={function (): void {
+                      handleChangeNameView();
+                    }}
+                    type={"submit"}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          <h2 className="text-[20px] font-bold pb-2">Statistics:</h2>
+          <div className="border-2 border-black rounded-2xl px-2 py-1 text-left divide-y-2 flex flex-col overflow-auto">
+            <p>Number of members: {users.length}</p>
+            <p>
               Total time reported:{" "}
               {Math.floor(totalTime.current / 60 / 24) + " d "}
               {Math.floor((totalTime.current / 60) % 24) + " h "}
               {(totalTime.current % 60) + " m "}
             </p>
           </div>
-          <div className="h-[6vh] p-7 text-center">
+          <h3 className="pt-7 text-[20px] font-bold">Project members:</h3>
-            <h2 className="text-[20px] font-bold">Project members:</h2>
+          <div className="">
-          </div>
+            <InputField
-          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
+              placeholder={"Search member"}
-            <ul className="text-left font-medium space-y-2">
+              type={"Text"}
-              <div></div>
+              value={search}
-              {users.map((user) => (
+              onChange={(e) => {
-                <li
+                setSearch(e.target.value);
-                  className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+              }}
-                  key={user.Username}
+            />
-                  onClick={() => {
+            <ul className="border-2 border-black mt-2 p-2 rounded-2xl text-left overflow-auto h-[24vh] font-medium space-y-2">
-                    props.onClick(user.Username);
+              {users
-                  }}
+                .filter((user) => {
-                >
+                  return search.toLowerCase() === ""
-                  <span>
+                    ? user.Username
-                    Name: {user.Username}
+                    : user.Username.toLowerCase().includes(
-                    <div></div>
+                        search.toLowerCase(),
-                    Role: {user.UserRole}
+                      );
-                  </span>
+                })
-                </li>
+                .map((user) => (
-              ))}
+                  <li
+                    className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
+                    key={user.Username}
+                    onClick={() => {
+                      props.onClick(user.Username);
+                    }}
+                  >
+                    <span>
+                      Name: {user.Username}
+                      <div></div>
+                      Role: {user.UserRole}
+                    </span>
+                  </li>
+                ))}
             </ul>
           </div>
           <div className="space-x-5 my-2">