Merge: - client: fix table size and add pagination

Close #1197

* commit 'f446186db146b74cc6af3d29cf53ff69adc26e4f':
  - client: fix table pagination
  - client: fix table size and add pagination
This commit is contained in:
Artem Baskal 2019-11-27 13:06:11 +03:00
commit d26fed1901
3 changed files with 14 additions and 5 deletions

View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactTable from 'react-table'; import ReactTable from 'react-table';
import { Trans, withNamespaces } from 'react-i18next'; import { Trans, withNamespaces } from 'react-i18next';
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
class Leases extends Component { class Leases extends Component {
cellWrap = ({ value }) => ( cellWrap = ({ value }) => (
@ -36,7 +37,9 @@ class Leases extends Component {
Cell: this.cellWrap, Cell: this.cellWrap,
}, },
]} ]}
showPagination={false} pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
showPageSizeOptions={false}
showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_leases_not_found')} noDataText={t('dhcp_leases_not_found')}
minRows={6} minRows={6}
className="-striped -highlight card-table-overflow" className="-striped -highlight card-table-overflow"

View File

@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactTable from 'react-table'; import ReactTable from 'react-table';
import { Trans, withNamespaces } from 'react-i18next'; import { Trans, withNamespaces } from 'react-i18next';
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
import Modal from './Modal'; import Modal from './Modal';
@ -16,7 +17,7 @@ class StaticLeases extends Component {
handleSubmit = (data) => { handleSubmit = (data) => {
this.props.addStaticLease(data); this.props.addStaticLease(data);
} };
handleDelete = (ip, mac, hostname = '') => { handleDelete = (ip, mac, hostname = '') => {
const name = hostname || ip; const name = hostname || ip;
@ -24,7 +25,7 @@ class StaticLeases extends Component {
if (window.confirm(this.props.t('delete_confirm', { key: name }))) { if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
this.props.removeStaticLease({ ip, mac, hostname }); this.props.removeStaticLease({ ip, mac, hostname });
} }
} };
render() { render() {
const { const {
@ -74,7 +75,7 @@ class StaticLeases extends Component {
} }
> >
<svg className="icons"> <svg className="icons">
<use xlinkHref="#delete" /> <use xlinkHref="#delete"/>
</svg> </svg>
</button> </button>
</div> </div>
@ -82,7 +83,9 @@ class StaticLeases extends Component {
}, },
}, },
]} ]}
showPagination={false} pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
showPageSizeOptions={false}
showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_static_leases_not_found')} noDataText={t('dhcp_static_leases_not_found')}
className="-striped -highlight card-table-overflow" className="-striped -highlight card-table-overflow"
minRows={6} minRows={6}

View File

@ -402,6 +402,9 @@ export const DEFAULT_LOGS_FILTER = {
export const DEFAULT_LANGUAGE = 'en'; export const DEFAULT_LANGUAGE = 'en';
export const TABLE_DEFAULT_PAGE_SIZE = 100; export const TABLE_DEFAULT_PAGE_SIZE = 100;
export const SMALL_TABLE_DEFAULT_PAGE_SIZE = 20;
export const RESPONSE_FILTER = { export const RESPONSE_FILTER = {
ALL: 'all', ALL: 'all',
FILTERED: 'filtered', FILTERED: 'filtered',