TTime/frontend/src/Components/MemberInfoModal.tsx

78 lines
2.3 KiB
TypeScript

import Button from "./Button";
import UserProjectListAdmin from "./UserProjectListAdmin";
import { useState } from "react";
import RemoveUserFromProj from "./RemoveUserFromProj";
import ChangeRoleInput from "./ChangeRoleView";
function MemberInfoModal(props: {
projectName: string;
username: string;
role: string;
onClose: () => void;
}): JSX.Element {
const [showRoles, setShowRoles] = useState(false);
const handleChangeRole = (): void => {
if (showRoles) {
setShowRoles(false);
} else {
setShowRoles(true);
}
};
return (
<div
className="fixed inset-0 bg-opacity-30 backdrop-blur-sm
flex justify-center items-center"
>
<div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
<div className="mx-10">
<p className="font-bold text-[30px]">{props.username}</p>
<p className="font-bold text-[20px]">{props.role}</p>
<p
className="hover:font-bold hover:cursor-pointer underline mb-2 mt-1"
onClick={handleChangeRole}
>
(Change Role)
</p>
{showRoles && (
<ChangeRoleInput
projectName={props.projectName}
username={props.username}
currentRole={props.role}
/>
)}
<h2 className="font-bold text-[20px]">Member of these projects:</h2>
<UserProjectListAdmin username={props.username} />
<div className="items-center space-x-6">
<Button
text={"Remove"}
onClick={function (): void {
if (
window.confirm(
"Are you sure you want to remove this user from the project?",
)
) {
RemoveUserFromProj({
userToRemove: props.username,
projectName: props.projectName,
});
}
}}
type="button"
/>
<Button
text={"Close"}
onClick={function (): void {
setShowRoles(false);
props.onClose();
}}
type="button"
/>
</div>
</div>
</div>
</div>
);
}
export default MemberInfoModal;