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

feat: add search input

Browse Source
This commit is contained in:
Steven 2023-07-23 01:54:14 +08:00
parent 709118464b
commit 11205566ac
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/pages/Home.tsx
View File

@ -1,4 +1,4 @@
import { Button, Tab, TabList, Tabs } from "@mui/joy"; import { Button, Input, Tab, TabList, Tabs } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { shortcutService } from "../services"; import { shortcutService } from "../services";
import { useAppSelector } from "../stores"; import { useAppSelector } from "../stores";
@ -43,8 +43,20 @@ const Home: React.FC = () => {
return ( return (
<> <>
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start"> <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-center mb-4"> <div className="w-full flex flex-row justify-between items-center mb-4">
<span className="font-mono text-gray-400 mr-2">Shortcuts</span> <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
<Input
className="w-32"
type="text"
size="sm"
placeholder="Search"
startDecorator={<Icon.Search className="w-4 h-auto" />}
endDecorator={
filter.search !== "" && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
}
value={filter.search}
onChange={(e) => viewStore.setFilter({ search: e.target.value })}
/>
</div> </div>
<div className="w-full flex flex-row justify-between items-center mb-4"> <div className="w-full flex flex-row justify-between items-center mb-4">
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">

13
web/src/stores/v1/view.ts
View File

@ -5,6 +5,7 @@ export interface Filter {
tag?: string; tag?: string;
mineOnly?: boolean; mineOnly?: boolean;
visibility?: Visibility; visibility?: Visibility;
search?: string;
} }
export interface Order { export interface Order {
@ -48,7 +49,7 @@ const useViewStore = create<ViewState>()(
); );
export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => { export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => {
const { tag, mineOnly, visibility } = filter; const { tag, mineOnly, visibility, search } = filter;
const filteredShortcutList = shortcutList.filter((shortcut) => { const filteredShortcutList = shortcutList.filter((shortcut) => {
if (tag) { if (tag) {
if (!shortcut.tags.includes(tag)) { if (!shortcut.tags.includes(tag)) {
@ -65,6 +66,16 @@ export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter
return false; return false;
} }
} }
if (search) {
if (
!shortcut.name.toLowerCase().includes(search.toLowerCase()) &&
!shortcut.description.toLowerCase().includes(search.toLowerCase()) &&
!shortcut.tags.some((tag) => tag.toLowerCase().includes(search.toLowerCase())) &&
!shortcut.link.toLowerCase().includes(search.toLowerCase())
) {
return false;
}
}
return true; return true;
}); });
return filteredShortcutList; return filteredShortcutList;