73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import Button from "./Button";
|
|
import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
|
|
|
|
export default function ChangeRoleView(props: {
|
|
projectName: string;
|
|
username: string;
|
|
}): JSX.Element {
|
|
const [selectedRole, setSelectedRole] = useState<
|
|
"project_manager" | "member" | ""
|
|
>("");
|
|
|
|
const handleRoleChange = (
|
|
event: React.ChangeEvent<HTMLInputElement>,
|
|
): void => {
|
|
if (event.target.value === "member") {
|
|
setSelectedRole(event.target.value);
|
|
} else if (event.target.value === "project_manager") {
|
|
setSelectedRole(event.target.value);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
|
|
event.preventDefault();
|
|
const roleChangeInfo: ProjectRoleChange = {
|
|
username: props.username,
|
|
projectname: props.projectName,
|
|
role: selectedRole,
|
|
};
|
|
ChangeRole(roleChangeInfo);
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-auto rounded-lg">
|
|
<h1 className="font-bold text-[20px]">Select role:</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
|
|
<div className="hover:font-bold">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
value="project_manager"
|
|
checked={selectedRole === "project_manager"}
|
|
onChange={handleRoleChange}
|
|
className="ml-2 mr-2 mb-3"
|
|
/>
|
|
Project manager
|
|
</label>
|
|
</div>
|
|
<div className="hover:font-bold">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
value="member"
|
|
checked={selectedRole === "member"}
|
|
onChange={handleRoleChange}
|
|
className="ml-2 mr-2"
|
|
/>
|
|
Member
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
text="Change"
|
|
onClick={(): void => {
|
|
return;
|
|
}}
|
|
type="submit"
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|