From 11abe0ec31e631de2704ad2a976d180d198bac2b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 27 Feb 2025 18:01:53 +0800
Subject: [PATCH] feat: metadata edit in document

---
 .../datasets/documents/detail/index.tsx       |  9 ++++---
 .../metadata/hooks/use-metadata-document.ts   | 18 +++++++++++++
 .../select-metadata-modal.tsx                 |  2 +-
 .../metadata/metadata-document/index.tsx      | 25 +++++++++++++------
 .../metadata/metadata-document/info-group.tsx |  4 +--
 web/service/knowledge/use-metadata.ts         |  9 +++++++
 6 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 web/app/components/datasets/metadata/hooks/use-metadata-document.ts

diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 2b65c195fb..8f4b55a65c 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -9,7 +9,7 @@ import { OperationAction, StatusItem } from '../list'
 import DocumentPicker from '../../common/document-picker'
 import Completed from './completed'
 import Embedding from './embedding'
-import Metadata from './metadata'
+import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import SegmentAdd, { ProcessStatus } from './segment-add'
 import BatchModal from './batch-modal'
 import style from './style.module.css'
@@ -276,9 +276,10 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
           }
           <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassname='!justify-start' footer={null}>
             <Metadata
-              docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
-              loading={isMetadataLoading}
-              onUpdate={metadataMutate}
+              className='mr-2 mt-3'
+            // docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
+            // loading={isMetadataLoading}
+            // onUpdate={metadataMutate}
             />
           </FloatRightContainer>
         </div>
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
new file mode 100644
index 0000000000..358b4381cc
--- /dev/null
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
@@ -0,0 +1,18 @@
+import { useState } from 'react'
+import type { MetadataItemWithValue } from '../types'
+import { DataType } from '../types'
+
+const testDocMetadataList: 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' },
+]
+
+const useMetadataDocument = () => {
+  const [list, setList] = useState<MetadataItemWithValue[]>(testDocMetadataList)
+  const [tempList, setTempList] = useState<MetadataItemWithValue[]>(list)
+  const builtInEnabled = true
+}
+
+export default useMetadataDocument
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
index 90e832ab13..a296b91bf6 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
@@ -12,7 +12,7 @@ import { DataType } from '../types'
 type Props = {
   popupPlacement?: Placement
   popupOffset?: { mainAxis: number, crossAxis: number }
-  onSave: (data: any) => void
+  onSave: (data: MetadataItem) => void
   trigger: React.ReactNode
 } & CreateContentProps
 
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 5aa101e83c..724bbe30fc 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -8,12 +8,18 @@ import Button from '@/app/components/base/button'
 import { RiEditLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'dataset.metadata.documentMetadata'
 
-const MetadataDocument: FC = () => {
+type Props = {
+  className?: string
+}
+const MetadataDocument: FC<Props> = ({
+  className,
+}) => {
   const { t } = useTranslation()
-  const [isEdit, setIsEdit] = useState(true)
+  const [isEdit, setIsEdit] = useState(false)
 
   const [list, setList] = useState<MetadataItemWithValue[]>([
     {
@@ -49,9 +55,10 @@ const MetadataDocument: FC = () => {
 
   const documentInfoList = builtList
   const technicalParams = builtList
+
   return (
-    <div className='w-[388px] space-y-4'>
-      {!hasData ? (
+    <div className={cn('w-[388px] space-y-4', className)}>
+      {(hasData || isEdit) ? (
         <div className='pl-2'>
           <InfoGroup
             title={t('dataset.metadata.metadata')}
@@ -86,13 +93,15 @@ const MetadataDocument: FC = () => {
             contentClassName='mt-5'
             onChange={(item) => {
               const newList = tempList.map(i => (i.name === item.name ? item : i))
-              setList(newList)
+              setTempList(newList)
             }}
             onDelete={(item) => {
               const newList = tempList.filter(i => i.name !== item.name)
-              setList(newList)
+              setTempList(newList)
             }}
-            onAdd={() => {
+            onAdd={(payload) => {
+              const newList = [...tempList, payload]
+              setTempList(newList)
             }}
           />
           {builtInEnabled && (
@@ -107,7 +116,7 @@ const MetadataDocument: FC = () => {
           )}
         </div>
       ) : (
-        <NoData onStart={() => { }} />
+        <NoData onStart={() => setIsEdit(true)} />
       )}
 
       <InfoGroup
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 442557c4ec..2d04eb255e 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -65,7 +65,7 @@ const InfoGroup: FC<Props> = ({
               trigger={
                 <AddMetadataButton />
               }
-              onSave={() => { }}
+              onSave={data => onAdd?.(data)}
             />
             <Divider className='my-3 ' bgStyle='gradient' />
           </div>
@@ -81,7 +81,7 @@ const InfoGroup: FC<Props> = ({
                   onChange={value => onChange?.({ ...item, value })}
                 />
                 <div className='shrink-0 p-1 rounded-md text-text-tertiary  hover:text-text-destructive hover:bg-state-destructive-hover cursor-pointer'>
-                  <RiDeleteBinLine className='size-4' />
+                  <RiDeleteBinLine className='size-4' onClick={() => onDelete?.(item)} />
                 </div>
               </div>
             ) : (<div className='py-1 system-xs-regular text-text-secondary'>{item.value}</div>)}
diff --git a/web/service/knowledge/use-metadata.ts b/web/service/knowledge/use-metadata.ts
index 0573953f0f..1ec9661ad1 100644
--- a/web/service/knowledge/use-metadata.ts
+++ b/web/service/knowledge/use-metadata.ts
@@ -100,6 +100,15 @@ export const useBuiltInMetaData = () => {
   })
 }
 
+export const useBatchUpdateDocMetadata = (datasetId: string) => {
+  return useMutation({
+    mutationFn: (enabled: boolean) => {
+      console.log(datasetId, enabled)
+      return Promise.resolve(true)
+    },
+  })
+}
+
 export const useUpdateBuiltInStatus = (datasetId: string) => {
   return useMutation({
     mutationFn: (enabled: boolean) => {