132 lines
4.4 KiB
TypeScript
132 lines
4.4 KiB
TypeScript
import { useState } from "react";
|
|
import { APIResponse, api } from "../API/API";
|
|
import { NewProjMember } from "../Types/goTypes";
|
|
import Logo from "../assets/Logo.svg";
|
|
import Button from "./Button";
|
|
import GetAllUsers from "./GetAllUsers";
|
|
|
|
/**
|
|
* Tries to add a member to a project
|
|
* @param {Object} props - A NewProjMember
|
|
* @returns {boolean} True if added, false if not
|
|
*/
|
|
function MemberAdd(props: { memberToAdd: NewProjMember }): boolean {
|
|
let added = false;
|
|
|
|
api
|
|
.addUserToProject(
|
|
props.memberToAdd,
|
|
localStorage.getItem("accessToken") ?? "",
|
|
)
|
|
.then((response: APIResponse<NewProjMember>) => {
|
|
if (response.success) {
|
|
added = true;
|
|
} else {
|
|
console.error(response.message);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("An error occurred during member add:", error);
|
|
});
|
|
return added;
|
|
}
|
|
|
|
/**
|
|
* Provides UI for adding a project to the system.
|
|
* @returns {JSX.Element} - Returns the component UI for adding a project
|
|
*/
|
|
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: "user",
|
|
};
|
|
return MemberAdd({ memberToAdd: newMember });
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-fit w-screen items-center justify-center">
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center rounded-3xl content-center pl-20 pr-20 h-[84vh] w-[50vh]">
|
|
<form
|
|
className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
MemberAdd({
|
|
memberToAdd: {
|
|
username: "",
|
|
projectname: "",
|
|
role: "project_manager",
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
<img
|
|
src={Logo}
|
|
className="logo w-[7vw] mb-10 mt-10"
|
|
alt="TTIME Logo"
|
|
/>
|
|
<h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
|
|
Add {name} to {localStorage.getItem("projectName") ?? ""} as {role}
|
|
</h3>
|
|
<p className="p-1">Role for user:</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("user");
|
|
}}
|
|
>
|
|
{"User"}
|
|
</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">User to add:</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 items-center justify-between">
|
|
<Button
|
|
text="Add"
|
|
onClick={(): void => {
|
|
handleClick();
|
|
}}
|
|
type="submit"
|
|
/>
|
|
</div>
|
|
</form>
|
|
<p className="text-center text-gray-500 text-xs"></p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddUserToProject;
|