github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: project search added in project list page (#1837)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-11 15:57:11 +05:30 committed by GitHub
parent e2b5657c3e
commit 762ef422ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/app/pages/[workspaceSlug]/projects/index.tsx
View File

@ -16,7 +16,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { JoinProjectModal } from "components/project/join-project-modal"; import { JoinProjectModal } from "components/project/join-project-modal";
import { DeleteProjectModal, SingleProjectCard } from "components/project"; import { DeleteProjectModal, SingleProjectCard } from "components/project";
// ui // ui
import { EmptyState, Loader, PrimaryButton } from "components/ui"; import { EmptyState, Icon, Loader, PrimaryButton } from "components/ui";
import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
// icons // icons
import { PlusIcon } from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/24/outline";
@ -34,6 +34,8 @@ const ProjectsPage: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const [query, setQuery] = useState("");
const { user } = useUserAuth(); const { user } = useUserAuth();
// context data // context data
const { activeWorkspace } = useWorkspaces(); const { activeWorkspace } = useWorkspaces();
@ -42,6 +44,15 @@ const ProjectsPage: NextPage = () => {
const [deleteProject, setDeleteProject] = useState<string | null>(null); const [deleteProject, setDeleteProject] = useState<string | null>(null);
const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null); const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
const filteredProjectList =
query === ""
? projects
: projects?.filter(
(project) =>
project.name.toLowerCase().includes(query.toLowerCase()) ||
project.identifier.toLowerCase().includes(query.toLowerCase())
);
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceAuthorizationLayout
breadcrumbs={ breadcrumbs={
@ -53,16 +64,28 @@ const ProjectsPage: NextPage = () => {
</Breadcrumbs> </Breadcrumbs>
} }
right={ right={
<PrimaryButton <div className="flex items-center gap-3">
className="flex items-center gap-2" <div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90">
onClick={() => { <Icon iconName="search" className="!text-xl !leading-5 !text-custom-sidebar-text-400" />
const e = new KeyboardEvent("keydown", { key: "p" }); <input
document.dispatchEvent(e); className="w-full border-none bg-transparent text-xs text-custom-text-200 focus:outline-none"
}} value={query}
> onChange={(e) => setQuery(e.target.value)}
<PlusIcon className="h-4 w-4" /> placeholder="Search"
Add Project />
</PrimaryButton> </div>
<PrimaryButton
className="flex items-center gap-2 flex-shrink-0"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Project
</PrimaryButton>
</div>
} }
> >
<JoinProjectModal <JoinProjectModal
@ -91,12 +114,12 @@ const ProjectsPage: NextPage = () => {
data={projects?.find((item) => item.id === deleteProject) ?? null} data={projects?.find((item) => item.id === deleteProject) ?? null}
user={user} user={user}
/> />
{projects ? ( {filteredProjectList ? (
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
{projects.length > 0 ? ( {filteredProjectList.length > 0 ? (
<div className="h-full p-8 overflow-y-auto"> <div className="h-full p-8 overflow-y-auto">
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{projects.map((project) => ( {filteredProjectList.map((project) => (
<SingleProjectCard <SingleProjectCard
key={project.id} key={project.id}
project={project} project={project}