92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import { NewProjMember } from "../Types/goTypes";
|
|
import Button from "./Button";
|
|
import GetAllUsers from "./GetAllUsers";
|
|
import AddMember from "./AddMember";
|
|
import BackButton from "./BackButton";
|
|
|
|
/**
|
|
* Provides UI for adding a member to a project.
|
|
* @returns {JSX.Element} - Returns the component UI for adding a member
|
|
*/
|
|
function AddUserToProject(): JSX.Element {
|
|
const [name, setName] = useState("");
|
|
const [users, setUsers] = useState<string[]>([]);
|
|
const [role, setRole] = useState("");
|
|
GetAllUsers({ setUsersProp: setUsers });
|
|
|
|
const handleClick = (): boolean => {
|
|
const newMember: NewProjMember = {
|
|
username: name,
|
|
projectname: localStorage.getItem("projectName") ?? "",
|
|
role: role,
|
|
};
|
|
return AddMember({ memberToAdd: newMember });
|
|
};
|
|
|
|
return (
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center rounded-3xl content-center pl-20 pr-20 h-[75vh] w-[50vh]">
|
|
<p className="pb-4 mb-2 text-center font-bold text-[18px]">
|
|
User chosen: [{name}]
|
|
</p>
|
|
<p className="pb-4 mb-2 text-center font-bold text-[18px]">
|
|
Role chosen: [{role}]
|
|
</p>
|
|
<p className="pb-4 mb-2 text-center font-bold text-[18px]">
|
|
Project chosen: [{localStorage.getItem("projectName") ?? ""}]
|
|
</p>
|
|
<p className="p-1">Choose role:</p>
|
|
<div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16vh]">
|
|
<ul className="text-center items-center font-medium space-y-2">
|
|
<li
|
|
className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
|
|
onClick={() => {
|
|
setRole("member");
|
|
}}
|
|
>
|
|
{"Member"}
|
|
</li>
|
|
<li
|
|
className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
|
|
onClick={() => {
|
|
setRole("project_manager");
|
|
}}
|
|
>
|
|
{"Project manager"}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p className="p-1">Choose user:</p>
|
|
<div className="border-2 border-black p-2 rounded-xl text-center overflow-scroll h-[26vh] w-[26vh]">
|
|
<ul className="text-center font-medium space-y-2">
|
|
<div></div>
|
|
{users.map((user) => (
|
|
<li
|
|
className="items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
|
|
key={user}
|
|
value={user}
|
|
onClick={() => {
|
|
setName(user);
|
|
}}
|
|
>
|
|
<span>{user}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex space-x-5 items-center justify-between">
|
|
<Button
|
|
text="Add"
|
|
onClick={(): void => {
|
|
handleClick();
|
|
}}
|
|
type="submit"
|
|
/>
|
|
<BackButton />
|
|
</div>
|
|
<p className="text-center text-gray-500 text-xs"></p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddUserToProject;
|