feat: pagination options (#20)
* feat: pagination options
* fix: data: {list, total}
			
			
This commit is contained in:
		
							parent
							
								
									85e42f95a5
								
							
						
					
					
						commit
						578454d07f
					
				@ -13,6 +13,7 @@ interface Params {
 | 
			
		||||
  associatedKey?: string | number;
 | 
			
		||||
  fields?: any;
 | 
			
		||||
  filter?: any;
 | 
			
		||||
  [key: string]: any;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
interface Handler {
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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 { data, loading, pagination, mutate } = useRequest((params = {}) => {
 | 
			
		||||
    const { current, pageSize, ...restParams } = params;
 | 
			
		||||
    const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
 | 
			
		||||
  const { data, mutate } = useRequest(() => api.resource(name).list({
 | 
			
		||||
    return api.resource(name).list({
 | 
			
		||||
      associatedKey,
 | 
			
		||||
  }));
 | 
			
		||||
  console.log(activeTab);
 | 
			
		||||
      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>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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} />;
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
@ -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({
 | 
			
		||||
  // 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>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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/>;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -91,6 +91,7 @@ export default {
 | 
			
		||||
      actionNames: ['create', 'destroy'],
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
@ -102,6 +102,7 @@ export default {
 | 
			
		||||
      actionNames: ['create', 'destroy'],
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
@ -97,6 +97,7 @@ export default {
 | 
			
		||||
      actionNames: ['create', 'destroy'],
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
@ -110,6 +110,7 @@ export default {
 | 
			
		||||
      actionNames: ['create', 'destroy'],
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
@ -210,6 +210,7 @@ export default {
 | 
			
		||||
      actionNames: ['create', 'destroy'],
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
@ -77,6 +77,7 @@ export default {
 | 
			
		||||
      template: 'SimpleTable',
 | 
			
		||||
      detailsViewName: 'details',
 | 
			
		||||
      updateViewName: 'permission_form',
 | 
			
		||||
      paginated: false,
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: 'table',
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user