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 { APIResponse, api } from "../API/API";
import { NewProjMember } from "../Types/goTypes";
import Logo from "../assets/Logo.svg";
import Button from "./Button";
import GetAllUsers from "./GetAllUsers";
import AddMember from "./AddMember";
import BackButton from "./BackButton";
/**
* 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
* 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("");
@ -45,45 +19,32 @@ function AddUserToProject(): JSX.Element {
const newMember: NewProjMember = {
username: name,
projectname: localStorage.getItem("projectName") ?? "",
role: "user",
role: role,
};
return MemberAdd({ memberToAdd: newMember });
return AddMember({ 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-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("user");
setRole("member");
}}
>
{"User"}
{"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"
@ -95,7 +56,7 @@ function AddUserToProject(): JSX.Element {
</li>
</ul>
</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]">
<ul className="text-center font-medium space-y-2">
<div></div>
@ -113,7 +74,7 @@ function AddUserToProject(): JSX.Element {
))}
</ul>
</div>
<div className="flex items-center justify-between">
<div className="flex space-x-5 items-center justify-between">
<Button
text="Add"
onClick={(): void => {
@ -121,11 +82,10 @@ function AddUserToProject(): JSX.Element {
}}
type="submit"
/>
<BackButton />
</div>
</form>
<p className="text-center text-gray-500 text-xs"></p>
</div>
</div>
);
}