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

Added search and some design changes

Browse source
This commit is contained in:
Peter KW 2024-04-11 00:39:33 +02:00
parent 72d27bb644
commit 1e0b32d32d
1 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import { useState } from "react";
import { NewProject } from "../Types/goTypes"; import { NewProject } from "../Types/goTypes";
import ProjectInfoModal from "./ProjectInfoModal"; import ProjectInfoModal from "./ProjectInfoModal";
import MemberInfoModal from "./MemberInfoModal"; import MemberInfoModal from "./MemberInfoModal";
import InputField from "./InputField";
/** /**
* A list of projects for admin manage projects page, that sets an onClick * A list of projects for admin manage projects page, that sets an onClick
@ -21,6 +22,7 @@ export function ProjectListAdmin(props: {
const [projectName, setProjectName] = useState(""); const [projectName, setProjectName] = useState("");
const [userModalVisible, setUserModalVisible] = useState(false); const [userModalVisible, setUserModalVisible] = useState(false);
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [search, setSearch] = useState("");
const handleClickUser = (username: string): void => { const handleClickUser = (username: string): void => {
setUsername(username); setUsername(username);
@ -44,6 +46,7 @@ export function ProjectListAdmin(props: {
return ( return (
<> <>
<h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>
{projectModalVisible && ( {projectModalVisible && (
<ProjectInfoModal <ProjectInfoModal
onClose={handleCloseProject} onClose={handleCloseProject}
@ -59,10 +62,24 @@ export function ProjectListAdmin(props: {
/> />
)} )}
<div> <div>
<ul className="font-bold underline text-[30px] cursor-pointer padding"> <InputField
{props.projects.map((project) => ( placeholder={"Search"}
type={"Text"}
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
<ul className="mt-3 border-2 text-left border-black rounded-2xl px-2 divide-y divide-gray-300 font-semibold text-[30px] cursor-pointer overflow-auto h-[65vh] w-[50vw]">
{props.projects
.filter((project) => {
return search.toLowerCase() === ""
? project.name
: project.name.toLowerCase().includes(search.toLowerCase());
})
.map((project) => (
<li <li
className="pt-5" className="hover:font-extrabold hover:underline p-1"
key={project.name} key={project.name}
onClick={() => { onClick={() => {
handleClickProject(project.name); handleClickProject(project.name);