Merge branch 'frontend' into gruppDM
This commit is contained in:
commit
762a1b7368
19 changed files with 389 additions and 224 deletions
|
@ -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)
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -61,24 +61,26 @@ function AddProject(): JSX.Element {
|
|||
<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) => {
|
||||
e.preventDefault();
|
||||
setName(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Description"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => {
|
||||
e.preventDefault();
|
||||
setDescription(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
label="Name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
e.preventDefault();
|
||||
setName(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Description"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => {
|
||||
e.preventDefault();
|
||||
setDescription(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
text="Create"
|
||||
|
|
|
@ -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");
|
||||
}}
|
||||
|
|
|
@ -31,13 +31,10 @@ export default function ChangeRoles(props: {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold text-[22px] mb-[15px]">Change role:</h1>
|
||||
<form
|
||||
className="border-2 border-black rounded-lg p-2"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<div className="self-start text-left font-medium">
|
||||
<div className="overflow-auto rounded-lg">
|
||||
<h1 className="font-bold text-[20px]">Select role:</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
|
||||
<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 => {
|
||||
|
|
33
frontend/src/Components/DeleteProject.tsx
Normal file
33
frontend/src/Components/DeleteProject.tsx
Normal file
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
|
|
59
frontend/src/Components/GetProjectTimes.tsx
Normal file
59
frontend/src/Components/GetProjectTimes.tsx
Normal file
|
@ -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;
|
|
@ -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[]>>;
|
||||
|
|
|
@ -7,12 +7,13 @@ export interface ProjectMember {
|
|||
}
|
||||
|
||||
/**
|
||||
* Gets all projects that user is a member of
|
||||
* @param props - A setStateAction for the array you want to put projects in
|
||||
* Gets all members of a project
|
||||
* @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[]>([]);
|
||||
* GetAllUsers({ setProjectsProp: setProjects });
|
||||
* const [users, setUsers] = useState<User[]>([]);
|
||||
* 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();
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -25,22 +25,24 @@ function Login(props: {
|
|||
}): JSX.Element {
|
||||
return (
|
||||
<form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
|
||||
<InputField
|
||||
type="text"
|
||||
label="Username"
|
||||
onChange={(e) => {
|
||||
props.setUsername(e.target.value);
|
||||
}}
|
||||
value={props.username}
|
||||
/>
|
||||
<InputField
|
||||
type="password"
|
||||
label="Password"
|
||||
onChange={(e) => {
|
||||
props.setPassword(e.target.value);
|
||||
}}
|
||||
value={props.password}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
type="text"
|
||||
label="Username"
|
||||
onChange={(e) => {
|
||||
props.setUsername(e.target.value);
|
||||
}}
|
||||
value={props.username}
|
||||
/>
|
||||
<InputField
|
||||
type="password"
|
||||
label="Password"
|
||||
onChange={(e) => {
|
||||
props.setPassword(e.target.value);
|
||||
}}
|
||||
value={props.password}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
text="Login"
|
||||
onClick={(): void => {
|
||||
|
|
|
@ -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,51 +23,47 @@ 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">
|
||||
<p className="font-bold text-[30px]">{props.username}</p>
|
||||
<p
|
||||
className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
|
||||
onClick={handleChangeRole}
|
||||
>
|
||||
(Change Role)
|
||||
</p>
|
||||
{showRoles && (
|
||||
<ChangeRoleView
|
||||
projectName={localStorage.getItem("projectName") ?? ""}
|
||||
username={props.username}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h2 className="font-bold text-[22px] mb-[20px]">
|
||||
Member of these projects:
|
||||
</h2>
|
||||
<div className="pr-6 pl-6">
|
||||
<UserProjectListAdmin username={props.username} />
|
||||
<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="hover:font-bold hover:cursor-pointer underline"
|
||||
onClick={handleChangeRole}
|
||||
>
|
||||
(Change Role)
|
||||
</p>
|
||||
{showRoles && (
|
||||
<ChangeRoleView
|
||||
projectName={props.projectName}
|
||||
username={props.username}
|
||||
/>
|
||||
)}
|
||||
<h2 className="font-bold text-[20px]">Member of these projects:</h2>
|
||||
<UserProjectListAdmin username={props.username} />
|
||||
<div className="items-center space-x-6">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
if (
|
||||
window.confirm("Are you sure you want to delete this user?")
|
||||
) {
|
||||
DeleteUser({
|
||||
usernameToDelete: props.username,
|
||||
});
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
setShowRoles(false);
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center space-x-6 pr-6 pl-6">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
if (
|
||||
window.confirm("Are you sure you want to delete this user?")
|
||||
) {
|
||||
DeleteUser({
|
||||
usernameToDelete: props.username,
|
||||
});
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
setShowRoles(false);
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -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="pl-20 pr-20">
|
||||
<div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
|
||||
<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="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
|
||||
<div className="p-1 text-center">
|
||||
<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,31 +63,44 @@ function ProjectInfoModal(props: {
|
|||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-x-16">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
//DELETE PROJECT
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Link to={"/adminProjectAddMember"}>
|
||||
<div className="space-x-5 my-2">
|
||||
<Button
|
||||
text={"Add Member"}
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
return;
|
||||
if (
|
||||
window.confirm(
|
||||
"Are you sure you want to delete this project?",
|
||||
)
|
||||
) {
|
||||
DeleteProject({
|
||||
projectToDelete: props.projectname,
|
||||
});
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</Link>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Link
|
||||
to={{
|
||||
pathname: "/adminProjectAddMember",
|
||||
search: props.projectname,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
text={"Add Member"}
|
||||
onClick={function (): void {
|
||||
return;
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</Link>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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);
|
||||
localStorage.setItem("projectName", projectname);
|
||||
setProjectName(projectname);
|
||||
setProjectModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseProject = (): void => {
|
||||
setProjectname("");
|
||||
setProjectName("");
|
||||
setProjectModalVisible(false);
|
||||
};
|
||||
|
||||
const handleCloseUser = (): void => {
|
||||
setProjectname("");
|
||||
setUsername("");
|
||||
setUserModalVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectInfoModal
|
||||
onClose={handleCloseProject}
|
||||
onClick={handleClickUser}
|
||||
isVisible={projectModalVisible}
|
||||
projectname={projectname}
|
||||
/>
|
||||
<MemberInfoModal
|
||||
onClose={handleCloseUser}
|
||||
isVisible={userModalVisible}
|
||||
username={username}
|
||||
/>
|
||||
{projectModalVisible && (
|
||||
<ProjectInfoModal
|
||||
onClose={handleCloseProject}
|
||||
onClick={handleClickUser}
|
||||
projectname={projectName}
|
||||
/>
|
||||
)}
|
||||
{userModalVisible && (
|
||||
<MemberInfoModal
|
||||
onClose={handleCloseUser}
|
||||
username={username}
|
||||
projectName={projectName}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<ul className="font-bold underline text-[30px] cursor-pointer padding">
|
||||
{props.projects.map((project) => (
|
||||
|
|
|
@ -49,22 +49,24 @@ export default function Register(): JSX.Element {
|
|||
<h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
|
||||
Register New User
|
||||
</h3>
|
||||
<InputField
|
||||
label="Username"
|
||||
type="text"
|
||||
value={username ?? ""}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password ?? ""}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
label="Username"
|
||||
type="text"
|
||||
value={username ?? ""}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password ?? ""}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
text="Register"
|
||||
|
|
|
@ -38,65 +38,61 @@ 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">
|
||||
<p className="font-bold text-[30px]">{props.username}</p>
|
||||
<p
|
||||
className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
|
||||
onClick={handleChangeNameView}
|
||||
>
|
||||
(Change Username)
|
||||
</p>
|
||||
{showInput && (
|
||||
<div className="border-2 border-black rounded-lg p-2">
|
||||
<InputField
|
||||
label={"New username"}
|
||||
type={"text"}
|
||||
value={newUsername}
|
||||
onChange={function (e): void {
|
||||
e.defaultPrevented;
|
||||
setNewUsername(e.target.value);
|
||||
<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-[10px] hover:font-bold hover:cursor-pointer underline"
|
||||
onClick={handleChangeNameView}
|
||||
>
|
||||
(Change Username)
|
||||
</p>
|
||||
{showInput && (
|
||||
<div>
|
||||
<InputField
|
||||
label={"New username"}
|
||||
type={"text"}
|
||||
value={newUsername}
|
||||
onChange={function (e): void {
|
||||
e.defaultPrevented;
|
||||
setNewUsername(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text={"Change"}
|
||||
onClick={function (): void {
|
||||
handleClickChangeName();
|
||||
}}
|
||||
type={"submit"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="font-bold text-[20px]">Member of these projects:</h2>
|
||||
<UserProjectListAdmin username={props.username} />
|
||||
<div className="items-center space-x-6">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
if (
|
||||
window.confirm("Are you sure you want to delete this user?")
|
||||
) {
|
||||
DeleteUser({
|
||||
usernameToDelete: props.username,
|
||||
});
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Button
|
||||
text={"Change"}
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
handleClickChangeName();
|
||||
setNewUsername("");
|
||||
setShowInput(false);
|
||||
props.onClose();
|
||||
}}
|
||||
type={"submit"}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<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>
|
||||
<div className="items-center space-x-6 pr-6 pl-6">
|
||||
<Button
|
||||
text={"Delete"}
|
||||
onClick={function (): void {
|
||||
if (
|
||||
window.confirm("Are you sure you want to delete this user?")
|
||||
) {
|
||||
DeleteUser({
|
||||
usernameToDelete: props.username,
|
||||
});
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
<Button
|
||||
text={"Close"}
|
||||
onClick={function (): void {
|
||||
setNewUsername("");
|
||||
setShowInput(false);
|
||||
props.onClose();
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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">
|
||||
<ul>
|
||||
<div className="border-2 border-black bg-white rounded-lg text-left overflow-auto h-[15vh] font-medium">
|
||||
<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>
|
||||
))}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue