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

Merge branch 'dev' into gruppPP

Browse source
This commit is contained in:
Peter KW 2024-03-29 20:05:10 +01:00
commit 4ab23b3c3c
70 changed files with 3279 additions and 1171 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/.prettierignore Normal file
View file

@ -0,0 +1,2 @@
goTypes.ts
GenApi.ts

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

@ -49,7 +49,6 @@ interface API {
* @returns {Promise<APIResponse<boolean>>} A promise containing the API response indicating if the user is a project manager.
*/
checkIfProjectManager(
username: string,
projectName: string,
token: string,
): Promise<APIResponse<boolean>>;
@ -87,7 +86,7 @@ interface API {
submitWeeklyReport(
weeklyReport: NewWeeklyReport,
token: string,
): Promise<APIResponse<NewWeeklyReport>>;
): Promise<APIResponse<string>>;
/** Gets a weekly report for a specific user, project and week
* @param {string} projectName The name of the project.
@ -153,6 +152,23 @@ interface API {
user: NewProjMember,
token: string,
): Promise<APIResponse<NewProjMember>>;
removeProject(
projectName: string,
token: string,
): Promise<APIResponse<string>>;
/**
* Signs a report. Keep in mind that the user which the token belongs to must be
* the project manager of the project the report belongs to.
*
* @param {number} reportId The id of the report to sign
* @param {string} token The authentication token
*/
signReport(
reportId: number,
token: string,
): Promise<APIResponse<string>>;
}
/** An instance of the API */
@ -208,19 +224,20 @@ export const api: API = {
},
async checkIfProjectManager(
username: string,
projectName: string,
token: string,
): Promise<APIResponse<boolean>> {
try {
const response = await fetch("/api/checkIfProjectManager", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
const response = await fetch(
`/api/checkIfProjectManager/${projectName}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
},
body: JSON.stringify({ username, projectName }),
});
);
if (!response.ok) {
return {
@ -232,7 +249,7 @@ export const api: API = {
return { success: true, data };
}
} catch (e) {
return { success: false, message: "fuck" };
return { success: false, message: "Failed to check if project manager" };
}
},
@ -339,7 +356,7 @@ export const api: API = {
async submitWeeklyReport(
weeklyReport: NewWeeklyReport,
token: string,
): Promise<APIResponse<NewWeeklyReport>> {
): Promise<APIResponse<string>> {
try {
const response = await fetch("/api/submitWeeklyReport", {
method: "POST",
@ -357,8 +374,8 @@ export const api: API = {
};
}
const data = (await response.json()) as NewWeeklyReport;
return { success: true, data };
const data = await response.text();
return { success: true, message: data };
} catch (e) {
return {
success: false,
@ -553,4 +570,57 @@ export const api: API = {
return { success: false, message: "Failed to change username" };
}
},
async removeProject(
projectName: string,
token: string,
): Promise<APIResponse<string>> {
try {
const response = await fetch(`/api/projectdelete/${projectName}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
});
if (!response.ok) {
return Promise.resolve({
success: false,
message: "Failed to remove project",
});
} else {
const data = await response.text();
return Promise.resolve({ success: true, message: data });
}
} catch (e) {
return Promise.resolve({
success: false,
message: "Failed to remove project",
});
}
},
async signReport(
reportId: number,
token: string,
): Promise<APIResponse<string>> {
try {
const response = await fetch(`/api/signReport/${reportId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
});
if (!response.ok) {
return { success: false, message: "Failed to sign report" };
} else {
return { success: true, message: "Report signed" };
}
} catch (e) {
return { success: false, message: "Failed to sign report" };
}
}
};

358
frontend/src/API/GenApi.ts Normal file
View file

@ -0,0 +1,358 @@
/* eslint-disable */
/* tslint:disable */
/*
* ---------------------------------------------------------------
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
* ## ##
* ## AUTHOR: acacode ##
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
* ---------------------------------------------------------------
*/
export interface TypesNewUser {
/** @example "password123" */
password?: string;
/** @example "username123" */
username?: string;
}
export interface TypesToken {
token?: string;
}
export type QueryParamsType = Record<string | number, any>;
export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
export interface FullRequestParams extends Omit<RequestInit, "body"> {
/** set parameter to `true` for call `securityWorker` for this request */
secure?: boolean;
/** request path */
path: string;
/** content type of request body */
type?: ContentType;
/** query params */
query?: QueryParamsType;
/** format of response (i.e. response.json() -> format: "json") */
format?: ResponseFormat;
/** request body */
body?: unknown;
/** base url */
baseUrl?: string;
/** request cancellation token */
cancelToken?: CancelToken;
}
export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">;
export interface ApiConfig<SecurityDataType = unknown> {
baseUrl?: string;
baseApiParams?: Omit<RequestParams, "baseUrl" | "cancelToken" | "signal">;
securityWorker?: (securityData: SecurityDataType | null) => Promise<RequestParams | void> | RequestParams | void;
customFetch?: typeof fetch;
}
export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
data: D;
error: E;
}
type CancelToken = Symbol | string | number;
export enum ContentType {
Json = "application/json",
FormData = "multipart/form-data",
UrlEncoded = "application/x-www-form-urlencoded",
Text = "text/plain",
}
export class HttpClient<SecurityDataType = unknown> {
public baseUrl: string = "//localhost:8080/api";
private securityData: SecurityDataType | null = null;
private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
private abortControllers = new Map<CancelToken, AbortController>();
private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);
private baseApiParams: RequestParams = {
credentials: "same-origin",
headers: {},
redirect: "follow",
referrerPolicy: "no-referrer",
};
constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
Object.assign(this, apiConfig);
}
public setSecurityData = (data: SecurityDataType | null) => {
this.securityData = data;
};
protected encodeQueryParam(key: string, value: any) {
const encodedKey = encodeURIComponent(key);
return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
}
protected addQueryParam(query: QueryParamsType, key: string) {
return this.encodeQueryParam(key, query[key]);
}
protected addArrayQueryParam(query: QueryParamsType, key: string) {
const value = query[key];
return value.map((v: any) => this.encodeQueryParam(key, v)).join("&");
}
protected toQueryString(rawQuery?: QueryParamsType): string {
const query = rawQuery || {};
const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
return keys
.map((key) => (Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)))
.join("&");
}
protected addQueryParams(rawQuery?: QueryParamsType): string {
const queryString = this.toQueryString(rawQuery);
return queryString ? `?${queryString}` : "";
}
private contentFormatters: Record<ContentType, (input: any) => any> = {
[ContentType.Json]: (input: any) =>
input !== null && (typeof input === "object" || typeof input === "string") ? JSON.stringify(input) : input,
[ContentType.Text]: (input: any) => (input !== null && typeof input !== "string" ? JSON.stringify(input) : input),
[ContentType.FormData]: (input: any) =>
Object.keys(input || {}).reduce((formData, key) => {
const property = input[key];
formData.append(
key,
property instanceof Blob
? property
: typeof property === "object" && property !== null
? JSON.stringify(property)
: `${property}`,
);
return formData;
}, new FormData()),
[ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
};
protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
return {
...this.baseApiParams,
...params1,
...(params2 || {}),
headers: {
...(this.baseApiParams.headers || {}),
...(params1.headers || {}),
...((params2 && params2.headers) || {}),
},
};
}
protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
if (this.abortControllers.has(cancelToken)) {
const abortController = this.abortControllers.get(cancelToken);
if (abortController) {
return abortController.signal;
}
return void 0;
}
const abortController = new AbortController();
this.abortControllers.set(cancelToken, abortController);
return abortController.signal;
};
public abortRequest = (cancelToken: CancelToken) => {
const abortController = this.abortControllers.get(cancelToken);
if (abortController) {
abortController.abort();
this.abortControllers.delete(cancelToken);
}
};
public request = async <T = any, E = any>({
body,
secure,
path,
type,
query,
format,
baseUrl,
cancelToken,
...params
}: FullRequestParams): Promise<HttpResponse<T, E>> => {
const secureParams =
((typeof secure === "boolean" ? secure : this.baseApiParams.secure) &&
this.securityWorker &&
(await this.securityWorker(this.securityData))) ||
{};
const requestParams = this.mergeRequestParams(params, secureParams);
const queryString = query && this.toQueryString(query);
const payloadFormatter = this.contentFormatters[type || ContentType.Json];
const responseFormat = format || requestParams.format;
return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, {
...requestParams,
headers: {
...(requestParams.headers || {}),
...(type && type !== ContentType.FormData ? { "Content-Type": type } : {}),
},
signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
body: typeof body === "undefined" || body === null ? null : payloadFormatter(body),
}).then(async (response) => {
const r = response as HttpResponse<T, E>;
r.data = null as unknown as T;
r.error = null as unknown as E;
const data = !responseFormat
? r
: await response[responseFormat]()
.then((data) => {
if (r.ok) {
r.data = data;
} else {
r.error = data;
}
return r;
})
.catch((e) => {
r.error = e;
return r;
});
if (cancelToken) {
this.abortControllers.delete(cancelToken);
}
if (!response.ok) throw data;
return data;
});
};
}
/**
* @title TTime API
* @version 0.0.1
* @license AGPL (https://www.gnu.org/licenses/agpl-3.0.html)
* @baseUrl //localhost:8080/api
* @externalDocs https://swagger.io/resources/open-api/
* @contact
*
* This is the API for TTime, a time tracking application.
*/
export class GenApi<SecurityDataType extends unknown> extends HttpClient<SecurityDataType> {
login = {
/**
* @description Logs in a user and returns a JWT token
*
* @tags Auth
* @name LoginCreate
* @summary Login
* @request POST:/login
*/
loginCreate: (body: TypesNewUser, params: RequestParams = {}) =>
this.request<TypesToken, string>({
path: `/login`,
method: "POST",
body: body,
type: ContentType.Json,
format: "json",
...params,
}),
};
loginrenew = {
/**
* @description Renews the users token.
*
* @tags Auth
* @name LoginrenewCreate
* @summary LoginRenews
* @request POST:/loginrenew
* @secure
*/
loginrenewCreate: (params: RequestParams = {}) =>
this.request<TypesToken, string>({
path: `/loginrenew`,
method: "POST",
secure: true,
format: "json",
...params,
}),
};
promoteToAdmin = {
/**
* @description Promote chosen user to site admin
*
* @tags User
* @name PromoteToAdminCreate
* @summary PromoteToAdmin
* @request POST:/promoteToAdmin
* @secure
*/
promoteToAdminCreate: (NewUser: TypesNewUser, params: RequestParams = {}) =>
this.request<TypesToken, string>({
path: `/promoteToAdmin`,
method: "POST",
body: NewUser,
secure: true,
type: ContentType.Json,
...params,
}),
};
register = {
/**
* @description Register a new user
*
* @tags Auth
* @name RegisterCreate
* @summary Register
* @request POST:/register
*/
registerCreate: (NewUser: TypesNewUser, params: RequestParams = {}) =>
this.request<string, string>({
path: `/register`,
method: "POST",
body: NewUser,
type: ContentType.Json,
...params,
}),
};
userdelete = {
/**
* @description UserDelete deletes a user from the database
*
* @tags User
* @name UserdeleteDelete
* @summary UserDelete
* @request DELETE:/userdelete/{username}
* @secure
*/
userdeleteDelete: (username: string, params: RequestParams = {}) =>
this.request<string, string>({
path: `/userdelete/${username}`,
method: "DELETE",
secure: true,
type: ContentType.Json,
...params,
}),
};
users = {
/**
* @description lists all users
*
* @tags User
* @name GetUsers
* @summary ListsAllUsers
* @request GET:/users/all
* @secure
*/
getUsers: (params: RequestParams = {}) =>
this.request<string[], string>({
path: `/users/all`,
method: "GET",
secure: true,
format: "json",
...params,
}),
};
}

103
frontend/src/Components/AllTimeReportsInProjectOtherUser.tsx Normal file
View file

@ -0,0 +1,103 @@
//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 { NewWeeklyReport } from "../Types/goTypes";
import { Link, useParams } from "react-router-dom";
/**
* Renders a component that displays all the time reports for a specific project.
* @returns {JSX.Element} representing the component.
*/
function AllTimeReportsInProject(): JSX.Element {
const { username } = useParams();
const { projectName } = useParams();
const [weeklyReports, setWeeklyReports] = useState<NewWeeklyReport[]>([]);
/* // Call getProjects when the component mounts
useEffect(() => {
const getWeeklyReports = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getWeeklyReportsForUser(
projectName ?? "",
token,
);
console.log(response);
if (response.success) {
setWeeklyReports(response.data ?? []);
} else {
console.error(response.message);
}
}; */
// Mock data
const getWeeklyReports = async (): Promise<void> => {
// Simulate a delay
await Promise.resolve();
const mockWeeklyReports: NewWeeklyReport[] = [
{
projectName: "Project 1",
week: 1,
developmentTime: 10,
meetingTime: 2,
adminTime: 1,
ownWorkTime: 3,
studyTime: 4,
testingTime: 5,
},
{
projectName: "Project 1",
week: 2,
developmentTime: 8,
meetingTime: 2,
adminTime: 1,
ownWorkTime: 3,
studyTime: 4,
testingTime: 5,
},
// Add more reports as needed
];
// Use the mock data instead of the real data
setWeeklyReports(mockWeeklyReports);
};
useEffect(() => {
void getWeeklyReports();
}, []);
return (
<>
<h1 className="text-[30px] font-bold">{username}&apos;s Time Reports</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] text-[30px]">
{weeklyReports.map((newWeeklyReport, index) => (
<Link
to={`/editOthersTR/${projectName}/${username}/${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>
NO
</h1>
</div>
</Link>
))}
</div>
</>
);
}
export default AllTimeReportsInProject;

129
frontend/src/Components/DisplayUnsignedReports.tsx Normal file
View file

@ -0,0 +1,129 @@
import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
interface UnsignedReports {
projectName: string;
username: string;
week: number;
signed: boolean;
}
/**
* 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 { projectName } = useParams();
const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]);
//const navigate = useNavigate();
// const getUnsignedReports = async (): Promise<void> => {
// const token = localStorage.getItem("accessToken") ?? "";
// const response = await api.getUserProjects(token);
// console.log(response);
// if (response.success) {
// setUnsignedReports(response.data ?? []);
// } else {
// console.error(response.message);
// }
// };
// const handleReportClick = async (projectName: string): Promise<void> => {
// const username = localStorage.getItem("username") ?? "";
// const token = localStorage.getItem("accessToken") ?? "";
// const response = await api.checkIfProjectManager(
// username,
// projectName,
// token,
// );
// if (response.success) {
// if (response.data) {
// navigate(`/PMProjectPage/${projectName}`);
// } else {
// navigate(`/project/${projectName}`);
// }
// } else {
// // handle error
// console.error(response.message);
// }
// };
const getUnsignedReports = async (): Promise<void> => {
// Simulate a delay
await Promise.resolve();
// Use mock data
const reports: UnsignedReports[] = [
{
projectName: "projecttest",
username: "user1",
week: 2,
signed: false,
},
{
projectName: "projecttest",
username: "user2",
week: 2,
signed: false,
},
{
projectName: "projecttest",
username: "user3",
week: 2,
signed: false,
},
{
projectName: "projecttest",
username: "user4",
week: 2,
signed: false,
},
];
// Set the state with the mock data
setUnsignedReports(reports);
};
// Call getProjects when the component mounts
useEffect(() => {
void getUnsignedReports();
}, []);
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
All Unsigned Reports In: {projectName}{" "}
</h1>
<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]">
{unsignedReports.map(
(unsignedReport: UnsignedReports, index: number) => (
<h1 key={index} className="border-b-2 border-black w-full">
<div className="flex justify-between">
<div className="flex">
<h1>{unsignedReport.username}</h1>
<span className="ml-6 mr-2 font-bold">Week:</span>
<h1>{unsignedReport.week}</h1>
<span className="ml-6 mr-2 font-bold">Signed:</span>
<h1>NO</h1>
</div>
<div className="flex">
<div className="ml-auto flex space-x-4">
<Link
to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.username}/${unsignedReport.week}`}
>
<h1 className="underline cursor-pointer font-bold">
View Report
</h1>
</Link>
</div>
</div>
</div>
</h1>
),
)}
</div>
</>
);
}
export default DisplayUserProject;

46
frontend/src/Components/DisplayUserProjects.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import { Project } from "../Types/goTypes";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import GetProjects from "./GetProjects";
/**
@ -9,22 +9,52 @@ import GetProjects from "./GetProjects";
*/
function DisplayUserProject(): JSX.Element {
const [projects, setProjects] = useState<Project[]>([]);
const navigate = useNavigate();
GetProjects({
setProjectsProp: setProjects,
username: localStorage.getItem("username") ?? "",
});
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);
}
};
const handleProjectClick = async (projectName: string): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.checkIfProjectManager(projectName, token);
if (response.success) {
if (response.data) {
navigate(`/PMProjectPage/${projectName}`);
} else {
navigate(`/project/${projectName}`);
}
} else {
// handle error
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}>
{projects.map((project) => (
<div
onClick={() => void handleProjectClick(project.name)}
key={project.id}
>
<h1 className="font-bold underline text-[30px] cursor-pointer">
{project.name}
</h1>
</Link>
</div>
))}
</div>
</>

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

@ -18,44 +18,47 @@ export default function GetWeeklyReport(): JSX.Element {
const [testingTime, setTestingTime] = useState(0);
const token = localStorage.getItem("accessToken") ?? "";
const { projectName } = useParams();
const { fetchedWeek } = useParams();
const fetchWeeklyReport = async (): Promise<void> => {
const response = await api.getWeeklyReport(
projectName ?? "",
fetchedWeek?.toString() ?? "0",
token,
);
if (response.success) {
const report: WeeklyReport = response.data ?? {
reportId: 0,
userId: 0,
projectId: 0,
week: 0,
developmentTime: 0,
meetingTime: 0,
adminTime: 0,
ownWorkTime: 0,
studyTime: 0,
testingTime: 0,
};
setWeek(report.week);
setDevelopmentTime(report.developmentTime);
setMeetingTime(report.meetingTime);
setAdminTime(report.adminTime);
setOwnWorkTime(report.ownWorkTime);
setStudyTime(report.studyTime);
setTestingTime(report.testingTime);
} else {
console.error("Failed to fetch weekly report:", response.message);
}
};
const { projectName, fetchedWeek } = useParams<{
projectName: string;
fetchedWeek: string;
}>();
console.log(projectName, fetchedWeek);
useEffect(() => {
const fetchWeeklyReport = async (): Promise<void> => {
const response = await api.getWeeklyReport(
projectName ?? "",
fetchedWeek ?? "",
token,
);
if (response.success) {
const report: WeeklyReport = response.data ?? {
reportId: 0,
userId: 0,
projectId: 0,
week: 0,
developmentTime: 0,
meetingTime: 0,
adminTime: 0,
ownWorkTime: 0,
studyTime: 0,
testingTime: 0,
};
setWeek(report.week);
setDevelopmentTime(report.developmentTime);
setMeetingTime(report.meetingTime);
setAdminTime(report.adminTime);
setOwnWorkTime(report.ownWorkTime);
setStudyTime(report.studyTime);
setTestingTime(report.testingTime);
} else {
console.error("Failed to fetch weekly report:", response.message);
}
};
void fetchWeeklyReport();
});
}, [projectName, fetchedWeek, token]);
const handleNewWeeklyReport = async (): Promise<void> => {
const newWeeklyReport: NewWeeklyReport = {
@ -76,6 +79,7 @@ export default function GetWeeklyReport(): JSX.Element {
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<form
onSubmit={(e) => {
@ -90,24 +94,10 @@ export default function GetWeeklyReport(): JSX.Element {
}}
>
<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();
}}
/>
<div className="flex flex-col w-1/2 border-b-2 border-black items-center justify-center">
<h1 className="font-bold text-[30px]"> Week: {week}</h1>
</div>
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
@ -127,9 +117,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime}
value={developmentTime === 0 ? "" : developmentTime}
onChange={(e) => {
setDevelopmentTime(parseInt(e.target.value));
if (e.target.value === "") {
setDevelopmentTime(0);
return;
} else {
setDevelopmentTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -146,9 +141,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime}
value={meetingTime === 0 ? "" : meetingTime}
onChange={(e) => {
setMeetingTime(parseInt(e.target.value));
if (e.target.value === "") {
setMeetingTime(0);
return;
} else {
setMeetingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -165,9 +165,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime}
value={adminTime === 0 ? "" : adminTime}
onChange={(e) => {
setAdminTime(parseInt(e.target.value));
if (e.target.value === "") {
setAdminTime(0);
return;
} else {
setAdminTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -184,9 +189,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime}
value={ownWorkTime === 0 ? "" : ownWorkTime}
onChange={(e) => {
setOwnWorkTime(parseInt(e.target.value));
if (e.target.value === "") {
setOwnWorkTime(0);
return;
} else {
setOwnWorkTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -203,9 +213,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime}
value={studyTime === 0 ? "" : studyTime}
onChange={(e) => {
setStudyTime(parseInt(e.target.value));
if (e.target.value === "") {
setStudyTime(0);
return;
} else {
setStudyTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -222,9 +237,14 @@ export default function GetWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime}
value={testingTime === 0 ? "" : testingTime}
onChange={(e) => {
setTestingTime(parseInt(e.target.value));
if (e.target.value === "") {
setTestingTime(0);
return;
} else {
setTestingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;

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

@ -12,66 +12,103 @@ import Button from "./Button";
*/
export default function NewWeeklyReport(): JSX.Element {
const [week, setWeek] = useState<number>(0);
const [developmentTime, setDevelopmentTime] = useState<number>();
const [meetingTime, setMeetingTime] = useState<number>();
const [adminTime, setAdminTime] = useState<number>();
const [ownWorkTime, setOwnWorkTime] = useState<number>();
const [studyTime, setStudyTime] = useState<number>();
const [testingTime, setTestingTime] = useState<number>();
const [developmentTime, setDevelopmentTime] = useState<number>(0);
const [meetingTime, setMeetingTime] = useState<number>(0);
const [adminTime, setAdminTime] = useState<number>(0);
const [ownWorkTime, setOwnWorkTime] = useState<number>(0);
const [studyTime, setStudyTime] = useState<number>(0);
const [testingTime, setTestingTime] = useState<number>(0);
const { projectName } = useParams();
const token = localStorage.getItem("accessToken") ?? "";
const handleNewWeeklyReport = async (): Promise<void> => {
const handleNewWeeklyReport = async (): Promise<boolean> => {
const newWeeklyReport: NewWeeklyReport = {
projectName: projectName ?? "",
week: week,
developmentTime: developmentTime ?? 0,
meetingTime: meetingTime ?? 0,
adminTime: adminTime ?? 0,
ownWorkTime: ownWorkTime ?? 0,
studyTime: studyTime ?? 0,
testingTime: testingTime ?? 0,
developmentTime: developmentTime,
meetingTime: meetingTime,
adminTime: adminTime,
ownWorkTime: ownWorkTime,
studyTime: studyTime,
testingTime: testingTime,
};
await api.submitWeeklyReport(newWeeklyReport, token);
const response = await api.submitWeeklyReport(newWeeklyReport, token);
console.log(response);
if (response.success) {
return true;
} else {
return false;
}
};
const navigate = useNavigate();
// Check if the browser is Chrome or Edge
const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);
return (
<>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<form
onSubmit={(e) => {
if (week === 0) {
alert("Please enter a week number");
e.preventDefault();
return;
}
e.preventDefault();
void handleNewWeeklyReport();
navigate(-1);
void (async (): Promise<void> => {
if (week === 0 || week > 53 || week < 1) {
alert("Please enter a valid week number");
return;
}
const success = await handleNewWeeklyReport();
if (!success) {
alert(
"A Time Report for this week already exists, please go to the edit page to edit it or change week number.",
);
return;
}
alert("Weekly report submitted successfully");
navigate(-1);
})();
}}
>
<div className="flex flex-col items-center">
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="week"
placeholder="Week"
onChange={(e) => {
const weekNumber = parseInt(e.target.value.split("-W")[1]);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
{isChromeOrEdge ? (
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="week"
placeholder="Week"
onChange={(e) => {
const weekNumber = parseInt(e.target.value.split("-W")[1]);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
/>
}}
/>
) : (
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="text"
placeholder="Week (Numbers Only)"
onChange={(e) => {
const weekNumber = parseInt(e.target.value);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
/>
)}
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
@ -91,9 +128,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime}
value={developmentTime === 0 ? "" : developmentTime}
onChange={(e) => {
setDevelopmentTime(parseInt(e.target.value));
if (e.target.value === "") {
setDevelopmentTime(0);
return;
} else {
setDevelopmentTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -110,9 +152,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime}
value={meetingTime === 0 ? "" : meetingTime}
onChange={(e) => {
setMeetingTime(parseInt(e.target.value));
if (e.target.value === "") {
setMeetingTime(0);
return;
} else {
setMeetingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -129,9 +176,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime}
value={adminTime === 0 ? "" : adminTime}
onChange={(e) => {
setAdminTime(parseInt(e.target.value));
if (e.target.value === "") {
setAdminTime(0);
return;
} else {
setAdminTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -148,9 +200,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime}
value={ownWorkTime === 0 ? "" : ownWorkTime}
onChange={(e) => {
setOwnWorkTime(parseInt(e.target.value));
if (e.target.value === "") {
setOwnWorkTime(0);
return;
} else {
setOwnWorkTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -167,9 +224,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime}
value={studyTime === 0 ? "" : studyTime}
onChange={(e) => {
setStudyTime(parseInt(e.target.value));
if (e.target.value === "") {
setStudyTime(0);
return;
} else {
setStudyTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;
@ -186,9 +248,14 @@ export default function NewWeeklyReport(): JSX.Element {
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime}
value={testingTime === 0 ? "" : testingTime}
onChange={(e) => {
setTestingTime(parseInt(e.target.value));
if (e.target.value === "") {
setTestingTime(0);
return;
} else {
setTestingTime(parseInt(e.target.value));
}
}}
onKeyDown={(event) => {
const keyValue = event.key;

153
frontend/src/Components/OtherUsersTR.tsx Normal file
View file

@ -0,0 +1,153 @@
import { useState, useEffect } from "react";
import { WeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useParams } from "react-router-dom";
/**
* Renders the component for editing a weekly report.
* @returns JSX.Element
*/
//This component does not yet work as intended. It is supposed to display the weekly report of a user in a project.
export default function OtherUsersTR(): JSX.Element {
const [week, setWeek] = useState(0);
const [developmentTime, setDevelopmentTime] = useState(0);
const [meetingTime, setMeetingTime] = useState(0);
const [adminTime, setAdminTime] = useState(0);
const [ownWorkTime, setOwnWorkTime] = useState(0);
const [studyTime, setStudyTime] = useState(0);
const [testingTime, setTestingTime] = useState(0);
const token = localStorage.getItem("accessToken") ?? "";
const { projectName } = useParams();
const { username } = useParams();
const { fetchedWeek } = useParams();
useEffect(() => {
const fetchUsersWeeklyReport = async (): Promise<void> => {
const response = await api.getWeeklyReport(
projectName ?? "",
fetchedWeek?.toString() ?? "0",
token,
);
if (response.success) {
const report: WeeklyReport = response.data ?? {
reportId: 0,
userId: 0,
projectId: 0,
week: 0,
developmentTime: 0,
meetingTime: 0,
adminTime: 0,
ownWorkTime: 0,
studyTime: 0,
testingTime: 0,
};
setWeek(report.week);
setDevelopmentTime(report.developmentTime);
setMeetingTime(report.meetingTime);
setAdminTime(report.adminTime);
setOwnWorkTime(report.ownWorkTime);
setStudyTime(report.studyTime);
setTestingTime(report.testingTime);
} else {
console.error("Failed to fetch weekly report:", response.message);
}
};
void fetchUsersWeeklyReport();
});
return (
<>
<h1 className="text-[30px] font-bold">{username}&apos;s Report</h1>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<div className="flex flex-col items-center">
<div className="flex flex-col w-1/2 border-b-2 border-black items-center justify-center">
<h1 className="font-bold text-[30px]"> Week: {week}</h1>
</div>
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
<th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
<th className="w-1/2 py-2 border-b-2 border-black">
Total Time (min)
</th>
</tr>
</thead>
<tbody className="divide-y divide-black">
<tr className="h-[10vh]">
<td>Development</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime === 0 ? "" : developmentTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Meeting</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime === 0 ? "" : meetingTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime === 0 ? "" : adminTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime === 0 ? "" : ownWorkTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Studies</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime === 0 ? "" : studyTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Testing</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime === 0 ? "" : testingTime}
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}

90
frontend/src/Components/ProjectMembers.tsx
View file

@ -1,91 +1,55 @@
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { api } from "../API/API";
import { UserProjectMember } from "../Types/goTypes";
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();
};
const [projectMembers, setProjectMembers] = useState<UserProjectMember[]>([]);
useEffect(() => {
const getProjectMembers = async (): Promise<void> => {
const token = localStorage.getItem("accessToken") ?? "";
const response = await api.getAllUsersProject(projectName ?? "", token);
console.log(response);
if (response.success) {
setProjectMembers(response.data ?? []);
} else {
console.error(response.message);
}
};
void getProjectMembers();
});
}, [projectName]);
interface ProjectMember {
Username: string;
UserRole: string;
}
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
All Members In: {projectName}{" "}
</h1>
<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) => (
{projectMembers.map((projectMember: ProjectMember, index: number) => (
<h1 key={index} className="border-b-2 border-black w-full">
<div className="flex justify-between">
<div className="flex">
<h1>{projectMember.username}</h1>
<h1>{projectMember.Username}</h1>
<span className="ml-6 mr-2 font-bold">Role:</span>
<h1>{projectMember.role}</h1>
<h1>{projectMember.UserRole}</h1>
</div>
<div className="flex">
<div className="ml-auto flex space-x-4">
<Link
to={`/viewReports/${projectName}/${projectMember.username}`}
to={`/otherUsersTimeReports/${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>

175
frontend/src/Components/TimePerActivity.tsx Normal file
View file

@ -0,0 +1,175 @@
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
/**
* Renders the component for showing total time per role in a project.
* @returns JSX.Element
*/
export default function TimePerRole(): JSX.Element {
const [developmentTime, setDevelopmentTime] = useState<number>();
const [meetingTime, setMeetingTime] = useState<number>();
const [adminTime, setAdminTime] = useState<number>();
const [ownWorkTime, setOwnWorkTime] = useState<number>();
const [studyTime, setStudyTime] = useState<number>();
const [testingTime, setTestingTime] = useState<number>();
// const token = localStorage.getItem("accessToken") ?? "";
// const username = localStorage.getItem("username") ?? "";
const { projectName } = useParams();
// const fetchTimePerRole = async (): Promise<void> => {
// const response = await api.getTimePerRole(
// username,
// projectName ?? "",
// token,
// );
// {
// if (response.success) {
// const report: TimePerRole = response.data ?? {
// PManagerTime: 0,
// SManagerTime: 0,
// DeveloperTime: 0,
// TesterTime: 0,
// };
// } else {
// console.error("Failed to fetch weekly report:", response.message);
// }
// }
interface TimePerActivity {
developmentTime: number;
meetingTime: number;
adminTime: number;
ownWorkTime: number;
studyTime: number;
testingTime: number;
}
const fetchTimePerActivity = async (): Promise<void> => {
// Use mock data
const report: TimePerActivity = {
developmentTime: 100,
meetingTime: 200,
adminTime: 300,
ownWorkTime: 50,
studyTime: 75,
testingTime: 110,
};
// Set the state with the mock data
setDevelopmentTime(report.developmentTime);
setMeetingTime(report.meetingTime);
setAdminTime(report.adminTime);
setOwnWorkTime(report.ownWorkTime);
setStudyTime(report.studyTime);
setTestingTime(report.testingTime);
await Promise.resolve();
};
useEffect(() => {
void fetchTimePerActivity();
});
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Total Time Per Activity In: {projectName}{" "}
</h1>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<div className="flex flex-col items-center">
<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="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Meeting</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Studies</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Testing</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}

141
frontend/src/Components/TimePerRole.tsx Normal file
View file

@ -0,0 +1,141 @@
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
/**
* Renders the component for showing total time per role in a project.
* @returns JSX.Element
*/
export default function TimePerRole(): JSX.Element {
const [PManagerTime, setPManagerTime] = useState(0);
const [SManagerTime, setSManagerTime] = useState(0);
const [DeveloperTime, setDeveloperTime] = useState(0);
const [TesterTime, setTesterTime] = useState(0);
// const token = localStorage.getItem("accessToken") ?? "";
// const username = localStorage.getItem("username") ?? "";
const { projectName } = useParams();
// const fetchTimePerRole = async (): Promise<void> => {
// const response = await api.getTimePerRole(
// username,
// projectName ?? "",
// token,
// );
// {
// if (response.success) {
// const report: TimePerRole = response.data ?? {
// PManagerTime: 0,
// SManagerTime: 0,
// DeveloperTime: 0,
// TesterTime: 0,
// };
// } else {
// console.error("Failed to fetch weekly report:", response.message);
// }
// }
interface TimePerRole {
PManager: number;
SManager: number;
Developer: number;
Tester: number;
}
const fetchTimePerRole = async (): Promise<void> => {
// Use mock data
const report: TimePerRole = {
PManager: 120,
SManager: 80,
Developer: 200,
Tester: 150,
};
// Set the state with the mock data
setPManagerTime(report.PManager);
setSManagerTime(report.SManager);
setDeveloperTime(report.Developer);
setTesterTime(report.Tester);
await Promise.resolve();
};
useEffect(() => {
void fetchTimePerRole();
});
return (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Total Time Per Role In: {projectName}{" "}
</h1>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<div className="flex flex-col items-center">
<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">Role</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>Project Manager</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={PManagerTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>System Manager</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={SManagerTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={DeveloperTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="string"
className="border-2 border-black rounded-md text-center w-1/2"
value={TesterTime}
onKeyDown={(event) => {
event.preventDefault();
}}
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}

188
frontend/src/Components/ViewOtherTimeReport.tsx Normal file
View file

@ -0,0 +1,188 @@
import { useState, useEffect } from "react";
import { WeeklyReport, NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate, useParams } from "react-router-dom";
import Button from "./Button";
/**
* Renders the component for editing a weekly report.
* @returns JSX.Element
*/
//This component does not yet work as intended. It is supposed to display the weekly report of a user in a project.
export default function GetOtherUsersReport(): JSX.Element {
const [week, setWeek] = useState(0);
const [developmentTime, setDevelopmentTime] = useState(0);
const [meetingTime, setMeetingTime] = useState(0);
const [adminTime, setAdminTime] = useState(0);
const [ownWorkTime, setOwnWorkTime] = useState(0);
const [studyTime, setStudyTime] = useState(0);
const [testingTime, setTestingTime] = useState(0);
const token = localStorage.getItem("accessToken") ?? "";
const { projectName } = useParams();
const { username } = useParams();
const { fetchedWeek } = useParams();
useEffect(() => {
const fetchUsersWeeklyReport = async (): Promise<void> => {
const response = await api.getWeeklyReport(
projectName ?? "",
fetchedWeek?.toString() ?? "0",
token,
);
if (response.success) {
const report: WeeklyReport = response.data ?? {
reportId: 0,
userId: 0,
projectId: 0,
week: 0,
developmentTime: 0,
meetingTime: 0,
adminTime: 0,
ownWorkTime: 0,
studyTime: 0,
testingTime: 0,
};
setWeek(report.week);
setDevelopmentTime(report.developmentTime);
setMeetingTime(report.meetingTime);
setAdminTime(report.adminTime);
setOwnWorkTime(report.ownWorkTime);
setStudyTime(report.studyTime);
setTestingTime(report.testingTime);
} else {
console.error("Failed to fetch weekly report:", response.message);
}
};
void fetchUsersWeeklyReport();
});
const handleSignWeeklyReport = async (): Promise<void> => {
const newWeeklyReport: NewWeeklyReport = {
projectName: projectName ?? "",
week,
developmentTime,
meetingTime,
adminTime,
ownWorkTime,
studyTime,
testingTime,
};
await api.submitWeeklyReport(newWeeklyReport, token);
};
const navigate = useNavigate();
return (
<>
<h1 className="text-[30px] font-bold">{username}&apos;s Report</h1>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<form
onSubmit={(e) => {
e.preventDefault();
void handleSignWeeklyReport();
navigate(-1);
}}
>
<div className="flex flex-col items-center">
<div className="flex flex-col w-1/2 border-b-2 border-black items-center justify-center">
<h1 className="font-bold text-[30px]"> Week: {week}</h1>
</div>
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
<th className="w-1/2 py-2 border-b-2 border-black">
Activity
</th>
<th className="w-1/2 py-2 border-b-2 border-black">
Total Time (min)
</th>
</tr>
</thead>
<tbody className="divide-y divide-black">
<tr className="h-[10vh]">
<td>Development</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={developmentTime === 0 ? "" : developmentTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Meeting</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meetingTime === 0 ? "" : meetingTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={adminTime === 0 ? "" : adminTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownWorkTime === 0 ? "" : ownWorkTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Studies</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studyTime === 0 ? "" : studyTime}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Testing</td>
<td>
<input
type="text"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testingTime === 0 ? "" : testingTime}
/>
</td>
</tr>
</tbody>
</table>
<Button
text="Sign Report"
onClick={(): void => {
return;
}}
type="submit"
/>
</div>
</form>
</div>
</>
);
}

23
frontend/src/Containers/GenApiDemo.tsx Normal file
View file

@ -0,0 +1,23 @@
import { useEffect } from "react";
import { GenApi } from "../API/GenApi";
// Instantiation of the API
const api = new GenApi();
export function GenApiDemo(): JSX.Element {
// Sync wrapper around the loginCreate method
const register = async (): Promise<void> => {
const response = await api.login.loginCreate({
username: "admin",
password: "admin",
});
console.log(response.data); // This should be the inner type of the response
};
// Call the wrapper
useEffect(() => {
void register();
});
return <></>;
}

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

@ -1,17 +1,26 @@
import { useParams } from "react-router-dom";
import { api } from "../../API/API";
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
async function handleDeleteProject(
projectName: string,
token: string,
): Promise<void> {
await api.removeProject(projectName, token);
}
function AdminProjectPage(): JSX.Element {
const content = <></>;
const { projectName } = useParams();
const token = localStorage.getItem("accessToken");
const buttons = (
<>
<Button
text="Delete"
onClick={(): void => {
return;
}}
onClick={() => handleDeleteProject(projectName, token)}
type="button"
/>
<BackButton />
@ -20,4 +29,5 @@ function AdminProjectPage(): JSX.Element {
return <BasicWindow content={content} buttons={buttons} />;
}
export default AdminProjectPage;

10
frontend/src/Pages/LoginPage.css
View file

@ -4,23 +4,23 @@ body{
@keyframes backgroundTransition {
0% {
background-image: url('src/assets/1.jpg');
background-image: url('../assets/1.jpg');
animation-timing-function: ease-out;
}
25% {
background-image: url('src/assets/2.jpg');
background-image: url('../assets/2.jpg');
animation-timing-function: ease-in;
}
50% {
background-image: url('src/assets/3.jpg');
background-image: url('../assets/3.jpg');
animation-timing-function: ease-out;
}
75% {
background-image: url('src/assets/4.jpg');
background-image: url('../assets/4.jpg');
animation-timing-function: ease-in;
}
100% {
background-image: url('src/assets/1.jpg');
background-image: url('../assets/1.jpg');
animation-timing-function: ease-out;
}
}

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

@ -1,8 +1,13 @@
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import AllTimeReportsInProjectOtherUser from "../../Components/AllTimeReportsInProjectOtherUser";
function PMOtherUsersTR(): JSX.Element {
const content = <></>;
const content = (
<>
<AllTimeReportsInProjectOtherUser />
</>
);
const buttons = (
<>

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

@ -8,16 +8,13 @@ function PMProjectMembers(): JSX.Element {
const { projectName } = useParams();
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
All Members In: {projectName}{" "}
</h1>
<ProjectMembers />
</>
);
const buttons = (
<>
<Link to="/PM-time-activity">
<Link to={`/PMtimeactivity/${projectName}`}>
<Button
text="Time / Activity"
onClick={(): void => {
@ -26,15 +23,6 @@ function PMProjectMembers(): JSX.Element {
type={"button"}
/>
</Link>
<Link to="/PM-time-role">
<Button
text="Time / Role"
onClick={(): void => {
return;
}}
type={"button"}
/>
</Link>
<BackButton />
</>
);

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

@ -1,14 +1,11 @@
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import TimeReport from "../../Components/NewWeeklyReport";
import TimePerActivity from "../../Components/TimePerActivity";
function PMTotalTimeActivity(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Total Time Per Activity
</h1>
<TimeReport />
<TimePerActivity />
</>
);

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

@ -1,8 +1,13 @@
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import TimePerRole from "../../Components/TimePerRole";
function PMTotalTimeRole(): JSX.Element {
const content = <></>;
const content = (
<>
<TimePerRole />
</>
);
const buttons = (
<>

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

@ -1,8 +1,13 @@
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import DisplayUnsignedReports from "../../Components/DisplayUnsignedReports";
function PMUnsignedReports(): JSX.Element {
const content = <></>;
const content = (
<>
<DisplayUnsignedReports />
</>
);
const buttons = (
<>

20
frontend/src/Pages/ProjectManagerPages/PMViewOtherUsersTR.tsx Normal file
View file

@ -0,0 +1,20 @@
import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import OtherUsersTR from "../../Components/OtherUsersTR";
function PMViewOtherUsersTR(): JSX.Element {
const content = (
<>
<OtherUsersTR />
</>
);
const buttons = (
<>
<BackButton />
</>
);
return <BasicWindow content={content} buttons={buttons} />;
}
export default PMViewOtherUsersTR;

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

@ -1,34 +1,16 @@
import BackButton from "../../Components/BackButton";
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import TimeReport from "../../Components/NewWeeklyReport";
import ViewOtherTimeReport from "../../Components/ViewOtherTimeReport";
function PMViewUnsignedReport(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">
Username&apos;s Time Report
</h1>
<TimeReport />
<ViewOtherTimeReport />
</>
);
const buttons = (
<>
<Button
text="Sign"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Save"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</>
);

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

@ -5,7 +5,6 @@ import EditWeeklyReport from "../../Components/EditWeeklyReport";
function UserEditTimeReportPage(): JSX.Element {
const content = (
<>
<h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
<EditWeeklyReport />
</>
);

52
frontend/src/Types/goTypes.ts
View file

@ -124,6 +124,44 @@ export interface WeeklyReport {
*/
signedBy?: number /* int */;
}
export interface UpdateWeeklyReport {
/**
* The name of the project, as it appears in the database
*/
projectName: string;
/**
* The name of the user
*/
userName: string;
/**
* The week number
*/
week: number /* int */;
/**
* Total time spent on development
*/
developmentTime: number /* int */;
/**
* Total time spent in meetings
*/
meetingTime: number /* int */;
/**
* Total time spent on administrative tasks
*/
adminTime: number /* int */;
/**
* Total time spent on personal projects
*/
ownWorkTime: number /* int */;
/**
* Total time spent on studying
*/
studyTime: number /* int */;
/**
* Total time spent on testing
*/
testingTime: number /* int */;
}
//////////
// source: project.go
@ -151,16 +189,9 @@ export interface NewProject {
*/
export interface RoleChange {
username: string;
role: "project_manager" | "user";
role: 'project_manager' | 'user';
projectname: string;
}
export interface NewProjMember {
username: string;
projectname: string;
role: string;
}
export interface NameChange {
id: number /* int */;
name: string;
@ -191,11 +222,6 @@ export interface PublicUser {
userId: string;
username: string;
}
export interface UserProjectMember {
Username: string;
UserRole: string;
}
/**
* wrapper type for token
*/

15
frontend/src/main.tsx
View file

@ -31,6 +31,7 @@ import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMembe
import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
import NotFoundPage from "./Pages/NotFoundPage.tsx";
import UnauthorizedPage from "./Pages/UnauthorizedPage.tsx";
import PMViewOtherUsersTR from "./Pages/ProjectManagerPages/PMViewOtherUsersTR.tsx";
// This is where the routes are mounted
const router = createBrowserRouter([
@ -60,7 +61,7 @@ const router = createBrowserRouter([
element: <UserViewTimeReportsPage />,
},
{
path: "/editTimeReport/:projectName/:weekNumber",
path: "/editTimeReport/:projectName/:fetchedWeek",
element: <UserEditTimeReportPage />,
},
{
@ -68,9 +69,13 @@ const router = createBrowserRouter([
element: <PMChangeRole />,
},
{
path: "/otherUsersTimeReports",
path: "/otherUsersTimeReports/:projectName/:username",
element: <PMOtherUsersTR />,
},
{
path: "/editOthersTR/:projectName/:username/:fetchedWeek",
element: <PMViewOtherUsersTR />,
},
{
path: "/projectMembers/:projectName",
element: <PMProjectMembers />,
@ -80,11 +85,11 @@ const router = createBrowserRouter([
element: <PMProjectPage />,
},
{
path: "/PMTimeActivity",
path: "/PMTimeActivity/:projectName",
element: <PMTotalTimeActivity />,
},
{
path: "/PMTimeRole",
path: "/PMTimeRole/:projectName",
element: <PMTotalTimeRole />,
},
{
@ -92,7 +97,7 @@ const router = createBrowserRouter([
element: <PMUnsignedReports />,
},
{
path: "/PMViewUnsignedReport",
path: "/PMViewUnsignedReport/:projectName/:username/:fetchedWeek",
element: <PMViewUnsignedReport />,
},
{