From 1b21b2574aa51dc16443792fe084a6dae55fd572 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Wed, 20 Mar 2024 12:36:30 +0100
Subject: [PATCH] Comp for displaying projectmembers and changed path in main
---
frontend/src/Components/ProjectMembers.tsx | 99 +++++++++++++++++++
.../ProjectManagerPages/PMProjectMembers.tsx | 13 ++-
frontend/src/main.tsx | 8 +-
3 files changed, 114 insertions(+), 6 deletions(-)
create mode 100644 frontend/src/Components/ProjectMembers.tsx
diff --git a/frontend/src/Components/ProjectMembers.tsx b/frontend/src/Components/ProjectMembers.tsx
new file mode 100644
index 0000000..e1f261e
--- /dev/null
+++ b/frontend/src/Components/ProjectMembers.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+function ProjectMembers(): JSX.Element {
+ const { projectName } = useParams();
+ const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
+
+ // const getProjectMembers = async (): Promise<void> => {
+ // const token = localStorage.getItem("accessToken") ?? "";
+ // const response = await api.getProjectMembers(projectName ?? "", token);
+ // console.log(response);
+ // if (response.success) {
+ // setProjectMembers(response.data ?? []);
+ // } else {
+ // console.error(response.message);
+ // }
+ // };
+
+ interface ProjectMember {
+ username: string;
+ role: string;
+ }
+
+ const mockProjectMembers = [
+ {
+ username: "username1",
+ role: "Project Manager",
+ },
+ {
+ username: "username2",
+ role: "System Manager",
+ },
+ {
+ username: "username3",
+ role: "Developer",
+ },
+ {
+ username: "username4",
+ role: "Tester",
+ },
+ {
+ username: "username5",
+ role: "Tester",
+ },
+ {
+ username: "username6",
+ role: "Tester",
+ },
+ ];
+
+ const getProjectMembers = async (): Promise<void> => {
+ // Use the mock data
+ setProjectMembers(mockProjectMembers);
+
+ await Promise.resolve();
+ };
+
+ useEffect(() => {
+ void getProjectMembers();
+ }, []);
+
+ return (
+ <>
+ <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
+ {projectMembers.map((projectMember, index) => (
+ <h1 key={index} className="border-b-2 border-black w-full">
+ <div className="flex justify-between">
+ <div className="flex">
+ <h1>{projectMember.username}</h1>
+ <span className="ml-6 mr-2 font-bold">Role:</span>
+ <h1>{projectMember.role}</h1>
+ </div>
+ <div className="flex">
+ <div className="ml-auto flex space-x-4">
+ <Link
+ to={`/viewReports/${projectName}/${projectMember.username}`}
+ >
+ <h1 className="underline cursor-pointer font-bold">
+ View Reports
+ </h1>
+ </Link>
+ <Link
+ to={`/changeRole/${projectName}/${projectMember.username}`}
+ >
+ <h1 className="underline cursor-pointer font-bold">
+ Change Role
+ </h1>
+ </Link>
+ </div>
+ </div>
+ </div>
+ </h1>
+ ))}
+ </div>
+ </>
+ );
+}
+
+export default ProjectMembers;
diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
index 9fe96cf..11b8636 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
@@ -1,10 +1,19 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import ProjectMembers from "../../Components/ProjectMembers";
function PMProjectMembers(): JSX.Element {
- const content = <></>;
+ const { projectName } = useParams();
+ const content = (
+ <>
+ <h1 className="font-bold text-[30px] mb-[20px]">
+ All Members In: {projectName}{" "}
+ </h1>
+ <ProjectMembers />
+ </>
+ );
const buttons = (
<>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 25c7a35..bac2292 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -64,7 +64,7 @@ const router = createBrowserRouter([
element: <UserEditTimeReportPage />,
},
{
- path: "/changeRole",
+ path: "/changeRole/:projectName/:username",
element: <PMChangeRole />,
},
{
@@ -72,11 +72,11 @@ const router = createBrowserRouter([
element: <PMOtherUsersTR />,
},
{
- path: "/projectMembers",
+ path: "/projectMembers/:projectName",
element: <PMProjectMembers />,
},
{
- path: "/PMProjectPage",
+ path: "/PMProjectPage/:projectName",
element: <PMProjectPage />,
},
{
@@ -88,7 +88,7 @@ const router = createBrowserRouter([
element: <PMTotalTimeRole />,
},
{
- path: "/unsignedReports",
+ path: "/unsignedReports/:projectName",
element: <PMUnsignedReports />,
},
{