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

Merge branch 'frontend' into dev

Browse source
This commit is contained in:
Imbus 2024-03-18 21:18:49 +01:00
commit f437b25da5
39 changed files with 702 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -46,6 +46,7 @@ interface API {
username: string,
token: string,
): Promise<APIResponse<Project[]>>;
/** Gets a project from id*/
getProject(id: number): Promise<APIResponse<Project>>;
}
@ -149,7 +150,10 @@ export const api: API = {
}
},
async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
async getUserProjects(
username: string,
token: string,
): Promise<APIResponse<Project[]>> {
try {
const response = await fetch("/api/getUserProjects", {
method: "GET",
@ -157,6 +161,7 @@ export const api: API = {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
body: JSON.stringify({ username }),
});
if (!response.ok) {

94
frontend/src/Components/AddProject.tsx Normal file
View file

@ -0,0 +1,94 @@
import { useState } from "react";
import { APIResponse, api } from "../API/API";
import { NewProject, Project } from "../Types/goTypes";
import InputField from "./InputField";
import Logo from "../assets/Logo.svg";
import Button from "./Button";
/**
* Tries to add a project to the system
* @param props - Project name and description
* @returns {boolean} True if created, false if not
*/
function CreateProject(props: { name: string; description: string }): boolean {
const project: NewProject = {
name: props.name,
description: props.description,
};
let created = false;
api
.createProject(project, localStorage.getItem("accessToken") ?? "")
.then((response: APIResponse<Project>) => {
if (response.success) {
created = true;
} else {
console.error(response.message);
}
})
.catch((error) => {
console.error("An error occurred during creation:", error);
});
return created;
}
/**
* Tries to add a project to the system
* @returns {JSX.Element} UI for project adding
*/
function AddProject(): JSX.Element {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
return (
<div className="flex flex-col h-fit w-screen items-center justify-center">
<div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
<form
className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
onSubmit={(e) => {
e.preventDefault();
CreateProject({ name: name, description: description });
}}
>
<img
src={Logo}
className="logo w-[7vw] mb-10 mt-10"
alt="TTIME Logo"
/>
<h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
Create a new project
</h3>
<InputField
label="Name"
type="text"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
<InputField
label="Description"
type="text"
value={description}
onChange={(e) => {
setDescription(e.target.value);
}}
/>
<div className="flex items-center justify-between">
<Button
text="Create"
onClick={(): void => {
return;
}}
type="submit"
/>
</div>
</form>
<p className="text-center text-gray-500 text-xs"></p>
</div>
</div>
);
}
export default AddProject;

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

@ -2,17 +2,15 @@ import Header from "./Header";
import Footer from "./Footer";
function BasicWindow({
username,
content,
buttons,
}: {
username: string;
content: React.ReactNode;
buttons: React.ReactNode;
}): JSX.Element {
return (
<div className="font-sans flex flex-col h-screen bg-white border-2 border-black overflow-auto pt-[110px]">
<Header username={username} />
<Header />
<div className="flex flex-col items-center flex-grow">{content}</div>
<Footer>{buttons}</Footer>
</div>

247
frontend/src/Components/EditWeeklyReport.tsx Normal file
View 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);
}
};
void fetchWeeklyReport();
}, [projectName, token, username, week]);
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>
</>
);
}

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

@ -1,11 +1,11 @@
import { useState } from "react";
import { Link } from "react-router-dom";
function Header({ username }: { username: string }): JSX.Element {
function Header(): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
const handleLogout = (): void => {
// Add any logout logic here
localStorage.clear();
};
return (
@ -31,7 +31,7 @@ function Header({ username }: { username: string }): JSX.Element {
}}
>
<button className="mr-4 underline font-bold text-white">
{username}
{localStorage.getItem("username")}
</button>
{isOpen && (

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

@ -10,17 +10,22 @@ function LoginCheck(props: {
username: string;
password: string;
setAuthority: Dispatch<SetStateAction<number>>;
}): number {
}): void {
const user: NewUser = {
username: props.username,
password: props.password,
};
localStorage.clear();
api
.login(user)
.then((response: APIResponse<string>) => {
if (response.success) {
if (response.data !== undefined) {
const token = response.data;
localStorage.setItem("accessToken", token);
localStorage.setItem("username", props.username);
//TODO: change so that it checks for user type (admin, user, pm) instead
if (token !== "" && props.username === "admin") {
props.setAuthority((prevAuth) => {
@ -42,14 +47,12 @@ function LoginCheck(props: {
console.error("Token was undefined");
}
} else {
console.error("Token could not be fetched");
console.error("Token could not be fetched/No such user");
}
})
.catch((error) => {
console.error("An error occurred during login:", error);
});
return 0;
}
export default LoginCheck;

75
frontend/src/Components/TimeReport.tsx → frontend/src/Components/NewWeeklyReport.tsx
View file

@ -1,50 +1,51 @@
import { useState } from "react";
import { useState, useContext } from "react";
import type { NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate } from "react-router-dom";
import Button from "./Button";
import { NewWeeklyReport } from "../Types/goTypes";
import { ProjectNameContext } from "../Pages/YourProjectsPage";
export default function NewTimeReport(): JSX.Element {
const [projectName, setProjectName] = useState<string>("projectName"); // TODO: Get from backend
const [week, setWeek] = useState<number>(NaN);
const [development, setDevelopment] = useState<number>(NaN);
const [meeting, setMeeting] = useState<number>(NaN);
const [administration, setAdministration] = useState<number>(NaN);
const [ownwork, setOwnWork] = useState<number>(NaN);
const [studies, setStudies] = useState<number>(NaN);
const [testing, setTesting] = useState<number>(NaN);
export default function NewWeeklyReport(): 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 handleNewTimeReport = async (): Promise<void> => {
const newTimeReport: NewWeeklyReport = {
const projectName = useContext(ProjectNameContext);
const token = localStorage.getItem("accessToken") ?? "";
const handleNewWeeklyReport = async (): Promise<void> => {
const newWeeklyReport: NewWeeklyReport = {
projectName,
week,
developmentTime: development,
meetingTime: meeting,
adminTime: administration,
ownWorkTime: ownwork,
studyTime: studies,
testingTime: testing,
developmentTime,
meetingTime,
adminTime,
ownWorkTime,
studyTime,
testingTime,
};
await Promise.resolve();
await api.submitWeeklyReport(newTimeReport, "token");
await api.submitWeeklyReport(newWeeklyReport, token);
};
const navigate = useNavigate();
setProjectName("Something Reasonable"); // This should obviously not be used here
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) {
if (week === 0) {
alert("Please enter a week number");
e.preventDefault();
return;
}
e.preventDefault();
void handleNewTimeReport();
void handleNewWeeklyReport();
navigate("/project");
}}
>
@ -83,9 +84,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={development}
value={developmentTime}
onChange={(e) => {
setDevelopment(parseInt(e.target.value));
setDevelopmentTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -102,9 +103,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meeting}
value={meetingTime}
onChange={(e) => {
setMeeting(parseInt(e.target.value));
setMeetingTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -121,9 +122,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={administration}
value={adminTime}
onChange={(e) => {
setAdministration(parseInt(e.target.value));
setAdminTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -140,9 +141,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownwork}
value={ownWorkTime}
onChange={(e) => {
setOwnWork(parseInt(e.target.value));
setOwnWorkTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -159,9 +160,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studies}
value={studyTime}
onChange={(e) => {
setStudies(parseInt(e.target.value));
setStudyTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -178,9 +179,9 @@ export default function NewTimeReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testing}
value={testingTime}
onChange={(e) => {
setTesting(parseInt(e.target.value));
setTestingTime(parseInt(e.target.value));
}}
onKeyDown={(event) => {
const keyValue = event.key;

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

@ -3,34 +3,9 @@ import { NewUser } from "../Types/goTypes";
import { api } from "../API/API";
import Logo from "../assets/Logo.svg";
import Button from "./Button";
import InputField from "./InputField";
import { useNavigate } from "react-router-dom";
function InputField(props: {
label: string;
type: string;
value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}): JSX.Element {
return (
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor={props.label}
>
{props.label}
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id={props.label}
type={props.type}
placeholder={props.label}
value={props.value}
onChange={props.onChange}
/>
</div>
);
}
export default function Register(): JSX.Element {
const [username, setUsername] = useState<string>();
const [password, setPassword] = useState<string>();
@ -48,6 +23,7 @@ export default function Register(): JSX.Element {
nav("/"); // Instantly navigate to the login page
} else {
setErrMessage(response.message ?? "Unknown error");
console.error(errMessage);
}
};
@ -85,43 +61,6 @@ export default function Register(): JSX.Element {
setPassword(e.target.value);
}}
/>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="username"
>
Username
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="username"
type="text"
placeholder="Username"
value={username}
onChange={(e) => {
setUsername(e.target.value);
}}
/>
</div>
<div className="mb-6">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="password"
>
Password
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="password"
type="password"
placeholder="Choose your password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
</div>
{errMessage && <p className="text-red-500 text-xs">{errMessage}</p>}
<div className="flex items-center justify-between">
<Button
text="Register"

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

@ -1,11 +1,11 @@
import { Link } from "react-router-dom";
import { User } from "../Types/goTypes";
import { PublicUser } from "../Types/goTypes";
/**
* The props for the UserProps component
*/
interface UserProps {
users: User[];
users: PublicUser[];
}
/**
@ -23,7 +23,7 @@ export function UserListAdmin(props: UserProps): JSX.Element {
<div>
<ul className="font-bold underline text-[30px] cursor-pointer padding">
{props.users.map((user) => (
<Link to="/admin-view-user" key={user.userId} state={user.username}>
<Link to="/adminUserInfo" key={user.userId} state={user.username}>
<li className="pt-5" key={user.userId}>
{user.username}
</li>

43
frontend/src/Components/UserProjectListAdmin.tsx Normal file
View file

@ -0,0 +1,43 @@
import React, { useEffect, useState } from "react";
import { api } from "../API/API";
import { Project } from "../Types/goTypes";
const UserProjectListAdmin: React.FC = () => {
const [projects, setProjects] = useState<Project[]>([]);
useEffect(() => {
const fetchProjects = async (): Promise<void> => {
try {
const token = localStorage.getItem("accessToken") ?? "";
const username = "NoUser"; // getUsernameFromContext(); // Assuming you have a function to get the username from your context
const response = await api.getUserProjects(username, token);
if (response.success) {
setProjects(response.data ?? []);
} else {
console.error("Failed to fetch projects:", response.message);
}
} catch (error) {
console.error("Error fetching projects:", error);
}
};
void fetchProjects();
}, []);
return (
<div>
<h2>User Projects</h2>
<ul>
{projects.map((project) => (
<li key={project.id}>
<span>{project.name}</span>
{/* Add any additional project details you want to display */}
</li>
))}
</ul>
</div>
);
};
export default UserProjectListAdmin;

22
frontend/src/Pages/AdminPages/AdminAddProject.tsx
View file

@ -1,28 +1,16 @@
import AddProject from "../../Components/AddProject";
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
function AdminAddProject(): JSX.Element {
const content = <></>;
const content = <AddProject />;
const buttons = (
<>
<Button
text="Finish"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminAddProject;

12
frontend/src/Pages/AdminPages/AdminAddUser.tsx
View file

@ -1,5 +1,5 @@
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import Register from "../../Components/Register";
function AdminAddUser(): JSX.Element {
@ -11,16 +11,10 @@ function AdminAddUser(): JSX.Element {
const buttons = (
<>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminAddUser;

2
frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
View file

@ -23,6 +23,6 @@ function AdminChangeUsername(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminChangeUsername;

28
frontend/src/Pages/AdminPages/AdminManageProjects.tsx
View file

@ -1,3 +1,5 @@
import { Link } from "react-router-dom";
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
@ -6,23 +8,19 @@ function AdminManageProjects(): JSX.Element {
const buttons = (
<>
<Button
text="Add Project"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<Link to="/addProject">
<Button
text="Add Project"
onClick={(): void => {
return;
}}
type="button"
/>
</Link>
<BackButton />
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminManageProjects;

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

@ -2,14 +2,14 @@ import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { UserListAdmin } from "../../Components/UserListAdmin";
import { User } from "../../Types/Users";
import { PublicUser } from "../../Types/goTypes";
import { useNavigate } from "react-router-dom";
function AdminManageUsers(): JSX.Element {
//TODO: Change so that it reads users from database
const users: User[] = [];
const users: PublicUser[] = [];
for (let i = 1; i <= 20; i++) {
users.push({ id: i, userName: "Example User " + i });
users.push({ userId: "id" + i, username: "Example User " + i });
}
const navigate = useNavigate();
@ -28,7 +28,7 @@ function AdminManageUsers(): JSX.Element {
<Button
text="Add User"
onClick={(): void => {
navigate("/admin-add-user");
navigate("/adminAddUser");
}}
type="button"
/>
@ -36,6 +36,6 @@ function AdminManageUsers(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminManageUsers;

6
frontend/src/Pages/AdminPages/AdminMenuPage.tsx
View file

@ -6,12 +6,12 @@ function AdminMenuPage(): JSX.Element {
<>
<h1 className="font-bold text-[30px] mb-[20px]">Administrator Menu</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="/admin-manage-users">
<Link to="/adminManageUser">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Manage Users
</h1>
</Link>
<Link to="/admin-manage-projects">
<Link to="/adminManageProject">
<h1 className="font-bold underline text-[30px] cursor-pointer">
Manage Projects
</h1>
@ -22,6 +22,6 @@ function AdminMenuPage(): JSX.Element {
const buttons = <></>;
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminMenuPage;

2
frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
View file

@ -23,6 +23,6 @@ function AdminProjectAddMember(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectAddMember;

2
frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
View file

@ -23,6 +23,6 @@ function AdminProjectChangeUserRole(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectChangeUserRole;

2
frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
View file

@ -23,6 +23,6 @@ function AdminProjectManageMembers(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectManageMembers;

2
frontend/src/Pages/AdminPages/AdminProjectPage.tsx
View file

@ -23,6 +23,6 @@ function AdminProjectPage(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectPage;

2
frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx
View file

@ -16,6 +16,6 @@ function AdminProjectStatistics(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectStatistics;

2
frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
View file

@ -23,6 +23,6 @@ function AdminProjectViewMemberInfo(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectViewMemberInfo;

9
frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
View file

@ -1,15 +1,12 @@
import { useLocation } from "react-router-dom";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import UserProjectListAdmin from "../../Components/UserProjectListAdmin";
function AdminViewUserInfo(): JSX.Element {
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 h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<p>Put relevant info on user from database here</p>
</div>
<UserProjectListAdmin />
</>
);
@ -26,6 +23,6 @@ function AdminViewUserInfo(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminViewUserInfo;

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

@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import LoginPage from "./LoginPage";
import { useNavigate } from "react-router-dom";
@ -6,13 +6,16 @@ import { useNavigate } from "react-router-dom";
function App(): JSX.Element {
const navigate = useNavigate();
const [authority, setAuthority] = useState(0);
if (authority === 1) {
navigate("/admin");
} else if (authority === 2) {
navigate("/pm");
} else if (authority === 3) {
navigate("/user");
}
useEffect(() => {
if (authority === 1) {
navigate("/admin");
} else if (authority === 2) {
navigate("/pm");
} else if (authority === 3) {
navigate("/user");
}
}, [authority, navigate]);
return <LoginPage setAuthority={setAuthority} />;
}

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

@ -18,6 +18,6 @@ function ChangeRole(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default ChangeRole;

2
frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx
View file

@ -10,6 +10,6 @@ function PMOtherUsersTR(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMOtherUsersTR;

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

@ -30,6 +30,6 @@ function PMProjectMembers(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMProjectMembers;

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

@ -31,6 +31,6 @@ function PMProjectPage(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={undefined} />;
return <BasicWindow content={content} buttons={undefined} />;
}
export default PMProjectPage;

6
frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
View file

@ -1,6 +1,6 @@
import BasicWindow from "../../Components/BasicWindow";
import TimeReport from "../../Components/TimeReport";
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import TimeReport from "../../Components/NewWeeklyReport";
function PMTotalTimeActivity(): JSX.Element {
const content = (
@ -18,6 +18,6 @@ function PMTotalTimeActivity(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMTotalTimeActivity;

2
frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
View file

@ -10,6 +10,6 @@ function PMTotalTimeRole(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMTotalTimeRole;

2
frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx
View file

@ -10,6 +10,6 @@ function PMUnsignedReports(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMUnsignedReports;

6
frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx
View file

@ -1,7 +1,7 @@
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import TimeReport from "../../Components/TimeReport";
import BackButton from "../../Components/BackButton";
import TimeReport from "../../Components/NewWeeklyReport";
function PMViewUnsignedReport(): JSX.Element {
const content = (
@ -33,6 +33,6 @@ function PMViewUnsignedReport(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMViewUnsignedReport;

14
frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx
View file

@ -1,29 +1,21 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import NewTimeReport from "../../Components/TimeReport";
import BackButton from "../../Components/BackButton";
import EditWeeklyReport from "../../Components/EditWeeklyReport";
function UserEditTimeReportPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
<NewTimeReport />
<EditWeeklyReport />
</>
);
const buttons = (
<>
<Button
text="Save"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default UserEditTimeReportPage;

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

@ -1,13 +1,13 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import NewTimeReport from "../../Components/TimeReport";
import NewWeeklyReport from "../../Components/NewWeeklyReport";
import { Link } from "react-router-dom";
function UserNewTimeReportPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1>
<NewTimeReport />
<NewWeeklyReport />
</>
);
@ -25,6 +25,6 @@ function UserNewTimeReportPage(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default UserNewTimeReportPage;

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

@ -27,6 +27,6 @@ function UserProjectPage(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default UserProjectPage;

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

@ -15,6 +15,6 @@ function UserViewTimeReportsPage(): JSX.Element {
</>
);
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
return <BasicWindow content={content} buttons={buttons} />;
}
export default UserViewTimeReportsPage;

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

@ -1,31 +1,59 @@
import { useState, createContext, useEffect } from "react";
import { Project } from "../Types/goTypes";
import { api } from "../API/API";
import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";
import { ProjectListUser } from "../Components/ProjectListUser";
import { Project } from "../Types/Project";
function YourProjectsPage(): JSX.Element {
//TODO: Change so that it reads projects from database
const projects: Project[] = [];
for (let i = 1; i <= 20; i++) {
projects.push({
id: i,
name: "Example Project " + i,
description: "good",
created: "now",
owner: "me",
});
}
export const ProjectNameContext = createContext("");
function UserProjectPage(): JSX.Element {
const [projects, setProjects] = useState<Project[]>([]);
const [selectedProject, setSelectedProject] = useState("");
const getProjects = async (): Promise<void> => {
const username = localStorage.getItem("username") ?? ""; // replace with actual username
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(() => {
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 h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
<ProjectListUser projects={projects} />
<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.id}`}
onClick={() => {
handleProjectClick(project.name);
}}
key={index}
>
<h1 className="font-bold underline text-[30px] cursor-pointer">
{project.name}
</h1>
</Link>
))}
</div>
</>
</ProjectNameContext.Provider>
);
const buttons = <></>;
return <BasicWindow username="Admin" content={content} buttons={buttons} />;
}
export default YourProjectsPage;
export default UserProjectPage;

132
frontend/src/main.tsx
View file

@ -3,8 +3,32 @@ import ReactDOM from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./Pages/App";
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage";
import YourProjectsPage from "./Pages/YourProjectsPage";
import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
import UserViewTimeReportsPage from "./Pages/UserPages/UserViewTimeReportsPage.tsx";
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
const router = createBrowserRouter([
@ -20,6 +44,110 @@ const router = createBrowserRouter([
path: "/pm",
element: <YourProjectsPage />,
},
{
path: "/user",
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",
element: <AdminAddProject />,
},
{
path: "/adminAddUser",
element: <AdminAddUser />,
},
{
path: "/adminUserInfo",
element: <AdminViewUserInfo />,
},
{
path: "/adminManageProject",
element: <AdminManageProjects />,
},
{
path: "/adminManageUser",
element: <AdminManageUsers />,
},
]);
// Semi-hacky way to get the root element

17
testing.py
View file

@ -22,13 +22,11 @@ loginPath = base_url + "/api/login"
addProjectPath = base_url + "/api/project"
submitReportPath = base_url + "/api/submitReport"
getWeeklyReportPath = base_url + "/api/getWeeklyReport"
<<<<<<< HEAD
getProjectPath = base_url + "/api/project"
=======
signReportPath = base_url + "/api/signReport"
addUserToProjectPath = base_url + "/api/addUserToProject"
promoteToAdminPath = base_url + "/api/promoteToAdmin"
>>>>>>> 9ad89d60636ac6091d71b0bf307982becc9b89fe
getUserProjectsPath = base_url + "/api/getUserProjects"
# Posts the username and password to the register endpoint
@ -150,6 +148,16 @@ def test_add_user_to_project():
assert response.status_code == 200, "Add user to project failed"
print("Add user to project successful")
# Check if the user is added to the project
response = requests.get(
getUserProjectsPath,
json={"username": new_user},
headers={"Authorization": "Bearer " + admin_token},
)
print(response.text)
assert response.status_code == 200, "Get user projects failed"
print("got user projects successfully")
# Test function to sign a report
def test_sign_report():
# Create a project manager user
@ -232,9 +240,6 @@ if __name__ == "__main__":
test_add_project()
test_submit_report()
test_get_weekly_report()
<<<<<<< HEAD
test_get_project()
=======
test_sign_report()
test_add_user_to_project()
>>>>>>> 9ad89d60636ac6091d71b0bf307982becc9b89fe