sort on display status (#24252)
Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
@@ -24,6 +24,7 @@ import IndexFailed from '@/app/components/datasets/common/document-status-with-a
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useDocumentList, useInvalidDocumentDetailKey, useInvalidDocumentList } from '@/service/knowledge/use-document'
|
||||
import { useIndexStatus } from './list'
|
||||
import { useInvalid } from '@/service/use-base'
|
||||
import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'
|
||||
import useDocumentListQueryState from './hooks/use-document-list-query-state'
|
||||
@@ -32,6 +33,9 @@ import DatasetMetadataDrawer from '../metadata/metadata-dataset/dataset-metadata
|
||||
import StatusWithAction from '../common/document-status-with-action/status-with-action'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import { useFetchDefaultProcessRule } from '@/service/knowledge/use-create-dataset'
|
||||
import { SimpleSelect } from '../../base/select'
|
||||
import StatusItem from './detail/completed/status-item'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
|
||||
const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
|
||||
return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
|
||||
@@ -91,6 +95,8 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
|
||||
const isFreePlan = plan.type === 'sandbox'
|
||||
const [inputValue, setInputValue] = useState<string>('') // the input value
|
||||
const [searchValue, setSearchValue] = useState<string>('')
|
||||
const [statusFilter, setStatusFilter] = useState<Item>({ value: 'all', name: 'All Status' })
|
||||
const DOC_INDEX_STATUS_MAP = useIndexStatus()
|
||||
|
||||
// Use the new hook for URL state management
|
||||
const { query, updateQuery } = useDocumentListQueryState()
|
||||
@@ -107,6 +113,18 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
|
||||
const embeddingAvailable = !!dataset?.embedding_available
|
||||
const debouncedSearchValue = useDebounce(searchValue, { wait: 500 })
|
||||
|
||||
const statusFilterItems: Item[] = useMemo(() => [
|
||||
{ value: 'all', name: 'All Status' },
|
||||
{ value: 'queuing', name: DOC_INDEX_STATUS_MAP.queuing.text },
|
||||
{ value: 'indexing', name: DOC_INDEX_STATUS_MAP.indexing.text },
|
||||
{ value: 'paused', name: DOC_INDEX_STATUS_MAP.paused.text },
|
||||
{ value: 'error', name: DOC_INDEX_STATUS_MAP.error.text },
|
||||
{ value: 'available', name: DOC_INDEX_STATUS_MAP.available.text },
|
||||
{ value: 'enabled', name: DOC_INDEX_STATUS_MAP.enabled.text },
|
||||
{ value: 'disabled', name: DOC_INDEX_STATUS_MAP.disabled.text },
|
||||
{ value: 'archived', name: DOC_INDEX_STATUS_MAP.archived.text },
|
||||
], [DOC_INDEX_STATUS_MAP, t])
|
||||
|
||||
// Initialize search value from URL on mount
|
||||
useEffect(() => {
|
||||
if (query.keyword) {
|
||||
@@ -322,14 +340,28 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
|
||||
</div>
|
||||
<div className='flex flex-1 flex-col px-6 py-4'>
|
||||
<div className='flex flex-wrap items-center justify-between'>
|
||||
<Input
|
||||
showLeftIcon
|
||||
showClearIcon
|
||||
wrapperClassName='!w-[200px]'
|
||||
value={inputValue}
|
||||
onChange={e => handleInputChange(e.target.value)}
|
||||
onClear={() => handleInputChange('')}
|
||||
/>
|
||||
<div className='flex items-center gap-2'>
|
||||
<SimpleSelect
|
||||
placeholder={t('datasetDocuments.list.table.header.status')}
|
||||
onSelect={(item) => {
|
||||
setStatusFilter(item)
|
||||
}}
|
||||
items={statusFilterItems}
|
||||
defaultValue={statusFilter.value}
|
||||
wrapperClassName='w-[160px] h-8'
|
||||
renderOption={({ item, selected }) => <StatusItem item={item} selected={selected} />}
|
||||
optionClassName='p-0'
|
||||
notClearable
|
||||
/>
|
||||
<Input
|
||||
showLeftIcon
|
||||
showClearIcon
|
||||
wrapperClassName='!w-[200px]'
|
||||
value={inputValue}
|
||||
onChange={e => handleInputChange(e.target.value)}
|
||||
onClear={() => handleInputChange('')}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex !h-8 items-center justify-center gap-2'>
|
||||
{!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
|
||||
<IndexFailed datasetId={datasetId} />
|
||||
@@ -372,6 +404,8 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
|
||||
onUpdate={handleUpdate}
|
||||
selectedIds={selectedIds}
|
||||
onSelectedIdChange={setSelectedIds}
|
||||
statusFilter={statusFilter}
|
||||
onStatusFilterChange={setStatusFilter}
|
||||
pagination={{
|
||||
total,
|
||||
limit,
|
||||
|
@@ -30,6 +30,7 @@ import Popover from '@/app/components/base/popover'
|
||||
import Confirm from '@/app/components/base/confirm'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Toast, { ToastContext } from '@/app/components/base/toast'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
import type { ColorMap, IndicatorProps } from '@/app/components/header/indicator'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import { asyncRunSafe } from '@/utils'
|
||||
@@ -426,6 +427,8 @@ type IDocumentListProps = {
|
||||
pagination: PaginationProps
|
||||
onUpdate: () => void
|
||||
onManageMetadata: () => void
|
||||
statusFilter: Item
|
||||
onStatusFilterChange: (filter: string) => void
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -440,6 +443,7 @@ const DocumentList: FC<IDocumentListProps> = ({
|
||||
pagination,
|
||||
onUpdate,
|
||||
onManageMetadata,
|
||||
statusFilter,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { formatTime } = useTimestamp()
|
||||
@@ -451,6 +455,7 @@ const DocumentList: FC<IDocumentListProps> = ({
|
||||
const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
|
||||
const [sortField, setSortField] = useState<'name' | 'word_count' | 'hit_count' | 'created_at' | null>('created_at')
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
|
||||
|
||||
const {
|
||||
isShowEditModal,
|
||||
showEditModal,
|
||||
@@ -465,12 +470,22 @@ const DocumentList: FC<IDocumentListProps> = ({
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
let filteredDocs = documents
|
||||
|
||||
if (statusFilter.value !== 'all') {
|
||||
filteredDocs = filteredDocs.filter(doc =>
|
||||
typeof doc.display_status === 'string'
|
||||
&& typeof statusFilter.value === 'string'
|
||||
&& doc.display_status.toLowerCase() === statusFilter.value.toLowerCase(),
|
||||
)
|
||||
}
|
||||
|
||||
if (!sortField) {
|
||||
setLocalDocs(documents)
|
||||
setLocalDocs(filteredDocs)
|
||||
return
|
||||
}
|
||||
|
||||
const sortedDocs = [...documents].sort((a, b) => {
|
||||
const sortedDocs = [...filteredDocs].sort((a, b) => {
|
||||
let aValue: any
|
||||
let bValue: any
|
||||
|
||||
@@ -506,7 +521,7 @@ const DocumentList: FC<IDocumentListProps> = ({
|
||||
})
|
||||
|
||||
setLocalDocs(sortedDocs)
|
||||
}, [documents, sortField, sortOrder])
|
||||
}, [documents, sortField, sortOrder, statusFilter])
|
||||
|
||||
const handleSort = (field: 'name' | 'word_count' | 'hit_count' | 'created_at') => {
|
||||
if (sortField === field) {
|
||||
|
Reference in New Issue
Block a user