tag filter

web/app/(commonLayout)/datasets/Container.tsx

@@ -44,7 +44,7 @@ const Container = () => {
     setKeywords(value)
     handleSearch()
   }
-  const [tagIDs, setTagIDs] = useState<string[]>(['good', 'bad'])
+  const [tagIDs, setTagIDs] = useState<string[]>([])
 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-gray-100 overflow-y-auto'>

web/app/components/base/tag-management/constant.ts

@@ -0,0 +1,6 @@
+export type Tag = {
+  id: string
+  name: string
+  type: string
+  bingding_count: number
+}

web/app/components/base/tag-management/filter.tsx

@@ -1,23 +1,42 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import cn from 'classnames'
+import { useStore as useTagStore } from './store'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchInput from '@/app/components/base/search-input'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import type { Tag } from '@/app/components/base/tag-management/constant'
+
+// import { fetchTagList } from '@/service/tag'
 
 const MOCK_TAGS = [
-  'good',
-  'bad',
-  'nice',
+  {
+    id: '001',
+    type: 'knowledge',
+    name: 'good',
+    bingding_count: 27,
+  },
+  {
+    id: '002',
+    type: 'knowledge',
+    name: 'bad',
+    bingding_count: 12,
+  },
+  {
+    id: '003',
+    type: 'knowledge',
+    name: 'nice',
+    bingding_count: 6,
+  },
 ]
 
 type TagFilterProps = {
@@ -31,6 +50,8 @@ const TagFilter: FC<TagFilterProps> = ({
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
 
+  const { tagList, setTagList } = useTagStore()
+
   const [keywords, setKeywords] = useState('')
   const [searchKeywords, setSearchKeywords] = useState('')
   const { run: handleSearch } = useDebounceFn(() => {
@@ -41,6 +62,28 @@ const TagFilter: FC<TagFilterProps> = ({
     handleSearch()
   }
 
+  const filteredTagList = useMemo(() => {
+    return tagList.filter(tag => tag.name.includes(searchKeywords))
+  }, [tagList, searchKeywords])
+
+  const currentTag = useMemo(() => {
+    return tagList.find(tag => tag.id === value[0])
+  }, [value, tagList])
+
+  const selectTag = (tag: Tag) => {
+    if (value.includes(tag.id))
+      onChange(value.filter(v => v !== tag.id))
+    else
+      onChange([...value, tag.id])
+  }
+
+  useEffect(() => {
+    // fetchTagList().then((res) => {
+    //   setTagList(res)
+    // })
+    setTagList(MOCK_TAGS)
+  }, [])
+
   return (
     <PortalToFollowElem
       open={open}
@@ -64,7 +107,7 @@ const TagFilter: FC<TagFilterProps> = ({
             </div>
             <div className='text-[13px] leading-[18px] text-gray-700'>
               {!value.length && t('dataset.tag.placeholder')}
-              {!!value.length && value[0]}
+              {!!value.length && currentTag?.name}
             </div>
             {value.length > 1 && (
               <div className='text-xs font-medium leading-[18px] text-gray-500'>{`+${value.length - 1}`}</div>
@@ -90,12 +133,22 @@ const TagFilter: FC<TagFilterProps> = ({
               <SearchInput white value={keywords} onChange={handleKeywordsChange} />
             </div>
             <div className='p-1'>
-              {MOCK_TAGS.map(tag => (
-                <div key={tag} className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'>
-                  <div className='grow text-sm text-gray-700 leading-5 truncate'>{tag}</div>
-                  {value.includes(tag) && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+              {filteredTagList.map(tag => (
+                <div
+                  key={tag.id}
+                  className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
+                  onClick={() => selectTag(tag)}
+                >
+                  <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
+                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
                 </div>
               ))}
+              {!filteredTagList.length && (
+                <div className='p-3 flex flex-col items-center gap-1'>
+                  <Tag03 className='h-6 w-6 text-gray-300' />
+                  <div className='text-gray-500 text-xs leading-[14px]'>{t('dataset.tag.noTag')}</div>
+                </div>
+              )}
             </div>
           </div>
         </PortalToFollowElemContent>

web/app/components/base/tag-management/store.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+import type { Tag } from './constant'
+
+type State = {
+  tagList: Tag[]
+}
+
+type Action = {
+  setTagList: (tagList?: Tag[]) => void
+}
+
+export const useStore = create<State & Action>(set => ({
+  tagList: [],
+  setTagList: tagList => set(() => ({ tagList })),
+}))

web/i18n/en-US/dataset.ts

@@ -47,7 +47,8 @@ const translation = {
   tag: {
     placeholder: 'All Tags',
     addNew: 'Add new tag',
-    noTag: 'No tags yet',
+    noTag: 'No tags',
+    noTagYet: 'No tags yet',
     addTag: 'add tag',
   },
 }

web/i18n/zh-Hans/dataset.ts

@@ -47,7 +47,8 @@ const translation = {
   tag: {
     placeholder: '全部标签',
     addNew: '创建新标签',
-    noTag: '还没有标签',
+    noTag: '没有标签',
+    noTagYet: '还没有标签',
     addTag: '添加标签',
   },
 }

web/service/tag.ts

@@ -0,0 +1,47 @@
+import { del, get, patch, post } from './base'
+import type { Tag } from '@/app/components/base/tag-management/constant'
+
+export const fetchTagList = () => {
+  return get<Tag[]>('/tags')
+}
+
+export const createTag = (name: string, type: string) => {
+  return post('/tags', {
+    body: {
+      name,
+      type,
+    },
+  })
+}
+
+export const updateTag = (tagID: string, name: string) => {
+  return patch(`/tags/${tagID}`, {
+    body: {
+      name,
+    },
+  })
+}
+
+export const deleteTag = (tagID: string) => {
+  return del(`/tags/${tagID}`)
+}
+
+export const bindTag = (tagIDList: string[], targetID: string, type: string) => {
+  return post('/tag-bindings/create', {
+    body: {
+      tag_ids: tagIDList,
+      target_id: targetID,
+      type,
+    },
+  })
+}
+
+export const unBindTag = (tagIDList: string[], targetID: string, type: string) => {
+  return post('/tag-bindings/remove', {
+    body: {
+      tag_ids: tagIDList,
+      target_id: targetID,
+      type,
+    },
+  })
+}