Merge branch 'gruppDM' into gruppPP
This commit is contained in:
commit
ace11570a5
11 changed files with 459 additions and 88 deletions
247
frontend/src/Components/EditWeeklyReport.tsx
Normal file
247
frontend/src/Components/EditWeeklyReport.tsx
Normal file
|
@ -0,0 +1,247 @@
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { NewWeeklyReport } from "../Types/goTypes";
|
||||||
|
import { api } from "../API/API";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import Button from "./Button";
|
||||||
|
|
||||||
|
export default function GetWeeklyReport(): JSX.Element {
|
||||||
|
const [projectName, setProjectName] = useState("");
|
||||||
|
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 username = localStorage.getItem("username") ?? "";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchWeeklyReport = async (): Promise<void> => {
|
||||||
|
const response = await api.getWeeklyReport(
|
||||||
|
username,
|
||||||
|
projectName,
|
||||||
|
week.toString(),
|
||||||
|
token,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
const report: NewWeeklyReport = response.data ?? {
|
||||||
|
projectName: "",
|
||||||
|
week: 0,
|
||||||
|
developmentTime: 0,
|
||||||
|
meetingTime: 0,
|
||||||
|
adminTime: 0,
|
||||||
|
ownWorkTime: 0,
|
||||||
|
studyTime: 0,
|
||||||
|
testingTime: 0,
|
||||||
|
};
|
||||||
|
setProjectName(report.projectName);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchWeeklyReport();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleNewWeeklyReport = async (): Promise<void> => {
|
||||||
|
const newWeeklyReport: NewWeeklyReport = {
|
||||||
|
projectName,
|
||||||
|
week,
|
||||||
|
developmentTime,
|
||||||
|
meetingTime,
|
||||||
|
adminTime,
|
||||||
|
ownWorkTime,
|
||||||
|
studyTime,
|
||||||
|
testingTime,
|
||||||
|
};
|
||||||
|
|
||||||
|
await api.submitWeeklyReport(newWeeklyReport, token);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
if (week === 0) {
|
||||||
|
alert("Please enter a week number");
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
void handleNewWeeklyReport();
|
||||||
|
navigate("/project");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<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"
|
||||||
|
value={
|
||||||
|
week === 0 ? "" : `2024-W${week.toString().padStart(2, "0")}`
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const weekNumber = parseInt(e.target.value.split("-W")[1]);
|
||||||
|
setWeek(weekNumber);
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setDevelopmentTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setMeetingTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setAdminTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setOwnWorkTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setStudyTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
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}
|
||||||
|
onChange={(e) => {
|
||||||
|
setTestingTime(parseInt(e.target.value));
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
const keyValue = event.key;
|
||||||
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||||||
|
event.preventDefault();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<Button
|
||||||
|
text="Submit"
|
||||||
|
onClick={(): void => {
|
||||||
|
return;
|
||||||
|
}}
|
||||||
|
type="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
function Header({ username }: { username: string }): JSX.Element {
|
function Header(): JSX.Element {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
const handleLogout = (): void => {
|
const handleLogout = (): void => {
|
||||||
|
@ -31,7 +31,7 @@ function Header({ username }: { username: string }): JSX.Element {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button className="mr-4 underline font-bold text-white">
|
<button className="mr-4 underline font-bold text-white">
|
||||||
{username}
|
{localStorage.getItem("username")}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
|
|
|
@ -25,6 +25,7 @@ function LoginCheck(props: {
|
||||||
if (response.data !== undefined) {
|
if (response.data !== undefined) {
|
||||||
const token = response.data;
|
const token = response.data;
|
||||||
localStorage.setItem("accessToken", token);
|
localStorage.setItem("accessToken", token);
|
||||||
|
localStorage.setItem("username", props.username);
|
||||||
//TODO: change so that it checks for user type (admin, user, pm) instead
|
//TODO: change so that it checks for user type (admin, user, pm) instead
|
||||||
if (token !== "" && props.username === "admin") {
|
if (token !== "" && props.username === "admin") {
|
||||||
props.setAuthority((prevAuth) => {
|
props.setAuthority((prevAuth) => {
|
||||||
|
|
|
@ -1,50 +1,51 @@
|
||||||
import { useState } from "react";
|
import { useState, useContext } from "react";
|
||||||
|
import { NewWeeklyReport } from "../Types/goTypes";
|
||||||
import { api } from "../API/API";
|
import { api } from "../API/API";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import Button from "./Button";
|
import Button from "./Button";
|
||||||
import { NewWeeklyReport } from "../Types/goTypes";
|
import { ProjectNameContext } from "../Pages/YourProjectsPage";
|
||||||
|
|
||||||
export default function NewTimeReport(): JSX.Element {
|
export default function NewWeeklyReport(): JSX.Element {
|
||||||
const [projectName, setProjectName] = useState<string>("projectName"); // TODO: Get from backend
|
const [week, setWeek] = useState(0);
|
||||||
const [week, setWeek] = useState<number>(NaN);
|
const [developmentTime, setDevelopmentTime] = useState(0);
|
||||||
const [development, setDevelopment] = useState<number>(NaN);
|
const [meetingTime, setMeetingTime] = useState(0);
|
||||||
const [meeting, setMeeting] = useState<number>(NaN);
|
const [adminTime, setAdminTime] = useState(0);
|
||||||
const [administration, setAdministration] = useState<number>(NaN);
|
const [ownWorkTime, setOwnWorkTime] = useState(0);
|
||||||
const [ownwork, setOwnWork] = useState<number>(NaN);
|
const [studyTime, setStudyTime] = useState(0);
|
||||||
const [studies, setStudies] = useState<number>(NaN);
|
const [testingTime, setTestingTime] = useState(0);
|
||||||
const [testing, setTesting] = useState<number>(NaN);
|
|
||||||
|
|
||||||
const handleNewTimeReport = async (): Promise<void> => {
|
const projectName = useContext(ProjectNameContext);
|
||||||
const newTimeReport: NewWeeklyReport = {
|
const token = localStorage.getItem("accessToken") ?? "";
|
||||||
|
|
||||||
|
const handleNewWeeklyReport = async (): Promise<void> => {
|
||||||
|
const newWeeklyReport: NewWeeklyReport = {
|
||||||
projectName,
|
projectName,
|
||||||
week,
|
week,
|
||||||
developmentTime: development,
|
developmentTime,
|
||||||
meetingTime: meeting,
|
meetingTime,
|
||||||
adminTime: administration,
|
adminTime,
|
||||||
ownWorkTime: ownwork,
|
ownWorkTime,
|
||||||
studyTime: studies,
|
studyTime,
|
||||||
testingTime: testing,
|
testingTime,
|
||||||
};
|
};
|
||||||
await Promise.resolve();
|
|
||||||
await api.submitWeeklyReport(newTimeReport, "token");
|
await api.submitWeeklyReport(newWeeklyReport, token);
|
||||||
};
|
};
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
setProjectName("Something Reasonable"); // This should obviously not be used here
|
|
||||||
|
|
||||||
return (
|
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">
|
<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
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
if (!week) {
|
if (week === 0) {
|
||||||
alert("Please enter a week number");
|
alert("Please enter a week number");
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
void handleNewTimeReport();
|
void handleNewWeeklyReport();
|
||||||
navigate("/project");
|
navigate("/project");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -83,9 +84,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={development}
|
value={developmentTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setDevelopment(parseInt(e.target.value));
|
setDevelopmentTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
||||||
|
@ -102,9 +103,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={meeting}
|
value={meetingTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setMeeting(parseInt(e.target.value));
|
setMeetingTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
||||||
|
@ -121,9 +122,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={administration}
|
value={adminTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setAdministration(parseInt(e.target.value));
|
setAdminTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
||||||
|
@ -140,9 +141,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={ownwork}
|
value={ownWorkTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setOwnWork(parseInt(e.target.value));
|
setOwnWorkTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
||||||
|
@ -159,9 +160,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={studies}
|
value={studyTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setStudies(parseInt(e.target.value));
|
setStudyTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
||||||
|
@ -178,9 +179,9 @@ export default function NewTimeReport(): JSX.Element {
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
className="border-2 border-black rounded-md text-center w-1/2"
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||||||
value={testing}
|
value={testingTime}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setTesting(parseInt(e.target.value));
|
setTestingTime(parseInt(e.target.value));
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
const keyValue = event.key;
|
const keyValue = event.key;
|
|
@ -1,4 +1,4 @@
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
import LoginPage from "./LoginPage";
|
import LoginPage from "./LoginPage";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
@ -6,6 +6,8 @@ import { useNavigate } from "react-router-dom";
|
||||||
function App(): JSX.Element {
|
function App(): JSX.Element {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [authority, setAuthority] = useState(0);
|
const [authority, setAuthority] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
if (authority === 1) {
|
if (authority === 1) {
|
||||||
navigate("/admin");
|
navigate("/admin");
|
||||||
} else if (authority === 2) {
|
} else if (authority === 2) {
|
||||||
|
@ -13,6 +15,7 @@ function App(): JSX.Element {
|
||||||
} else if (authority === 3) {
|
} else if (authority === 3) {
|
||||||
navigate("/user");
|
navigate("/user");
|
||||||
}
|
}
|
||||||
|
}, [authority, navigate]);
|
||||||
|
|
||||||
return <LoginPage setAuthority={setAuthority} />;
|
return <LoginPage setAuthority={setAuthority} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import BasicWindow from "../../Components/BasicWindow";
|
import BasicWindow from "../../Components/BasicWindow";
|
||||||
import TimeReport from "../../Components/TimeReport";
|
import Button from "../../Components/Button";
|
||||||
import BackButton from "../../Components/BackButton";
|
import TimeReport from "../../Components/NewWeeklyReport";
|
||||||
|
|
||||||
function PMTotalTimeActivity(): JSX.Element {
|
function PMTotalTimeActivity(): JSX.Element {
|
||||||
const content = (
|
const content = (
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import BasicWindow from "../../Components/BasicWindow";
|
import BasicWindow from "../../Components/BasicWindow";
|
||||||
import Button from "../../Components/Button";
|
import Button from "../../Components/Button";
|
||||||
import TimeReport from "../../Components/TimeReport";
|
import TimeReport from "../../Components/NewWeeklyReport";
|
||||||
import BackButton from "../../Components/BackButton";
|
|
||||||
|
|
||||||
function PMViewUnsignedReport(): JSX.Element {
|
function PMViewUnsignedReport(): JSX.Element {
|
||||||
const content = (
|
const content = (
|
||||||
|
|
|
@ -1,25 +1,17 @@
|
||||||
import BasicWindow from "../../Components/BasicWindow";
|
import BasicWindow from "../../Components/BasicWindow";
|
||||||
import Button from "../../Components/Button";
|
|
||||||
import NewTimeReport from "../../Components/TimeReport";
|
|
||||||
import BackButton from "../../Components/BackButton";
|
import BackButton from "../../Components/BackButton";
|
||||||
|
import EditWeeklyReport from "../../Components/EditWeeklyReport";
|
||||||
|
|
||||||
function UserEditTimeReportPage(): JSX.Element {
|
function UserEditTimeReportPage(): JSX.Element {
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
|
<h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
|
||||||
<NewTimeReport />
|
<EditWeeklyReport />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
const buttons = (
|
const buttons = (
|
||||||
<>
|
<>
|
||||||
<Button
|
|
||||||
text="Save"
|
|
||||||
onClick={(): void => {
|
|
||||||
return;
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
/>
|
|
||||||
<BackButton />
|
<BackButton />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import BasicWindow from "../../Components/BasicWindow";
|
import BasicWindow from "../../Components/BasicWindow";
|
||||||
import Button from "../../Components/Button";
|
import Button from "../../Components/Button";
|
||||||
import NewTimeReport from "../../Components/TimeReport";
|
import NewWeeklyReport from "../../Components/NewWeeklyReport";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
function UserNewTimeReportPage(): JSX.Element {
|
function UserNewTimeReportPage(): JSX.Element {
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1>
|
<h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1>
|
||||||
<NewTimeReport />
|
<NewWeeklyReport />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -1,30 +1,59 @@
|
||||||
import BasicWindow from "../Components/BasicWindow";
|
import React, { useState, createContext, useEffect } from "react";
|
||||||
import { ProjectListUser } from "../Components/ProjectListUser";
|
|
||||||
import { Project } from "../Types/goTypes";
|
import { Project } from "../Types/goTypes";
|
||||||
|
import { api } from "../API/API";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import BasicWindow from "../Components/BasicWindow";
|
||||||
|
|
||||||
function YourProjectsPage(): JSX.Element {
|
export const ProjectNameContext = createContext("");
|
||||||
//TODO: Change so that it reads projects from database
|
|
||||||
const projects: Project[] = [];
|
function UserProjectPage(): JSX.Element {
|
||||||
for (let i = 1; i <= 20; i++) {
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
projects.push({
|
const [selectedProject, setSelectedProject] = useState("");
|
||||||
id: i,
|
|
||||||
name: "Example Project " + i,
|
const getProjects = async (): Promise<void> => {
|
||||||
description: "good",
|
const username = localStorage.getItem("username") ?? ""; // replace with actual username
|
||||||
owner: "me",
|
const token = localStorage.getItem("accessToken") ?? ""; // replace with actual token
|
||||||
});
|
const response = await api.getUserProjects(username, token);
|
||||||
|
console.log(response);
|
||||||
|
if (response.success) {
|
||||||
|
setProjects(response.data ?? []);
|
||||||
|
} else {
|
||||||
|
console.error(response.message);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
// Call getProjects when the component mounts
|
||||||
|
useEffect(() => {
|
||||||
|
getProjects();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleProjectClick = (projectName: string): void => {
|
||||||
|
setSelectedProject(projectName);
|
||||||
|
};
|
||||||
|
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<ProjectNameContext.Provider value={selectedProject}>
|
||||||
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
|
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
|
||||||
<div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
|
<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]">
|
||||||
<ProjectListUser projects={projects} />
|
{projects.map((project, index) => (
|
||||||
|
<Link
|
||||||
|
to={`/project/${project.id}`}
|
||||||
|
onClick={() => {
|
||||||
|
handleProjectClick(project.name);
|
||||||
|
}}
|
||||||
|
key={index}
|
||||||
|
>
|
||||||
|
<h1 className="font-bold underline text-[30px] cursor-pointer">
|
||||||
|
{project.name}
|
||||||
|
</h1>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</ProjectNameContext.Provider>
|
||||||
);
|
);
|
||||||
|
|
||||||
const buttons = <></>;
|
const buttons = <></>;
|
||||||
|
|
||||||
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
|
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
|
||||||
}
|
}
|
||||||
export default YourProjectsPage;
|
|
||||||
|
export default UserProjectPage;
|
||||||
|
|
|
@ -3,13 +3,32 @@ import ReactDOM from "react-dom/client";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
import App from "./Pages/App";
|
import App from "./Pages/App";
|
||||||
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage";
|
import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
|
||||||
import YourProjectsPage from "./Pages/YourProjectsPage";
|
import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
|
||||||
import AdminAddProject from "./Pages/AdminPages/AdminAddProject";
|
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
|
||||||
import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects";
|
import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
|
||||||
import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers";
|
import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
|
||||||
import AdminAddUser from "./Pages/AdminPages/AdminAddUser";
|
import UserViewTimeReportsPage from "./Pages/UserPages/UserViewTimeReportsPage.tsx";
|
||||||
import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo";
|
import PMChangeRole from "./Pages/ProjectManagerPages/PMChangeRole.tsx";
|
||||||
|
import PMOtherUsersTR from "./Pages/ProjectManagerPages/PMOtherUsersTR.tsx";
|
||||||
|
import PMProjectMembers from "./Pages/ProjectManagerPages/PMProjectMembers.tsx";
|
||||||
|
import PMProjectPage from "./Pages/ProjectManagerPages/PMProjectPage.tsx";
|
||||||
|
import PMTotalTimeActivity from "./Pages/ProjectManagerPages/PMTotalTimeActivity.tsx";
|
||||||
|
import PMTotalTimeRole from "./Pages/ProjectManagerPages/PMTotalTimeRole.tsx";
|
||||||
|
import PMUnsignedReports from "./Pages/ProjectManagerPages/PMUnsignedReports.tsx";
|
||||||
|
import PMViewUnsignedReport from "./Pages/ProjectManagerPages/PMViewUnsignedReport.tsx";
|
||||||
|
import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers.tsx";
|
||||||
|
import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo.tsx";
|
||||||
|
import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects.tsx";
|
||||||
|
import AdminAddProject from "./Pages/AdminPages/AdminAddProject.tsx";
|
||||||
|
import AdminAddUser from "./Pages/AdminPages/AdminAddUser.tsx";
|
||||||
|
import AdminChangeUsername from "./Pages/AdminPages/AdminChangeUsername.tsx";
|
||||||
|
import AdminProjectAddMember from "./Pages/AdminPages/AdminProjectAddMember.tsx";
|
||||||
|
import AdminProjectChangeUserRole from "./Pages/AdminPages/AdminProjectChangeUserRole.tsx";
|
||||||
|
import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMembers.tsx";
|
||||||
|
import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
|
||||||
|
import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
|
||||||
|
import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
|
||||||
|
|
||||||
// This is where the routes are mounted
|
// This is where the routes are mounted
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
@ -29,6 +48,86 @@ const router = createBrowserRouter([
|
||||||
path: "/user",
|
path: "/user",
|
||||||
element: <YourProjectsPage />,
|
element: <YourProjectsPage />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/yourProjects",
|
||||||
|
element: <YourProjectsPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/editTimeReport",
|
||||||
|
element: <UserEditTimeReportPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/newTimeReport",
|
||||||
|
element: <UserNewTimeReportPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/project",
|
||||||
|
element: <UserProjectPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/projectPage",
|
||||||
|
element: <UserViewTimeReportsPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/changeRole",
|
||||||
|
element: <PMChangeRole />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/otherUsersTimeReports",
|
||||||
|
element: <PMOtherUsersTR />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/projectMembers",
|
||||||
|
element: <PMProjectMembers />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/PMProjectPage",
|
||||||
|
element: <PMProjectPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/PMTimeActivity",
|
||||||
|
element: <PMTotalTimeActivity />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/PMTimeRole",
|
||||||
|
element: <PMTotalTimeRole />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/PMUnsignedReports",
|
||||||
|
element: <PMUnsignedReports />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/PMViewUnsignedReport",
|
||||||
|
element: <PMViewUnsignedReport />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminChangeUsername",
|
||||||
|
element: <AdminChangeUsername />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectAddMember",
|
||||||
|
element: <AdminProjectAddMember />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectChangeUserRole",
|
||||||
|
element: <AdminProjectChangeUserRole />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectManageMembers",
|
||||||
|
element: <AdminProjectManageMembers />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectPage",
|
||||||
|
element: <AdminProjectPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectStatistics",
|
||||||
|
element: <AdminProjectStatistics />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/adminProjectViewMembers",
|
||||||
|
element: <AdminProjectViewMemberInfo />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/addProject",
|
path: "/addProject",
|
||||||
element: <AdminAddProject />,
|
element: <AdminAddProject />,
|
||||||
|
|
Loading…
Reference in a new issue