feat: add batch operations for document list (#302)

### What problem does this PR solve? document list needs to be batch operated Issue link: #301 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2024-04-10 17:17:41 +08:00
parent 1ff5d9d55b
commit 533ac3b534
16 changed files with 341 additions and 143 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx
@ -0,0 +1,222 @@
+import { ReactComponent as CancelIcon } from '@/assets/svg/cancel.svg';
+import { ReactComponent as DeleteIcon } from '@/assets/svg/delete.svg';
+import { ReactComponent as DisableIcon } from '@/assets/svg/disable.svg';
+import { ReactComponent as EnableIcon } from '@/assets/svg/enable.svg';
+import { ReactComponent as RunIcon } from '@/assets/svg/run.svg';
+import { useShowDeleteConfirm, useTranslate } from '@/hooks/commonHooks';
+import {
+  useRemoveDocument,
+  useRunDocument,
+  useSetDocumentStatus,
+} from '@/hooks/documentHooks';
+import { useGetKnowledgeSearchParams } from '@/hooks/routeHook';
+import {
+  DownOutlined,
+  FileOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import { Button, Dropdown, Flex, Input, MenuProps, Space } from 'antd';
+import { useCallback, useMemo } from 'react';
+import {
+  useFetchDocumentListOnMount,
+  useGetPagination,
+  useHandleSearchChange,
+  useNavigateToOtherPage,
+} from './hooks';
+import styles from './index.less';
+
+interface IProps {
+  selectedRowKeys: string[];
+  showCreateModal(): void;
+}
+
+const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => {
+  const { t } = useTranslate('knowledgeDetails');
+  const { fetchDocumentList } = useFetchDocumentListOnMount();
+  const { setPagination, searchString } = useGetPagination(fetchDocumentList);
+  const { handleInputChange } = useHandleSearchChange(setPagination);
+  const removeDocument = useRemoveDocument();
+  const showDeleteConfirm = useShowDeleteConfirm();
+  const { linkToUploadPage } = useNavigateToOtherPage();
+  const runDocumentByIds = useRunDocument();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+  const changeStatus = useSetDocumentStatus();
+
+  const actionItems: MenuProps['items'] = useMemo(() => {
+    return [
+      {
+        key: '1',
+        onClick: linkToUploadPage,
+        label: (
+          <div>
+            <Button type="link">
+              <Space>
+                <FileTextOutlined />
+                {t('localFiles')}
+              </Space>
+            </Button>
+          </div>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '2',
+        onClick: showCreateModal,
+        label: (
+          <div>
+            <Button type="link">
+              <FileOutlined />
+              {t('emptyFiles')}
+            </Button>
+          </div>
+        ),
+        // disabled: true,
+      },
+    ];
+  }, [linkToUploadPage, showCreateModal, t]);
+
+  const handleDelete = useCallback(() => {
+    showDeleteConfirm({
+      onOk: () => {
+        selectedRowKeys.forEach((id) => {
+          removeDocument(id);
+        });
+      },
+    });
+  }, [removeDocument, showDeleteConfirm, selectedRowKeys]);
+
+  const runDocument = useCallback(
+    (run: number) => {
+      runDocumentByIds({
+        doc_ids: selectedRowKeys,
+        run,
+        knowledgeBaseId: knowledgeId,
+      });
+    },
+    [runDocumentByIds, selectedRowKeys, knowledgeId],
+  );
+
+  const handleRunClick = useCallback(() => {
+    runDocument(1);
+  }, [runDocument]);
+
+  const handleCancelClick = useCallback(() => {
+    runDocument(2);
+  }, [runDocument]);
+
+  const onChangeStatus = useCallback(
+    (enabled: boolean) => {
+      selectedRowKeys.forEach((id) => {
+        changeStatus(enabled, id);
+      });
+    },
+    [selectedRowKeys, changeStatus],
+  );
+
+  const handleEnableClick = useCallback(() => {
+    onChangeStatus(true);
+  }, [onChangeStatus]);
+
+  const handleDisableClick = useCallback(() => {
+    onChangeStatus(false);
+  }, [onChangeStatus]);
+
+  const disabled = selectedRowKeys.length === 0;
+
+  const items: MenuProps['items'] = useMemo(() => {
+    return [
+      {
+        key: '0',
+        onClick: handleEnableClick,
+        label: (
+          <Flex gap={10}>
+            <EnableIcon></EnableIcon>
+            <b>{t('enabled')}</b>
+          </Flex>
+        ),
+      },
+      {
+        key: '1',
+        onClick: handleDisableClick,
+        label: (
+          <Flex gap={10}>
+            <DisableIcon></DisableIcon>
+            <b>{t('disabled')}</b>
+          </Flex>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '2',
+        onClick: handleRunClick,
+        label: (
+          <Flex gap={10}>
+            <RunIcon></RunIcon>
+            <b>{t('run')}</b>
+          </Flex>
+        ),
+      },
+      {
+        key: '3',
+        onClick: handleCancelClick,
+        label: (
+          <Flex gap={10}>
+            <CancelIcon />
+            <b>{t('cancel')}</b>
+          </Flex>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '4',
+        onClick: handleDelete,
+        label: (
+          <Flex gap={10}>
+            <span className={styles.deleteIconWrapper}>
+              <DeleteIcon width={18} />
+            </span>
+            <b>{t('delete', { keyPrefix: 'common' })}</b>
+          </Flex>
+        ),
+      },
+    ];
+  }, [handleDelete, handleRunClick, handleCancelClick, t]);
+
+  return (
+    <div className={styles.filter}>
+      <Dropdown
+        menu={{ items }}
+        placement="bottom"
+        arrow={false}
+        disabled={disabled}
+      >
+        <Button>
+          <Space>
+            <b> {t('bulk')}</b>
+            <DownOutlined />
+          </Space>
+        </Button>
+      </Dropdown>
+      <Space>
+        <Input
+          placeholder={t('searchFiles')}
+          value={searchString}
+          style={{ width: 220 }}
+          allowClear
+          onChange={handleInputChange}
+          prefix={<SearchOutlined />}
+        />
+
+        <Dropdown menu={{ items: actionItems }} trigger={['click']}>
+          <Button type="primary" icon={<PlusOutlined />}>
+            {t('addFile')}
+          </Button>
+        </Dropdown>
+      </Space>
+    </div>
+  );
+};
+
+export default DocumentToolbar;