109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import Button from "./Button";
|
|
import AddMember, { AddMemberInfo } from "./AddMember";
|
|
import BackButton from "./BackButton";
|
|
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
|
|
import GetAllUsers from "./GetAllUsers";
|
|
|
|
/**
|
|
* Provides UI for adding a member to a project.
|
|
* @returns {JSX.Element} - Returns the component UI for adding a member
|
|
*/
|
|
function AddUserToProject(props: { projectName: string }): JSX.Element {
|
|
const [names, setNames] = useState<string[]>([]);
|
|
const [users, setUsers] = useState<string[]>([]);
|
|
const [usersProj, setUsersProj] = useState<ProjectMember[]>([]);
|
|
|
|
// Gets all users and project members for filtering
|
|
GetAllUsers({ setUsersProp: setUsers });
|
|
GetUsersInProject({
|
|
setUsersProp: setUsersProj,
|
|
projectName: props.projectName,
|
|
});
|
|
/*
|
|
* Filters the members from users so that users who are already
|
|
* members are not shown
|
|
*/
|
|
useEffect(() => {
|
|
setUsers((prevUsers) => {
|
|
const filteredUsers = prevUsers.filter(
|
|
(user) =>
|
|
!usersProj.some((projectUser) => projectUser.Username === user),
|
|
);
|
|
return filteredUsers;
|
|
});
|
|
}, [usersProj]);
|
|
|
|
// Attempts to add all of the selected users to the project
|
|
const handleAddClick = async (): Promise<void> => {
|
|
if (names.length === 0)
|
|
alert("You have to choose at least one user to add");
|
|
for (const name of names) {
|
|
const newMember: AddMemberInfo = {
|
|
userName: name,
|
|
projectName: props.projectName,
|
|
};
|
|
await AddMember({ memberToAdd: newMember });
|
|
}
|
|
setNames([]);
|
|
location.reload();
|
|
};
|
|
|
|
// Updates the names that have been selected
|
|
const handleUserClick = (user: string): void => {
|
|
setNames((prevNames): string[] => {
|
|
if (!prevNames.includes(user)) {
|
|
return [...prevNames, user];
|
|
}
|
|
return prevNames.filter((name) => name !== user);
|
|
});
|
|
};
|
|
|
|
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">
|
|
<h1 className="text-center font-bold text-[36px] pb-10">
|
|
{props.projectName}
|
|
</h1>
|
|
<p className="p-1 text-center font-bold text-[26px]">
|
|
Choose users to add:
|
|
</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></div>
|
|
{users.map((user) => (
|
|
<li
|
|
className={
|
|
names.includes(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"
|
|
: "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 hover:text-slate-100 hover:cursor-pointer"
|
|
}
|
|
key={user}
|
|
value={user}
|
|
onClick={() => {
|
|
handleUserClick(user);
|
|
}}
|
|
>
|
|
<span>{user}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<p className="pt-10 pb-5 underline text-center font-bold text-[18px]">
|
|
Number of users to be added: {names.length}
|
|
</p>
|
|
<div className="space-x-10 items-center">
|
|
<Button
|
|
text="Add"
|
|
onClick={(): void => {
|
|
void handleAddClick();
|
|
}}
|
|
type="button"
|
|
/>
|
|
<BackButton />
|
|
</div>
|
|
<p className="text-center text-gray-500 text-xs"></p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddUserToProject;
|