feat: add search scope select (#103)

Co-authored-by: Andy Hsu <i@nn.ci>

src/components/Base.tsx

@@ -17,7 +17,7 @@ import {
   Icon,
 } from "@hope-ui/solid"
 import { SwitchColorMode } from "./SwitchColorMode"
-import { createMemo, For, mergeProps, Show, splitProps } from "solid-js"
+import { ComponentProps, For, mergeProps, Show } from "solid-js"
 import { AiOutlineFullscreen, AiOutlineFullscreenExit } from "solid-icons/ai"
 import { hoverColor } from "~/utils"
 
@@ -91,20 +91,22 @@ export const BoxWithFullScreen = (props: Parameters<typeof Box>[0]) => {
   )
 }
 
-export const SelectWrapper = (props: {
-  value: string
-  onChange: (value: string) => void
+export function SelectWrapper<T extends string | number>(props: {
+  value: T
+  onChange: (v: T) => void
   options: {
-    value: string
+    value: T
     label?: string
   }[]
   alwaysShowBorder?: boolean
   size?: "xs" | "sm" | "md" | "lg"
-}) => {
+  w?: ComponentProps<typeof SelectTrigger>["w"]
+}) {
   return (
     <Select size={props.size} value={props.value} onChange={props.onChange}>
       <SelectTrigger
         borderColor={props.alwaysShowBorder ? "$info5" : undefined}
+        w={props.w}
       >
         <SelectValue />
         <SelectIcon />

src/lang/en/home.json

@@ -120,7 +120,12 @@
   },
   "search": {
     "search": "Search",
-    "no_result": "No result yet"
+    "no_result": "No result yet",
+    "scopes": {
+      "all": "All",
+      "folder": "Folder",
+      "file": "File"
+    }
   },
   "fetching_settings_failed": "Failed fetching settings: ",
   "get_current_user_failed": "Failed get current user: ",

src/pages/home/folder/Search.tsx

@@ -16,7 +16,12 @@ import {
 } from "@hope-ui/solid"
 import { BsSearch } from "solid-icons/bs"
 import { createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
-import { FullLoading, LinkWithBase, Paginator } from "~/components"
+import {
+  FullLoading,
+  LinkWithBase,
+  Paginator,
+  SelectWrapper,
+} from "~/components"
 import { useFetch, usePath, useRouter, useT } from "~/hooks"
 import { getMainColor, me, password } from "~/store"
 import { SearchNode } from "~/types"
@@ -111,14 +116,22 @@ const Search = () => {
     content: [] as SearchNode[],
     total: 0,
   })
+  const [scope, setScope] = createSignal(0)
+  const scopes = ["all", "folder", "file"]
 
   const search = async (page = 1) => {
     if (loading()) return
     setData({
       content: [],
       total: 0,
     })
-    const resp = await searchReq(pathname(), keywords(), password(), page)
+    const resp = await searchReq(
+      pathname(),
+      keywords(),
+      password(),
+      scope(),
+      page,
+    )
     handleResp(resp, (data) => {
       const content = data.content
       if (!content) {
@@ -158,6 +171,15 @@ const Search = () => {
         <ModalBody>
           <VStack w="$full" spacing="$2">
             <HStack w="$full" spacing="$2">
+              <SelectWrapper
+                w="$32"
+                value={scope()}
+                onChange={(v) => setScope(v)}
+                options={scopes.map((v, i) => ({
+                  value: i,
+                  label: t(`home.search.scopes.${v}`),
+                }))}
+              />
               <Input
                 id="search-input"
                 value={keywords()}
@@ -171,6 +193,7 @@ const Search = () => {
                 }}
               />
               <IconButton
+                flexShrink={0}
                 aria-label="search"
                 icon={<BsSearch />}
                 onClick={() => search()}

src/utils/api.ts

@@ -146,12 +146,14 @@ export const fsSearch = async (
   parent: string,
   keywords: string,
   password = "",
+  scope = 0,
   page = 1,
   per_page = 100,
 ): Promise<FsSearchResp> => {
   return r.post("/fs/search", {
     parent,
     keywords,
+    scope,
     page,
     per_page,
     password,