Merge pull request #77 from Ray-D-Song/tag-filter-by-folder

feat: support filter tag by select folder

Author: banzhe

packages/server/src/api/pages.ts

@@ -4,7 +4,7 @@ import { isNil, isNotNil, isNumberString } from '@web-archive/shared/utils'
 import { z } from 'zod'
 import type { HonoTypeUserInformation } from '~/constants/binding'
 import result from '~/utils/result'
-import { clearDeletedPage, deletePageById, getPageById, insertPage, queryDeletedPage, queryPage, queryPageByUrl, queryRecentSavePage, restorePage, selectPageTotalCount, updatePage } from '~/model/page'
+import { clearDeletedPage, deletePageById, getPageById, insertPage, queryAllPageIds, queryDeletedPage, queryPage, queryPageByUrl, queryRecentSavePage, restorePage, selectPageTotalCount, updatePage } from '~/model/page'
 import { getFolderById, restoreFolder } from '~/model/folder'
 import { getFileFromBucket, saveFileToBucket } from '~/utils/file'
 import { updateShowcase } from '~/model/showcase'
@@ -131,6 +131,30 @@ app.post(
   },
 )
 
+app.post(
+  '/query_all_page_ids',
+  validator('json', (value, c) => {
+    const schema = z.object({
+      folderId: z.number({
+        message: 'Folder ID should be a number',
+      }),
+    })
+
+    const parsed = schema.safeParse(value)
+    if (!parsed.success) {
+      return c.json(result.error(400, parsed.error.errors[0].message))
+    }
+
+    return parsed.data
+  }),
+  async (c) => {
+    const { folderId } = c.req.valid('json')
+    const pages = await queryAllPageIds(c.env.DB, folderId)
+
+    return c.json(result.success(pages))
+  },
+)
+
 app.post(
   '/query_by_url',
   validator('json', (value, c) => {

packages/server/src/model/page.ts

@@ -243,6 +243,14 @@ async function updatePage(DB: D1Database, options: UpdatePageOptions) {
   return result.every(r => r.success)
 }
 
+async function queryAllPageIds(DB: D1Database, folderId: number) {
+  const sql = `
+    SELECT id FROM pages WHERE folderId = ? AND isDeleted = 0
+  `
+  const result = await DB.prepare(sql).bind(folderId).all()
+  return result.results.map(r => r.id)
+}
+
 export {
   selectPageTotalCount,
   queryPage,
@@ -257,4 +265,5 @@ export {
   queryRecentSavePage,
   selectAllPageCount,
   updatePage,
+  queryAllPageIds,
 }

packages/web/src/components/side-bar-tag-menu.tsx

@@ -6,14 +6,16 @@ import type { Tag } from '@web-archive/shared/types'
 import { cn } from '@web-archive/shared/utils'
 import { useRequest } from 'ahooks'
 import { ChevronDown, Pencil, TagIcon, Trash } from 'lucide-react'
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import EditTagDialog from './edit-tag-dialog'
 import { deleteTag } from '~/data/tag'
 import TagContext from '~/store/tag'
+import { queryAllPageIds } from '~/data/page'
 
 interface SidebarTagMenuProps {
+  selectedFolder: number | null
   selectedTag: number | null
   setSelectedTag: (tag: number | null) => void
 }
@@ -61,7 +63,7 @@ function TagBadge({ tag, isSelected, onClick, onDelete, onEdit }: TagBadgeProps)
   )
 }
 
-function SidebarTagMenu({ selectedTag, setSelectedTag }: SidebarTagMenuProps) {
+function SidebarTagMenu({ selectedTag, setSelectedTag, selectedFolder }: SidebarTagMenuProps) {
   const { t } = useTranslation()
   const { tagCache: tags, refreshTagCache } = useContext(TagContext)
   const [isTagsCollapseOpen, setIsTagsCollapseOpen] = useState(false)
@@ -92,6 +94,19 @@ function SidebarTagMenu({ selectedTag, setSelectedTag }: SidebarTagMenuProps) {
     setEditTag(tag)
   }
 
+  const [showTagList, setShowTagList] = useState(tags)
+  useEffect(() => {
+    if (!selectedFolder) {
+      setShowTagList(tags)
+      return
+    }
+    queryAllPageIds(selectedFolder).then((data) => {
+      const newTags = tags.filter((tag) => {
+        return tag.pageIds.some(pageId => data.includes(pageId))
+      })
+      setShowTagList(newTags)
+    })
+  }, [selectedFolder, tags])
   return (
     <SidebarMenu>
       <EditTagDialog editTag={editTag} afterSubmit={refreshTagCache} open={editTagDialogOpen} setOpen={setEditTagDialogOpen}></EditTagDialog>
@@ -113,7 +128,7 @@ function SidebarTagMenu({ selectedTag, setSelectedTag }: SidebarTagMenuProps) {
             onContextMenu={e => e.preventDefault()}
           >
             <div className="space-y-2">
-              {tags?.map(tag => (
+              {showTagList?.map(tag => (
                 <TagBadge
                   key={tag.id}
                   tag={tag}

packages/web/src/components/side-bar.tsx

@@ -74,6 +74,7 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
           <SidebarTagMenu
             selectedTag={selectedTag}
             setSelectedTag={setSelectedTag}
+            selectedFolder={openedFolder}
           >
           </SidebarTagMenu>
         </ScrollArea>

packages/web/src/data/page.ts

@@ -105,6 +105,15 @@ function getRecentSavePage(): Promise<Page[]> {
   })
 }
 
+function queryAllPageIds(folderId: number): Promise<number[]> {
+  return fetcher<number[]>('/pages/query_all_page_ids', {
+    method: 'POST',
+    body: {
+      folderId,
+    },
+  })
+}
+
 export {
   getPageDetail,
   deletePage,
@@ -116,4 +125,5 @@ export {
   updatePageShowcase,
   getPageScreenshot,
   getRecentSavePage,
+  queryAllPageIds,
 }