feat: edit modal struct

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

@@ -22,8 +22,8 @@ import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/d
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 import CreateModal from '@/app/components/datasets/metadata/create-metadata-modal'
 import SelectMetadataModal from '@/app/components/datasets/metadata/select-metadata-modal'
-import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
-
+// import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
+import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch-modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -100,7 +100,7 @@ const Container = () => {
         <Button className='flex w-[200px]' size="medium" onClick={() => setShowExternalApiPanel(true)}>
           Metadata
         </Button>
-        <DatasetMetadataDrawer
+        {/* <DatasetMetadataDrawer
           userMetadata={userMetadata}
           onChange={setUserMetadata}
           builtInMetadata={[
@@ -111,6 +111,20 @@ const Container = () => {
           isBuiltInEnabled={isBuiltInEnabled}
           onIsBuiltInEnabledChange={setIsBuiltInEnabled}
           onClose={() => { }}
+        /> */}
+        <EditMetadataBatchModal
+          list={[
+            {
+              id: '1', name: 'name1', type: DataType.string, value: 'aaa',
+            }, {
+              id: '2', name: 'name2', type: DataType.number, value: 'ccc', isMultipleValue: true,
+            }, {
+              id: '3', name: 'name3', type: DataType.time, value: '', isMultipleValue: false,
+            },
+          ]}
+          onHide={() => { }}
+          onChange={(list, newList, isApplyToAllSelectDocument) => { console.log(list, newList, isApplyToAllSelectDocument) }}
+
         />
       </div>
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>

web/app/components/datasets/metadata/edit-metadata-batch-item.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { MetadataItemWithEdit } from './types'
+import Input from '../create/website/base/input'
+
+type Props = {
+  payload: MetadataItemWithEdit
+  onChange: (payload: MetadataItemWithEdit) => void
+  onRemove: (id: string) => void
+}
+
+const labelClassName = 'w-[136px] system-xs-medium text-text-tertiary'
+
+export const AddedMetadataItem: FC<Props> = ({
+  payload,
+  onChange,
+}) => {
+  return (
+    <div className='flex'>
+      <div className={labelClassName}>{payload.name}</div>
+      <Input
+        value={payload.value}
+        onChange={v => onChange({ ...payload, value: v as string })
+        } />
+    </div>
+  )
+}
+
+const EditMetadatabatchItem: FC<Props> = ({
+  payload,
+  onChange,
+  onRemove,
+}) => {
+  return (
+    <div className='flex'>
+      <div className={labelClassName}>{payload.name}</div>
+      <Input
+        value={payload.value}
+        onChange={v => onChange({ ...payload, value: v as string })
+        } />
+    </div>
+  )
+}
+export default React.memo(EditMetadatabatchItem)

web/app/components/datasets/metadata/edit-metadata-batch-modal.tsx

@@ -0,0 +1,100 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import Modal from '../../base/modal'
+import type { MetadataItemWithEdit } from './types'
+import EditMetadataBatchItem, { AddedMetadataItem } from './edit-metadata-batch-item'
+import Button from '../../base/button'
+import { useTranslation } from 'react-i18next'
+import Checkbox from '../../base/checkbox'
+import Tooltip from '../../base/tooltip'
+
+type Props = {
+  list: MetadataItemWithEdit[]
+  onChange: (list: MetadataItemWithEdit[], addedList: MetadataItemWithEdit[], isApplyToAllSelectDocument: boolean) => void
+  onHide: () => void
+}
+
+const EditMetadataBatchModal: FC<Props> = ({
+  list,
+  onChange,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
+  const handleTemplesChange = useCallback((payload: MetadataItemWithEdit) => {
+    const newTempleList = templeList.map(i => i.id === payload.id ? payload : i)
+    setTempleList(newTempleList)
+  }, [templeList])
+  const handleTempleItemRemove = useCallback((id: string) => {
+    const newTempleList = templeList.filter(i => i.id !== id)
+    setTempleList(newTempleList)
+  }, [templeList])
+
+  const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
+  const handleAddedListChange = useCallback((payload: MetadataItemWithEdit) => {
+    const newAddedList = addedList.map(i => i.id === payload.id ? payload : i)
+    setAddedList(newAddedList)
+  }, [addedList])
+  const handleAddedItemRemove = useCallback((id: string) => {
+    const newAddedList = addedList.filter(i => i.id !== id)
+    setAddedList(newAddedList)
+  }, [addedList])
+
+  const [isApplyToAllSelectDocument, setIsApplyToAllSelectDocument] = useState(false)
+
+  const handleSave = useCallback(() => {
+    onChange(templeList, addedList, isApplyToAllSelectDocument)
+  }, [templeList, addedList, isApplyToAllSelectDocument, onChange])
+  return (
+    <Modal
+      title='Edit Metadata'
+      isShow
+      onClose={onHide}
+      wrapperClassName='w-[640px]'
+    >
+      <div>Editing 5 documents</div>
+      {/* TODO handle list scroll. There is two list. */}
+      <div className=''>
+        {templeList.map(item => (
+          <EditMetadataBatchItem
+            key={item.id}
+            payload={item}
+            onChange={handleTemplesChange}
+            onRemove={handleTempleItemRemove}
+          />
+        ))}
+      </div>
+
+      <div>
+        {addedList.map(item => (
+          <AddedMetadataItem
+            key={item.id}
+            payload={item}
+            onChange={handleAddedListChange}
+            onRemove={handleAddedItemRemove}
+          />
+        ))}
+      </div>
+
+      <div className='mt-4 flex items-center justify-between'>
+        <div className='flex items-center'>
+          <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
+          <div className='ml-2 mr-1'> Apply to all selected documents</div>
+          <Tooltip popupContent={
+            <div className='max-w-[240px]'>Automatically create all the above edited and new metadata for all selected documents, otherwise editing metadata will only apply to documents with it.</div>
+          } />
+        </div>
+        <div className='flex items-center space-x-2'>
+          <Button
+            onClick={onHide}>{t('common.operation.cancel')}</Button>
+          <Button
+            onClick={handleSave}
+            variant='primary'
+          >{t('common.operation.save')}</Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(EditMetadataBatchModal)

web/app/components/datasets/metadata/types.ts

@@ -13,3 +13,10 @@ export type MetadataItem = {
 export type MetadataItemWithValueLength = MetadataItem & {
   valueLength: number
 }
+
+export type MetadataItemWithEdit = MetadataItem & {
+  value: string
+  isMultipleValue?: boolean
+  isRemoved?: boolean
+  isUpdated?: boolean
+}