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

Moved MemberAdd to own component and changed design a little

Browse source
This commit is contained in:
Peter KW 2024-03-28 01:33:03 +01:00
parent dc3f91eee1
commit b6d1a2926e
1 changed files with 65 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,39 +1,13 @@
import { useState } from "react"; import { useState } from "react";
import { APIResponse, api } from "../API/API";
import { NewProjMember } from "../Types/goTypes"; import { NewProjMember } from "../Types/goTypes";
import Logo from "../assets/Logo.svg";
import Button from "./Button"; import Button from "./Button";
import GetAllUsers from "./GetAllUsers"; import GetAllUsers from "./GetAllUsers";
import AddMember from "./AddMember";
import BackButton from "./BackButton";
/** /**
* Tries to add a member to a project * Provides UI for adding a member to a project.
* @param {Object} props - A NewProjMember * @returns {JSX.Element} - Returns the component UI for adding a member
* @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 { function AddUserToProject(): JSX.Element {
const [name, setName] = useState(""); const [name, setName] = useState("");
@ -45,45 +19,32 @@ function AddUserToProject(): JSX.Element {
const newMember: NewProjMember = { const newMember: NewProjMember = {
username: name, username: name,
projectname: localStorage.getItem("projectName") ?? "", projectname: localStorage.getItem("projectName") ?? "",
role: "user", role: role,
}; };
return MemberAdd({ memberToAdd: newMember }); return AddMember({ memberToAdd: newMember });
}; };
return ( 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-[75vh] w-[50vh]">
<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]"> <p className="pb-4 mb-2 text-center font-bold text-[18px]">
<form User chosen: [{name}]
className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit" </p>
onSubmit={(e) => { <p className="pb-4 mb-2 text-center font-bold text-[18px]">
e.preventDefault(); Role chosen: [{role}]
MemberAdd({ </p>
memberToAdd: { <p className="pb-4 mb-2 text-center font-bold text-[18px]">
username: "", Project chosen: [{localStorage.getItem("projectName") ?? ""}]
projectname: "", </p>
role: "project_manager", <p className="p-1">Choose role:</p>
},
});
}}
>
<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]"> <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"> <ul className="text-center items-center font-medium space-y-2">
<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" 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={() => { onClick={() => {
setRole("user"); setRole("member");
}} }}
> >
{"User"} {"Member"}
</li> </li>
<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" 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"
@ -95,7 +56,7 @@ function AddUserToProject(): JSX.Element {
</li> </li>
</ul> </ul>
</div> </div>
<p className="p-1">User to add:</p> <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]"> <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"> <ul className="text-center font-medium space-y-2">
<div></div> <div></div>
@ -113,7 +74,7 @@ function AddUserToProject(): JSX.Element {
))} ))}
</ul> </ul>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex space-x-5 items-center justify-between">
<Button <Button
text="Add" text="Add"
onClick={(): void => { onClick={(): void => {
@ -121,11 +82,10 @@ function AddUserToProject(): JSX.Element {
}} }}
type="submit" type="submit"
/> />
<BackButton />
</div> </div>
</form>
<p className="text-center text-gray-500 text-xs"></p> <p className="text-center text-gray-500 text-xs"></p>
</div> </div>
</div>
); );
} }