Merge branch 'gruppPP' into frontend

frontend/src/Components/ProjectInfoModal.tsx

@@ -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;

frontend/src/Components/ProjectListAdmin.tsx

@@ -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}

frontend/src/Components/UserInfoModal.tsx

@@ -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 (
+      <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">
+      <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>
-        <Link to="/AdminChangeUserName">
-          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
-            (Change Username)
-          </p>
-        </Link>
+        {ManageUserOrMember(props.manageMember)}
         <div>
           <h2 className="font-bold text-[22px] mb-[20px]">
             Member of these projects:

frontend/src/Components/UserListAdmin.tsx

@@ -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}
       />