312 lines
12 KiB
TypeScript
312 lines
12 KiB
TypeScript
//info: New weekly report form component to create a new weekly report to
|
|
//sumbit development time, meeting time, admin time, own work time, study time and testing time
|
|
import { useState } from "react";
|
|
import type { NewWeeklyReport } from "../Types/goTypes";
|
|
import { api } from "../API/API";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import Button from "./Button";
|
|
|
|
/**
|
|
* Renders a form for creating a new weekly report.
|
|
* @returns The JSX element representing the new weekly report form.
|
|
*/
|
|
export default function NewWeeklyReport(): JSX.Element {
|
|
const [week, setWeek] = useState<number>(0);
|
|
const [developmentTime, setDevelopmentTime] = useState<number>(0);
|
|
const [meetingTime, setMeetingTime] = useState<number>(0);
|
|
const [adminTime, setAdminTime] = useState<number>(0);
|
|
const [ownWorkTime, setOwnWorkTime] = useState<number>(0);
|
|
const [studyTime, setStudyTime] = useState<number>(0);
|
|
const [testingTime, setTestingTime] = useState<number>(0);
|
|
|
|
const { projectName } = useParams();
|
|
const token = localStorage.getItem("accessToken") ?? "";
|
|
|
|
const handleNewWeeklyReport = async (): Promise<boolean> => {
|
|
const newWeeklyReport: NewWeeklyReport = {
|
|
projectName: projectName ?? "",
|
|
week: week,
|
|
developmentTime: developmentTime,
|
|
meetingTime: meetingTime,
|
|
adminTime: adminTime,
|
|
ownWorkTime: ownWorkTime,
|
|
studyTime: studyTime,
|
|
testingTime: testingTime,
|
|
};
|
|
|
|
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 (
|
|
<>
|
|
<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 (async (): Promise<void> => {
|
|
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);
|
|
})();
|
|
}}
|
|
>
|
|
<div className="flex flex-col items-center">
|
|
{isChromeOrEdge ? (
|
|
<input
|
|
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
|
type="week"
|
|
placeholder="Week"
|
|
onChange={(e) => {
|
|
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();
|
|
}}
|
|
/>
|
|
) : (
|
|
<input
|
|
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
|
type="text"
|
|
placeholder="Week (Numbers Only)"
|
|
onChange={(e) => {
|
|
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();
|
|
}}
|
|
/>
|
|
)}
|
|
<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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setDevelopmentTime(0);
|
|
return;
|
|
} else {
|
|
setDevelopmentTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setMeetingTime(0);
|
|
return;
|
|
} else {
|
|
setMeetingTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setAdminTime(0);
|
|
return;
|
|
} else {
|
|
setAdminTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setOwnWorkTime(0);
|
|
return;
|
|
} else {
|
|
setOwnWorkTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setStudyTime(0);
|
|
return;
|
|
} else {
|
|
setStudyTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</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}
|
|
onChange={(e) => {
|
|
if (e.target.value === "") {
|
|
setTestingTime(0);
|
|
return;
|
|
} else {
|
|
setTestingTime(parseInt(e.target.value));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
const keyValue = event.key;
|
|
if (
|
|
!/\d/.test(keyValue) &&
|
|
keyValue !== "Backspace" &&
|
|
keyValue !== "ArrowLeft" &&
|
|
keyValue !== "ArrowRight"
|
|
)
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<Button
|
|
text="Submit"
|
|
onClick={(): void => {
|
|
return;
|
|
}}
|
|
type="submit"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|