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

Some fixes to design and comments

Browse source
This commit is contained in:
Peter KW 2024-04-02 13:14:08 +02:00
parent cb68a6323b
commit 948dcce1ca
12 changed files with 173 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Components/AddProject.tsx
View file

@ -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"

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

@ -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");
}}

14
frontend/src/Components/ChangeRoleView.tsx
View file

@ -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 => {

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

@ -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[]>>;

13
frontend/src/Components/GetUsersInProject.tsx
View file

@ -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();

2
frontend/src/Components/InputField.tsx
View file

@ -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}

21
frontend/src/Components/MemberInfoModal.tsx
View file

@ -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-[22px] mb-[20px]">
Member of these projects:
</h2>
<div className="pr-6 pl-6">
<h2 className="font-bold text-[20px]">Member of these projects:</h2>
<UserProjectListAdmin username={props.username} />
</div>
</div>
<div className="items-center space-x-6 pr-6 pl-6">
<div className="items-center space-x-6">
<Button
text={"Delete"}
onClick={function (): void {
@ -71,6 +65,7 @@ function MemberInfoModal(props: {
</div>
</div>
</div>
</div>
);
}

18
frontend/src/Components/ProjectListAdmin.tsx
View file

@ -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 (
<>
{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) => (

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

@ -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"

18
frontend/src/Components/UserInfoModal.tsx
View file

@ -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-[22px] mb-[20px]">
Member of these projects:
</h2>
<div className="pr-6 pl-6">
<h2 className="font-bold text-[20px]">Member of these projects:</h2>
<UserProjectListAdmin username={props.username} />
</div>
</div>
<div className="items-center space-x-6 pr-6 pl-6">
<div className="items-center space-x-6">
<Button
text={"Delete"}
onClick={function (): void {
@ -100,6 +95,7 @@ function UserInfoModal(props: {
</div>
</div>
</div>
</div>
);
}

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

@ -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>
))}

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

@ -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;