Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Checks if user already is selected role + minor design change

Browse source
This commit is contained in:
Peter KW 2024-04-13 21:07:08 +02:00
parent 35a9c750d1
commit 88c6757bd3
2 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/Components/ChangeRoleView.tsx
View file

@ -5,6 +5,7 @@ import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
export default function ChangeRoleView(props: { export default function ChangeRoleView(props: {
projectName: string; projectName: string;
username: string; username: string;
currentRole: string;
}): JSX.Element { }): JSX.Element {
const [selectedRole, setSelectedRole] = useState< const [selectedRole, setSelectedRole] = useState<
"project_manager" | "member" | "" "project_manager" | "member" | ""
@ -21,7 +22,12 @@ export default function ChangeRoleView(props: {
}; };
const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
console.log("Cur: " + props.currentRole + " " + "new: " + selectedRole);
event.preventDefault(); event.preventDefault();
if (selectedRole === props.currentRole) {
alert(`Already ${props.currentRole}, nothing changed`);
return;
}
const roleChangeInfo: ProjectRoleChange = { const roleChangeInfo: ProjectRoleChange = {
username: props.username, username: props.username,
projectname: props.projectName, projectname: props.projectName,
@ -31,35 +37,32 @@ export default function ChangeRoleView(props: {
}; };
return ( return (
<div className="overflow-auto rounded-lg"> <div className="overflow-auto">
<h1 className="font-bold text-[20px]">Select role:</h1> <h1 className="font-bold text-[20px]">Select role:</h1>
<form onSubmit={handleSubmit}> <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="py-1 px-1 w-full self-start text-left font-medium overflow-auto border-2 border-black rounded-2xl">
<div className="hover:font-bold"> <label className="hover:cursor-pointer hover:font-bold">
<label>
<input <input
type="radio" type="radio"
value="project_manager" value="project_manager"
checked={selectedRole === "project_manager"} checked={selectedRole === "project_manager"}
onChange={handleRoleChange} onChange={handleRoleChange}
className="ml-2 mr-2 mb-3" className="m-2"
/> />
Project manager Project manager
</label> </label>
</div> <br />
<div className="hover:font-bold"> <label className="hover:cursor-pointer hover:font-bold">
<label>
<input <input
type="radio" type="radio"
value="member" value="member"
checked={selectedRole === "member"} checked={selectedRole === "member"}
onChange={handleRoleChange} onChange={handleRoleChange}
className="ml-2 mr-2" className="m-2 hover:cursor-pointer"
/> />
Member Member
</label> </label>
</div> </div>
</div>
<Button <Button
text="Change" text="Change"
onClick={(): void => { onClick={(): void => {

11
frontend/src/Components/MemberInfoModal.tsx
View file

@ -1,12 +1,13 @@
import Button from "./Button"; import Button from "./Button";
import UserProjectListAdmin from "./UserProjectListAdmin"; import UserProjectListAdmin from "./UserProjectListAdmin";
import { useState } from "react"; import { useState } from "react";
import ChangeRoleView from "./ChangeRoleView";
import RemoveUserFromProj from "./RemoveUserFromProj"; import RemoveUserFromProj from "./RemoveUserFromProj";
import ChangeRoleInput from "./ChangeRoleView";
function MemberInfoModal(props: { function MemberInfoModal(props: {
projectName: string; projectName: string;
username: string; username: string;
role: string;
onClose: () => void; onClose: () => void;
}): JSX.Element { }): JSX.Element {
const [showRoles, setShowRoles] = useState(false); const [showRoles, setShowRoles] = useState(false);
@ -20,22 +21,24 @@ function MemberInfoModal(props: {
}; };
return ( return (
<div <div
className="fixed inset-10 bg-opacity-30 backdrop-blur-sm className="fixed inset-0 bg-opacity-30 backdrop-blur-sm
flex justify-center items-center" flex justify-center items-center"
> >
<div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col"> <div className="border-4 border-black bg-white rounded-2xl text-center flex flex-col">
<div className="mx-10"> <div className="mx-10">
<p className="font-bold text-[30px]">{props.username}</p> <p className="font-bold text-[30px]">{props.username}</p>
<p className="font-bold text-[20px]">{props.role}</p>
<p <p
className="hover:font-bold hover:cursor-pointer underline" className="hover:font-bold hover:cursor-pointer underline mb-2 mt-1"
onClick={handleChangeRole} onClick={handleChangeRole}
> >
(Change Role) (Change Role)
</p> </p>
{showRoles && ( {showRoles && (
<ChangeRoleView <ChangeRoleInput
projectName={props.projectName} projectName={props.projectName}
username={props.username} username={props.username}
currentRole={props.role}
/> />
)} )}
<h2 className="font-bold text-[20px]">Member of these projects:</h2> <h2 className="font-bold text-[20px]">Member of these projects:</h2>