binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-578] feat: projects list filtering and ordering (#3926)

Browse source 
* style: project card UI updated

* dev: initialize project filter store and types

* chore: implemented filtering logic

* chore: implemented ordering

* chore: my projects filter added

* chore: update created at date filter options

* refactor: order by dropdown

* style: revert project card UI

* fix: project card z-index

* fix: members filtering

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2024-03-12 19:36:40 +05:30 • committed by GitHub
parent c3c6ef8830
commit 69e110f4a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 1452 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/components/project/card-list.tsx
View file

@ -1,10 +1,14 @@
import Image from "next/image";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication, useEventTracker, useProject } from "hooks/store";
import { useApplication, useEventTracker, useProject, useProjectFilter } from "hooks/store";
// components
import { EmptyState } from "components/empty-state";
import { ProjectCard } from "components/project";
import { ProjectsLoader } from "components/ui";
// assets
import AllFiltersImage from "public/empty-state/project/all-filters.svg";
import NameFilterImage from "public/empty-state/project/name-filter.svg";
// constants
import { EmptyStateType } from "constants/empty-state";
@ -12,38 +16,49 @@ export const ProjectCardList = observer(() => {
// store hooks
const { commandPalette: commandPaletteStore } = useApplication();
const { setTrackElement } = useEventTracker();
const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject();
const { searchQuery } = useProjectFilter();
const { workspaceProjectIds, searchedProjects, getProjectById } = useProject();
if (!filteredProjectIds) return <ProjectsLoader />;
if (!workspaceProjectIds) return <ProjectsLoader />;
if (workspaceProjectIds?.length === 0)
return (
<EmptyState
type={EmptyStateType.WORKSPACE_PROJECTS}
primaryButtonOnClick={() => {
setTrackElement("Project empty state");
commandPaletteStore.toggleCreateProjectModal(true);
}}
/>
);
if (filteredProjectIds.length === 0)
return (
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<Image
src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
alt="No matching projects"
/>
<h5 className="text-xl font-medium mt-7 mb-1">No matching projects</h5>
<p className="text-custom-text-400 text-base whitespace-pre-line">
{searchQuery.trim() === ""
? "Remove the filters to see all projects"
: "No projects detected with the matching\ncriteria. Create a new project instead"}
</p>
</div>
</div>
);
return (
<>
{workspaceProjectIds.length > 0 ? (
<div className="h-full w-full overflow-y-auto p-8 vertical-scrollbar scrollbar-lg">
{searchedProjects.length == 0 ? (
<div className="mt-10 w-full text-center text-custom-text-400">No matching projects</div>
) : (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{searchedProjects.map((projectId) => {
const projectDetails = getProjectById(projectId);
if (!projectDetails) return;
return <ProjectCard key={projectDetails.id} project={projectDetails} />;
})}
</div>
)}
</div>
) : (
<EmptyState
type={EmptyStateType.WORKSPACE_PROJECTS}
primaryButtonOnClick={() => {
setTrackElement("Project empty state");
commandPaletteStore.toggleCreateProjectModal(true);
}}
/>
)}
</>
<div className="h-full w-full overflow-y-auto p-8 vertical-scrollbar scrollbar-lg">
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{filteredProjectIds.map((projectId) => {
const projectDetails = getProjectById(projectId);
if (!projectDetails) return;
return <ProjectCard key={projectDetails.id} project={projectDetails} />;
})}
</div>
</div>
);
});