feat: in document add or select new metadata

web/app/components/datasets/metadata/hooks/use-metadata-document.ts

@@ -1,11 +1,14 @@
 import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
+import type { BuiltInMetadataItem } from '../types'
 import { DataType, type MetadataItemWithValue } from '../types'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import Toast from '@/app/components/base/toast'
 import type { FullDocumentDetail } from '@/models/datasets'
 import { useTranslation } from 'react-i18next'
 import { useLanguages, useMetadataMap } from '@/hooks/use-metadata'
 import { get } from 'lodash-es'
+import { useCreateMetaData } from '@/service/knowledge/use-metadata'
+import useCheckMetadataName from './use-check-metadata-name'
 
 const testList = [
   {
@@ -42,10 +45,38 @@ const useMetadataDocument = ({
   const { t } = useTranslation()
 
   const { mutate } = useBatchUpdateDocMetadata()
+  const { checkName } = useCheckMetadataName()
+
   const [isEdit, setIsEdit] = useState(false)
 
   const [list, setList] = useState<MetadataItemWithValue[]>(testList)
   const [tempList, setTempList] = useState<MetadataItemWithValue[]>(list)
+  const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
+  const handleSelectMetaData = useCallback((metaData: MetadataItemWithValue) => {
+    setTempList((prev) => {
+      const index = prev.findIndex(item => item.id === metaData.id)
+      if (index === -1)
+        return [...prev, metaData]
+
+      return prev
+    })
+  }, [])
+  const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
+    const errorMsg = checkName(payload.name).errorMsg
+    if (errorMsg) {
+      Toast.notify({
+        message: errorMsg,
+        type: 'error',
+      })
+      return Promise.reject(new Error(errorMsg))
+    }
+    await doAddMetaData(payload)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+  }, [checkName, doAddMetaData, t])
+
   const hasData = list.length > 0
   const handleSave = async () => {
     await mutate({
@@ -137,6 +168,8 @@ const useMetadataDocument = ({
     setList,
     tempList,
     setTempList,
+    handleSelectMetaData,
+    handleAddMetaData,
     hasData,
     builtList,
     builtInEnabled,

web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx

@@ -7,11 +7,13 @@ import SelectMetadata from './select-metadata'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../../base/portal-to-follow-elem'
 import type { MetadataItem } from '../types'
 import type { Placement } from '@floating-ui/react'
-import { DataType } from '../types'
+import { useDatasetMetaData } from '@/service/knowledge/use-metadata'
 
 type Props = {
+  datasetId: string
   popupPlacement?: Placement
   popupOffset?: { mainAxis: number, crossAxis: number }
+  onSelect: (data: MetadataItem) => void
   onSave: (data: MetadataItem) => void
   trigger: React.ReactNode
   onManage: () => void
@@ -22,25 +24,23 @@ enum Step {
   create = 'create',
 }
 
-const testMetadataList: MetadataItem[] = [
-  { id: '1', name: 'name1', type: DataType.string },
-  { id: '2', name: 'name2', type: DataType.number },
-  { id: '3', name: 'name3', type: DataType.time },
-]
-
 const SelectMetadataModal: FC<Props> = ({
+  datasetId,
   popupPlacement = 'left-start',
   popupOffset = { mainAxis: -38, crossAxis: 4 },
   trigger,
+  onSelect,
   onSave,
   onManage,
 }) => {
+  const { data: datasetMetaData } = useDatasetMetaData(datasetId)
+
   const [open, setOpen] = useState(false)
   const [step, setStep] = useState(Step.select)
 
-  const handleSave = useCallback((data: MetadataItem) => {
-    onSave(data)
-    setOpen(false)
+  const handleSave = useCallback(async (data: MetadataItem) => {
+    await onSave(data)
+    setStep(Step.select)
   }, [onSave])
   return (
     <PortalToFollowElem
@@ -58,8 +58,11 @@ const SelectMetadataModal: FC<Props> = ({
       <PortalToFollowElemContent className='z-[1000]'>
         {step === Step.select ? (
           <SelectMetadata
-            onSelect={handleSave}
-            list={testMetadataList}
+            onSelect={(data) => {
+              onSelect(data)
+              setOpen(false)
+            }}
+            list={datasetMetaData?.doc_metadata || []}
             onNew={() => setStep(Step.create)}
             onManage={onManage}
           />

web/app/components/datasets/metadata/metadata-document/index.tsx

@@ -26,12 +26,15 @@ const MetadataDocument: FC<Props> = ({
   docDetail,
 }) => {
   const { t } = useTranslation()
+
   const {
     isEdit,
     setIsEdit,
     list,
     tempList,
     setTempList,
+    handleSelectMetaData,
+    handleAddMetaData,
     hasData,
     builtList,
     builtInEnabled,
@@ -77,10 +80,8 @@ const MetadataDocument: FC<Props> = ({
               const newList = tempList.filter(i => i.name !== item.name)
               setTempList(newList)
             }}
-            onAdd={(payload) => {
-              const newList = [...tempList, payload]
-              setTempList(newList)
-            }}
+            onAdd={handleAddMetaData}
+            onSelect={handleSelectMetaData}
           />
           {builtInEnabled && (
             <>

web/app/components/datasets/metadata/metadata-document/info-group.tsx

@@ -25,6 +25,7 @@ type Props = {
   isEdit?: boolean
   onChange?: (item: MetadataItemWithValue) => void
   onDelete?: (item: MetadataItemWithValue) => void
+  onSelect?: (item: MetadataItemWithValue) => void
   onAdd?: (item: MetadataItemWithValue) => void
 }
 
@@ -41,6 +42,7 @@ const InfoGroup: FC<Props> = ({
   isEdit,
   onChange,
   onDelete,
+  onSelect,
   onAdd,
 }) => {
   const router = useRouter()
@@ -71,9 +73,11 @@ const InfoGroup: FC<Props> = ({
         {isEdit && (
           <div>
             <SelectMetadataModal
+              datasetId={dataSetId}
               trigger={
                 <AddMetadataButton />
               }
+              onSelect={data => onSelect?.(data as MetadataItemWithValue)}
               onSave={data => onAdd?.(data)}
               onManage={handleMangeMetadata}
             />