dify
This commit is contained in:
@@ -0,0 +1,248 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { getIcon } from '../utils/get-icon'
|
||||
import cn from '@/utils/classnames'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Field from './field'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
|
||||
import { useBoolean, useHover } from 'ahooks'
|
||||
import Confirm from '@/app/components/base/confirm'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.datasetMetadata'
|
||||
|
||||
type Props = {
|
||||
userMetadata: MetadataItemWithValueLength[]
|
||||
builtInMetadata: BuiltInMetadataItem[]
|
||||
isBuiltInEnabled: boolean
|
||||
onIsBuiltInEnabledChange: (value: boolean) => void
|
||||
onClose: () => void
|
||||
onAdd: (payload: BuiltInMetadataItem) => void
|
||||
onRename: (payload: MetadataItemWithValueLength) => void
|
||||
onRemove: (metaDataId: string) => void
|
||||
}
|
||||
|
||||
type ItemProps = {
|
||||
readonly?: boolean
|
||||
disabled?: boolean
|
||||
payload: MetadataItemWithValueLength
|
||||
onRename?: () => void
|
||||
onDelete?: () => void
|
||||
}
|
||||
const Item: FC<ItemProps> = ({
|
||||
readonly,
|
||||
disabled,
|
||||
payload,
|
||||
onRename,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const Icon = getIcon(payload.type)
|
||||
|
||||
const handleRename = useCallback(() => {
|
||||
onRename?.()
|
||||
}, [onRename])
|
||||
|
||||
const deleteBtnRef = useRef<HTMLDivElement>(null)
|
||||
const isDeleteHovering = useHover(deleteBtnRef)
|
||||
const [isShowDeleteConfirm, {
|
||||
setTrue: showDeleteConfirm,
|
||||
setFalse: hideDeleteConfirm,
|
||||
}] = useBoolean(false)
|
||||
const handleDelete = useCallback(() => {
|
||||
hideDeleteConfirm()
|
||||
onDelete?.()
|
||||
}, [hideDeleteConfirm, onDelete])
|
||||
|
||||
return (
|
||||
<div
|
||||
key={payload.name}
|
||||
className={cn(
|
||||
!readonly && !disabled && 'group/item cursor-pointer hover:shadow-xs',
|
||||
'rounded-md border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg',
|
||||
isDeleteHovering && 'border border-state-destructive-border bg-state-destructive-hover',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 items-center justify-between px-2',
|
||||
disabled && 'opacity-30', // not include border and bg
|
||||
)}
|
||||
>
|
||||
<div className='flex h-full items-center space-x-1 text-text-tertiary'>
|
||||
<Icon className='size-4 shrink-0' />
|
||||
<div className='system-sm-medium max-w-[250px] truncate text-text-primary'>{payload.name}</div>
|
||||
<div className='system-xs-regular shrink-0'>{payload.type}</div>
|
||||
</div>
|
||||
{(!readonly || disabled) && (
|
||||
<div className='system-xs-regular ml-2 shrink-0 text-text-tertiary group-hover/item:hidden'>
|
||||
{disabled ? t(`${i18nPrefix}.disabled`) : t(`${i18nPrefix}.values`, { num: payload.count || 0 })}
|
||||
</div>
|
||||
)}
|
||||
<div className='ml-2 hidden items-center space-x-1 text-text-tertiary group-hover/item:flex'>
|
||||
<RiEditLine className='size-4 cursor-pointer' onClick={handleRename} />
|
||||
<div ref={deleteBtnRef} className='hover:text-text-destructive'>
|
||||
<RiDeleteBinLine className='size-4 cursor-pointer' onClick={showDeleteConfirm} />
|
||||
</div>
|
||||
</div>
|
||||
{isShowDeleteConfirm && (
|
||||
<Confirm
|
||||
isShow
|
||||
type='warning'
|
||||
title={t('dataset.metadata.datasetMetadata.deleteTitle')}
|
||||
content={t('dataset.metadata.datasetMetadata.deleteContent', { name: payload.name })}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={hideDeleteConfirm}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const DatasetMetadataDrawer: FC<Props> = ({
|
||||
userMetadata,
|
||||
builtInMetadata,
|
||||
isBuiltInEnabled,
|
||||
onIsBuiltInEnabledChange,
|
||||
onClose,
|
||||
onAdd,
|
||||
onRename,
|
||||
onRemove,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isShowRenameModal, setIsShowRenameModal] = useState(false)
|
||||
const [currPayload, setCurrPayload] = useState<MetadataItemWithValueLength | null>(null)
|
||||
const [templeName, setTempleName] = useState('')
|
||||
const handleRename = useCallback((payload: MetadataItemWithValueLength) => {
|
||||
return () => {
|
||||
setCurrPayload(payload)
|
||||
setTempleName(payload.name)
|
||||
setIsShowRenameModal(true)
|
||||
}
|
||||
}, [setCurrPayload, setIsShowRenameModal])
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const handleAdd = useCallback(async (data: MetadataItemWithValueLength) => {
|
||||
await onAdd(data)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
setOpen(false)
|
||||
}, [onAdd, t])
|
||||
|
||||
const handleRenamed = useCallback(async () => {
|
||||
const item = userMetadata.find(p => p.id === currPayload?.id)
|
||||
if (item) {
|
||||
await onRename({
|
||||
...item,
|
||||
name: templeName,
|
||||
})
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}
|
||||
setIsShowRenameModal(false)
|
||||
}, [userMetadata, currPayload?.id, onRename, templeName, t])
|
||||
|
||||
const handleDelete = useCallback((payload: MetadataItemWithValueLength) => {
|
||||
return async () => {
|
||||
await onRemove(payload.id)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}
|
||||
}, [onRemove, t])
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
showClose
|
||||
title={t('dataset.metadata.metadata')}
|
||||
footer={null}
|
||||
panelClassName='px-4 block !max-w-[420px] my-2 rounded-l-2xl'
|
||||
>
|
||||
<div className='h-full overflow-y-auto'>
|
||||
<div className='system-sm-regular text-text-tertiary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
<CreateModal
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
trigger={<Button variant='primary' className='mt-3'>
|
||||
<RiAddLine className='mr-1' />
|
||||
{t(`${i18nPrefix}.addMetaData`)}
|
||||
</Button>} hasBack onSave={handleAdd}
|
||||
/>
|
||||
|
||||
<div className='mt-3 space-y-1'>
|
||||
{userMetadata.map(payload => (
|
||||
<Item
|
||||
key={payload.id}
|
||||
payload={payload}
|
||||
onRename={handleRename(payload)}
|
||||
onDelete={handleDelete(payload)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='mt-3 flex h-6 items-center'>
|
||||
<Switch
|
||||
defaultValue={isBuiltInEnabled}
|
||||
onChange={onIsBuiltInEnabledChange}
|
||||
/>
|
||||
<div className='system-sm-semibold ml-2 mr-0.5 text-text-secondary'>{t(`${i18nPrefix}.builtIn`)}</div>
|
||||
<Tooltip popupContent={<div className='max-w-[100px]'>{t(`${i18nPrefix}.builtInDescription`)}</div>} />
|
||||
</div>
|
||||
|
||||
<div className='mt-1 space-y-1'>
|
||||
{builtInMetadata.map(payload => (
|
||||
<Item
|
||||
key={payload.name}
|
||||
readonly
|
||||
disabled={!isBuiltInEnabled}
|
||||
payload={payload as MetadataItemWithValueLength}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isShowRenameModal && (
|
||||
<Modal isShow title={t(`${i18nPrefix}.rename`)} onClose={() => setIsShowRenameModal(false)}>
|
||||
<Field label={t(`${i18nPrefix}.name`)} className='mt-4'>
|
||||
<Input
|
||||
value={templeName}
|
||||
onChange={e => setTempleName(e.target.value)}
|
||||
placeholder={t(`${i18nPrefix}.namePlaceholder`)}
|
||||
/>
|
||||
</Field>
|
||||
<div className='mt-4 flex justify-end'>
|
||||
<Button
|
||||
className='mr-2'
|
||||
onClick={() => {
|
||||
setIsShowRenameModal(false)
|
||||
setTempleName(currPayload!.name)
|
||||
}}>{t('common.operation.cancel')}</Button>
|
||||
<Button
|
||||
onClick={handleRenamed}
|
||||
variant='primary'
|
||||
disabled={!templeName}
|
||||
>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
export default React.memo(DatasetMetadataDrawer)
|
||||
Reference in New Issue
Block a user