From 4ef28162714af6a90e777206509bc805be9ff95f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 5 Mar 2025 17:56:10 +0800
Subject: [PATCH] feat: batch edit can simple save

---
 .../components/datasets/documents/list.tsx    | 32 ++++++-----
 .../metadata/edit-metadata-batch/modal.tsx    | 42 ++++++++++----
 .../hooks/use-batch-edit-document-metadata.ts | 57 +++++++++----------
 3 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index c375e59fb3..ed286cfcf9 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -435,7 +435,8 @@ const DocumentList: FC<IDocumentListProps> = ({
     originalList,
     handleSave,
   } = useBatchEditDocumentMetadata({
-    list: documents,
+    datasetId,
+    list: documents.filter(item => selectedIds.includes(item.id)),
   })
 
   useEffect(() => {
@@ -628,20 +629,20 @@ const DocumentList: FC<IDocumentListProps> = ({
           })}
         </tbody>
       </table>
-      {/* {(selectedIds.length > 0) && ( */}
-      <BatchAction
-        className='absolute left-0 bottom-16 z-20'
-        selectedIds={selectedIds}
-        onArchive={handleAction(DocumentActionType.archive)}
-        onBatchEnable={handleAction(DocumentActionType.enable)}
-        onBatchDisable={handleAction(DocumentActionType.disable)}
-        onBatchDelete={handleAction(DocumentActionType.delete)}
-        onEditMetadata={showEditModal}
-        onCancel={() => {
-          onSelectedIdChange([])
-        }}
-      />
-      {/* )} */}
+      {(selectedIds.length > 0) && (
+        <BatchAction
+          className='absolute left-0 bottom-16 z-20'
+          selectedIds={selectedIds}
+          onArchive={handleAction(DocumentActionType.archive)}
+          onBatchEnable={handleAction(DocumentActionType.enable)}
+          onBatchDisable={handleAction(DocumentActionType.disable)}
+          onBatchDelete={handleAction(DocumentActionType.delete)}
+          onEditMetadata={showEditModal}
+          onCancel={() => {
+            onSelectedIdChange([])
+          }}
+        />
+      )}
       {/* Show Pagination only if the total is more than the limit */}
       {pagination.total && pagination.total > (pagination.limit || 10) && (
         <Pagination
@@ -662,6 +663,7 @@ const DocumentList: FC<IDocumentListProps> = ({
 
       {isShowEditModal && (
         <EditMetadataBatchModal
+          datasetId={datasetId}
           documentNum={selectedIds.length}
           list={originalList}
           onSave={handleSave}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index 6a801241ae..dd4afcaca0 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import Modal from '../../../base/modal'
-import type { MetadataItemInBatchEdit } from '../types'
-import { DataType, type MetadataItemWithEdit, UpdateType } from '../types'
+import type { BuiltInMetadataItem, MetadataItemInBatchEdit } from '../types'
+import { type MetadataItemWithEdit, UpdateType } from '../types'
 import EditMetadataBatchItem from './edit-row'
 import AddedMetadataItem from './add-row'
 import Button from '../../../base/button'
@@ -15,10 +15,14 @@ import { RiQuestionLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 import AddMetadataButton from '../add-metadata-button'
 import produce from 'immer'
+import useCheckMetadataName from '../hooks/use-check-metadata-name'
+import Toast from '@/app/components/base/toast'
+import { useCreateMetaData } from '@/service/knowledge/use-metadata'
 
 const i18nPrefix = 'dataset.metadata.batchEditMetadata'
 
 type Props = {
+  datasetId: string,
   documentNum: number
   list: MetadataItemInBatchEdit[]
   onSave: (list: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => void
@@ -27,12 +31,14 @@ type Props = {
 }
 
 const EditMetadataBatchModal: FC<Props> = ({
+  datasetId,
   documentNum,
   list,
   onSave,
   onHide,
   onShowManage,
 }) => {
+  console.log(list)
   const { t } = useTranslation()
   const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
   const handleTemplesChange = useCallback((payload: MetadataItemWithEdit) => {
@@ -70,15 +76,25 @@ const EditMetadataBatchModal: FC<Props> = ({
     setTempleList(newTempleList)
   }, [list, templeList])
 
-  const testAddedList: MetadataItemWithEdit[] = [
-    {
-      id: '1', name: 'name1', type: DataType.string, value: 'aaa',
-    },
-    {
-      id: '2.1', name: 'num v', type: DataType.number, value: 10,
-    },
-  ]
-  const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>(testAddedList)
+  const { checkName } = useCheckMetadataName()
+  const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
+  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 [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
   const handleAddedListChange = useCallback((payload: MetadataItemWithEdit) => {
     const newAddedList = addedList.map(i => i.id === payload.id ? payload : i)
     setAddedList(newAddedList)
@@ -133,12 +149,14 @@ const EditMetadataBatchModal: FC<Props> = ({
           </div>
           <div className='mt-3'>
             <SelectMetadataModal
+              datasetId={datasetId}
               popupPlacement='top-start'
               popupOffset={{ mainAxis: 4, crossAxis: 0 }}
               trigger={
                 <AddMetadataButton />
               }
-              onSave={data => setAddedList([...addedList, data])}
+              onSave={handleAddMetaData}
+              onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])}
               onManage={onShowManage}
             />
           </div>
diff --git a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
index 3a07b72e02..e9ed0d0c5a 100644
--- a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
@@ -1,31 +1,17 @@
 import { useBoolean } from 'ahooks'
 import type { MetadataBatchEditToServer, MetadataItemInBatchEdit, MetadataItemWithValue } from '../types'
-import { DataType } from '../types'
 import type { SimpleDocumentDetail } from '@/models/datasets'
 import { useMemo } from 'react'
 import { isEqual } from 'lodash-es'
-// compare
-// original and edited list.
-// Use the edited list, except the original and edited value is both multiple value.
-const testMetadataList: MetadataItemWithValue[][] = [
-  [
-    { id: 'str-same-value', name: 'name', type: DataType.string, value: 'Joel' },
-    { id: 'num', name: 'age', type: DataType.number, value: 10 },
-    { id: 'date', name: 'date', type: DataType.time, value: null },
-    { id: 'str-with-different-value', name: 'hobby', type: DataType.string, value: 'bbb' },
-  ],
-  [
-    { id: 'str-same-value', name: 'name', type: DataType.string, value: 'Joel' },
-    { id: 'str-with-different-value', name: 'hobby', type: DataType.string, value: 'ccc' },
-    { id: 'str-extra', name: 'extra', type: DataType.string, value: 'ddd' },
-  ],
-]
+import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
 
 type Props = {
+  datasetId: string
   list: SimpleDocumentDetail[]
 }
 
 const useBatchEditDocumentMetadata = ({
+  datasetId,
   list,
 }: Props) => {
   const [isShowEditModal, {
@@ -33,22 +19,25 @@ const useBatchEditDocumentMetadata = ({
     setFalse: hideEditModal,
   }] = useBoolean(false)
 
+  const metaDataList: MetadataItemWithValue[][] = (() => {
+    const res: MetadataItemWithValue[][] = []
+    list.forEach((item) => {
+      if (item.doc_metadata) {
+        res.push(item.doc_metadata.filter(item => item.id !== 'built-in'))
+        return
+      }
+      res.push([])
+    })
+    return res
+  })()
+
+  // To check is key has multiple value
   const originalList: MetadataItemInBatchEdit[] = useMemo(() => {
     const idNameValue: Record<string, { value: string | number | null, isMultipleValue: boolean }> = {}
-    // TODO: mock backend data struct
-    // const metaDataList: MetadataItemWithValue[][] = list.map((item, i) => {
-    //   if (item.doc_metadata)
-    //     return item.doc_metadata
 
-    //   return testMetadataList[i] || []
-    // })
-    const metaDataList = testMetadataList
     const res: MetadataItemInBatchEdit[] = []
     metaDataList.forEach((metaData) => {
       metaData.forEach((item) => {
-        // if (item.value === 'ccc') {
-        //   debugger
-        // }
         if (idNameValue[item.id]?.isMultipleValue)
           return
         const itemInRes = res.find(i => i.id === item.id)
@@ -74,9 +63,10 @@ const useBatchEditDocumentMetadata = ({
       })
     })
     return res
-  }, [])
+  }, [metaDataList])
 
   const formateToBackendList = (editedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
+    // TODO: add list should be not in updateList; and updated not refresh cash
     const updatedList = editedList.filter((editedItem) => {
       const originalItem = originalList.find(i => i.id === editedItem.id)
       if (!originalItem) // added item
@@ -94,10 +84,10 @@ const useBatchEditDocumentMetadata = ({
 
     const res: MetadataBatchEditToServer = list.map((item, i) => {
       // the new metadata will override the old one
-      const oldMetadataList = item.doc_metadata || testMetadataList[i] // TODO: used mock data
+      const oldMetadataList = item.doc_metadata || metaDataList[i]
       let newMetadataList: MetadataItemWithValue[] = oldMetadataList
         .filter((item) => {
-          return !removedList.find(removedItem => removedItem.id === item.id)
+          return item.id !== 'built-in' && !removedList.find(removedItem => removedItem.id === item.id)
         })
 
         .map(item => ({
@@ -129,9 +119,14 @@ const useBatchEditDocumentMetadata = ({
     return res
   }
 
+  const { mutate } = useBatchUpdateDocMetadata()
+
   const handleSave = (editedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
     const backendList = formateToBackendList(editedList, isApplyToAllSelectDocument)
-    console.log(backendList)
+    mutate({
+      dataset_id: datasetId,
+      metadata_list: backendList,
+    })
   }
 
   return {