diff --git a/frontend/my/src/Lists.js b/frontend/my/src/Lists.js index 803ad98..ac1ec7c 100644 --- a/frontend/my/src/Lists.js +++ b/frontend/my/src/Lists.js @@ -184,9 +184,28 @@ class CreateFormDef extends React.PureComponent { const CreateForm = Form.create()(CreateFormDef) class Lists extends React.PureComponent { + defaultPerPage = 20 state = { formType: null, - record: {} + record: {}, + queryParams: {} + } + + // Pagination config. + paginationOptions = { + hideOnSinglePage: false, + showSizeChanger: true, + showQuickJumper: true, + defaultPageSize: this.defaultPerPage, + pageSizeOptions: ["20", "50", "70", "100"], + position: "both", + showTotal: (total, range) => `${range[0]} to ${range[1]} of ${total}`, + onChange: (page, perPage) => { + this.fetchRecords({ page: page, per_page: perPage }) + }, + onShowSizeChange: (page, perPage) => { + this.fetchRecords({ page: page, per_page: perPage }) + } } constructor(props) { @@ -295,8 +314,28 @@ class Lists extends React.PureComponent { this.fetchRecords() } - fetchRecords = () => { - this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet) + fetchRecords = params => { + let qParams = { + page: this.state.queryParams.page, + per_page: this.state.queryParams.per_page + } + if (params) { + qParams = { ...qParams, ...params } + } + + this.props + .modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet, qParams) + .then(() => { + this.setState({ + queryParams: { + ...this.state.queryParams, + total: this.props.data[cs.ModelLists].total, + perPage: this.props.data[cs.ModelLists].per_page, + page: this.props.data[cs.ModelLists].page, + query: this.props.data[cs.ModelLists].query + } + }) + }) } deleteRecord = record => { @@ -340,7 +379,7 @@ class Lists extends React.PureComponent {
-

Lists ({this.props.data[cs.ModelLists].length})

+

Lists ({this.props.data[cs.ModelLists].total})