refactor: update dataset model and improve batch action component

pull/21398/head
twwu 11 months ago
parent 0aeeee49f7
commit eff8108f1c

@ -3,8 +3,9 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks' import { useBoolean } from 'ahooks'
import Divider from '@/app/components/base/divider' import Divider from '@/app/components/base/divider'
import classNames from '@/utils/classnames' import cn from '@/utils/classnames'
import Confirm from '@/app/components/base/confirm' import Confirm from '@/app/components/base/confirm'
import Button from '@/app/components/base/button'
const i18nPrefix = 'dataset.batchAction' const i18nPrefix = 'dataset.batchAction'
type IBatchActionProps = { type IBatchActionProps = {
@ -43,55 +44,70 @@ const BatchAction: FC<IBatchActionProps> = ({
hideDeleteConfirm() hideDeleteConfirm()
} }
return ( return (
<div className={classNames('w-full flex justify-center gap-x-2', className)}> <div className={cn('flex w-full justify-center gap-x-2', className)}>
<div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'> <div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
<div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'> <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
<span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'> <span className='system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface'>
{selectedIds.length} {selectedIds.length}
</span> </span>
<span className='text-[13px] font-semibold leading-[16px] text-text-accent'>{t(`${i18nPrefix}.selected`)}</span> <span className='system-sm-semibold text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
</div> </div>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' /> <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<div className='flex items-center gap-x-0.5 px-3 py-2'> <Button
<RiCheckboxCircleLine className='h-4 w-4 text-components-button-ghost-text' /> variant='ghost'
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchEnable}> className='gap-x-0.5 px-3'
{t(`${i18nPrefix}.enable`)} onClick={onBatchEnable}
</button> >
</div> <RiCheckboxCircleLine className='size-4' />
<div className='flex items-center gap-x-0.5 px-3 py-2'> <span className='px-0.5'>{t(`${i18nPrefix}.enable`)}</span>
<RiCloseCircleLine className='h-4 w-4 text-components-button-ghost-text' /> </Button>
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchDisable}> <Button
{t(`${i18nPrefix}.disable`)} variant='ghost'
</button> className='gap-x-0.5 px-3'
</div> onClick={onBatchDisable}
>
<RiCloseCircleLine className='size-4' />
<span className='px-0.5'>{t(`${i18nPrefix}.disable`)}</span>
</Button>
{onEditMetadata && ( {onEditMetadata && (
<div className='flex items-center gap-x-0.5 px-3 py-2'> <Button
<RiDraftLine className='h-4 w-4 text-components-button-ghost-text' /> variant='ghost'
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onEditMetadata}> className='gap-x-0.5 px-3'
{t('dataset.metadata.metadata')} onClick={onEditMetadata}
</button> >
</div> <RiDraftLine className='size-4' />
<span className='px-0.5'>{t('dataset.metadata.metadata')}</span>
</Button>
)} )}
{onArchive && ( {onArchive && (
<div className='flex items-center gap-x-0.5 px-3 py-2'> <Button
<RiArchive2Line className='h-4 w-4 text-components-button-ghost-text' /> variant='ghost'
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onArchive}> className='gap-x-0.5 px-3'
{t(`${i18nPrefix}.archive`)} onClick={onArchive}
</button> >
</div> <RiArchive2Line className='size-4' />
<span className='px-0.5'>{t(`${i18nPrefix}.archive`)}</span>
</Button>
)} )}
<div className='flex items-center gap-x-0.5 px-3 py-2'> <Button
<RiDeleteBinLine className='h-4 w-4 text-components-button-destructive-ghost-text' /> variant='ghost'
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text' onClick={showDeleteConfirm}> destructive
{t(`${i18nPrefix}.delete`)} className='gap-x-0.5 px-3'
</button> onClick={showDeleteConfirm}
</div> >
<RiDeleteBinLine className='size-4' />
<span className='px-0.5'>{t(`${i18nPrefix}.delete`)}</span>
</Button>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' /> <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<button type='button' className='px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onCancel}> <Button
{t(`${i18nPrefix}.cancel`)} variant='ghost'
</button> className='px-3'
onClick={onCancel}
>
<span className='px-0.5'>{t(`${i18nPrefix}.cancel`)}</span>
</Button>
</div> </div>
{ {
isShowDeleteConfirm && ( isShowDeleteConfirm && (

@ -62,19 +62,19 @@ const DatasetCard = ({
} }
const { formatIndexingTechniqueAndMethod } = useKnowledge() const { formatIndexingTechniqueAndMethod } = useKnowledge()
const documentCount = useMemo(() => { const documentCount = useMemo(() => {
const availableDocCount = dataset.available_document_count || dataset.document_count const availableDocCount = dataset.total_available_documents ?? 0
if (availableDocCount === dataset.document_count) if (availableDocCount === dataset.document_count)
return `${dataset.document_count}` return `${dataset.document_count}`
if (availableDocCount < dataset.document_count) if (availableDocCount < dataset.document_count)
return `${availableDocCount} / ${dataset.document_count}` return `${availableDocCount} / ${dataset.document_count}`
}, [dataset.document_count, dataset.available_document_count]) }, [dataset.document_count, dataset.total_available_documents])
const documentCountTooltip = useMemo(() => { const documentCountTooltip = useMemo(() => {
const availableDocCount = dataset.available_document_count || dataset.document_count const availableDocCount = dataset.total_available_documents ?? 0
if (availableDocCount === dataset.document_count) if (availableDocCount === dataset.document_count)
return t('dataset.docAllEnabled', { count: availableDocCount }) return t('dataset.docAllEnabled', { count: availableDocCount })
if (availableDocCount < dataset.document_count) if (availableDocCount < dataset.document_count)
return t('dataset.docAllEnabled', { count: dataset.document_count, num: availableDocCount }) return t('dataset.docAllEnabled', { count: dataset.document_count, num: availableDocCount })
}, [t, dataset.document_count, dataset.available_document_count]) }, [t, dataset.document_count, dataset.total_available_documents])
const language = useGetLanguage() const language = useGetLanguage()
const formatTimeFromNow = useCallback((time: number) => { const formatTimeFromNow = useCallback((time: number) => {

@ -56,7 +56,7 @@ export type DataSet = {
doc_form: ChunkingMode doc_form: ChunkingMode
document_count: number document_count: number
total_document_count: number total_document_count: number
available_document_count?: number total_available_documents?: number
word_count: number word_count: number
provider: string provider: string
embedding_model: string embedding_model: string

Loading…
Cancel
Save