Add ViewOtherTimeReport component to PMOtherUsersTR page
This commit is contained in:
Mattias
parent
85be4c79d6
commit
e2d2310275
3 changed files with 195 additions and 2 deletions
188
frontend/src/Components/ViewOtherTimeReport.tsx
Normal file
188
frontend/src/Components/ViewOtherTimeReport.tsx
Normal file
|
|
@ -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<void> => {
|
||||
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<void> => {
|
||||
const newWeeklyReport: NewWeeklyReport = {
|
||||
projectName: projectName ?? "",
|
||||
week,
|
||||
developmentTime,
|
||||
meetingTime,
|
||||
adminTime,
|
||||
ownWorkTime,
|
||||
studyTime,
|
||||
testingTime,
|
||||
};
|
||||
|
||||
await api.submitWeeklyReport(newWeeklyReport, token);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-[30px] font-bold">{username}'s Report</h1>
|
||||
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void handleSignWeeklyReport();
|
||||
navigate(-1);
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex flex-col w-1/2 border-b-2 border-black items-center justify-center">
|
||||
<h1 className="font-bold text-[30px]"> Week: {week}</h1>
|
||||
</div>
|
||||
|
||||
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||
Activity
|
||||
</th>
|
||||
<th className="w-1/2 py-2 border-b-2 border-black">
|
||||
Total Time (min)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-black">
|
||||
<tr className="h-[10vh]">
|
||||
<td>Development</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={developmentTime === 0 ? "" : developmentTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Meeting</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={meetingTime === 0 ? "" : meetingTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Administration</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={adminTime === 0 ? "" : adminTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Own Work</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={ownWorkTime === 0 ? "" : ownWorkTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Studies</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={studyTime === 0 ? "" : studyTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="h-[10vh]">
|
||||
<td>Testing</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="border-2 border-black rounded-md text-center w-1/2"
|
||||
value={testingTime === 0 ? "" : testingTime}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Button
|
||||
text="Sign Report"
|
||||
onClick={(): void => {
|
||||
return;
|
||||
}}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import BasicWindow from "../../Components/BasicWindow";
|
||||
import BackButton from "../../Components/BackButton";
|
||||
import ViewOtherTimeReport from "../../Components/ViewOtherTimeReport";
|
||||
|
||||
function PMOtherUsersTR(): JSX.Element {
|
||||
const content = <></>;
|
||||
const content = (
|
||||
<>
|
||||
<ViewOtherTimeReport />
|
||||
</>
|
||||
);
|
||||
|
||||
const buttons = (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const router = createBrowserRouter([
|
|||
element: <PMChangeRole />,
|
||||
},
|
||||
{
|
||||
path: "/otherUsersTimeReports",
|
||||
path: "/otherUsersTimeReports/:projectName/:username",
|
||||
element: <PMOtherUsersTR />,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue