feat: pagination options (#20)

* feat: pagination options * fix: data: {list, total}
2024-11-15 04:05:45 +00:00 · 2020-11-21 23:49:59 +08:00 · 2020-11-21 23:49:59 +08:00 · 578454d07f
commit 578454d07f
parent 85e42f95a5
13 changed files with 94 additions and 27 deletions
--- a/packages/app/src/api-client.ts
+++ b/packages/app/src/api-client.ts
@ -13,6 +13,7 @@ interface Params {
  associatedKey?: string | number;
  fields?: any;
  filter?: any;
+  [key: string]: any;
 }

 interface Handler {
--- a/packages/app/src/components/pages/CollectionLoader/CollectionSingle.tsx
+++ b/packages/app/src/components/pages/CollectionLoader/CollectionSingle.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
 import { CollectionTabPane } from './CollectionTabPane';
 import { getPathName, redirectTo } from './utils';
@ -15,7 +15,9 @@ export function CollectionSingle(props) {
  const { data = {}, loading } = useRequest(() => activeTab && api.resource(activeTab.collection_name).getPageInfo({
    resourceKey: item.itemId,
  }));
-  console.log(data);
+
+  const [activing, setActiving] = useState(false);
+
  if (!activeTab) {
    return null;
  }
@ -45,12 +47,16 @@ export function CollectionSingle(props) {
          <Tabs size={'small'}
            defaultActiveKey={`${activeTab.name}`}
            onTabClick={(activeKey) => {
+              setActiving(true);
              redirectTo({
                ...props.match.params,
                lastItem: {
                  tabName: activeKey,
                },
              });
+              setTimeout(() => {
+                setActiving(false);
+              }, 2)
            }}
          >
            {tabs.map(tab => <Tabs.TabPane tab={tab.title} key={`${tab.name}`} />)}
@ -58,7 +64,7 @@ export function CollectionSingle(props) {
        }
      />
      <div className={'collection-content'}>
-        <CollectionTabPane {...props} pageInfo={data} activeTab={activeTab}/>
+        <CollectionTabPane  {...props} loading={activing} pageInfo={data} activeTab={activeTab}/>
      </div>
    </div>
  );
--- a/packages/app/src/components/pages/CollectionLoader/CollectionTabPane.tsx
+++ b/packages/app/src/components/pages/CollectionLoader/CollectionTabPane.tsx
@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ViewFactory from '@/components/views';
 import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
 import { useRequest, request, Spin } from '@nocobase/client';

 export function CollectionTabPane(props) {
-  const { pageInfo = {}, activeTab = {}, item = {} } = props;
+  const { loading, pageInfo = {}, activeTab = {}, item = {} } = props;
  const { viewName, association, collection_name, field = {} } = activeTab;
  const { sourceKey = 'id' } = field;

@ -19,7 +19,9 @@ export function CollectionTabPane(props) {
    params['resourceKey'] = item.itemId;
  }

-  console.log(activeTab);
+  if (loading) {
+    return <Spin/>;
+  }

  return (
    <div>
--- a/packages/app/src/components/views/SimpleTable.tsx
+++ b/packages/app/src/components/views/SimpleTable.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Table as AntdTable, Card } from 'antd';
+import { Table as AntdTable, Card, Pagination } from 'antd';
 import { Actions } from '@/components/actions';
 import ViewFactory from '@/components/views';
 import { useRequest } from 'umi';
@ -26,14 +26,30 @@ export function SimpleTable(props: SimpleTableProps) {
    associatedName,
    associatedKey,
  } = props;
-  const { rowKey = 'id', fields = [], rowViewName, actions = [] } = schema;
+  const { rowKey = 'id', fields = [], rowViewName, actions = [], paginated = true, defaultPageSize = 10 } = schema;
  const { sourceKey = 'id' } = activeTab.field||{};
  const drawerRef = useRef<any>();
-  const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
-  const { data, mutate } = useRequest(() => api.resource(name).list({
-    associatedKey,
-  }));
-  console.log(activeTab);
+  const { data, loading, pagination, mutate } = useRequest((params = {}) => {
+    const { current, pageSize, ...restParams } = params;
+    const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
+    return api.resource(name).list({
+      associatedKey,
+      page: paginated ? current : 1,
+      perPage: paginated ? pageSize : -1,
+    })
+    .then(({data = [], meta = {}}) => {
+      return {
+        data: {
+          list: data,
+          total: meta.count||data.length,
+        },
+      };
+    });
+  }, {
+    paginated,
+    defaultPageSize,
+  });
+  console.log(schema, data);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onChange = (selectedRowKeys: React.ReactText[]) => {
    setSelectedRowKeys(selectedRowKeys);
@ -45,6 +61,7 @@ export function SimpleTable(props: SimpleTableProps) {
      onChange,
    }
  }
+  console.log('rowViewName', {rowViewName})
  return (
    <Card bordered={false}>
      <Actions {...props} style={{ marginBottom: 14 }} actions={actions}/>
@ -54,9 +71,10 @@ export function SimpleTable(props: SimpleTableProps) {
        reference={drawerRef}
      />
      <AntdTable
-        columns={fields2columns(fields)}
-        dataSource={data}
        rowKey={rowKey}
+        loading={loading}
+        columns={fields2columns(fields)}
+        dataSource={data?.list||(data as any)}
        components={components({data, mutate})}
        onRow={(record) => ({
          onClick: () => {
@ -64,8 +82,14 @@ export function SimpleTable(props: SimpleTableProps) {
            drawerRef.current.getData(record[rowKey]);
          }
        })}
+        pagination={false}
        {...tableProps}
      />
+      {paginated && (
+        <div>
+          <Pagination {...pagination} showQuickJumper showSizeChanger size={'default'}/>
+        </div>
+      )}
    </Card>
  );
 }
--- a/packages/app/src/components/views/SortableTable/index.tsx
+++ b/packages/app/src/components/views/SortableTable/index.tsx
@ -14,7 +14,7 @@ export const DragHandle = sortableHandle(() => (
  <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />
 ));

-export const components = ({data, mutate}) => {
+export const components = ({data = {}, mutate}: {data: any, mutate: any}) => {
  return {
    body: {
      wrapper: props => (
@ -23,8 +23,11 @@ export const components = ({data, mutate}) => {
          helperClass="row-dragging"
          onSortEnd={({ oldIndex, newIndex }) => {
            if (oldIndex !== newIndex) {
-              const newData = arrayMove([].concat(data), oldIndex, newIndex).filter(el => !!el);
-              mutate(newData);
+              const list = arrayMove([].concat(data.list), oldIndex, newIndex).filter(el => !!el);
+              mutate({
+                ...data,
+                list,
+              });
            }
          }}
          {...props}
@ -32,7 +35,7 @@ export const components = ({data, mutate}) => {
      ),
      row: ({ className, style, ...restProps }) => {
        // function findIndex base on Table rowKey props and should always be a right array index
-        const index = findIndex(data, (x: any) => x.id === restProps['data-row-key']);
+        const index = findIndex(data.list, (x: any) => x.id === restProps['data-row-key']);
        return <SortableItem index={index} {...restProps} />;
      },
    },
--- a/packages/app/src/components/views/Table.tsx
+++ b/packages/app/src/components/views/Table.tsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Table as AntdTable, Card } from 'antd';
+import { Table as AntdTable, Card, Pagination } from 'antd';
 import { redirectTo } from '@/components/pages/CollectionLoader/utils';
 import { Actions } from '@/components/actions';
 import { request, useRequest } from 'umi';
@ -41,11 +41,31 @@ export function Table(props: TableProps) {
    associatedName,
    associatedKey,
  } = props;
-  const { fields, defaultTabName, rowKey = 'id', actions = [] } = schema;
+  const { fields, defaultTabName, rowKey = 'id', actions = [], paginated = true, defaultPageSize = 10 } = schema;
  const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
-  const { data, mutate } = useRequest(() => api.resource(name).list({
-    associatedKey,
-  }));
+  // const { data, mutate } = useRequest(() => api.resource(name).list({
+  //   associatedKey,
+  // }));
+  const { data, loading, pagination, mutate } = useRequest((params = {}) => {
+    const { current, pageSize, ...restParams } = params;
+    const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
+    return api.resource(name).list({
+      associatedKey,
+      page: paginated ? current : 1,
+      perPage: paginated ? pageSize : -1,
+    })
+    .then(({data = [], meta = {}}) => {
+      return {
+        data: {
+          list: data,
+          total: meta.count||data.length,
+        },
+      };
+    });
+  }, {
+    paginated,
+    defaultPageSize,
+  });
  const { sourceKey = 'id' } = activeTab.field||{};
  console.log(props);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
@ -63,9 +83,9 @@ export function Table(props: TableProps) {
    <Card bordered={false}>
      <Actions {...props} style={{ marginBottom: 14 }} actions={actions}/>
      <AntdTable 
-        dataSource={data}
        rowKey={rowKey}
        columns={fields2columns(fields)}
+        dataSource={data?.list||(data as any)}
        components={components({data, mutate})}
        onRow={(data) => ({
          onClick: () => {
@ -78,8 +98,14 @@ export function Table(props: TableProps) {
            });
          },
        })}
+        pagination={false}
        {...tableProps}
      />
+      {paginated && (
+        <div>
+          <Pagination {...pagination} showQuickJumper showSizeChanger size={'default'}/>
+        </div>
+      )}
    </Card>
  );
 }
--- a/packages/app/src/components/views/index.tsx
+++ b/packages/app/src/components/views/index.tsx
@ -1,5 +1,5 @@

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import api from '@/api-client';
 import { useRequest } from 'umi';
 import { Spin } from '@nocobase/client';
@ -51,7 +51,6 @@ export default function ViewFactory(props: ViewProps) {
  }, {
    refreshDeps: [associatedName, resourceName, viewName],
  });
-  console.log(data);
  if (loading) {
    return <Spin/>;
  }
--- a/packages/plugin-collections/src/collections/actions.ts
+++ b/packages/plugin-collections/src/collections/actions.ts
@ -91,6 +91,7 @@ export default {
      actionNames: ['create', 'destroy'],
      detailsViewName: 'details',
      updateViewName: 'form',
+      paginated: false,
    },
    {
      type: 'table',
--- a/packages/plugin-collections/src/collections/fields.ts
+++ b/packages/plugin-collections/src/collections/fields.ts
@ -102,6 +102,7 @@ export default {
      actionNames: ['create', 'destroy'],
      detailsViewName: 'details',
      updateViewName: 'form',
+      paginated: false,
    },
    {
      type: 'table',
--- a/packages/plugin-collections/src/collections/tabs.ts
+++ b/packages/plugin-collections/src/collections/tabs.ts
@ -97,6 +97,7 @@ export default {
      actionNames: ['create', 'destroy'],
      detailsViewName: 'details',
      updateViewName: 'form',
+      paginated: false,
    },
    {
      type: 'table',
--- a/packages/plugin-collections/src/collections/views.ts
+++ b/packages/plugin-collections/src/collections/views.ts
@ -110,6 +110,7 @@ export default {
      actionNames: ['create', 'destroy'],
      detailsViewName: 'details',
      updateViewName: 'form',
+      paginated: false,
    },
    {
      type: 'table',
--- a/packages/plugin-pages/src/collections/pages.ts
+++ b/packages/plugin-pages/src/collections/pages.ts
@ -210,6 +210,7 @@ export default {
      actionNames: ['create', 'destroy'],
      detailsViewName: 'details',
      updateViewName: 'form',
+      paginated: false,
    },
    {
      type: 'table',
--- a/packages/plugin-permissions/src/collections/roles.ts
+++ b/packages/plugin-permissions/src/collections/roles.ts
@ -77,6 +77,7 @@ export default {
      template: 'SimpleTable',
      detailsViewName: 'details',
      updateViewName: 'permission_form',
+      paginated: false,
    },
    {
      type: 'table',