diff --git a/frontend/src/API/API.ts b/frontend/src/API/API.ts index b31fe9b..0160e15 100644 --- a/frontend/src/API/API.ts +++ b/frontend/src/API/API.ts @@ -213,7 +213,7 @@ export const api: API = { ): Promise> { try { const response = await fetch( - `/api/checkIfProjectManager?projectName=${projectName}`, + `/api/checkIfProjectManager/${projectName}`, { method: "GET", headers: { diff --git a/frontend/src/Components/AllTimeReportsInProjectOtherUser.tsx b/frontend/src/Components/AllTimeReportsInProjectOtherUser.tsx new file mode 100644 index 0000000..09ca6dc --- /dev/null +++ b/frontend/src/Components/AllTimeReportsInProjectOtherUser.tsx @@ -0,0 +1,103 @@ +//Info: This component is used to display all the time reports for a project. It will display the week number, +//total time spent, and if the report has been signed or not. The user can click on a report to edit it. +import { useEffect, useState } from "react"; +import { NewWeeklyReport } from "../Types/goTypes"; +import { Link, useParams } from "react-router-dom"; + +/** + * Renders a component that displays all the time reports for a specific project. + * @returns {JSX.Element} representing the component. + */ +function AllTimeReportsInProject(): JSX.Element { + const { username } = useParams(); + const { projectName } = useParams(); + const [weeklyReports, setWeeklyReports] = useState([]); + + /* // Call getProjects when the component mounts + useEffect(() => { + const getWeeklyReports = async (): Promise => { + const token = localStorage.getItem("accessToken") ?? ""; + const response = await api.getWeeklyReportsForUser( + projectName ?? "", + token, + ); + console.log(response); + if (response.success) { + setWeeklyReports(response.data ?? []); + } else { + console.error(response.message); + } + }; */ + // Mock data + const getWeeklyReports = async (): Promise => { + // Simulate a delay + await Promise.resolve(); + const mockWeeklyReports: NewWeeklyReport[] = [ + { + projectName: "Project 1", + week: 1, + developmentTime: 10, + meetingTime: 2, + adminTime: 1, + ownWorkTime: 3, + studyTime: 4, + testingTime: 5, + }, + { + projectName: "Project 1", + week: 2, + developmentTime: 8, + meetingTime: 2, + adminTime: 1, + ownWorkTime: 3, + studyTime: 4, + testingTime: 5, + }, + // Add more reports as needed + ]; + + // Use the mock data instead of the real data + setWeeklyReports(mockWeeklyReports); + }; + useEffect(() => { + void getWeeklyReports(); + }, []); + + return ( + <> +

{username}'s Time Reports

+
+ {weeklyReports.map((newWeeklyReport, index) => ( + +
+

+ {"Week: "} + {newWeeklyReport.week} +

+

+ {"Total Time: "} + {newWeeklyReport.developmentTime + + newWeeklyReport.meetingTime + + newWeeklyReport.adminTime + + newWeeklyReport.ownWorkTime + + newWeeklyReport.studyTime + + newWeeklyReport.testingTime}{" "} + min +

+

+ {"Signed: "} + NO +

+
+ + ))} +
+ + ); +} + +export default AllTimeReportsInProject; diff --git a/frontend/src/Components/DisplayUnsignedReports.tsx b/frontend/src/Components/DisplayUnsignedReports.tsx new file mode 100644 index 0000000..780f20c --- /dev/null +++ b/frontend/src/Components/DisplayUnsignedReports.tsx @@ -0,0 +1,129 @@ +import { useState, useEffect } from "react"; +import { Link, useParams } from "react-router-dom"; + +interface UnsignedReports { + projectName: string; + username: string; + week: number; + signed: boolean; +} + +/** + * Renders a component that displays the projects a user is a part of and links to the projects start-page. + * @returns The JSX element representing the component. + */ +function DisplayUserProject(): JSX.Element { + const { projectName } = useParams(); + const [unsignedReports, setUnsignedReports] = useState([]); + //const navigate = useNavigate(); + + // const getUnsignedReports = async (): Promise => { + // const token = localStorage.getItem("accessToken") ?? ""; + // const response = await api.getUserProjects(token); + // console.log(response); + // if (response.success) { + // setUnsignedReports(response.data ?? []); + // } else { + // console.error(response.message); + // } + // }; + + // const handleReportClick = async (projectName: string): Promise => { + // const username = localStorage.getItem("username") ?? ""; + // const token = localStorage.getItem("accessToken") ?? ""; + // const response = await api.checkIfProjectManager( + // username, + // projectName, + // token, + // ); + // if (response.success) { + // if (response.data) { + // navigate(`/PMProjectPage/${projectName}`); + // } else { + // navigate(`/project/${projectName}`); + // } + // } else { + // // handle error + // console.error(response.message); + // } + // }; + + const getUnsignedReports = async (): Promise => { + // Simulate a delay + await Promise.resolve(); + + // Use mock data + const reports: UnsignedReports[] = [ + { + projectName: "projecttest", + username: "user1", + week: 2, + signed: false, + }, + { + projectName: "projecttest", + username: "user2", + week: 2, + signed: false, + }, + { + projectName: "projecttest", + username: "user3", + week: 2, + signed: false, + }, + { + projectName: "projecttest", + username: "user4", + week: 2, + signed: false, + }, + ]; + + // Set the state with the mock data + setUnsignedReports(reports); + }; + + // Call getProjects when the component mounts + useEffect(() => { + void getUnsignedReports(); + }, []); + + return ( + <> +

+ All Unsigned Reports In: {projectName}{" "} +

+
+ {unsignedReports.map( + (unsignedReport: UnsignedReports, index: number) => ( +

+
+
+

{unsignedReport.username}

+ Week: +

{unsignedReport.week}

+ Signed: +

NO

+
+
+
+ +

+ View Report +

+ +
+
+
+

+ ), + )} +
+ + ); +} + +export default DisplayUserProject; diff --git a/frontend/src/Components/DisplayUserProjects.tsx b/frontend/src/Components/DisplayUserProjects.tsx index f4fd782..29e4bcb 100644 --- a/frontend/src/Components/DisplayUserProjects.tsx +++ b/frontend/src/Components/DisplayUserProjects.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { Project } from "../Types/goTypes"; -import { Link } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { api } from "../API/API"; /** @@ -9,6 +9,7 @@ import { api } from "../API/API"; */ function DisplayUserProject(): JSX.Element { const [projects, setProjects] = useState([]); + const navigate = useNavigate(); const getProjects = async (): Promise => { const token = localStorage.getItem("accessToken") ?? ""; @@ -21,6 +22,21 @@ function DisplayUserProject(): JSX.Element { } }; + const handleProjectClick = async (projectName: string): Promise => { + const token = localStorage.getItem("accessToken") ?? ""; + const response = await api.checkIfProjectManager(projectName, token); + if (response.success) { + if (response.data) { + navigate(`/PMProjectPage/${projectName}`); + } else { + navigate(`/project/${projectName}`); + } + } else { + // handle error + console.error(response.message); + } + }; + // Call getProjects when the component mounts useEffect(() => { void getProjects(); @@ -30,12 +46,15 @@ function DisplayUserProject(): JSX.Element { <>

Your Projects

- {projects.map((project, index) => ( - + {projects.map((project) => ( +
void handleProjectClick(project.name)} + key={project.id} + >

{project.name}

- +
))}
diff --git a/frontend/src/Components/EditWeeklyReport.tsx b/frontend/src/Components/EditWeeklyReport.tsx index be96329..384359e 100644 --- a/frontend/src/Components/EditWeeklyReport.tsx +++ b/frontend/src/Components/EditWeeklyReport.tsx @@ -18,44 +18,47 @@ export default function GetWeeklyReport(): JSX.Element { const [testingTime, setTestingTime] = useState(0); const token = localStorage.getItem("accessToken") ?? ""; - const { projectName } = useParams(); - const { fetchedWeek } = useParams(); - - const fetchWeeklyReport = async (): Promise => { - const response = await api.getWeeklyReport( - projectName ?? "", - fetchedWeek?.toString() ?? "0", - token, - ); - - if (response.success) { - const report: WeeklyReport = response.data ?? { - reportId: 0, - userId: 0, - projectId: 0, - week: 0, - developmentTime: 0, - meetingTime: 0, - adminTime: 0, - ownWorkTime: 0, - studyTime: 0, - testingTime: 0, - }; - setWeek(report.week); - setDevelopmentTime(report.developmentTime); - setMeetingTime(report.meetingTime); - setAdminTime(report.adminTime); - setOwnWorkTime(report.ownWorkTime); - setStudyTime(report.studyTime); - setTestingTime(report.testingTime); - } else { - console.error("Failed to fetch weekly report:", response.message); - } - }; + const { projectName, fetchedWeek } = useParams<{ + projectName: string; + fetchedWeek: string; + }>(); + console.log(projectName, fetchedWeek); useEffect(() => { + const fetchWeeklyReport = async (): Promise => { + const response = await api.getWeeklyReport( + projectName ?? "", + fetchedWeek ?? "", + token, + ); + + if (response.success) { + const report: WeeklyReport = response.data ?? { + reportId: 0, + userId: 0, + projectId: 0, + week: 0, + developmentTime: 0, + meetingTime: 0, + adminTime: 0, + ownWorkTime: 0, + studyTime: 0, + testingTime: 0, + }; + setWeek(report.week); + setDevelopmentTime(report.developmentTime); + setMeetingTime(report.meetingTime); + setAdminTime(report.adminTime); + setOwnWorkTime(report.ownWorkTime); + setStudyTime(report.studyTime); + setTestingTime(report.testingTime); + } else { + console.error("Failed to fetch weekly report:", response.message); + } + }; + void fetchWeeklyReport(); - }); + }, [projectName, fetchedWeek, token]); const handleNewWeeklyReport = async (): Promise => { const newWeeklyReport: NewWeeklyReport = { @@ -76,6 +79,7 @@ export default function GetWeeklyReport(): JSX.Element { return ( <> +

Edit Time Report

{ @@ -90,24 +94,10 @@ export default function GetWeeklyReport(): JSX.Element { }} >
- { - const weekNumber = parseInt(e.target.value.split("-W")[1]); - setWeek(weekNumber); - }} - onKeyDown={(event) => { - event.preventDefault(); - }} - onPaste={(event) => { - event.preventDefault(); - }} - /> +
+

Week: {week}

+
+ @@ -127,9 +117,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={developmentTime} + value={developmentTime === 0 ? "" : developmentTime} onChange={(e) => { - setDevelopmentTime(parseInt(e.target.value)); + if (e.target.value === "") { + setDevelopmentTime(0); + return; + } else { + setDevelopmentTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -146,9 +141,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={meetingTime} + value={meetingTime === 0 ? "" : meetingTime} onChange={(e) => { - setMeetingTime(parseInt(e.target.value)); + if (e.target.value === "") { + setMeetingTime(0); + return; + } else { + setMeetingTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -165,9 +165,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={adminTime} + value={adminTime === 0 ? "" : adminTime} onChange={(e) => { - setAdminTime(parseInt(e.target.value)); + if (e.target.value === "") { + setAdminTime(0); + return; + } else { + setAdminTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -184,9 +189,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={ownWorkTime} + value={ownWorkTime === 0 ? "" : ownWorkTime} onChange={(e) => { - setOwnWorkTime(parseInt(e.target.value)); + if (e.target.value === "") { + setOwnWorkTime(0); + return; + } else { + setOwnWorkTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -203,9 +213,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={studyTime} + value={studyTime === 0 ? "" : studyTime} onChange={(e) => { - setStudyTime(parseInt(e.target.value)); + if (e.target.value === "") { + setStudyTime(0); + return; + } else { + setStudyTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -222,9 +237,14 @@ export default function GetWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={testingTime} + value={testingTime === 0 ? "" : testingTime} onChange={(e) => { - setTestingTime(parseInt(e.target.value)); + if (e.target.value === "") { + setTestingTime(0); + return; + } else { + setTestingTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; diff --git a/frontend/src/Components/NewWeeklyReport.tsx b/frontend/src/Components/NewWeeklyReport.tsx index a128b8d..f684b0c 100644 --- a/frontend/src/Components/NewWeeklyReport.tsx +++ b/frontend/src/Components/NewWeeklyReport.tsx @@ -12,65 +12,103 @@ import Button from "./Button"; */ export default function NewWeeklyReport(): JSX.Element { const [week, setWeek] = useState(0); - const [developmentTime, setDevelopmentTime] = useState(); - const [meetingTime, setMeetingTime] = useState(); - const [adminTime, setAdminTime] = useState(); - const [ownWorkTime, setOwnWorkTime] = useState(); - const [studyTime, setStudyTime] = useState(); - const [testingTime, setTestingTime] = useState(); + const [developmentTime, setDevelopmentTime] = useState(0); + const [meetingTime, setMeetingTime] = useState(0); + const [adminTime, setAdminTime] = useState(0); + const [ownWorkTime, setOwnWorkTime] = useState(0); + const [studyTime, setStudyTime] = useState(0); + const [testingTime, setTestingTime] = useState(0); const { projectName } = useParams(); const token = localStorage.getItem("accessToken") ?? ""; - const handleNewWeeklyReport = async (): Promise => { + const handleNewWeeklyReport = async (): Promise => { const newWeeklyReport: NewWeeklyReport = { projectName: projectName ?? "", week: week, - developmentTime: developmentTime ?? 0, - meetingTime: meetingTime ?? 0, - adminTime: adminTime ?? 0, - ownWorkTime: ownWorkTime ?? 0, - studyTime: studyTime ?? 0, - testingTime: testingTime ?? 0, + developmentTime: developmentTime, + meetingTime: meetingTime, + adminTime: adminTime, + ownWorkTime: ownWorkTime, + studyTime: studyTime, + testingTime: testingTime, }; - await api.submitWeeklyReport(newWeeklyReport, token); + const response = await api.submitWeeklyReport(newWeeklyReport, token); + console.log(response); + if (response.success) { + return true; + } else { + return false; + } }; const navigate = useNavigate(); + // Check if the browser is Chrome or Edge + const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent); return ( <>
{ - if (week === 0) { - alert("Please enter a week number"); - e.preventDefault(); - return; - } e.preventDefault(); - void handleNewWeeklyReport(); - navigate(-1); + void (async (): Promise => { + if (week === 0 || week > 53 || week < 1) { + alert("Please enter a valid week number"); + return; + } + + const success = await handleNewWeeklyReport(); + if (!success) { + alert( + "A Time Report for this week already exists, please go to the edit page to edit it or change week number.", + ); + return; + } + alert("Weekly report submitted successfully"); + navigate(-1); + })(); }} >
- { - setWeek(parseInt(e.target.value)); - }} - onKeyDown={(event) => { - const keyValue = event.key; - if (!/\d/.test(keyValue) && keyValue !== "Backspace") + {isChromeOrEdge ? ( + { + const weekNumber = parseInt(e.target.value.split("-W")[1]); + setWeek(weekNumber); + }} + onKeyDown={(event) => { + const keyValue = event.key; + if (!/\d/.test(keyValue) && keyValue !== "Backspace") + event.preventDefault(); + }} + onPaste={(event) => { event.preventDefault(); - }} - onPaste={(event) => { - event.preventDefault(); - }} - /> + }} + /> + ) : ( + { + const weekNumber = parseInt(e.target.value); + setWeek(weekNumber); + }} + onKeyDown={(event) => { + const keyValue = event.key; + if (!/\d/.test(keyValue) && keyValue !== "Backspace") + event.preventDefault(); + }} + onPaste={(event) => { + event.preventDefault(); + }} + /> + )}
@@ -90,9 +128,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={developmentTime} + value={developmentTime === 0 ? "" : developmentTime} onChange={(e) => { - setDevelopmentTime(parseInt(e.target.value)); + if (e.target.value === "") { + setDevelopmentTime(0); + return; + } else { + setDevelopmentTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -109,9 +152,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={meetingTime} + value={meetingTime === 0 ? "" : meetingTime} onChange={(e) => { - setMeetingTime(parseInt(e.target.value)); + if (e.target.value === "") { + setMeetingTime(0); + return; + } else { + setMeetingTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -128,9 +176,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={adminTime} + value={adminTime === 0 ? "" : adminTime} onChange={(e) => { - setAdminTime(parseInt(e.target.value)); + if (e.target.value === "") { + setAdminTime(0); + return; + } else { + setAdminTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -147,9 +200,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={ownWorkTime} + value={ownWorkTime === 0 ? "" : ownWorkTime} onChange={(e) => { - setOwnWorkTime(parseInt(e.target.value)); + if (e.target.value === "") { + setOwnWorkTime(0); + return; + } else { + setOwnWorkTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -166,9 +224,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={studyTime} + value={studyTime === 0 ? "" : studyTime} onChange={(e) => { - setStudyTime(parseInt(e.target.value)); + if (e.target.value === "") { + setStudyTime(0); + return; + } else { + setStudyTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; @@ -185,9 +248,14 @@ export default function NewWeeklyReport(): JSX.Element { type="number" min="0" className="border-2 border-black rounded-md text-center w-1/2" - value={testingTime} + value={testingTime === 0 ? "" : testingTime} onChange={(e) => { - setTestingTime(parseInt(e.target.value)); + if (e.target.value === "") { + setTestingTime(0); + return; + } else { + setTestingTime(parseInt(e.target.value)); + } }} onKeyDown={(event) => { const keyValue = event.key; diff --git a/frontend/src/Components/OtherUsersTR.tsx b/frontend/src/Components/OtherUsersTR.tsx new file mode 100644 index 0000000..2b00e16 --- /dev/null +++ b/frontend/src/Components/OtherUsersTR.tsx @@ -0,0 +1,153 @@ +import { useState, useEffect } from "react"; +import { WeeklyReport } from "../Types/goTypes"; +import { api } from "../API/API"; +import { useParams } from "react-router-dom"; + +/** + * Renders the component for editing a weekly report. + * @returns JSX.Element + */ + +//This component does not yet work as intended. It is supposed to display the weekly report of a user in a project. +export default function OtherUsersTR(): JSX.Element { + const [week, setWeek] = useState(0); + const [developmentTime, setDevelopmentTime] = useState(0); + const [meetingTime, setMeetingTime] = useState(0); + const [adminTime, setAdminTime] = useState(0); + const [ownWorkTime, setOwnWorkTime] = useState(0); + const [studyTime, setStudyTime] = useState(0); + const [testingTime, setTestingTime] = useState(0); + + const token = localStorage.getItem("accessToken") ?? ""; + const { projectName } = useParams(); + const { username } = useParams(); + const { fetchedWeek } = useParams(); + + useEffect(() => { + const fetchUsersWeeklyReport = async (): Promise => { + const response = await api.getWeeklyReport( + projectName ?? "", + fetchedWeek?.toString() ?? "0", + token, + ); + + if (response.success) { + const report: WeeklyReport = response.data ?? { + reportId: 0, + userId: 0, + projectId: 0, + week: 0, + developmentTime: 0, + meetingTime: 0, + adminTime: 0, + ownWorkTime: 0, + studyTime: 0, + testingTime: 0, + }; + setWeek(report.week); + setDevelopmentTime(report.developmentTime); + setMeetingTime(report.meetingTime); + setAdminTime(report.adminTime); + setOwnWorkTime(report.ownWorkTime); + setStudyTime(report.studyTime); + setTestingTime(report.testingTime); + } else { + console.error("Failed to fetch weekly report:", response.message); + } + }; + + void fetchUsersWeeklyReport(); + }); + + return ( + <> +

{username}'s Report

+
+
+
+

Week: {week}

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Activity + Total Time (min) +
Development + +
Meeting + +
Administration + +
Own Work + +
Studies + +
Testing + +
+
+
+ + ); +} diff --git a/frontend/src/Components/ProjectMembers.tsx b/frontend/src/Components/ProjectMembers.tsx index 73e29e5..60ffcd9 100644 --- a/frontend/src/Components/ProjectMembers.tsx +++ b/frontend/src/Components/ProjectMembers.tsx @@ -1,91 +1,55 @@ import { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; +import { api } from "../API/API"; +import { UserProjectMember } from "../Types/goTypes"; function ProjectMembers(): JSX.Element { const { projectName } = useParams(); - const [projectMembers, setProjectMembers] = useState([]); - - // const getProjectMembers = async (): Promise => { - // 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 => { - // Use the mock data - setProjectMembers(mockProjectMembers); - - await Promise.resolve(); - }; + const [projectMembers, setProjectMembers] = useState([]); useEffect(() => { + const getProjectMembers = async (): Promise => { + const token = localStorage.getItem("accessToken") ?? ""; + const response = await api.getAllUsersProject(projectName ?? "", token); + console.log(response); + if (response.success) { + setProjectMembers(response.data ?? []); + } else { + console.error(response.message); + } + }; + void getProjectMembers(); - }); + }, [projectName]); + + interface ProjectMember { + Username: string; + UserRole: string; + } return ( <> +

+ All Members In: {projectName}{" "} +

- {projectMembers.map((projectMember, index) => ( + {projectMembers.map((projectMember: ProjectMember, index: number) => (

-

{projectMember.username}

+

{projectMember.Username}

Role: -

{projectMember.role}

+

{projectMember.UserRole}

View Reports

- -

- Change Role -

-
diff --git a/frontend/src/Components/TimePerActivity.tsx b/frontend/src/Components/TimePerActivity.tsx new file mode 100644 index 0000000..3dc1a6b --- /dev/null +++ b/frontend/src/Components/TimePerActivity.tsx @@ -0,0 +1,175 @@ +import { useState, useEffect } from "react"; +import { useParams } from "react-router-dom"; + +/** + * Renders the component for showing total time per role in a project. + * @returns JSX.Element + */ +export default function TimePerRole(): JSX.Element { + const [developmentTime, setDevelopmentTime] = useState(); + const [meetingTime, setMeetingTime] = useState(); + const [adminTime, setAdminTime] = useState(); + const [ownWorkTime, setOwnWorkTime] = useState(); + const [studyTime, setStudyTime] = useState(); + const [testingTime, setTestingTime] = useState(); + + // const token = localStorage.getItem("accessToken") ?? ""; + // const username = localStorage.getItem("username") ?? ""; + const { projectName } = useParams(); + + // const fetchTimePerRole = async (): Promise => { + // const response = await api.getTimePerRole( + // username, + // projectName ?? "", + // token, + // ); + // { + // if (response.success) { + // const report: TimePerRole = response.data ?? { + // PManagerTime: 0, + // SManagerTime: 0, + // DeveloperTime: 0, + // TesterTime: 0, + // }; + // } else { + // console.error("Failed to fetch weekly report:", response.message); + // } + // } + + interface TimePerActivity { + developmentTime: number; + meetingTime: number; + adminTime: number; + ownWorkTime: number; + studyTime: number; + testingTime: number; + } + + const fetchTimePerActivity = async (): Promise => { + // Use mock data + const report: TimePerActivity = { + developmentTime: 100, + meetingTime: 200, + adminTime: 300, + ownWorkTime: 50, + studyTime: 75, + testingTime: 110, + }; + + // Set the state with the mock data + setDevelopmentTime(report.developmentTime); + setMeetingTime(report.meetingTime); + setAdminTime(report.adminTime); + setOwnWorkTime(report.ownWorkTime); + setStudyTime(report.studyTime); + setTestingTime(report.testingTime); + + await Promise.resolve(); + }; + + useEffect(() => { + void fetchTimePerActivity(); + }); + + return ( + <> +

+ Total Time Per Activity In: {projectName}{" "} +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Activity + Total Time (min) +
Development + { + event.preventDefault(); + }} + /> +
Meeting + { + event.preventDefault(); + }} + /> +
Administration + { + event.preventDefault(); + }} + /> +
Own Work + { + event.preventDefault(); + }} + /> +
Studies + { + event.preventDefault(); + }} + /> +
Testing + { + event.preventDefault(); + }} + /> +
+
+
+ + ); +} diff --git a/frontend/src/Components/TimePerRole.tsx b/frontend/src/Components/TimePerRole.tsx new file mode 100644 index 0000000..f62d83a --- /dev/null +++ b/frontend/src/Components/TimePerRole.tsx @@ -0,0 +1,141 @@ +import { useState, useEffect } from "react"; +import { useParams } from "react-router-dom"; + +/** + * Renders the component for showing total time per role in a project. + * @returns JSX.Element + */ +export default function TimePerRole(): JSX.Element { + const [PManagerTime, setPManagerTime] = useState(0); + const [SManagerTime, setSManagerTime] = useState(0); + const [DeveloperTime, setDeveloperTime] = useState(0); + const [TesterTime, setTesterTime] = useState(0); + + // const token = localStorage.getItem("accessToken") ?? ""; + // const username = localStorage.getItem("username") ?? ""; + const { projectName } = useParams(); + + // const fetchTimePerRole = async (): Promise => { + // const response = await api.getTimePerRole( + // username, + // projectName ?? "", + // token, + // ); + // { + // if (response.success) { + // const report: TimePerRole = response.data ?? { + // PManagerTime: 0, + // SManagerTime: 0, + // DeveloperTime: 0, + // TesterTime: 0, + // }; + // } else { + // console.error("Failed to fetch weekly report:", response.message); + // } + // } + + interface TimePerRole { + PManager: number; + SManager: number; + Developer: number; + Tester: number; + } + + const fetchTimePerRole = async (): Promise => { + // Use mock data + const report: TimePerRole = { + PManager: 120, + SManager: 80, + Developer: 200, + Tester: 150, + }; + + // Set the state with the mock data + setPManagerTime(report.PManager); + setSManagerTime(report.SManager); + setDeveloperTime(report.Developer); + setTesterTime(report.Tester); + + await Promise.resolve(); + }; + + useEffect(() => { + void fetchTimePerRole(); + }); + + return ( + <> +

+ Total Time Per Role In: {projectName}{" "} +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Role + Total Time (min) +
Project Manager + { + event.preventDefault(); + }} + /> +
System Manager + { + event.preventDefault(); + }} + /> +
Administration + { + event.preventDefault(); + }} + /> +
Own Work + { + event.preventDefault(); + }} + /> +
+
+
+ + ); +} diff --git a/frontend/src/Components/ViewOtherTimeReport.tsx b/frontend/src/Components/ViewOtherTimeReport.tsx new file mode 100644 index 0000000..32e0716 --- /dev/null +++ b/frontend/src/Components/ViewOtherTimeReport.tsx @@ -0,0 +1,188 @@ +import { useState, useEffect } from "react"; +import { WeeklyReport, NewWeeklyReport } from "../Types/goTypes"; +import { api } from "../API/API"; +import { useNavigate, useParams } from "react-router-dom"; +import Button from "./Button"; + +/** + * Renders the component for editing a weekly report. + * @returns JSX.Element + */ + +//This component does not yet work as intended. It is supposed to display the weekly report of a user in a project. +export default function GetOtherUsersReport(): JSX.Element { + const [week, setWeek] = useState(0); + const [developmentTime, setDevelopmentTime] = useState(0); + const [meetingTime, setMeetingTime] = useState(0); + const [adminTime, setAdminTime] = useState(0); + const [ownWorkTime, setOwnWorkTime] = useState(0); + const [studyTime, setStudyTime] = useState(0); + const [testingTime, setTestingTime] = useState(0); + + const token = localStorage.getItem("accessToken") ?? ""; + const { projectName } = useParams(); + const { username } = useParams(); + const { fetchedWeek } = useParams(); + + useEffect(() => { + const fetchUsersWeeklyReport = async (): Promise => { + const response = await api.getWeeklyReport( + projectName ?? "", + fetchedWeek?.toString() ?? "0", + token, + ); + + if (response.success) { + const report: WeeklyReport = response.data ?? { + reportId: 0, + userId: 0, + projectId: 0, + week: 0, + developmentTime: 0, + meetingTime: 0, + adminTime: 0, + ownWorkTime: 0, + studyTime: 0, + testingTime: 0, + }; + setWeek(report.week); + setDevelopmentTime(report.developmentTime); + setMeetingTime(report.meetingTime); + setAdminTime(report.adminTime); + setOwnWorkTime(report.ownWorkTime); + setStudyTime(report.studyTime); + setTestingTime(report.testingTime); + } else { + console.error("Failed to fetch weekly report:", response.message); + } + }; + + void fetchUsersWeeklyReport(); + }); + + const handleSignWeeklyReport = async (): Promise => { + const newWeeklyReport: NewWeeklyReport = { + projectName: projectName ?? "", + week, + developmentTime, + meetingTime, + adminTime, + ownWorkTime, + studyTime, + testingTime, + }; + + await api.submitWeeklyReport(newWeeklyReport, token); + }; + + const navigate = useNavigate(); + + return ( + <> +

{username}'s Report

+
+ { + e.preventDefault(); + void handleSignWeeklyReport(); + navigate(-1); + }} + > +
+
+

Week: {week}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Activity + + Total Time (min) +
Development + +
Meeting + +
Administration + +
Own Work + +
Studies + +
Testing + +
+
+ +
+ + ); +} diff --git a/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx b/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx index c76947b..cb558b0 100644 --- a/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx +++ b/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx @@ -1,8 +1,13 @@ import BasicWindow from "../../Components/BasicWindow"; import BackButton from "../../Components/BackButton"; +import AllTimeReportsInProjectOtherUser from "../../Components/AllTimeReportsInProjectOtherUser"; function PMOtherUsersTR(): JSX.Element { - const content = <>; + const content = ( + <> + + + ); const buttons = ( <> diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx index 11b8636..7aa692d 100644 --- a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx +++ b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx @@ -8,16 +8,13 @@ function PMProjectMembers(): JSX.Element { const { projectName } = useParams(); const content = ( <> -

- All Members In: {projectName}{" "} -

); const buttons = ( <> - +