71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
//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 { WeeklyReport } from "../Types/goTypes";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { api } from "../API/API";
|
|
|
|
/**
|
|
* Renders a component that displays all the time reports for a specific project.
|
|
* @returns {JSX.Element} representing the component.
|
|
*/
|
|
function AllTimeReportsInProject(): JSX.Element {
|
|
const { projectName } = useParams();
|
|
const [weeklyReports, setWeeklyReports] = useState<WeeklyReport[]>([]);
|
|
|
|
// Call getProjects when the component mounts
|
|
useEffect(() => {
|
|
const getWeeklyReports = async (): Promise<void> => {
|
|
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);
|
|
}
|
|
};
|
|
|
|
void getWeeklyReports();
|
|
}, [projectName]);
|
|
|
|
return (
|
|
<>
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[30px]">
|
|
{weeklyReports.map((newWeeklyReport, index) => (
|
|
<Link
|
|
to={`/editTimeReport/${projectName}/${newWeeklyReport.week}`}
|
|
key={index}
|
|
className="border-b-2 border-black w-full"
|
|
>
|
|
<div className="flex justify-between">
|
|
<h1>
|
|
<span className="font-bold">{"Week: "}</span>
|
|
{newWeeklyReport.week}
|
|
</h1>
|
|
<h1>
|
|
<span className="font-bold">{"Total Time: "}</span>
|
|
{newWeeklyReport.developmentTime +
|
|
newWeeklyReport.meetingTime +
|
|
newWeeklyReport.adminTime +
|
|
newWeeklyReport.ownWorkTime +
|
|
newWeeklyReport.studyTime +
|
|
newWeeklyReport.testingTime}{" "}
|
|
min
|
|
</h1>
|
|
<h1>
|
|
<span className="font-bold">{"Signed: "}</span>
|
|
{newWeeklyReport.signedBy ? "YES" : "NO"}
|
|
</h1>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default AllTimeReportsInProject;
|