mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-26 17:16:52 +08:00
### What problem does this PR solve? Feat: Add FilesTable #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
343
web/src/pages/files/files-table.tsx
Normal file
343
web/src/pages/files/files-table.tsx
Normal file
@ -0,0 +1,343 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { ArrowUpDown, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
import * as React from 'react';
|
||||
|
||||
import SvgIcon from '@/components/svg-icon';
|
||||
import { TableEmpty, TableSkeleton } from '@/components/table-skeleton';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { useFetchFileList } from '@/hooks/file-manager-hooks';
|
||||
import { IFile } from '@/interfaces/database/file-manager';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { formatFileSize } from '@/utils/common-util';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import { getExtension } from '@/utils/document-util';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigateToOtherFolder } from './hooks';
|
||||
|
||||
export function FilesTable() {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[],
|
||||
);
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const { t } = useTranslation('translation', {
|
||||
keyPrefix: 'fileManager',
|
||||
});
|
||||
const navigateToOtherFolder = useNavigateToOtherFolder();
|
||||
|
||||
const { pagination, data, loading, setPagination } = useFetchFileList();
|
||||
|
||||
const columns: ColumnDef<IFile>[] = [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
checked={
|
||||
table.getIsAllPageRowsSelected() ||
|
||||
(table.getIsSomePageRowsSelected() && 'indeterminate')
|
||||
}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
{t('name')}
|
||||
<ArrowUpDown />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
meta: { cellClassName: 'max-w-[20vw]' },
|
||||
cell: ({ row }) => {
|
||||
const name: string = row.getValue('name');
|
||||
const type = row.original.type;
|
||||
const id = row.original.id;
|
||||
const isFolder = type === 'folder';
|
||||
|
||||
const handleNameClick = () => {
|
||||
if (isFolder) {
|
||||
navigateToOtherFolder(id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex gap-2">
|
||||
<SvgIcon
|
||||
name={`file-icon/${isFolder ? 'folder' : getExtension(name)}`}
|
||||
width={24}
|
||||
></SvgIcon>
|
||||
<span
|
||||
className={cn('truncate', { ['cursor-pointer']: isFolder })}
|
||||
onClick={handleNameClick}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{name}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'create_time',
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
{t('uploadDate')}
|
||||
<ArrowUpDown />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="lowercase">
|
||||
{formatDate(row.getValue('create_time'))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'size',
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
{t('size')}
|
||||
<ArrowUpDown />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">{formatFileSize(row.getValue('size'))}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'kbs_info',
|
||||
header: t('knowledgeBase'),
|
||||
cell: ({ row }) => (
|
||||
<Button variant="destructive" size={'sm'}>
|
||||
{row.getValue('kbs_info')}
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('action'),
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const payment = row.original;
|
||||
|
||||
return (
|
||||
<section className="flex gap-4 items-center">
|
||||
<Switch id="airplane-mode" />
|
||||
<Button variant="secondary" size={'icon'}>
|
||||
<Pencil />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size={'icon'}>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigator.clipboard.writeText(payment.id)}
|
||||
>
|
||||
Copy payment ID
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>View customer</DropdownMenuItem>
|
||||
<DropdownMenuItem>View payment details</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</section>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const currentPagination = useMemo(() => {
|
||||
return {
|
||||
pageIndex: (pagination.current || 1) - 1,
|
||||
pageSize: pagination.pageSize || 10,
|
||||
};
|
||||
}, [pagination]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: data?.files || [],
|
||||
columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
// getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: (updaterOrValue: any) => {
|
||||
if (typeof updaterOrValue === 'function') {
|
||||
const nextPagination = updaterOrValue(currentPagination);
|
||||
setPagination({
|
||||
page: nextPagination.pageIndex + 1,
|
||||
pageSize: nextPagination.pageSize,
|
||||
});
|
||||
} else {
|
||||
setPagination({
|
||||
page: updaterOrValue.pageIndex,
|
||||
pageSize: updaterOrValue.pageSize,
|
||||
});
|
||||
}
|
||||
},
|
||||
manualPagination: true, //we're doing manual "server-side" pagination
|
||||
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination: currentPagination,
|
||||
},
|
||||
rowCount: data?.total ?? 0,
|
||||
debugTable: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableSkeleton columnsLength={columns.length}></TableSkeleton>
|
||||
) : table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && 'selected'}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={cell.column.columnDef.meta?.cellClassName}
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableEmpty columnsLength={columns.length}></TableEmpty>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 py-4">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of {data?.total}{' '}
|
||||
row(s) selected.
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
294
web/src/pages/files/hooks.ts
Normal file
294
web/src/pages/files/hooks.ts
Normal file
@ -0,0 +1,294 @@
|
||||
import { useSetModalState, useShowDeleteConfirm } from '@/hooks/common-hooks';
|
||||
import {
|
||||
useConnectToKnowledge,
|
||||
useCreateFolder,
|
||||
useDeleteFile,
|
||||
useFetchParentFolderList,
|
||||
useMoveFile,
|
||||
useRenameFile,
|
||||
useUploadFile,
|
||||
} from '@/hooks/file-manager-hooks';
|
||||
import { IFile } from '@/interfaces/database/file-manager';
|
||||
import { TableRowSelection } from 'antd/es/table/interface';
|
||||
import { UploadFile } from 'antd/lib';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'umi';
|
||||
|
||||
export const useGetFolderId = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const id = searchParams.get('folderId') as string;
|
||||
|
||||
return id ?? '';
|
||||
};
|
||||
|
||||
export const useGetRowSelection = () => {
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
|
||||
const rowSelection: TableRowSelection<IFile> = {
|
||||
selectedRowKeys,
|
||||
getCheckboxProps: (record) => {
|
||||
return { disabled: record.source_type === 'knowledgebase' };
|
||||
},
|
||||
onChange: (newSelectedRowKeys: React.Key[]) => {
|
||||
setSelectedRowKeys(newSelectedRowKeys);
|
||||
},
|
||||
};
|
||||
|
||||
return { rowSelection, setSelectedRowKeys };
|
||||
};
|
||||
|
||||
export const useNavigateToOtherFolder = () => {
|
||||
const navigate = useNavigate();
|
||||
const navigateToOtherFolder = useCallback(
|
||||
(folderId: string) => {
|
||||
navigate(`/file?folderId=${folderId}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
return navigateToOtherFolder;
|
||||
};
|
||||
|
||||
export const useRenameCurrentFile = () => {
|
||||
const [file, setFile] = useState<IFile>({} as IFile);
|
||||
const {
|
||||
visible: fileRenameVisible,
|
||||
hideModal: hideFileRenameModal,
|
||||
showModal: showFileRenameModal,
|
||||
} = useSetModalState();
|
||||
const { renameFile, loading } = useRenameFile();
|
||||
|
||||
const onFileRenameOk = useCallback(
|
||||
async (name: string) => {
|
||||
const ret = await renameFile({
|
||||
fileId: file.id,
|
||||
name,
|
||||
});
|
||||
|
||||
if (ret === 0) {
|
||||
hideFileRenameModal();
|
||||
}
|
||||
},
|
||||
[renameFile, file, hideFileRenameModal],
|
||||
);
|
||||
|
||||
const handleShowFileRenameModal = useCallback(
|
||||
async (record: IFile) => {
|
||||
setFile(record);
|
||||
showFileRenameModal();
|
||||
},
|
||||
[showFileRenameModal],
|
||||
);
|
||||
|
||||
return {
|
||||
fileRenameLoading: loading,
|
||||
initialFileName: file.name,
|
||||
onFileRenameOk,
|
||||
fileRenameVisible,
|
||||
hideFileRenameModal,
|
||||
showFileRenameModal: handleShowFileRenameModal,
|
||||
};
|
||||
};
|
||||
|
||||
export const useSelectBreadcrumbItems = () => {
|
||||
const parentFolderList = useFetchParentFolderList();
|
||||
|
||||
return parentFolderList.length === 1
|
||||
? []
|
||||
: parentFolderList.map((x) => ({
|
||||
title: x.name === '/' ? 'root' : x.name,
|
||||
path: `/file?folderId=${x.id}`,
|
||||
}));
|
||||
};
|
||||
|
||||
export const useHandleCreateFolder = () => {
|
||||
const {
|
||||
visible: folderCreateModalVisible,
|
||||
hideModal: hideFolderCreateModal,
|
||||
showModal: showFolderCreateModal,
|
||||
} = useSetModalState();
|
||||
const { createFolder, loading } = useCreateFolder();
|
||||
const id = useGetFolderId();
|
||||
|
||||
const onFolderCreateOk = useCallback(
|
||||
async (name: string) => {
|
||||
const ret = await createFolder({ parentId: id, name });
|
||||
|
||||
if (ret === 0) {
|
||||
hideFolderCreateModal();
|
||||
}
|
||||
},
|
||||
[createFolder, hideFolderCreateModal, id],
|
||||
);
|
||||
|
||||
return {
|
||||
folderCreateLoading: loading,
|
||||
onFolderCreateOk,
|
||||
folderCreateModalVisible,
|
||||
hideFolderCreateModal,
|
||||
showFolderCreateModal,
|
||||
};
|
||||
};
|
||||
|
||||
export const useHandleDeleteFile = (
|
||||
fileIds: string[],
|
||||
setSelectedRowKeys: (keys: string[]) => void,
|
||||
) => {
|
||||
const { deleteFile: removeDocument } = useDeleteFile();
|
||||
const showDeleteConfirm = useShowDeleteConfirm();
|
||||
const parentId = useGetFolderId();
|
||||
|
||||
const handleRemoveFile = () => {
|
||||
showDeleteConfirm({
|
||||
onOk: async () => {
|
||||
const code = await removeDocument({ fileIds, parentId });
|
||||
if (code === 0) {
|
||||
setSelectedRowKeys([]);
|
||||
}
|
||||
return;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return { handleRemoveFile };
|
||||
};
|
||||
|
||||
export const useHandleUploadFile = () => {
|
||||
const {
|
||||
visible: fileUploadVisible,
|
||||
hideModal: hideFileUploadModal,
|
||||
showModal: showFileUploadModal,
|
||||
} = useSetModalState();
|
||||
const { uploadFile, loading } = useUploadFile();
|
||||
const id = useGetFolderId();
|
||||
|
||||
const onFileUploadOk = useCallback(
|
||||
async (fileList: UploadFile[]): Promise<number | undefined> => {
|
||||
if (fileList.length > 0) {
|
||||
const ret: number = await uploadFile({ fileList, parentId: id });
|
||||
if (ret === 0) {
|
||||
hideFileUploadModal();
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
},
|
||||
[uploadFile, hideFileUploadModal, id],
|
||||
);
|
||||
|
||||
return {
|
||||
fileUploadLoading: loading,
|
||||
onFileUploadOk,
|
||||
fileUploadVisible,
|
||||
hideFileUploadModal,
|
||||
showFileUploadModal,
|
||||
};
|
||||
};
|
||||
|
||||
export const useHandleConnectToKnowledge = () => {
|
||||
const {
|
||||
visible: connectToKnowledgeVisible,
|
||||
hideModal: hideConnectToKnowledgeModal,
|
||||
showModal: showConnectToKnowledgeModal,
|
||||
} = useSetModalState();
|
||||
const { connectFileToKnowledge: connectToKnowledge, loading } =
|
||||
useConnectToKnowledge();
|
||||
const [record, setRecord] = useState<IFile>({} as IFile);
|
||||
|
||||
const initialValue = useMemo(() => {
|
||||
return Array.isArray(record?.kbs_info)
|
||||
? record?.kbs_info?.map((x) => x.kb_id)
|
||||
: [];
|
||||
}, [record?.kbs_info]);
|
||||
|
||||
const onConnectToKnowledgeOk = useCallback(
|
||||
async (knowledgeIds: string[]) => {
|
||||
const ret = await connectToKnowledge({
|
||||
fileIds: [record.id],
|
||||
kbIds: knowledgeIds,
|
||||
});
|
||||
|
||||
if (ret === 0) {
|
||||
hideConnectToKnowledgeModal();
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
[connectToKnowledge, hideConnectToKnowledgeModal, record.id],
|
||||
);
|
||||
|
||||
const handleShowConnectToKnowledgeModal = useCallback(
|
||||
(record: IFile) => {
|
||||
setRecord(record);
|
||||
showConnectToKnowledgeModal();
|
||||
},
|
||||
[showConnectToKnowledgeModal],
|
||||
);
|
||||
|
||||
return {
|
||||
initialValue,
|
||||
connectToKnowledgeLoading: loading,
|
||||
onConnectToKnowledgeOk,
|
||||
connectToKnowledgeVisible,
|
||||
hideConnectToKnowledgeModal,
|
||||
showConnectToKnowledgeModal: handleShowConnectToKnowledgeModal,
|
||||
};
|
||||
};
|
||||
|
||||
export const useHandleBreadcrumbClick = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBreadcrumbClick = useCallback(
|
||||
(path?: string) => {
|
||||
if (path) {
|
||||
navigate(path);
|
||||
}
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
return { handleBreadcrumbClick };
|
||||
};
|
||||
|
||||
export const useHandleMoveFile = (
|
||||
setSelectedRowKeys: (keys: string[]) => void,
|
||||
) => {
|
||||
const {
|
||||
visible: moveFileVisible,
|
||||
hideModal: hideMoveFileModal,
|
||||
showModal: showMoveFileModal,
|
||||
} = useSetModalState();
|
||||
const { moveFile, loading } = useMoveFile();
|
||||
const [sourceFileIds, setSourceFileIds] = useState<string[]>([]);
|
||||
|
||||
const onMoveFileOk = useCallback(
|
||||
async (targetFolderId: string) => {
|
||||
const ret = await moveFile({
|
||||
src_file_ids: sourceFileIds,
|
||||
dest_file_id: targetFolderId,
|
||||
});
|
||||
|
||||
if (ret === 0) {
|
||||
setSelectedRowKeys([]);
|
||||
hideMoveFileModal();
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
[moveFile, hideMoveFileModal, sourceFileIds, setSelectedRowKeys],
|
||||
);
|
||||
|
||||
const handleShowMoveFileModal = useCallback(
|
||||
(ids: string[]) => {
|
||||
setSourceFileIds(ids);
|
||||
showMoveFileModal();
|
||||
},
|
||||
[showMoveFileModal],
|
||||
);
|
||||
|
||||
return {
|
||||
initialValue: '',
|
||||
moveFileLoading: loading,
|
||||
onMoveFileOk,
|
||||
moveFileVisible,
|
||||
hideMoveFileModal,
|
||||
showMoveFileModal: handleShowMoveFileModal,
|
||||
};
|
||||
};
|
||||
15
web/src/pages/files/index.tsx
Normal file
15
web/src/pages/files/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import ListFilterBar from '@/components/list-filter-bar';
|
||||
import { Upload } from 'lucide-react';
|
||||
import { FilesTable } from './files-table';
|
||||
|
||||
export default function Files() {
|
||||
return (
|
||||
<section className="p-8">
|
||||
<ListFilterBar title="Files">
|
||||
<Upload />
|
||||
Upload file
|
||||
</ListFilterBar>
|
||||
<FilesTable></FilesTable>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user