feat: new meta data

web/app/components/datasets/metadata/edit-metadat-batch/add-row.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { MetadataItemWithEdit } from '../types'
+import cn from '@/utils/classnames'
+import Label from './label'
+import InputCombined from './input-combined'
+import { RiIndeterminateCircleLine } from '@remixicon/react'
+
+type Props = {
+  className?: string
+  payload: MetadataItemWithEdit
+  onChange: (value: any) => void
+  onRemove: () => void
+}
+
+const AddRow: FC<Props> = ({
+  className,
+  payload,
+  onChange,
+  onRemove,
+}) => {
+  return (
+    <div className={cn('flex h-6 items-center space-x-0.5', className)}>
+      <Label text={payload.name} />
+      <InputCombined
+        type={payload.type}
+        value={payload.value}
+        onChange={onChange}
+      />
+      <div
+        className={
+          cn(
+            'p-1 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer',
+          )
+        }
+        onClick={onRemove}
+      >
+        <RiIndeterminateCircleLine className='size-4' />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(AddRow)

web/app/components/datasets/metadata/edit-metadat-batch/edit-row.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { type MetadataItemWithEdit, UpdateType } from '../types'
-import Input from '../../create/website/base/input'
 import Label from './label'
 import { RiDeleteBinLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
@@ -16,23 +15,6 @@ type Props = {
   onRemove: (id: string) => void
 }
 
-const labelClassName = ''
-
-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,

web/app/components/datasets/metadata/edit-metadat-batch/input-combined.tsx

@@ -23,14 +23,13 @@ const InputCombined: FC<Props> = ({
 
   if (type === DataType.number) {
     return (
-      <div className='grow'>
+      <div className='grow text-[0]'>
         <InputNumber
-          wrapClassName='items-center'
           className={cn(className, 'rounded-l-md')}
           value={value}
           onChange={onChange}
           size='sm'
-          controlWrapClassName='h-6 overflow-hidden'
+          controlWrapClassName='overflow-hidden'
           controlClassName='pt-0 pb-0'
         />
       </div>

web/app/components/datasets/metadata/edit-metadat-batch/label.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import cn from '@/utils/classnames'
 
 type Props = {
-  isDeleted: boolean,
+  isDeleted?: boolean,
   className?: string,
   text: string
 }

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

@@ -2,12 +2,16 @@
 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-row'
+import { DataType, type MetadataItemWithEdit } from '../types'
+import EditMetadataBatchItem from './edit-row'
+import AddedMetadataItem from './add-row'
 import Button from '../../../base/button'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '../../../base/checkbox'
 import Tooltip from '../../../base/tooltip'
+import SelectMetadataModal from '../select-metadata-modal'
+import { RiAddLine } from '@remixicon/react'
+import Divider from '@/app/components/base/divider'
 
 type Props = {
   documentNum: number
@@ -33,14 +37,24 @@ const EditMetadataBatchModal: FC<Props> = ({
     setTempleList(newTempleList)
   }, [templeList])
 
-  const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
+  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 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)
+  const handleAddedItemRemove = useCallback((removeIndex: number) => {
+    return () => {
+      const newAddedList = addedList.filter((i, index) => index !== removeIndex)
+      setAddedList(newAddedList)
+    }
   }, [addedList])
 
   const [isApplyToAllSelectDocument, setIsApplyToAllSelectDocument] = useState(false)
@@ -68,16 +82,32 @@ const EditMetadataBatchModal: FC<Props> = ({
           />
         ))}
       </div>
-
-      <div>
-        {addedList.map(item => (
-          <AddedMetadataItem
-            key={item.id}
-            payload={item}
-            onChange={handleAddedListChange}
-            onRemove={handleAddedItemRemove}
+      <div className='mt-4 pl-[18px]'>
+        <div className='flex items-center'>
+          <div className='mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary'>New metadata</div>
+          <Divider bgStyle='gradient' />
+        </div>
+        <div className='mt-2 space-y-2'>
+          {addedList.map((item, i) => (
+            <AddedMetadataItem
+              key={i}
+              payload={item}
+              onChange={handleAddedListChange}
+              onRemove={handleAddedItemRemove(i)}
+            />
+          ))}
+        </div>
+        <div className='mt-3'>
+          <SelectMetadataModal
+            trigger={
+              <Button className='w-full flex items-center' size='small' variant='tertiary'>
+                <RiAddLine className='mr-1 size-3.5' />
+                <div>Add metadata</div>
+              </Button>
+            }
+            onSave={data => setAddedList([...addedList, data])}
           />
-        ))}
+        </div>
       </div>
 
       <div className='mt-4 flex items-center justify-between'>

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

@@ -49,6 +49,7 @@ const SelectMetadataModal: FC<Props> = ({
     >
       <PortalToFollowElemTrigger
         onClick={() => setOpen(!open)}
+        className='block'
       >
         {trigger}
       </PortalToFollowElemTrigger>

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

@@ -18,7 +18,7 @@ export enum UpdateType {
   delete = 'delete',
 }
 export type MetadataItemWithEdit = MetadataItem & {
-  value: string
+  value: string | number
   isMultipleValue?: boolean
   isUpdated?: boolean
   updateType?: UpdateType