115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import Button from "./Button";
|
|
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
|
|
import { Link } from "react-router-dom";
|
|
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
|
|
import DeleteProject from "./DeleteProject";
|
|
|
|
function ProjectInfoModal(props: {
|
|
projectname: string;
|
|
onClose: () => void;
|
|
onClick: (username: string) => void;
|
|
}): JSX.Element {
|
|
const [users, setUsers] = useState<ProjectMember[]>([]);
|
|
const [times, setTimes] = useState<projectTimes>();
|
|
const totalTime = useRef(0);
|
|
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
|
|
|
|
GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
|
|
|
|
useEffect(() => {
|
|
if (times?.totalTime !== undefined) {
|
|
totalTime.current = times.totalTime;
|
|
}
|
|
}, [times]);
|
|
|
|
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-[61vh] w-[40] overflow-auto">
|
|
<div className="pl-10 pr-10">
|
|
<h1 className="font-bold text-[32px] mb-[20px]">
|
|
{props.projectname}
|
|
</h1>
|
|
<div className="p-1 text-center">
|
|
<h2 className="text-[20px] font-bold">Statistics:</h2>
|
|
</div>
|
|
<div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
|
|
<p className="p-2">Number of members: {users.length}</p>
|
|
<p className="p-2">
|
|
Total time reported:{" "}
|
|
{Math.floor(totalTime.current / 60 / 24) + " d "}
|
|
{Math.floor((totalTime.current / 60) % 24) + " h "}
|
|
{(totalTime.current % 60) + " m "}
|
|
</p>
|
|
</div>
|
|
<div className="h-[6vh] p-7 text-center">
|
|
<h2 className="text-[20px] font-bold">Project members:</h2>
|
|
</div>
|
|
<div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
|
|
<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 className="space-x-5 my-2">
|
|
<Button
|
|
text={"Delete"}
|
|
onClick={function (): void {
|
|
if (
|
|
window.confirm(
|
|
"Are you sure you want to delete this project?",
|
|
)
|
|
) {
|
|
DeleteProject({
|
|
projectToDelete: props.projectname,
|
|
});
|
|
}
|
|
}}
|
|
type="button"
|
|
/>
|
|
<Link
|
|
to={{
|
|
pathname: "/adminProjectAddMember",
|
|
search: props.projectname,
|
|
}}
|
|
>
|
|
<Button
|
|
text={"Add Member"}
|
|
onClick={function (): void {
|
|
return;
|
|
}}
|
|
type="button"
|
|
/>
|
|
</Link>
|
|
<Button
|
|
text={"Close"}
|
|
onClick={function (): void {
|
|
props.onClose();
|
|
}}
|
|
type="button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProjectInfoModal;
|