forked from github/plane
81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
import { useState } from "react";
|
||
import { useRouter } from "next/router";
|
||
import { observer } from "mobx-react-lite";
|
||
|
||
// mobx store
|
||
import { useMobxStore } from "lib/mobx/store-provider";
|
||
// components
|
||
import { ProjectViewListItem } from "components/views";
|
||
import { NewEmptyState } from "components/common/new-empty-state";
|
||
// ui
|
||
import { Input, Loader } from "@plane/ui";
|
||
// assets
|
||
import emptyView from "public/empty-state/empty_view.webp";
|
||
// icons
|
||
import { Plus, Search } from "lucide-react";
|
||
|
||
export const ProjectViewsList = observer(() => {
|
||
const [query, setQuery] = useState("");
|
||
|
||
const router = useRouter();
|
||
const { projectId } = router.query;
|
||
|
||
const { projectViews: projectViewsStore, commandPalette: commandPaletteStore } = useMobxStore();
|
||
|
||
const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
|
||
|
||
if (!viewsList)
|
||
return (
|
||
<Loader className="space-y-4 p-4">
|
||
<Loader.Item height="72px" />
|
||
<Loader.Item height="72px" />
|
||
<Loader.Item height="72px" />
|
||
<Loader.Item height="72px" />
|
||
</Loader>
|
||
);
|
||
|
||
const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(query.toLowerCase()));
|
||
|
||
return (
|
||
<>
|
||
{viewsList.length > 0 ? (
|
||
<div className="h-full w-full flex flex-col">
|
||
<div className="w-full flex flex-col overflow-hidden">
|
||
<div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
|
||
<Search className="text-custom-text-200" size={14} strokeWidth={2} />
|
||
<Input
|
||
className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder="Search"
|
||
mode="true-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
{filteredViewsList.length > 0 ? (
|
||
filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
|
||
) : (
|
||
<p className="text-custom-text-300 text-sm text-center mt-10">No results found</p>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<NewEmptyState
|
||
title="Save filtered views for your project. Create as many as you need."
|
||
description="Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best."
|
||
image={emptyView}
|
||
comicBox={{
|
||
title: "Views work atop Issue properties.",
|
||
description: "You can create a view from here with as many properties as filters as you see fit.",
|
||
direction: "right",
|
||
}}
|
||
primaryButton={{
|
||
icon: <Plus size={14} strokeWidth={2} />,
|
||
text: "Build your first view",
|
||
onClick: () => commandPaletteStore.toggleCreateViewModal(true),
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
});
|