Added search functionality and inputfield for changing p-name
This commit is contained in:
Peter KW
parent
385ceba248
commit
72d27bb644
1 changed files with 105 additions and 31 deletions
|
|
@ -4,19 +4,47 @@ import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
|
|||
import { Link } from "react-router-dom";
|
||||
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
|
||||
import DeleteProject from "./DeleteProject";
|
||||
import InputField from "./InputField";
|
||||
|
||||
function ProjectInfoModal(props: {
|
||||
projectname: string;
|
||||
onClose: () => void;
|
||||
onClick: (username: string) => void;
|
||||
}): JSX.Element {
|
||||
const [showInput, setShowInput] = useState(false);
|
||||
const [users, setUsers] = useState<ProjectMember[]>([]);
|
||||
const [times, setTimes] = useState<projectTimes>();
|
||||
const [search, setSearch] = useState("");
|
||||
const [newProjName, setNewProjName] = useState("");
|
||||
const totalTime = useRef(0);
|
||||
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
|
||||
|
||||
GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
|
||||
|
||||
const handleChangeNameView = (): void => {
|
||||
if (showInput) {
|
||||
setShowInput(false);
|
||||
} else {
|
||||
setShowInput(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickChangeName = (): void => {
|
||||
if (newProjName === "") return;
|
||||
|
||||
if (
|
||||
confirm(
|
||||
`Are you sure you want to change name of ${props.projectname} to ${newProjName}?`,
|
||||
)
|
||||
) {
|
||||
//TODO: change and insert change name functionality
|
||||
alert("Not implemented yet");
|
||||
setNewProjName("");
|
||||
} else {
|
||||
alert("Name was not changed!");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (times?.totalTime !== undefined) {
|
||||
totalTime.current = times.totalTime;
|
||||
|
|
@ -28,44 +56,90 @@ function ProjectInfoModal(props: {
|
|||
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="border-4 border-black bg-white p-2 rounded-2xl text-center h-[64vh] 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">
|
||||
<h1 className="font-bold text-[32px]">{props.projectname}</h1>
|
||||
<p
|
||||
className="mb-4 hover:font-bold hover:cursor-pointer hover:underline"
|
||||
onClick={handleChangeNameView}
|
||||
>
|
||||
(Change project name)
|
||||
</p>
|
||||
{showInput && (
|
||||
<>
|
||||
<h2 className="text-[20px] font-bold pb-2">Change name:</h2>
|
||||
<div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4">
|
||||
<InputField
|
||||
type={"text"}
|
||||
value={newProjName}
|
||||
onChange={function (e): void {
|
||||
setNewProjName(e.target.value);
|
||||
}}
|
||||
placeholder={"Project Name"}
|
||||
/>
|
||||
<div className="px-6 grid grid-cols-2 gap-10">
|
||||
<Button
|
||||
text={"Change"}
|
||||
onClick={function (): void {
|
||||
handleClickChangeName();
|
||||
}}
|
||||
type={"submit"}
|
||||
/>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
handleChangeNameView();
|
||||
}}
|
||||
type={"submit"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<h2 className="text-[20px] font-bold pb-2">Statistics:</h2>
|
||||
<div className="border-2 border-black rounded-2xl px-2 py-1 text-left divide-y-2 flex flex-col overflow-auto">
|
||||
<p>Number of members: {users.length}</p>
|
||||
<p>
|
||||
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>
|
||||
))}
|
||||
<h3 className="pt-7 text-[20px] font-bold">Project members:</h3>
|
||||
<div className="">
|
||||
<InputField
|
||||
placeholder={"Search member"}
|
||||
type={"Text"}
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<ul className="border-2 border-black mt-2 p-2 rounded-2xl text-left overflow-auto h-[24vh] font-medium space-y-2">
|
||||
{users
|
||||
.filter((user) => {
|
||||
return search.toLowerCase() === ""
|
||||
? user.Username
|
||||
: user.Username.toLowerCase().includes(
|
||||
search.toLowerCase(),
|
||||
);
|
||||
})
|
||||
.map((user) => (
|
||||
<li
|
||||
className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white 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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue