Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge frontend -> dev

Browse source
This commit is contained in:
Imbus 2024-03-20 17:19:09 +01:00
commit b405b44460
33 changed files with 645 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/API/API.ts
View file

@ -66,6 +66,8 @@ interface API {
getUserProjects(token: string): Promise<APIResponse<Project[]>>;
/** Gets a project from id*/
getProject(id: number): Promise<APIResponse<Project>>;
/** Gets a project from id*/
getAllUsers(token: string): Promise<APIResponse<string[]>>;
}
// Export an instance of the API
@ -102,7 +104,7 @@ export const api: API = {
token: string,
): Promise<APIResponse<User>> {
try {
const response = await fetch("/api/userdelete", {
const response = await fetch(`/api/userdelete/${username}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -298,7 +300,9 @@ export const api: API = {
if (!response.ok) {
return {
success: false,
message: "Failed to get weekly reports for project",
message:
"Failed to get weekly reports for project: Response code " +
response.status,
};
} else {
const data = (await response.json()) as WeeklyReport[];
@ -307,7 +311,7 @@ export const api: API = {
} catch (e) {
return {
success: false,
message: "fucked again",
message: "Failed to get weekly reports for project, unknown error",
};
}
},
@ -358,4 +362,32 @@ export const api: API = {
};
}
},
// Gets all users
async getAllUsers(token: string): Promise<APIResponse<string[]>> {
try {
const response = await fetch("/api/users/all", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
});
if (!response.ok) {
return Promise.resolve({
success: false,
message: "Failed to get users",
});
} else {
const data = (await response.json()) as string[];
return Promise.resolve({ success: true, data });
}
} catch (e) {
return Promise.resolve({
success: false,
message: "API is not ok",
});
}
},
};

72
frontend/src/Components/AllTimeReportsInProject.tsx Normal file
View file

@ -0,0 +1,72 @@
//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[]>([]);
const getWeeklyReports = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getWeeklyReportsForProject(
localStorage.getItem("username") ?? "",
projectName ?? "",
token,
);
console.log(response);
if (response.success) {
setWeeklyReports(response.data ?? []);
} else {
console.error(response.message);
}
};
// Call getProjects when the component mounts
useEffect(() => {
void getWeeklyReports();
});
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;

18
frontend/src/Components/AuthorizedRoute.tsx Normal file
View file

@ -0,0 +1,18 @@
import { Navigate } from "react-router-dom";
import React from "react";
interface AuthorizedRouteProps {
children: React.ReactNode;
isAuthorized: boolean;
}
export function AuthorizedRoute({
children,
isAuthorized,
}: AuthorizedRouteProps): JSX.Element {
if (!isAuthorized) {
return <Navigate to="/unauthorized" />;
}
return children as React.ReactElement;
}

6
frontend/src/Components/BackButton.tsx
View file

@ -1,5 +1,11 @@
//info: Back button component to navigate back to the previous page
import { useNavigate } from "react-router-dom";
/**
* Renders a back button component.
*
* @returns The JSX element representing the back button.
*/
function BackButton(): JSX.Element {
const navigate = useNavigate();
const goBack = (): void => {

5
frontend/src/Components/BackgroundAnimation.tsx
View file

@ -1,5 +1,10 @@
//info: Background animation component to animate the background of loginpage
import { useEffect } from "react";
/**
* Renders a background animation component.
* This component pre-loads images and starts a background transition animation.
*/
const BackgroundAnimation = (): JSX.Element => {
useEffect(() => {
const images = [

10
frontend/src/Components/BasicWindow.tsx
View file

@ -1,6 +1,16 @@
//info: Basic window component to display content and buttons of a page, inclduing header and footer
//content to insert is placed in the content prop, and buttons in the buttons prop
import Header from "./Header";
import Footer from "./Footer";
/**
* Renders a basic window component with a header, content, and footer.
*
* @param {Object} props - The component props.
* @param {React.ReactNode} props.content - The content to be rendered in the window.
* @param {React.ReactNode} props.buttons - The buttons to be rendered in the footer.
* @returns {JSX.Element} The rendered basic window component.
*/
function BasicWindow({
content,
buttons,

9
frontend/src/Components/Button.tsx
View file

@ -1,3 +1,12 @@
/**
* Button component to display a button with text and onClick function.
*
* @param {Object} props - The component props.
* @param {string} props.text - The text to display on the button.
* @param {Function} props.onClick - The function to run when the button is clicked.
* @param {"submit" | "button" | "reset"} props.type - The type of button.
* @returns {JSX.Element} The rendered Button component.
*/
function Button({
text,
onClick,

83
frontend/src/Components/ChangeRoles.tsx Normal file
View file

@ -0,0 +1,83 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import Button from "./Button";
export default function ChangeRoles(): JSX.Element {
const [selectedRole, setSelectedRole] = useState("");
const { username } = useParams();
const handleRoleChange = (
event: React.ChangeEvent<HTMLInputElement>,
): void => {
setSelectedRole(event.target.value);
};
// const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
// event.preventDefault();
// const response = await api.changeRole(username, selectedRole, token);
// if (response.success) {
// console.log("Role changed successfully");
// } else {
// console.error("Failed to change role:", response.message);
// }
// };
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Change roll for: {username}
</h1>
<form
className="text-[20px] font-bold border-4 border-black bg-white flex flex-col items-center justify-center min-h-[50vh] h-fit w-[30vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]"
onSubmit={undefined}
>
<div className="self-start">
<div>
<label>
<input
type="radio"
value="System Manager"
checked={selectedRole === "System Manager"}
onChange={handleRoleChange}
className="ml-2 mr-2 mb-6"
/>
System Manager
</label>
</div>
<div>
<label>
<input
type="radio"
value="Developer"
checked={selectedRole === "Developer"}
onChange={handleRoleChange}
className="ml-2 mr-2 mb-6"
/>
Developer
</label>
</div>
<div>
<label>
<input
type="radio"
value="Tester"
checked={selectedRole === "Tester"}
onChange={handleRoleChange}
className="ml-2 mr-2 mb-6"
/>
Tester
</label>
</div>
</div>
<Button
text="Save"
onClick={(): void => {
return;
}}
type="submit"
/>
</form>
</>
);
}

24
frontend/src/Components/ChangeUsername.tsx
View file

@ -1,9 +1,5 @@
import React, { useState } from "react";
import { api } from "../API/API";
import InputField from "./InputField";
import BackButton from "./BackButton";
import Button from "./Button";
function ChangeUsername(): JSX.Element {
const [newUsername, setNewUsername] = useState("");
@ -12,16 +8,16 @@ function ChangeUsername(): JSX.Element {
setNewUsername(e.target.value);
};
const handleSubmit = async (): Promise<void> => {
try {
// Call the API function to update the username
await api.updateUsername(newUsername);
// Optionally, add a success message or redirect the user
} catch (error) {
console.error("Error updating username:", error);
// Optionally, handle the error
}
};
// const handleSubmit = async (): Promise<void> => {
// try {
// // Call the API function to update the username
// await api.updateUsername(newUsername);
// // Optionally, add a success message or redirect the user
// } catch (error) {
// console.error("Error updating username:", error);
// // Optionally, handle the error
// }
// };
return (
<div>

38
frontend/src/Components/CountButton.tsx
View file

@ -1,38 +0,0 @@
import { useState, useEffect } from "react";
// Interface for the response from the server
// This should eventually reside in a dedicated file
interface CountResponse {
pressCount: number;
}
// Some constants for the button
const BUTTON_ENDPOINT = "/api/button";
// A simple button that counts how many times it's been pressed
export function CountButton(): JSX.Element {
const [count, setCount] = useState<number>(NaN);
// useEffect with a [] dependency array runs only once
useEffect(() => {
async function getCount(): Promise<void> {
const response = await fetch(BUTTON_ENDPOINT);
const data = (await response.json()) as CountResponse;
setCount(data.pressCount);
}
void getCount();
}, []);
// This is what runs on every button click
function press(): void {
async function pressPost(): Promise<void> {
const response = await fetch(BUTTON_ENDPOINT, { method: "POST" });
const data = (await response.json()) as CountResponse;
setCount(data.pressCount);
}
void pressPost();
}
// Return some JSX with the button and associated handler
return <button onClick={press}>count is {count}</button>;
}

45
frontend/src/Components/DisplayUserProjects.tsx Normal file
View file

@ -0,0 +1,45 @@
import { useState, useEffect } from "react";
import { Project } from "../Types/goTypes";
import { Link } from "react-router-dom";
import { api } from "../API/API";
/**
* 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 [projects, setProjects] = useState<Project[]>([]);
const getProjects = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getUserProjects(token);
console.log(response);
if (response.success) {
setProjects(response.data ?? []);
} else {
console.error(response.message);
}
};
// Call getProjects when the component mounts
useEffect(() => {
void getProjects();
}, []);
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
<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]">
{projects.map((project, index) => (
<Link to={`/project/${project.name}`} key={index}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
{project.name}
</h1>
</Link>
))}
</div>
</>
);
}
export default DisplayUserProject;

84
frontend/src/Components/EditWeeklyReport.tsx
View file

@ -1,11 +1,14 @@
import { useState, useEffect } from "react";
import { NewWeeklyReport } from "../Types/goTypes";
import { WeeklyReport, NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import Button from "./Button";
/**
* Renders the component for editing a weekly report.
* @returns JSX.Element
*/
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);
@ -16,46 +19,49 @@ export default function GetWeeklyReport(): JSX.Element {
const token = localStorage.getItem("accessToken") ?? "";
const username = localStorage.getItem("username") ?? "";
const { projectName } = useParams();
const { fetchedWeek } = useParams();
const fetchWeeklyReport = async (): Promise<void> => {
const response = await api.getWeeklyReport(
username,
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);
}
};
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);
}
};
void fetchWeeklyReport();
}, [projectName, token, username, week]);
});
const handleNewWeeklyReport = async (): Promise<void> => {
const newWeeklyReport: NewWeeklyReport = {
projectName,
projectName: projectName ?? "",
week,
developmentTime,
meetingTime,
@ -82,7 +88,7 @@ export default function GetWeeklyReport(): JSX.Element {
}
e.preventDefault();
void handleNewWeeklyReport();
navigate("/project");
navigate(-1);
}}
>
<div className="flex flex-col items-center">
@ -233,7 +239,7 @@ export default function GetWeeklyReport(): JSX.Element {
</tbody>
</table>
<Button
text="Submit"
text="Submit changes"
onClick={(): void => {
return;
}}

8
frontend/src/Components/Footer.tsx
View file

@ -1,5 +1,13 @@
//info: Footer component to display the footer of a page where the buttons are placed
import React from "react";
/**
* Footer component.
*
* @param {Object} props - The component props.
* @param {React.ReactNode} props.children - The children elements to render inside the footer (buttons).
* @returns {JSX.Element} The rendered footer component.
*/
function Footer({ children }: { children: React.ReactNode }): JSX.Element {
return (
<footer className="bg-white">

35
frontend/src/Components/GetAllUsers.tsx Normal file
View file

@ -0,0 +1,35 @@
import { Dispatch, useEffect } from "react";
import { api } from "../API/API";
/**
* Gets all usernames in the system and puts them in an array
* @param props - A setStateAction for the array you want to put users in
* @returns {void} Nothing
* @example
* const [users, setUsers] = useState<string[]>([]);
* GetAllUsers({ setUsersProp: setUsers });
*/
function GetAllUsers(props: {
setUsersProp: Dispatch<React.SetStateAction<string[]>>;
}): void {
const setUsers: Dispatch<React.SetStateAction<string[]>> = props.setUsersProp;
useEffect(() => {
const fetchUsers = async (): Promise<void> => {
try {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getAllUsers(token);
if (response.success) {
setUsers(response.data ?? []);
} else {
console.error("Failed to fetch users:", response.message);
}
} catch (error) {
console.error("Error fetching users:", error);
}
};
void fetchUsers();
}, [setUsers]);
}
export default GetAllUsers;

5
frontend/src/Components/Header.tsx
View file

@ -1,7 +1,12 @@
//info: Header component to display the header of the page including the logo and user information where thr user can logout
import { useState } from "react";
import { Link } from "react-router-dom";
import backgroundImage from "../assets/1.jpg";
/**
* Renders the header component.
* @returns JSX.Element representing the header component.
*/
function Header(): JSX.Element {
const [isOpen, setIsOpen] = useState(false);

7
frontend/src/Components/LoginCheck.tsx
View file

@ -32,16 +32,11 @@ function LoginCheck(props: {
prevAuth = 1;
return prevAuth;
});
} else if (token !== "" && props.username === "pm") {
} else if (token !== "") {
props.setAuthority((prevAuth) => {
prevAuth = 2;
return prevAuth;
});
} else if (token !== "" && props.username === "user") {
props.setAuthority((prevAuth) => {
prevAuth = 3;
return prevAuth;
});
}
} else {
console.error("Token was undefined");

12
frontend/src/Components/NewWeeklyReport.tsx
View file

@ -1,11 +1,17 @@
//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>();
const [week, setWeek] = useState<number>(0);
const [developmentTime, setDevelopmentTime] = useState<number>();
const [meetingTime, setMeetingTime] = useState<number>();
const [adminTime, setAdminTime] = useState<number>();
@ -19,7 +25,7 @@ export default function NewWeeklyReport(): JSX.Element {
const handleNewWeeklyReport = async (): Promise<void> => {
const newWeeklyReport: NewWeeklyReport = {
projectName: projectName ?? "",
week: week ?? 0,
week: week,
developmentTime: developmentTime ?? 0,
meetingTime: meetingTime ?? 0,
adminTime: adminTime ?? 0,
@ -45,7 +51,7 @@ export default function NewWeeklyReport(): JSX.Element {
}
e.preventDefault();
void handleNewWeeklyReport();
navigate("/project");
navigate(-1);
}}
>
<div className="flex flex-col items-center">

34
frontend/src/Components/PMProjectMenu.tsx Normal file
View file

@ -0,0 +1,34 @@
import { Link, useParams } from "react-router-dom";
import { JSX } from "react/jsx-runtime";
function PMProjectMenu(): JSX.Element {
const { projectName } = useParams();
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
<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-[5vh] p-[30px]">
<Link to={`/timeReports/${projectName}/`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to={`/newTimeReport/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
</Link>
<Link to={`/projectMembers/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Statistics
</h1>
</Link>
<Link to={`/unsignedReports/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Unsigned Time Reports
</h1>
</Link>
</div>
</>
);
}
export default PMProjectMenu;

99
frontend/src/Components/ProjectMembers.tsx Normal file
View file

@ -0,0 +1,99 @@
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
function ProjectMembers(): JSX.Element {
const { projectName } = useParams();
const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
// const getProjectMembers = async (): Promise<void> => {
// 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<void> => {
// Use the mock data
setProjectMembers(mockProjectMembers);
await Promise.resolve();
};
useEffect(() => {
void getProjectMembers();
});
return (
<>
<div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
{projectMembers.map((projectMember, index) => (
<h1 key={index} className="border-b-2 border-black w-full">
<div className="flex justify-between">
<div className="flex">
<h1>{projectMember.username}</h1>
<span className="ml-6 mr-2 font-bold">Role:</span>
<h1>{projectMember.role}</h1>
</div>
<div className="flex">
<div className="ml-auto flex space-x-4">
<Link
to={`/viewReports/${projectName}/${projectMember.username}`}
>
<h1 className="underline cursor-pointer font-bold">
View Reports
</h1>
</Link>
<Link
to={`/changeRole/${projectName}/${projectMember.username}`}
>
<h1 className="underline cursor-pointer font-bold">
Change Role
</h1>
</Link>
</div>
</div>
</div>
</h1>
))}
</div>
</>
);
}
export default ProjectMembers;

4
frontend/src/Components/Register.tsx
View file

@ -6,6 +6,10 @@ import Button from "./Button";
import InputField from "./InputField";
import { useNavigate } from "react-router-dom";
/**
* Renders a registration form for the admin to add new users in.
* @returns The JSX element representing the registration form.
*/
export default function Register(): JSX.Element {
const [username, setUsername] = useState<string>();
const [password, setPassword] = useState<string>();

16
frontend/src/Components/UserListAdmin.tsx
View file

@ -1,14 +1,6 @@
import { useState } from "react";
import { PublicUser } from "../Types/goTypes";
import UserInfoModal from "./UserInfoModal";
/**
* The props for the UserProps component
*/
interface UserProps {
users: PublicUser[];
}
/**
* A list of users for admin manage users page, that sets an onClick
* function for eact user <li> element, which displays a modul with
@ -20,7 +12,7 @@ interface UserProps {
* return <UserList users={users} />;
*/
export function UserListAdmin(props: UserProps): JSX.Element {
export function UserListAdmin(props: { users: string[] }): JSX.Element {
const [modalVisible, setModalVisible] = useState(false);
const [username, setUsername] = useState("");
@ -46,12 +38,12 @@ export function UserListAdmin(props: UserProps): JSX.Element {
{props.users.map((user) => (
<li
className="pt-5"
key={user.userId}
key={user}
onClick={() => {
handleClick(user.username);
handleClick(user);
}}
>
{user.username}
{user}
</li>
))}
</ul>

32
frontend/src/Components/UserProjectMenu.tsx Normal file
View file

@ -0,0 +1,32 @@
//info: User project menu component to display the user project menu where the user can navigate to
//existing time reports in a project and create a new time report
import { useParams, Link } from "react-router-dom";
import { JSX } from "react/jsx-runtime";
/**
* Renders the user project menu component.
*
* @returns JSX.Element representing the user project menu.
*/
function UserProjectMenu(): JSX.Element {
const { projectName } = useParams();
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
<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]">
<Link to={`/timeReports/${projectName}/`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to={`/newTimeReport/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
</Link>
</div>
</>
);
}
export default UserProjectMenu;

10
frontend/src/Pages/AdminPages/AdminManageUsers.tsx
View file

@ -2,15 +2,13 @@ import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { UserListAdmin } from "../../Components/UserListAdmin";
import { PublicUser } from "../../Types/goTypes";
import { useNavigate } from "react-router-dom";
import GetAllUsers from "../../Components/GetAllUsers";
import { useState } from "react";
function AdminManageUsers(): JSX.Element {
//TODO: Change so that it reads users from database
const users: PublicUser[] = [];
for (let i = 1; i <= 20; i++) {
users.push({ userId: "id" + i, username: "Example User " + i });
}
const [users, setUsers] = useState<string[]>([]);
GetAllUsers({ setUsersProp: setUsers });
const navigate = useNavigate();

2
frontend/src/Pages/App.tsx
View file

@ -11,8 +11,6 @@ function App(): JSX.Element {
if (authority === 1) {
navigate("/admin");
} else if (authority === 2) {
navigate("/pm");
} else if (authority === 3) {
navigate("/yourProjects");
}
}, [authority, navigate]);

15
frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx
View file

@ -1,19 +1,16 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import ChangeRoles from "../../Components/ChangeRoles";
function ChangeRole(): JSX.Element {
const content = <></>;
const content = (
<>
<ChangeRoles />
</>
);
const buttons = (
<>
<Button
text="Save"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

13
frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
View file

@ -1,10 +1,19 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { Link } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import ProjectMembers from "../../Components/ProjectMembers";
function PMProjectMembers(): JSX.Element {
const content = <></>;
const { projectName } = useParams();
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
All Members In: {projectName}{" "}
</h1>
<ProjectMembers />
</>
);
const buttons = (
<>

35
frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
View file

@ -1,36 +1,21 @@
import { Link } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import { JSX } from "react/jsx-runtime";
import PMProjectMenu from "../../Components/PMProjectMenu";
import BackButton from "../../Components/BackButton";
function PMProjectPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
<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-[5vh] p-[30px]">
<Link to="/project-page">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to="/new-time-report">
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
</Link>
<Link to="/project-members">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Statistics
</h1>
</Link>
<Link to="/PM-unsigned-reports">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Unsigned Time Reports
</h1>
</Link>
</div>
<PMProjectMenu />
</>
);
return <BasicWindow content={content} buttons={undefined} />;
const buttons = (
<>
<BackButton />
</>
);
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMProjectPage;

18
frontend/src/Pages/UnauthorizedPage.tsx Normal file
View file

@ -0,0 +1,18 @@
import Button from "../Components/Button";
export default function UnauthorizedPage(): JSX.Element {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white">
<h1 className="text-[30px]">Unauthorized</h1>
<a href="/">
<Button
text="Go to Home Page"
onClick={(): void => {
localStorage.clear();
}}
type="button"
/>
</a>
</div>
);
}

13
frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx
View file

@ -1,7 +1,6 @@
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import NewWeeklyReport from "../../Components/NewWeeklyReport";
import { Link } from "react-router-dom";
function UserNewTimeReportPage(): JSX.Element {
const content = (
@ -13,15 +12,7 @@ function UserNewTimeReportPage(): JSX.Element {
const buttons = (
<>
<Link to="/project">
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
</Link>
<BackButton />
</>
);

18
frontend/src/Pages/UserPages/UserProjectPage.tsx
View file

@ -1,25 +1,11 @@
import { Link, useLocation, useParams } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import UserProjectMenu from "../../Components/UserProjectMenu";
function UserProjectPage(): JSX.Element {
const { projectName } = useParams();
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</h1>
<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]">
<Link to={`/projectPage/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
Your Time Reports
</h1>
</Link>
<Link to={`/newTimeReport/${projectName}`}>
<h1 className="font-bold underline text-[30px] cursor-pointer">
New Time Report
</h1>
</Link>
</div>
<UserProjectMenu />
</>
);

10
frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx
View file

@ -1,11 +1,17 @@
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import { useParams } from "react-router-dom";
import AllTimeReportsInProject from "../../Components/AllTimeReportsInProject";
function UserViewTimeReportsPage(): JSX.Element {
const { projectName } = useParams();
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Your Time Reports</h1>
{/* Här kan du inkludera logiken för att visa användarens tidrapporter */}
<h1 className="font-bold text-[30px] mb-[20px]">
Your Time Reports In: {projectName}
</h1>
<AllTimeReportsInProject />
</>
);

49
frontend/src/Pages/YourProjectsPage.tsx
View file

@ -1,52 +1,11 @@
import { useState, createContext } from "react";
import { Project } from "../Types/goTypes";
import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";
export const ProjectNameContext = createContext("");
import DisplayUserProjects from "../Components/DisplayUserProjects";
function UserProjectPage(): JSX.Element {
const [projects, setProjects] = useState<Project[]>([]);
const [selectedProject, setSelectedProject] = useState("");
const getProjects = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getUserProjects(token);
console.log(response);
if (response.success) {
setProjects(response.data ?? []);
} else {
console.error(response.message);
}
};
// Call getProjects when the component mounts
useEffect(() => {
void getProjects();
}, []);
const handleProjectClick = (projectName: string): void => {
setSelectedProject(projectName);
};
const content = (
<ProjectNameContext.Provider value={selectedProject}>
<h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
<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]">
{projects.map((project, index) => (
<Link
to={`/project/${project.name}`}
onClick={() => {
handleProjectClick(project.name);
}}
key={index}
>
<h1 className="font-bold underline text-[30px] cursor-pointer">
{project.name}
</h1>
</Link>
))}
</div>
</ProjectNameContext.Provider>
<>
<DisplayUserProjects />
</>
);
const buttons = <></>;

21
frontend/src/main.tsx
View file

@ -30,6 +30,7 @@ import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.ts
import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
import NotFoundPage from "./Pages/NotFoundPage.tsx";
import UnauthorizedPage from "./Pages/UnauthorizedPage.tsx";
// This is where the routes are mounted
const router = createBrowserRouter([
@ -42,10 +43,6 @@ const router = createBrowserRouter([
path: "/admin",
element: <AdminMenuPage />,
},
{
path: "/pm",
element: <YourProjectsPage />,
},
{
path: "/yourProjects",
element: <YourProjectsPage />,
@ -59,15 +56,15 @@ const router = createBrowserRouter([
element: <UserNewTimeReportPage />,
},
{
path: "/projectPage/:projectName",
path: "/timeReports/:projectName",
element: <UserViewTimeReportsPage />,
},
{
path: "/editTimeReport",
path: "/editTimeReport/:projectName/:weekNumber",
element: <UserEditTimeReportPage />,
},
{
path: "/changeRole",
path: "/changeRole/:projectName/:username",
element: <PMChangeRole />,
},
{
@ -75,11 +72,11 @@ const router = createBrowserRouter([
element: <PMOtherUsersTR />,
},
{
path: "/projectMembers",
path: "/projectMembers/:projectName",
element: <PMProjectMembers />,
},
{
path: "/PMProjectPage",
path: "/PMProjectPage/:projectName",
element: <PMProjectPage />,
},
{
@ -91,7 +88,7 @@ const router = createBrowserRouter([
element: <PMTotalTimeRole />,
},
{
path: "/PMUnsignedReports",
path: "/unsignedReports/:projectName",
element: <PMUnsignedReports />,
},
{
@ -146,6 +143,10 @@ const router = createBrowserRouter([
path: "/adminManageUser",
element: <AdminManageUsers />,
},
{
path: "/unauthorized",
element: <UnauthorizedPage />,
},
]);
// Semi-hacky way to get the root element