From 5f5b97ed699f45778c01247f29c915d967d35cd0 Mon Sep 17 00:00:00 2001 From: Katherine Date: Wed, 21 Aug 2024 12:03:02 +0800 Subject: [PATCH] refactor: support simple Paginate (#5093) * refactor: support simple Paginate * chore: simple paginate * refactor: simplePaginate * fix: test * refactor: usePaginationProps * refactor: simplePaginate * fix: bug --------- Co-authored-by: Chareice --- packages/core/actions/src/actions/list.ts | 27 +++++--- .../src/block-provider/TableBlockProvider.tsx | 7 ++- packages/core/client/src/locale/zh-CN.json | 4 +- .../data-blocks/table/tableBlockSettings.tsx | 5 ++ .../schema-component/antd/table-v2/Table.tsx | 60 +++++++++++++++--- .../antd/table-v2/TableBlockDesigner.tsx | 3 +- .../__tests__/Table.settings.test.tsx | 4 ++ .../SchemaSettingsPagingMode.tsx | 61 +++++++++++++++++++ .../core/client/src/schema-settings/index.ts | 1 + .../src/default-actions/list.ts | 27 +++++--- 10 files changed, 168 insertions(+), 31 deletions(-) create mode 100644 packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx diff --git a/packages/core/actions/src/actions/list.ts b/packages/core/actions/src/actions/list.ts index 570b4950fa..5e42b26765 100644 --- a/packages/core/actions/src/actions/list.ts +++ b/packages/core/actions/src/actions/list.ts @@ -38,7 +38,7 @@ function findArgs(ctx: Context) { } async function listWithPagination(ctx: Context) { - const { page = DEFAULT_PAGE, pageSize = DEFAULT_PER_PAGE } = ctx.action.params; + const { page = DEFAULT_PAGE, pageSize = DEFAULT_PER_PAGE, simplePaginate } = ctx.action.params; const repository = getRepositoryFromParams(ctx); @@ -54,15 +54,24 @@ async function listWithPagination(ctx: Context) { } }); - const [rows, count] = await repository.findAndCount(options); + if (simplePaginate) { + const rows = await repository.find(options); + ctx.body = { + rows, + page: Number(page), + pageSize: Number(pageSize), + }; + } else { + const [rows, count] = await repository.findAndCount(options); - ctx.body = { - count, - rows, - page: Number(page), - pageSize: Number(pageSize), - totalPage: totalPage(count, pageSize), - }; + ctx.body = { + count, + rows, + page: Number(page), + pageSize: Number(pageSize), + totalPage: totalPage(count, pageSize), + }; + } } async function listWithNonPaged(ctx: Context) { diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx index cf52966199..241e420e00 100644 --- a/packages/core/client/src/block-provider/TableBlockProvider.tsx +++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx @@ -147,7 +147,7 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => { const fieldSchema = useFieldSchema(); const { getCollection, getCollectionField } = useCollectionManager_deprecated(props.dataSource); const collection = getCollection(props.collection, props.dataSource); - const { treeTable } = fieldSchema?.['x-decorator-props'] || {}; + const { treeTable, pagingMode } = fieldSchema?.['x-decorator-props'] || {}; const { params, parseVariableLoading } = useTableBlockParamsCompat(props); let childrenColumnName = 'children'; @@ -166,6 +166,11 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => { params['tree'] = true; } } + if (pagingMode === 'simplePaginate') { + params['simplePaginate'] = true; + } else { + delete params?.['simplePaginate']; + } const form = useMemo(() => createForm(), [treeTable]); // 在解析变量的时候不渲染，避免因为重复请求数据导致的资源浪费 diff --git a/packages/core/client/src/locale/zh-CN.json b/packages/core/client/src/locale/zh-CN.json index fae581d41e..d7b483e8fd 100644 --- a/packages/core/client/src/locale/zh-CN.json +++ b/packages/core/client/src/locale/zh-CN.json @@ -964,5 +964,7 @@ "Expand All": "展开全部", "Search": "搜索", "Clear default value": "清除默认值", - "Open in new window": "新窗口打开" + "Open in new window": "新窗口打开", + "Paging mode": "分页模式", + "Simple Paginate": "简单分页" } diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx index f5c7e3b8e7..d49d7198ab 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx +++ b/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx @@ -24,6 +24,7 @@ import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingM import { setDefaultSortingRulesSchemaSettingsItem } from '../../../../schema-settings/setDefaultSortingRulesSchemaSettingsItem'; import { setTheDataScopeSchemaSettingsItem } from '../../../../schema-settings/setTheDataScopeSchemaSettingsItem'; import { createSwitchSettingsItem } from '../../../../application/schema-settings/utils'; +import { SchemaSettingsPagingMode } from '../../../../schema-settings/SchemaSettingsPagingMode'; export const tableBlockSettings = new SchemaSettings({ name: 'blockSettings:table', @@ -185,6 +186,10 @@ export const tableBlockSettings = new SchemaSettings({ }; }, }, + { + name: 'pagingMode', + Component: SchemaSettingsPagingMode, + }, { name: 'ConnectDataBlocks', Component: SchemaSettingsConnectDataBlocks, diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index 82eb8a9bf5..5d6236eec7 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -258,21 +258,61 @@ const TableIndex = (props) => { const usePaginationProps = (pagination1, pagination2) => { const { t } = useTranslation(); + const field: any = useField(); + const { token } = useToken(); const pagination = useMemo( () => ({ ...pagination1, ...pagination2 }), [JSON.stringify({ ...pagination1, ...pagination2 })], ); - - const showTotal = useCallback((total) => t('Total {{count}} items', { count: total }), [t]); - - const result = useMemo( - () => ({ - showTotal, - showSizeChanger: true, - ...pagination, - }), - [pagination, t, showTotal], + const { total: totalCount, current, pageSize } = pagination || {}; + const showTotal = useCallback( + (total) => { + return t('Total {{count}} items', { count: total }); + }, + [t, totalCount], ); + const result = useMemo(() => { + if (totalCount) { + return { + showTotal, + showSizeChanger: true, + ...pagination, + }; + } else { + return { + showTotal: false, + simple: true, + showTitle: false, + showSizeChanger: true, + hideOnSinglePage: false, + ...pagination, + total: field.value?.length < pageSize ? pageSize * current : pageSize * current + 1, + className: css` + .ant-pagination-simple-pager { + display: none !important; + } + `, + itemRender: (_, type, originalElement) => { + if (type === 'prev') { + return ( +
+ {originalElement}
{current}
+
+ ); + } else { + return originalElement; + } + }, + }; + } + }, [pagination, t, showTotal]); if (pagination2 === false) { return false; diff --git a/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx b/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx index 7dca15e2bc..c2ba2e04db 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx @@ -30,7 +30,7 @@ import { } from '../../../schema-settings'; import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem'; import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem'; - +import { SchemaSettingsPagingMode } from '../../../schema-settings/SchemaSettingsPagingMode'; import { SchemaSettingsConnectDataBlocks } from '../../../schema-settings/SchemaSettingsConnectDataBlocks'; import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope'; import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate'; @@ -301,6 +301,7 @@ export const TableBlockDesigner = () => { }); }} /> + {supportTemplate && } {supportTemplate && ( diff --git a/packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx b/packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx index 729a7cc4f8..92d16a9924 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx @@ -219,6 +219,10 @@ describe('Table.settings', () => { }, ], }, + { + title: 'Paging mode', + type: 'select', + }, { title: 'Save as template', type: 'modal', diff --git a/packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx b/packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx new file mode 100644 index 0000000000..35fe1b6c01 --- /dev/null +++ b/packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx @@ -0,0 +1,61 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import { Field } from '@formily/core'; +import { useField, useFieldSchema } from '@formily/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useTableBlockContext } from '../block-provider'; +import { useDesignable } from '../schema-component/hooks/useDesignable'; +import { SchemaSettingsSelectItem } from './SchemaSettings'; + +export function SchemaSettingsPagingMode() { + const field = useField(); + const fieldSchema = useFieldSchema(); + const { t } = useTranslation(); + const { dn } = useDesignable(); + const { service } = useTableBlockContext(); + const options = [ + { + value: 'default', + label: t('Default'), + }, + { + value: 'simplePaginate', + label: t('Simple Paginate'), + }, + ]; + + return ( + { + fieldSchema['x-decorator-props'].pagingMode = pagingMode; + const params = { ...service.params?.[0] }; + if (pagingMode === 'simplePaginate') { + params['simplePaginate'] = true; + } else { + delete params['simplePaginate']; + } + service.run({ params }); + field.decoratorProps.pagingMode = pagingMode; + dn.emit('patch', { + schema: { + ['x-uid']: fieldSchema['x-uid'], + 'x-decorator-props': fieldSchema['x-decorator-props'], + }, + }); + dn.refresh(); + }} + /> + ); +} diff --git a/packages/core/client/src/schema-settings/index.ts b/packages/core/client/src/schema-settings/index.ts index 4146bb27cb..dc2b29d6e9 100644 --- a/packages/core/client/src/schema-settings/index.ts +++ b/packages/core/client/src/schema-settings/index.ts @@ -21,6 +21,7 @@ export * from './SchemaSettingsSortingRule'; export * from './SchemaSettingsTemplate'; export * from './SchemaSettingsBlockHeightItem'; export * from './setDefaultSortingRulesSchemaSettingsItem'; +export * from './SchemaSettingsPagingMode'; export * from './setTheDataScopeSchemaSettingsItem'; export * from './hooks/useGetAriaLabelOfDesigner'; export * from './hooks/useIsAllowToSetDefaultValue'; diff --git a/packages/core/data-source-manager/src/default-actions/list.ts b/packages/core/data-source-manager/src/default-actions/list.ts index 4be722639f..310cdbef7c 100644 --- a/packages/core/data-source-manager/src/default-actions/list.ts +++ b/packages/core/data-source-manager/src/default-actions/list.ts @@ -38,7 +38,7 @@ function findArgs(ctx: Context) { } async function listWithPagination(ctx: Context) { - const { page = 1, pageSize = 50 } = ctx.action.params; + const { page = 1, pageSize = 50, simplePaginate } = ctx.action.params; const repository = ctx.getCurrentRepository(); @@ -54,15 +54,24 @@ async function listWithPagination(ctx: Context) { } }); - const [rows, count] = await repository.findAndCount(options); + if (simplePaginate) { + const rows = await repository.find(options); + ctx.body = { + rows, + page: Number(page), + pageSize: Number(pageSize), + }; + } else { + const [rows, count] = await repository.findAndCount(options); - ctx.body = { - count, - rows, - page: Number(page), - pageSize: Number(pageSize), - totalPage: totalPage(count, pageSize), - }; + ctx.body = { + count, + rows, + page: Number(page), + pageSize: Number(pageSize), + totalPage: totalPage(count, pageSize), + }; + } } async function listWithNonPaged(ctx: Context) {