Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added search functionality and changed design a little

Browse source
This commit is contained in:
Peter KW 2024-04-11 00:34:27 +02:00
parent 059a322d9e
commit c8553d4eae
1 changed files with 39 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/Components/AddUserToProject.tsx
View file

@ -1,9 +1,9 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Button from "./Button"; import Button from "./Button";
import AddMember, { AddMemberInfo } from "./AddMember"; import AddMember, { AddMemberInfo } from "./AddMember";
import BackButton from "./BackButton";
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject"; import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
import GetAllUsers from "./GetAllUsers"; import GetAllUsers from "./GetAllUsers";
import InputField from "./InputField";
/** /**
* Provides UI for adding a member to a project. * Provides UI for adding a member to a project.
@ -13,6 +13,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
const [names, setNames] = useState<string[]>([]); const [names, setNames] = useState<string[]>([]);
const [users, setUsers] = useState<string[]>([]); const [users, setUsers] = useState<string[]>([]);
const [usersProj, setUsersProj] = useState<ProjectMember[]>([]); const [usersProj, setUsersProj] = useState<ProjectMember[]>([]);
const [search, setSearch] = useState("");
// Gets all users and project members for filtering // Gets all users and project members for filtering
GetAllUsers({ setUsersProp: setUsers }); GetAllUsers({ setUsersProp: setUsers });
@ -36,8 +37,10 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
// Attempts to add all of the selected users to the project // Attempts to add all of the selected users to the project
const handleAddClick = async (): Promise<void> => { const handleAddClick = async (): Promise<void> => {
if (names.length === 0) if (names.length === 0) {
alert("You have to choose at least one user to add"); alert("You have to choose at least one user to add");
return;
}
for (const name of names) { for (const name of names) {
const newMember: AddMemberInfo = { const newMember: AddMemberInfo = {
userName: name, userName: name,
@ -60,32 +63,47 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
}; };
return ( return (
<div className="border-4 border-black bg-white flex flex-col items-center pt-10 rounded-3xl content-center pl-20 pr-20 h-[63vh] w-[50] overflow-auto"> <div className="border-4 border-black bg-white flex flex-col items-center py-10 px-20 rounded-3xl content-center overflow-auto">
<h1 className="text-center font-bold text-[36px] pb-10"> <h1 className="text-center font-bold text-[36px] pb-10">
{props.projectName} {props.projectName}
</h1> </h1>
<p className="p-1 text-center font-bold text-[26px]"> <p className="p-1 text-center font-bold text-[26px]">
Choose users to add: Choose users to add:
</p> </p>
<div className="border-2 border-black pl-2 pr-2 pb-2 rounded-xl text-center overflow-auto h-[26vh] w-[26vh]">
<ul className="text-center font-medium space-y-2"> <div>
<InputField
placeholder={"Search users"}
type={"Text"}
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
<ul className="font-medium space-y-2 border-2 border-black mt-2 px-2 pb-2 rounded-2xl text-center overflow-auto h-[26vh] w-[34vh]">
<div></div> <div></div>
{users.map((user) => ( {users
<li .filter((user) => {
className={ return search.toLowerCase() === ""
names.includes(user) ? user
? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black" : user.toLowerCase().includes(search.toLowerCase());
: "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 hover:text-slate-100 hover:cursor-pointer" })
} .map((user) => (
key={user} <li
value={user} className={
onClick={() => { names.includes(user)
handleUserClick(user); ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 transition-all hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
}} : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 transition-all hover:text-white hover:cursor-pointer"
> }
<span>{user}</span> key={user}
</li> value={user}
))} onClick={() => {
handleUserClick(user);
}}
>
<span>{user}</span>
</li>
))}
</ul> </ul>
</div> </div>
<p className="pt-10 pb-5 underline text-center font-bold text-[18px]"> <p className="pt-10 pb-5 underline text-center font-bold text-[18px]">
@ -99,9 +117,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
}} }}
type="button" type="button"
/> />
<BackButton />
</div> </div>
<p className="text-center text-gray-500 text-xs"></p>
</div> </div>
); );
} }