From 49dd77e2197d7872bc15cf7b086096ea41b53ed0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 17 Feb 2025 14:30:23 +0800
Subject: [PATCH] feat: edit beacon

---
 web/app/(commonLayout)/datasets/Container.tsx | 12 +++++++----
 .../components/base/input-number/index.tsx    | 11 +++++++---
 .../metadata/edit-metadat-batch/edit-row.tsx  |  5 ++++-
 .../edit-metadat-batch/input-combined.tsx     | 20 ++++++++++++++++++-
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 48457f9477..0b21999ab4 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -32,7 +32,7 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
-import { DataType } from '@/app/components/datasets/metadata/types'
+import { DataType, UpdateType } from '@/app/components/datasets/metadata/types'
 
 const Container = () => {
   const { t } = useTranslation()
@@ -119,9 +119,13 @@ const Container = () => {
               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,
+              id: '2', name: 'name2', type: DataType.number, value: 'ccc', isMultipleValue: true, isUpdated: true,
+            },
+            {
+              id: '2.1', name: 'num v', type: DataType.number, value: 10,
+            },
+            {
+              id: '3', name: 'name3', type: DataType.time, value: '', isUpdated: true, updateType: UpdateType.delete,
             },
           ]}
           onHide={() => { }}
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 316d863b48..a39c601c7c 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -12,10 +12,13 @@ export type InputNumberProps = {
   max?: number
   min?: number
   defaultValue?: number
+  wrapClassName?: string
+  controlWrapClassName?: string
+  controlClassName?: string
 } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, ...rest } = props
+  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, ...rest } = props
 
   const isValidValue = (v: number) => {
     if (max && v > max)
@@ -46,7 +49,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(newValue)
   }
 
-  return <div className='flex'>
+  return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
       type='text'
@@ -68,16 +71,18 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       }}
       unit={unit}
     />
-    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
+    <div className={classNames('flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs', controlWrapClassName)}>
       <button onClick={inc} className={classNames(
         size === 'sm' ? 'pt-1' : 'pt-1.5',
         'px-1.5 hover:bg-components-input-bg-hover',
+        controlClassName,
       )}>
         <RiArrowUpSLine className='size-3' />
       </button>
       <button onClick={dec} className={classNames(
         size === 'sm' ? 'pb-1' : 'pb-1.5',
         'px-1.5 hover:bg-components-input-bg-hover',
+        controlClassName,
       )}>
         <RiArrowDownSLine className='size-3' />
       </button>
diff --git a/web/app/components/datasets/metadata/edit-metadat-batch/edit-row.tsx b/web/app/components/datasets/metadata/edit-metadat-batch/edit-row.tsx
index bd713969d6..9a592fb755 100644
--- a/web/app/components/datasets/metadata/edit-metadat-batch/edit-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadat-batch/edit-row.tsx
@@ -8,6 +8,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import InputHasSetMultipleValue from './input-has-set-multiple-value'
 import InputCombined from './input-combined'
+import EditedBeacon from './edited-beacon'
 
 type Props = {
   payload: MetadataItemWithEdit
@@ -37,9 +38,11 @@ const EditMetadatabatchItem: FC<Props> = ({
   onChange,
   onRemove,
 }) => {
+  const isUpdated = payload.isUpdated
   const isDeleted = payload.updateType === UpdateType.delete
   return (
     <div className='flex h-6 items-center space-x-0.5'>
+      {isUpdated ? <EditedBeacon onReset={() => { }} /> : <div className='shrink-0 size-4' />}
       <Label text={payload.name} isDeleted={isDeleted} />
       {payload.isMultipleValue
         ? <InputHasSetMultipleValue onClear={() => onChange({ ...payload, isMultipleValue: false })} />
@@ -53,7 +56,7 @@ const EditMetadatabatchItem: FC<Props> = ({
         className={
           cn(
             'p-1 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer',
-            isDeleted && 'cursor-default bg-state-destructive-hover  text-text-quaternary ')
+            isDeleted && 'cursor-default bg-state-destructive-hover  text-text-destructive')
         }
         onClick={() => onRemove(payload.id)}
       >
diff --git a/web/app/components/datasets/metadata/edit-metadat-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadat-batch/input-combined.tsx
index abbe4cb079..6342f6a4a1 100644
--- a/web/app/components/datasets/metadata/edit-metadat-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadat-batch/input-combined.tsx
@@ -3,6 +3,8 @@ import type { FC } from 'react'
 import React from 'react'
 import { DataType } from '../types'
 import Input from '@/app/components/base/input'
+import { InputNumber } from '@/app/components/base/input-number'
+import cn from '@/utils/classnames'
 
 type Props = {
   type: DataType
@@ -15,12 +17,28 @@ const InputCombined: FC<Props> = ({
   value,
   onChange,
 }) => {
+  const className = 'grow p-0.5 h-6  text-xs'
   if (type === DataType.time)
     return <div className='grow text-xs'>Datepicker placeholder</div>
 
+  if (type === DataType.number) {
+    return (
+      <div className='grow'>
+        <InputNumber
+          wrapClassName='items-center'
+          className={cn(className, 'rounded-l-md')}
+          value={value}
+          onChange={onChange}
+          size='sm'
+          controlWrapClassName='h-6 overflow-hidden'
+          controlClassName='pt-0 pb-0'
+        />
+      </div>
+    )
+  }
   return (
     <Input
-      className='p-0.5 h-6 rounded-md text-xs'
+      className={cn(className, 'rounded-md')}
       value={value}
       onChange={e => onChange(e.target.value)}
     >