Merge branch 'gruppPP' into frontend
This commit is contained in:
Imbus
commit
03f6edd320
5 changed files with 79 additions and 29 deletions
|
|
@ -3,10 +3,11 @@ import Button from "./Button";
|
|||
import { UserProjectMember } from "../Types/goTypes";
|
||||
import GetUsersInProject from "./GetUsersInProject";
|
||||
|
||||
function UserInfoModal(props: {
|
||||
function ProjectInfoModal(props: {
|
||||
isVisible: boolean;
|
||||
projectname: string;
|
||||
onClose: () => void;
|
||||
onClick: (username: string) => void;
|
||||
}): JSX.Element {
|
||||
const [users, setUsers] = useState<UserProjectMember[]>([]);
|
||||
GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
|
||||
|
|
@ -17,23 +18,31 @@ function UserInfoModal(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-lg text-center">
|
||||
<p className="font-bold text-[30px]">{props.projectname}</p>
|
||||
<div>
|
||||
<h2 className="font-bold text-[22px] mb-[20px]">
|
||||
Members of this project:
|
||||
</h2>
|
||||
<div className="border-2 border-black bg-white p-2 rounded-lg text-center pl-6 pr-6">
|
||||
<ul>
|
||||
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[41vh] w-[40vw] flex flex-col">
|
||||
<div className="pl-20 pr-20">
|
||||
<h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
|
||||
<div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
|
||||
<ul className="text-left font-medium space-y-2">
|
||||
<div></div>
|
||||
{users.map((user) => (
|
||||
<li key={user.Username}>
|
||||
<span>{user.Username}</span>
|
||||
<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>
|
||||
<div className="items-center space-x-6 pr-6 pl-6">
|
||||
<div className="space-x-16">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
|
|
@ -54,4 +63,4 @@ function UserInfoModal(props: {
|
|||
);
|
||||
}
|
||||
|
||||
export default UserInfoModal;
|
||||
export default ProjectInfoModal;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { NewProject } from "../Types/goTypes";
|
||||
import ProjectInfoModal from "./ProjectInfoModal";
|
||||
import UserInfoModal from "./UserInfoModal";
|
||||
import DeleteUser from "./DeleteUser";
|
||||
|
||||
/**
|
||||
* A list of projects for admin manage projects page, that sets an onClick
|
||||
|
|
@ -16,26 +18,47 @@ import ProjectInfoModal from "./ProjectInfoModal";
|
|||
export function ProjectListAdmin(props: {
|
||||
projects: NewProject[];
|
||||
}): JSX.Element {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [projectModalVisible, setProjectModalVisible] = useState(false);
|
||||
const [projectname, setProjectname] = useState("");
|
||||
const [userModalVisible, setUserModalVisible] = useState(false);
|
||||
const [username, setUsername] = useState("");
|
||||
|
||||
const handleClick = (username: string): void => {
|
||||
setProjectname(username);
|
||||
setModalVisible(true);
|
||||
const handleClickUser = (username: string): void => {
|
||||
setUsername(username);
|
||||
setUserModalVisible(true);
|
||||
};
|
||||
|
||||
const handleClose = (): void => {
|
||||
const handleClickProject = (username: string): void => {
|
||||
setProjectname(username);
|
||||
setProjectModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseProject = (): void => {
|
||||
setProjectname("");
|
||||
setModalVisible(false);
|
||||
setProjectModalVisible(false);
|
||||
};
|
||||
|
||||
const handleCloseUser = (): void => {
|
||||
setProjectname("");
|
||||
setUserModalVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectInfoModal
|
||||
onClose={handleClose}
|
||||
isVisible={modalVisible}
|
||||
onClose={handleCloseProject}
|
||||
onClick={handleClickUser}
|
||||
isVisible={projectModalVisible}
|
||||
projectname={projectname}
|
||||
/>
|
||||
<UserInfoModal
|
||||
manageMember={true}
|
||||
onClose={handleCloseUser}
|
||||
//TODO: CHANGE TO REMOVE USER FROM PROJECT
|
||||
onDelete={() => DeleteUser}
|
||||
isVisible={userModalVisible}
|
||||
username={username}
|
||||
/>
|
||||
<div>
|
||||
<ul className="font-bold underline text-[30px] cursor-pointer padding">
|
||||
{props.projects.map((project) => (
|
||||
|
|
@ -43,7 +66,7 @@ export function ProjectListAdmin(props: {
|
|||
className="pt-5"
|
||||
key={project.name}
|
||||
onClick={() => {
|
||||
handleClick(project.name);
|
||||
handleClickProject(project.name);
|
||||
}}
|
||||
>
|
||||
{project.name}
|
||||
|
|
|
|||
|
|
@ -5,23 +5,38 @@ import UserProjectListAdmin from "./UserProjectListAdmin";
|
|||
|
||||
function UserInfoModal(props: {
|
||||
isVisible: boolean;
|
||||
manageMember: boolean;
|
||||
username: string;
|
||||
onClose: () => void;
|
||||
onDelete: (username: string) => void;
|
||||
}): JSX.Element {
|
||||
if (!props.isVisible) return <></>;
|
||||
|
||||
const ManageUserOrMember = (check: boolean): JSX.Element => {
|
||||
if (check) {
|
||||
return (
|
||||
<Link to="/AdminChangeRole">
|
||||
<p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
|
||||
(Change Role)
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
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-lg text-center">
|
||||
<p className="font-bold text-[30px]">{props.username}</p>
|
||||
<Link to="/AdminChangeUserName">
|
||||
<p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
|
||||
(Change Username)
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
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-lg text-center flex flex-col">
|
||||
<p className="font-bold text-[30px]">{props.username}</p>
|
||||
{ManageUserOrMember(props.manageMember)}
|
||||
<div>
|
||||
<h2 className="font-bold text-[22px] mb-[20px]">
|
||||
Member of these projects:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useState } from "react";
|
||||
import UserInfoModal from "./UserInfoModal";
|
||||
import DeleteUser from "./DeleteUser";
|
||||
|
||||
/**
|
||||
* A list of users for admin manage users page, that sets an onClick
|
||||
|
|
@ -29,7 +30,9 @@ export function UserListAdmin(props: { users: string[] }): JSX.Element {
|
|||
return (
|
||||
<>
|
||||
<UserInfoModal
|
||||
manageMember={false}
|
||||
onClose={handleClose}
|
||||
onDelete={() => DeleteUser}
|
||||
isVisible={modalVisible}
|
||||
username={username}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue