aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-20 14:01:24 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/web/src/components/ShortcutsNavigator.tsx
View File

@ -18,7 +18,7 @@ const ShortcutsNavigator = () => {
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
currentTab === "tab:all"
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:all" })}
@ -30,7 +30,7 @@ const ShortcutsNavigator = () => {
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
currentTab === "tab:mine"
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
@ -44,7 +44,7 @@ const ShortcutsNavigator = () => {
className={classNames(
"flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
currentTab === `tag:${tag}`
? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}

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>