aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-01 19:59:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add search box in collection dashboard

Browse Source
This commit is contained in:
Steven
2023-11-15 22:54:28 +08:00
parent 2296eb96ef
commit fbc089569d
2 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/web/src/pages/CollectionDashboard.tsx
View File

@ -1,4 +1,4 @@
import { Button } from "@mui/joy";
import { Button, Input } from "@mui/joy";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import CollectionView from "@/components/CollectionView";
@ -17,10 +17,17 @@ const CollectionDashboard: React.FC = () => {
const { t } = useTranslation();
const loadingState = useLoading();
const collectionStore = useCollectionStore();
const collections = collectionStore.getCollectionList();
const [state, setState] = useState<State>({
showCreateCollectionDrawer: false,
});
const [search, setSearch] = useState<string>("");
const filteredCollections = collectionStore.getCollectionList().filter((collection) => {
return (
collection.name.toLowerCase().includes(search.toLowerCase()) ||
collection.title.toLowerCase().includes(search.toLowerCase()) ||
collection.description.toLowerCase().includes(search.toLowerCase())
);
});
useEffect(() => {
Promise.all([shortcutService.getMyAllShortcuts(), collectionStore.fetchCollectionList()]).finally(() => {
@ -52,7 +59,17 @@ const CollectionDashboard: React.FC = () => {
</div>
</div>
<div className="w-full flex flex-row justify-between items-center mb-4">
<div></div>
<div>
<Input
className="w-32 mr-2"
type="text"
size="sm"
placeholder={t("common.search")}
startDecorator={<Icon.Search className="w-4 h-auto" />}
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="flex flex-row justify-start items-center">
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDrawer(true)}>
<Icon.Plus className="w-5 h-auto" />
@ -66,14 +83,14 @@ const CollectionDashboard: React.FC = () => {
<Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
{t("common.loading")}
</div>
) : collections.length === 0 ? (
) : filteredCollections.length === 0 ? (
<div className="py-16 w-full flex flex-col justify-center items-center text-gray-400">
<Icon.PackageOpen className="w-16 h-auto" strokeWidth="1" />
<p className="mt-4">No collections found.</p>
</div>
) : (
<div className="w-full flex flex-col justify-start items-start gap-3">
{collections.map((collection) => {
{filteredCollections.map((collection) => {
return <CollectionView key={collection.id} collection={collection} />;
})}
</div>