From f446186db146b74cc6af3d29cf53ff69adc26e4f Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Tue, 26 Nov 2019 20:50:02 +0300
Subject: [PATCH] - client: fix table pagination
---
client/src/components/Settings/Dhcp/Leases.js | 6 ++++--
.../components/Settings/Dhcp/StaticLeases/index.js | 12 +++++++-----
client/src/helpers/constants.js | 3 +++
3 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/client/src/components/Settings/Dhcp/Leases.js b/client/src/components/Settings/Dhcp/Leases.js
index 0a61299f..446b66ca 100644
--- a/client/src/components/Settings/Dhcp/Leases.js
+++ b/client/src/components/Settings/Dhcp/Leases.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
class Leases extends Component {
cellWrap = ({ value }) => (
@@ -36,8 +37,9 @@ class Leases extends Component {
Cell: this.cellWrap,
},
]}
- pageSize={100}
- showPagination={true}
+ pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+ showPageSizeOptions={false}
+ showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_leases_not_found')}
minRows={6}
className="-striped -highlight card-table-overflow"
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/index.js b/client/src/components/Settings/Dhcp/StaticLeases/index.js
index a1a3d0b5..7f146c41 100644
--- a/client/src/components/Settings/Dhcp/StaticLeases/index.js
+++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js
@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
import Modal from './Modal';
@@ -16,7 +17,7 @@ class StaticLeases extends Component {
handleSubmit = (data) => {
this.props.addStaticLease(data);
- }
+ };
handleDelete = (ip, mac, hostname = '') => {
const name = hostname || ip;
@@ -24,7 +25,7 @@ class StaticLeases extends Component {
if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
this.props.removeStaticLease({ ip, mac, hostname });
}
- }
+ };
render() {
const {
@@ -74,7 +75,7 @@ class StaticLeases extends Component {
}
>
<svg className="icons">
- <use xlinkHref="#delete" />
+ <use xlinkHref="#delete"/>
</svg>
</button>
</div>
@@ -82,8 +83,9 @@ class StaticLeases extends Component {
},
},
]}
- pageSize={100}
- showPagination={true}
+ pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+ showPageSizeOptions={false}
+ showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_static_leases_not_found')}
className="-striped -highlight card-table-overflow"
minRows={6}
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 4abc9bac..fefd9425 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -402,6 +402,9 @@ export const DEFAULT_LOGS_FILTER = {
export const DEFAULT_LANGUAGE = 'en';
export const TABLE_DEFAULT_PAGE_SIZE = 100;
+
+export const SMALL_TABLE_DEFAULT_PAGE_SIZE = 20;
+
export const RESPONSE_FILTER = {
ALL: 'all',
FILTERED: 'filtered',