Merge branch 'frontend' into gruppDM

backend/main.go

@@ -112,6 +112,7 @@ func main() {
 
 	// All project related routes
 	// projectGroup := api.Group("/project") // Not currently in use
+	api.Get("/getProjectTimes/:projectName", projects.GetProjectTimesHandler)
 	api.Get("/getUserProjects/:username", projects.GetUserProjects)
 	api.Get("/project/:projectId", projects.GetProject)
 	api.Get("/checkIfProjectManager/:projectName", projects.IsProjectManagerHandler)

frontend/src/API/API.ts

@@ -1,5 +1,6 @@
 import { NewProjMember } from "../Components/AddMember";
 import { ProjectRoleChange } from "../Components/ChangeRole";
+import { projectTimes } from "../Components/GetProjectTimes";
 import { ProjectMember } from "../Components/GetUsersInProject";
 import {
   UpdateWeeklyReport,
@@ -138,6 +139,16 @@ interface API {
    */
   getProject(id: number): Promise<APIResponse<Project>>;
 
+  /** Gets a projects reported time
+   * @param {string} projectName The name of the project.
+   * @param {string} token The usertoken.
+   * @returns {Promise<APIResponse<Times>>} A promise resolving to an API response containing the project times.
+   */
+  getProjectTimes(
+    projectName: string,
+    token: string,
+  ): Promise<APIResponse<projectTimes>>;
+
   /** Gets a list of all users.
    * @param {string} token The authentication token of the requesting user.
    * @returns {Promise<APIResponse<string[]>>} A promise resolving to an API response containing the list of users.
@@ -397,6 +408,37 @@ export const api: API = {
     }
   },
 
+  async getProjectTimes(
+    projectName: string,
+    token: string,
+  ): Promise<APIResponse<projectTimes>> {
+    try {
+      const response = await fetch(`/api/getProjectTimes/${projectName}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+      });
+
+      if (!response.ok) {
+        return Promise.resolve({
+          success: false,
+          message:
+            "Fetch error: " + response.status + ", failed to get project times",
+        });
+      } else {
+        const data = (await response.json()) as projectTimes;
+        return Promise.resolve({ success: true, data });
+      }
+    } catch (e) {
+      return Promise.resolve({
+        success: false,
+        message: "API error! Could not get times.",
+      });
+    }
+  },
+
   async submitWeeklyReport(
     weeklyReport: NewWeeklyReport,
     token: string,
@@ -651,7 +693,7 @@ export const api: API = {
     token: string,
   ): Promise<APIResponse<string>> {
     try {
-      const response = await fetch(`/api/projectdelete/${projectName}`, {
+      const response = await fetch(`/api/removeProject/${projectName}`, {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json",

frontend/src/Components/AddProject.tsx

@@ -61,6 +61,7 @@ function AddProject(): JSX.Element {
           <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
             Create a new project
           </h3>
+          <div className="space-y-3">
             <InputField
               label="Name"
               type="text"
@@ -79,6 +80,7 @@ function AddProject(): JSX.Element {
                 setDescription(e.target.value);
               }}
             />
+          </div>
           <div className="flex items-center justify-between">
             <Button
               text="Create"

frontend/src/Components/AddUserToProject.tsx

@@ -8,7 +8,7 @@ import BackButton from "./BackButton";
  * Provides UI for adding a member to a project.
  * @returns {JSX.Element} - Returns the component UI for adding a member
  */
-function AddUserToProject(): JSX.Element {
+function AddUserToProject(props: { projectName: string }): JSX.Element {
   const [name, setName] = useState("");
   const [users, setUsers] = useState<string[]>([]);
   const [role, setRole] = useState("");
@@ -17,7 +17,7 @@ function AddUserToProject(): JSX.Element {
   const handleClick = (): boolean => {
     const newMember: NewProjMember = {
       username: name,
-      projectname: localStorage.getItem("projectName") ?? "",
+      projectname: props.projectName,
       role: role,
     };
     return AddMember({ memberToAdd: newMember });
@@ -32,13 +32,13 @@ function AddUserToProject(): JSX.Element {
         Role chosen: [{role}]
       </p>
       <p className="pb-4 mb-2 text-center font-bold text-[18px]">
-        Project chosen: [{localStorage.getItem("projectName") ?? ""}]
+        Project chosen: [{props.projectName}]
       </p>
       <p className="p-1">Choose role:</p>
-      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16vh]">
+      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16] overflow-auto">
         <ul className="text-center items-center font-medium space-y-2">
           <li
-            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
             onClick={() => {
               setRole("member");
             }}
@@ -46,7 +46,7 @@ function AddUserToProject(): JSX.Element {
             {"Member"}
           </li>
           <li
-            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
             onClick={() => {
               setRole("project_manager");
             }}

frontend/src/Components/ChangeRoleView.tsx

@@ -31,13 +31,10 @@ export default function ChangeRoles(props: {
   };
 
   return (
-    <div>
+    <div className="overflow-auto rounded-lg">
-      <h1 className="font-bold text-[22px] mb-[15px]">Change role:</h1>
+      <h1 className="font-bold text-[20px]">Select role:</h1>
-      <form
+      <form onSubmit={handleSubmit}>
-        className="border-2 border-black rounded-lg p-2"
+        <div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
-        onSubmit={handleSubmit}
-      >
-        <div className="self-start text-left font-medium">
           <div className="hover:font-bold">
             <label>
               <input
@@ -45,7 +42,7 @@ export default function ChangeRoles(props: {
                 value="project_manager"
                 checked={selectedRole === "project_manager"}
                 onChange={handleRoleChange}
-                className="ml-2 mr-2 mb-5"
+                className="ml-2 mr-2 mb-3"
               />
               Project manager
             </label>
@@ -63,7 +60,6 @@ export default function ChangeRoles(props: {
             </label>
           </div>
         </div>
-
         <Button
           text="Change"
           onClick={(): void => {

frontend/src/Components/DeleteProject.tsx

@@ -0,0 +1,33 @@
+import { api, APIResponse } from "../API/API";
+
+/**
+ * Use to delete a project from the system
+ * @param {string} props.projectToDelete - The projectname of project to delete
+ * @returns {void} Nothing
+ * @example
+ * const exampleProjectName = "project";
+ * DeleteProject({ projectToDelete: exampleProjectName });
+ */
+
+function DeleteProject(props: { projectToDelete: string }): void {
+  api
+    .removeProject(
+      props.projectToDelete,
+      localStorage.getItem("accessToken") ?? "",
+    )
+    .then((response: APIResponse<string>) => {
+      if (response.success) {
+        alert("Project has been deleted!");
+        location.reload();
+      } else {
+        alert("Project has not been deleted");
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      alert("project has not been deleted");
+      console.error("An error occurred during deletion:", error);
+    });
+}
+
+export default DeleteProject;

frontend/src/Components/DeleteUser.tsx

@@ -3,7 +3,7 @@ import { api, APIResponse } from "../API/API";
 
 /**
  * Use to remove a user from the system
- * @param props - The username of user to remove
+ * @param {string} props.usernameToDelete - The username of user to remove
  * @returns {boolean} True if removed, false if not
  * @example
  * const exampleUsername = "user";
@@ -29,7 +29,7 @@ function DeleteUser(props: { usernameToDelete: string }): boolean {
     })
     .catch((error) => {
       alert("User has not been deleted");
-      console.error("An error occurred during creation:", error);
+      console.error("An error occurred during deletion:", error);
     });
   return removed;
 }

frontend/src/Components/GetProjectTimes.tsx

@@ -0,0 +1,59 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { api } from "../API/API";
+
+/**
+ * Interface for reported time per category + total time reported
+ */
+export interface projectTimes {
+  admin: number;
+  development: number;
+  meeting: number;
+  own_work: number;
+  study: number;
+  testing: number;
+  totalTime?: number;
+}
+
+/**
+ * Gets all reported times for this project
+ * @param {Dispatch} props.setTimesProp - A setStateAction for the map you want to put times in
+ * @param {string} props.projectName - Username
+ * @returns {void} Nothing
+ * @example
+ *  const projectName = "Example";
+ *  const [times, setTimes] = useState<Times>();
+ *  GetProjectTimes({ setTimesProp: setTimes, projectName: projectName });
+ */
+function GetProjectTimes(props: {
+  setTimesProp: Dispatch<SetStateAction<projectTimes | undefined>>;
+  projectName: string;
+}): void {
+  const setTimes: Dispatch<SetStateAction<projectTimes | undefined>> =
+    props.setTimesProp;
+  useEffect(() => {
+    const fetchUsers = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const response = await api.getProjectTimes(props.projectName, token);
+        if (response.success && response.data) {
+          // Calculates total time reported
+          response.data.totalTime = response.data.admin;
+          response.data.totalTime += response.data.development;
+          response.data.totalTime += response.data.meeting;
+          response.data.totalTime += response.data.own_work;
+          response.data.totalTime += response.data.study;
+          response.data.totalTime += response.data.testing;
+          setTimes(response.data);
+        } else {
+          console.error("Failed to fetch project times:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching times:", error);
+      }
+    };
+
+    void fetchUsers();
+  }, [props.projectName, setTimes]);
+}
+
+export default GetProjectTimes;

frontend/src/Components/GetProjects.tsx

@@ -4,11 +4,13 @@ import { api } from "../API/API";
 
 /**
  * Gets all projects that user is a member of
- * @param props - A setStateAction for the array you want to put projects in
+ * @param {Dispatch} props.setProjectsProp - A setStateAction for the array you want to put projects in
+ * @param {string} props.username - Username
  * @returns {void} Nothing
  * @example
+ *  const username = "Example";
  *  const [projects, setProjects] = useState<Project[]>([]);
- *  GetAllUsers({ setProjectsProp: setProjects });
+ *  GetProjects({ setProjectsProp: setProjects, username: username });
  */
 function GetProjects(props: {
   setProjectsProp: Dispatch<React.SetStateAction<Project[]>>;

frontend/src/Components/GetUsersInProject.tsx

@@ -7,12 +7,13 @@ export interface ProjectMember {
 }
 
 /**
- * Gets all projects that user is a member of
+ * Gets all members of a project
- * @param props - A setStateAction for the array you want to put projects in
+ * @param string - The project's name
+ * @param Dispatch - A setStateAction for the array you want to put members in
  * @returns {void} Nothing
  * @example
- *  const [projects, setProjects] = useState<Project[]>([]);
+ * const [users, setUsers] = useState<User[]>([]);
- *  GetAllUsers({ setProjectsProp: setProjects });
+ * GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
  */
 function GetUsersInProject(props: {
   projectName: string;
@@ -28,10 +29,10 @@ function GetUsersInProject(props: {
         if (response.success) {
           setUsers(response.data ?? []);
         } else {
-          console.error("Failed to fetch projects:", response.message);
+          console.error("Failed to fetch members:", response.message);
         }
       } catch (error) {
-        console.error("Error fetching projects:", error);
+        console.error("Error fetching members:", error);
       }
     };
     void fetchUsers();

frontend/src/Components/InputField.tsx

@@ -19,7 +19,7 @@ function InputField(props: {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }): JSX.Element {
   return (
-    <div className="mb-4">
+    <div className="">
       <label
         className="block text-gray-700 text-sm font-sans font-bold mb-2"
         htmlFor={props.label}

frontend/src/Components/LoginField.tsx

@@ -25,6 +25,7 @@ function Login(props: {
 }): JSX.Element {
   return (
     <form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
+      <div className="space-y-3">
         <InputField
           type="text"
           label="Username"
@@ -41,6 +42,7 @@ function Login(props: {
           }}
           value={props.password}
         />
+      </div>
       <Button
         text="Login"
         onClick={(): void => {

frontend/src/Components/MemberInfoModal.tsx

@@ -5,12 +5,11 @@ import { useState } from "react";
 import ChangeRoleView from "./ChangeRoleView";
 
 function MemberInfoModal(props: {
-  isVisible: boolean;
+  projectName: string;
   username: string;
   onClose: () => void;
 }): JSX.Element {
   const [showRoles, setShowRoles] = useState(false);
-  if (!props.isVisible) return <></>;
 
   const handleChangeRole = (): void => {
     if (showRoles) {
@@ -24,29 +23,24 @@ function MemberInfoModal(props: {
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
+      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
+        <div className="mx-10">
           <p className="font-bold text-[30px]">{props.username}</p>
           <p
-          className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
+            className="hover:font-bold hover:cursor-pointer underline"
             onClick={handleChangeRole}
           >
             (Change Role)
           </p>
           {showRoles && (
             <ChangeRoleView
-            projectName={localStorage.getItem("projectName") ?? ""}
+              projectName={props.projectName}
               username={props.username}
             />
           )}
-        <div>
+          <h2 className="font-bold text-[20px]">Member of these projects:</h2>
-          <h2 className="font-bold text-[22px] mb-[20px]">
-            Member of these projects:
-          </h2>
-          <div className="pr-6 pl-6">
           <UserProjectListAdmin username={props.username} />
-          </div>
+          <div className="items-center space-x-6">
-        </div>
-        <div className="items-center space-x-6 pr-6 pl-6">
             <Button
               text={"Delete"}
               onClick={function (): void {
@@ -71,6 +65,7 @@ function MemberInfoModal(props: {
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

frontend/src/Components/ProjectInfoModal.tsx

@@ -1,30 +1,49 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Button from "./Button";
 import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import { Link } from "react-router-dom";
+import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
+import DeleteProject from "./DeleteProject";
 
 function ProjectInfoModal(props: {
-  isVisible: boolean;
   projectname: string;
   onClose: () => void;
   onClick: (username: string) => void;
 }): JSX.Element {
   const [users, setUsers] = useState<ProjectMember[]>([]);
+  const [times, setTimes] = useState<projectTimes>();
+  const totalTime = useRef(0);
   GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
-  if (!props.isVisible) return <></>;
+
+  GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
+
+  useEffect(() => {
+    if (times?.totalTime !== undefined) {
+      totalTime.current = times.totalTime;
+    }
+  }, [times]);
 
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
-        <div className="pl-20 pr-20">
+        <div className="pl-10 pr-10">
           <h1 className="font-bold text-[32px] mb-[20px]">
-            {localStorage.getItem("projectName") ?? ""}
+            {props.projectname}
           </h1>
-          <h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
+          <div className="p-1 text-center">
-          <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
+            <h2 className="text-[20px] font-bold">Statistics:</h2>
+          </div>
+          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
+            <p className="p-2">Number of members: {users.length}</p>
+            <p className="p-2">Total time reported: {totalTime.current}</p>
+          </div>
+          <div className="h-[6vh] p-7 text-center">
+            <h2 className="text-[20px] font-bold">Project members:</h2>
+          </div>
+          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
             <ul className="text-left font-medium space-y-2">
               <div></div>
               {users.map((user) => (
@@ -44,16 +63,28 @@ function ProjectInfoModal(props: {
               ))}
             </ul>
           </div>
-        </div>
+          <div className="space-x-5 my-2">
-        <div className="space-x-16">
             <Button
               text={"Delete"}
               onClick={function (): void {
-              //DELETE PROJECT
+                if (
+                  window.confirm(
+                    "Are you sure you want to delete this project?",
+                  )
+                ) {
+                  DeleteProject({
+                    projectToDelete: props.projectname,
+                  });
+                }
               }}
               type="button"
             />
-          <Link to={"/adminProjectAddMember"}>
+            <Link
+              to={{
+                pathname: "/adminProjectAddMember",
+                search: props.projectname,
+              }}
+            >
               <Button
                 text={"Add Member"}
                 onClick={function (): void {
@@ -72,6 +103,7 @@ function ProjectInfoModal(props: {
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

frontend/src/Components/ProjectListAdmin.tsx

@@ -18,7 +18,7 @@ export function ProjectListAdmin(props: {
   projects: NewProject[];
 }): JSX.Element {
   const [projectModalVisible, setProjectModalVisible] = useState(false);
-  const [projectname, setProjectname] = useState("");
+  const [projectName, setProjectName] = useState("");
   const [userModalVisible, setUserModalVisible] = useState(false);
   const [username, setUsername] = useState("");
 
@@ -28,34 +28,36 @@ export function ProjectListAdmin(props: {
   };
 
   const handleClickProject = (projectname: string): void => {
-    setProjectname(projectname);
+    setProjectName(projectname);
-    localStorage.setItem("projectName", projectname);
     setProjectModalVisible(true);
   };
 
   const handleCloseProject = (): void => {
-    setProjectname("");
+    setProjectName("");
     setProjectModalVisible(false);
   };
 
   const handleCloseUser = (): void => {
-    setProjectname("");
+    setUsername("");
     setUserModalVisible(false);
   };
 
   return (
     <>
+      {projectModalVisible && (
         <ProjectInfoModal
           onClose={handleCloseProject}
           onClick={handleClickUser}
-        isVisible={projectModalVisible}
+          projectname={projectName}
-        projectname={projectname}
         />
+      )}
+      {userModalVisible && (
         <MemberInfoModal
           onClose={handleCloseUser}
-        isVisible={userModalVisible}
           username={username}
+          projectName={projectName}
         />
+      )}
       <div>
         <ul className="font-bold underline text-[30px] cursor-pointer padding">
           {props.projects.map((project) => (

frontend/src/Components/Register.tsx

@@ -49,6 +49,7 @@ export default function Register(): JSX.Element {
           <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
             Register New User
           </h3>
+          <div className="space-y-3">
             <InputField
               label="Username"
               type="text"
@@ -65,6 +66,7 @@ export default function Register(): JSX.Element {
                 setPassword(e.target.value);
               }}
             />
+          </div>
           <div className="flex items-center justify-between">
             <Button
               text="Register"

frontend/src/Components/UserInfoModal.tsx

@@ -38,16 +38,17 @@ function UserInfoModal(props: {
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
+      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
+        <div className="mx-10">
           <p className="font-bold text-[30px]">{props.username}</p>
           <p
-          className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
+            className="mb-[10px] hover:font-bold hover:cursor-pointer underline"
             onClick={handleChangeNameView}
           >
             (Change Username)
           </p>
           {showInput && (
-          <div className="border-2 border-black rounded-lg p-2">
+            <div>
               <InputField
                 label={"New username"}
                 type={"text"}
@@ -66,15 +67,9 @@ function UserInfoModal(props: {
               />
             </div>
           )}
-        <div>
+          <h2 className="font-bold text-[20px]">Member of these projects:</h2>
-          <h2 className="font-bold text-[22px] mb-[20px]">
-            Member of these projects:
-          </h2>
-          <div className="pr-6 pl-6">
           <UserProjectListAdmin username={props.username} />
-          </div>
+          <div className="items-center space-x-6">
-        </div>
-        <div className="items-center space-x-6 pr-6 pl-6">
             <Button
               text={"Delete"}
               onClick={function (): void {
@@ -100,6 +95,7 @@ function UserInfoModal(props: {
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

frontend/src/Components/UserProjectListAdmin.tsx

@@ -8,10 +8,10 @@ function UserProjectListAdmin(props: { username: string }): JSX.Element {
   GetProjects({ setProjectsProp: setProjects, username: props.username });
 
   return (
-    <div className="border-2 border-black bg-white p-2 rounded-lg text-center">
+    <div className="border-2 border-black bg-white rounded-lg text-left overflow-auto h-[15vh] font-medium">
-      <ul>
+      <ul className="divide-y-2">
         {projects.map((project) => (
-          <li key={project.id}>
+          <li className="mx-2 my-1" key={project.id}>
             <span>{project.name}</span>
           </li>
         ))}

frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx

@@ -1,11 +1,11 @@
+import { useLocation } from "react-router-dom";
 import AddUserToProject from "../../Components/AddUserToProject";
 import BasicWindow from "../../Components/BasicWindow";
 
 function AdminProjectAddMember(): JSX.Element {
-  const content = <AddUserToProject />;
+  const projectName = useLocation().search.slice(1);
-
+  const content = <AddUserToProject projectName={projectName} />;
   const buttons = <></>;
-
   return <BasicWindow content={content} buttons={buttons} />;
 }
 export default AdminProjectAddMember;