Update ProjectMembers component to allow deleting users from a project
This commit is contained in:
parent
b56e4ed76e
commit
a266a6f7fc
1 changed files with 55 additions and 20 deletions
|
@ -1,6 +1,7 @@
|
|||
import { useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
|
||||
import { api } from "../API/API";
|
||||
|
||||
function ProjectMembers(): JSX.Element {
|
||||
const { projectName } = useParams();
|
||||
|
@ -11,34 +12,68 @@ function ProjectMembers(): JSX.Element {
|
|||
setUsersProp: setProjectMembers,
|
||||
});
|
||||
|
||||
const handleUserDeleteClick = async (username: string): Promise<void> => {
|
||||
const token = localStorage.getItem("accessToken") ?? "";
|
||||
const response = await api.removeUserFromProject(
|
||||
username,
|
||||
projectName ?? "",
|
||||
token,
|
||||
);
|
||||
console.log(response.data);
|
||||
|
||||
// Remove the deleted user from the state
|
||||
setProjectMembers((prevMembers) =>
|
||||
prevMembers.filter((member) => member.Username !== username),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-[30px] mb-[20px]">
|
||||
All Members In: {projectName}{" "}
|
||||
</h1>
|
||||
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
|
||||
{projectMembers.map((projectMember: ProjectMember, index: number) => (
|
||||
<h1 key={index} className="border-b-2 border-black w-full">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<h1>{projectMember.Username}</h1>
|
||||
<span className="ml-6 mr-2 font-bold">Role:</span>
|
||||
<h1>{projectMember.UserRole}</h1>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="ml-auto flex space-x-4">
|
||||
<Link
|
||||
to={`/otherUsersTimeReports/${projectName}/${projectMember.Username}`}
|
||||
>
|
||||
<h1 className="underline cursor-pointer font-bold">
|
||||
View Reports
|
||||
</h1>
|
||||
</Link>
|
||||
{projectMembers.map((projectMember: ProjectMember, index: number) => {
|
||||
if (projectMember.Username === "admin") {
|
||||
return null; // Skip rendering for admin user
|
||||
}
|
||||
return (
|
||||
<h1 key={index} className="border-b-2 border-black w-full">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<h1>{projectMember.Username}</h1>
|
||||
<span className="ml-6 mr-2 font-bold">Role:</span>
|
||||
<h1>{projectMember.UserRole}</h1>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="ml-auto flex space-x-4">
|
||||
{projectMember.Username !==
|
||||
localStorage.getItem("username") && (
|
||||
<h1
|
||||
className="underline cursor-pointer font-bold"
|
||||
onClick={() => {
|
||||
confirm(
|
||||
"Are you sure you want to delete this user?",
|
||||
) &&
|
||||
void handleUserDeleteClick(projectMember.Username);
|
||||
}}
|
||||
>
|
||||
Delete User
|
||||
</h1>
|
||||
)}
|
||||
<Link
|
||||
to={`/otherUsersTimeReports/${projectName}/${projectMember.Username}`}
|
||||
>
|
||||
<h1 className="underline cursor-pointer font-bold">
|
||||
View Reports
|
||||
</h1>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
))}
|
||||
</h1>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue