79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import Button from "./Button";
|
|
import { UserProjectMember } from "../Types/goTypes";
|
|
import GetUsersInProject from "./GetUsersInProject";
|
|
import { Link } from "react-router-dom";
|
|
|
|
function ProjectInfoModal(props: {
|
|
isVisible: boolean;
|
|
projectname: string;
|
|
onClose: () => void;
|
|
onClick: (username: string) => void;
|
|
}): JSX.Element {
|
|
const [users, setUsers] = useState<UserProjectMember[]>([]);
|
|
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
|
|
if (!props.isVisible) return <></>;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm
|
|
flex justify-center items-center"
|
|
>
|
|
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
|
|
<div className="pl-20 pr-20">
|
|
<h1 className="font-bold text-[32px] mb-[20px]">
|
|
{localStorage.getItem("projectName") ?? ""}
|
|
</h1>
|
|
<h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
|
|
<div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
|
|
<ul className="text-left font-medium space-y-2">
|
|
<div></div>
|
|
{users.map((user) => (
|
|
<li
|
|
className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
|
|
key={user.Username}
|
|
onClick={() => {
|
|
props.onClick(user.Username);
|
|
}}
|
|
>
|
|
<span>
|
|
Name: {user.Username}
|
|
<div></div>
|
|
Role: {user.UserRole}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="space-x-16">
|
|
<Button
|
|
text={"Delete"}
|
|
onClick={function (): void {
|
|
//DELETE PROJECT
|
|
}}
|
|
type="button"
|
|
/>
|
|
<Link to={"/adminProjectAddMember"}>
|
|
<Button
|
|
text={"Add Member"}
|
|
onClick={function (): void {
|
|
return;
|
|
}}
|
|
type="button"
|
|
/>
|
|
</Link>
|
|
<Button
|
|
text={"Close"}
|
|
onClick={function (): void {
|
|
props.onClose();
|
|
}}
|
|
type="button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProjectInfoModal;
|