haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 02:42:47 +00:00
Code Issues Releases Wiki Activity

[system admin] improved pagination for all (#4404)

Browse Source 
* [system admin] improved pagination for all

* [paginator] show 'current page'

* redesigned paginator

* [pagination] cleanup
This commit is contained in:
llj
2020-01-13 12:07:24 +08:00
committed by Daniel Pan
parent fc176627e6
commit a5ad32d3c4
26 changed files with 284 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/components/paginator.js
View File

@@ -1,57 +1,82 @@
import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { navigate } from '@reach/router';
import { gettext } from '../utils/constants';
import '../css/pagination.css';
const propTypes = {
currentPage: PropTypes.number.isRequired,
gotoPreviousPage: PropTypes.func.isRequired,
gotoNextPage: PropTypes.func.isRequired,
currentPage: PropTypes.number.isRequired,
hasNextPage: PropTypes.bool.isRequired,
canResetPerPage: PropTypes.bool.isRequired,
resetPerPage: PropTypes.func,
curPerPage: PropTypes.number,
resetPerPage: PropTypes.func.isRequired,
curPerPage: PropTypes.number.isRequired
};
class Paginator extends Component {
resetPerPage = (perPage) => {
resetPerPage = (e) => {
const perPage = e.target.value;
this.updateURL(1, perPage);
this.props.resetPerPage(perPage);
}
goToPrevious = (e) => {
e.preventDefault();
goToPrevious = () => {
const { currentPage, curPerPage } = this.props;
this.updateURL(currentPage - 1, curPerPage);
this.props.gotoPreviousPage();
}
goToNext = (e) => {
e.preventDefault();
goToNext = () => {
const { currentPage, curPerPage } = this.props;
this.updateURL(currentPage + 1, curPerPage);
this.props.gotoNextPage();
}
updateURL = (page, perPage) => {
let url = new URL(location.href);
let searchParams = new URLSearchParams(url.search);
searchParams.set('page', page);
searchParams.set('per_page', perPage);
url.search = searchParams.toString();
navigate(url.toString());
}
getPerPageText = (perPage) => {
return gettext('{number_placeholder} / Page').replace('{number_placeholder}', perPage);
}
render() {
let { curPerPage } = this.props;
const { curPerPage, currentPage } = this.props;
return (
<Fragment>
<div className="my-6 text-center">
{this.props.currentPage != 1 &&
<a href="#" onClick={this.goToPrevious}>{gettext('Previous')}</a>
}
{this.props.hasNextPage &&
<a href="#" onClick={this.goToNext} className="ml-4">{gettext('Next')}</a>
}
{(this.props.currentPage != 1 || this.props.hasNextPage) &&
<span className="d-inline-block mx-2">|</span>
}
{this.props.canResetPerPage &&
<Fragment>
{gettext('Per page:')}
<span className={`${curPerPage === 25 ? '' : 'a-simulate '} mx-1`} onClick={() => {return this.resetPerPage(25);}}>25</span>
<span className={`${curPerPage === 50 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(50);}}>50</span>
<span className={`${curPerPage === 100 ? '' : 'a-simulate '}`} onClick={() => {return this.resetPerPage(100);}}>100</span>
</Fragment>
}
<div className="my-6 paginator d-flex align-items-center justify-content-center">
<button
className="btn btn-secondary"
disabled={currentPage == 1}
onClick={this.goToPrevious}
>
<span className="fas fa-chevron-left"></span>
</button>
<span className="btn btn-primary mx-4">{currentPage}</span>
<button
className="btn btn-secondary"
disabled={!this.props.hasNextPage}
onClick={this.goToNext}
>
<span className="fas fa-chevron-right"></span>
</button>
<select
className="form-control d-inline-block w-auto ml-6"
value={curPerPage}
onChange={this.resetPerPage}
>
<option value="25">{this.getPerPageText(25)}</option>
<option value="50">{this.getPerPageText(50)}</option>
<option value="100">{this.getPerPageText(100)}</option>
</select>
</div>
</Fragment>
);
}
}

3
frontend/src/css/pagination.css Normal file
View File

@@ -0,0 +1,3 @@
.paginator .btn {
min-width: 2.375rem;
}

12
frontend/src/pages/sys-admin/admin-logs/login-logs.js
View File

@@ -64,7 +64,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -102,7 +101,7 @@ class AdminLoginLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
};
@@ -110,7 +109,14 @@ class AdminLoginLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

12
frontend/src/pages/sys-admin/admin-logs/operation-logs.js
View File

@@ -63,7 +63,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -199,7 +198,7 @@ class AdminOperationLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
};
@@ -207,7 +206,14 @@ class AdminOperationLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

28
frontend/src/pages/sys-admin/devices/devices-by-platform.js
View File

@@ -24,7 +24,7 @@ class Content extends Component {
}
render() {
const { loading, errorMsg, items, pageInfo } = this.props;
const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
if (loading) {
return <Loading />;
} else if (errorMsg) {
@@ -59,7 +59,8 @@ class Content extends Component {
gotoNextPage={this.getNextPageDevicesList}
currentPage={pageInfo.current_page}
hasNextPage={pageInfo.has_next_page}
canResetPerPage={false}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>
</Fragment>
);
@@ -155,12 +156,19 @@ class DevicesByPlatform extends Component {
errorMsg: '',
devicesData: {},
pageInfo: {},
perPage: 50
perPage: 25
};
}
componentDidMount () {
this.getDevicesListByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage = 1, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getDevicesListByPage(this.state.currentPage);
});
}
getDevicesListByPage = (page) => {
@@ -180,14 +188,24 @@ class DevicesByPlatform extends Component {
});
}
resetPerPage = (perPage) => {
this.setState({
perPage: perPage
}, () => {
this.getDevicesListByPage(1);
});
}
render() {
return (
<div className="cur-view-content">
<Content
getDevicesListByPage={this.getDevicesListByPage}
loading={this.state.loading}
errorMsg={this.state.errorMsg}
items={this.state.devicesData}
getDevicesListByPage={this.getDevicesListByPage}
curPerPage={this.state.perPage}
resetPerPage={this.resetPerPage}
pageInfo={this.state.pageInfo}
/>
</div>

5
frontend/src/pages/sys-admin/groups/groups-content.js
View File

@@ -37,7 +37,7 @@ class Content extends Component {
}
render() {
const { loading, errorMsg, items, pageInfo } = this.props;
const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
if (loading) {
return <Loading />;
} else if (errorMsg) {
@@ -79,7 +79,8 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={pageInfo.current_page}
hasNextPage={pageInfo.has_next_page}
canResetPerPage={false}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>
}
</Fragment>

21
frontend/src/pages/sys-admin/groups/groups.js
View File

@@ -19,13 +19,20 @@ class Groups extends Component {
errorMsg: '',
groupList: [],
pageInfo: {},
perPage: 100,
perPage: 25,
isCreateGroupDialogOpen: false
};
}
componentDidMount () {
this.getGroupListByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage = 1, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getGroupListByPage(this.state.currentPage);
});
}
toggleCreateGroupDialog = () => {
@@ -47,6 +54,14 @@ class Groups extends Component {
});
}
resetPerPage = (perPage) => {
this.setState({
perPage: perPage
}, () => {
this.getGroupListByPage(1);
});
}
createGroup = (groupName, OnwerEmail) => {
seafileAPI.sysAdminCreateNewGroup(groupName, OnwerEmail).then(res => {
let newGroupList = this.state.groupList;
@@ -130,6 +145,8 @@ class Groups extends Component {
deleteGroup={this.deleteGroup}
transferGroup={this.transferGroup}
getListByPage={this.getGroupListByPage}
resetPerPage={this.resetPerPage}
curPerPage={this.state.perPage}
/>
</div>
</div>

13
frontend/src/pages/sys-admin/institutions/institution-users.js
View File

@@ -83,7 +83,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -231,7 +230,7 @@ class InstitutionUsers extends Component {
errorMsg: '',
institutionName: '',
userList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isAddUserDialogOpen: false
@@ -245,7 +244,15 @@ class InstitutionUsers extends Component {
institutionName: res.data.name
});
});
this.getInstitutionUsersByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getInstitutionUsersByPage(this.state.currentPage);
});
}
getInstitutionUsersByPage = (page) => {

12
frontend/src/pages/sys-admin/institutions/institutions.js
View File

@@ -64,7 +64,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -142,7 +141,7 @@ class Institutions extends Component {
loading: true,
errorMsg: '',
institutionList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isAddInstitutionDialogOpen: false,
@@ -151,7 +150,14 @@ class Institutions extends Component {
}
componentDidMount () {
this.getInstitutionsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getInstitutionsByPage(this.state.currentPage);
});
}
getInstitutionsByPage = (page) => {

10
frontend/src/pages/sys-admin/invitations/invitations.js
View File

@@ -82,7 +82,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -232,7 +231,14 @@ class Invitations extends Component {
}
componentDidMount () {
this.getItemsByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getItemsByPage(this.state.currentPage);
});
}
getItemsByPage = (page) => {

12
frontend/src/pages/sys-admin/links/share-links.js
View File

@@ -67,7 +67,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -130,7 +129,7 @@ class ShareLinks extends Component {
loading: true,
errorMsg: '',
shareLinkList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
};
@@ -138,7 +137,14 @@ class ShareLinks extends Component {
}
componentDidMount () {
this.getShareLinksByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getShareLinksByPage(this.state.currentPage);
});
}
getShareLinksByPage = (page) => {

14
frontend/src/pages/sys-admin/links/upload-links.js
View File

@@ -68,7 +68,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -133,15 +132,22 @@ class UploadLinks extends Component {
loading: true,
errorMsg: '',
uploadLinkList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
};
this.initPage = 1;
}
componentDidMount () {
this.getUploadLinksByPage(this.initPage);
componentDidMount() {
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getUploadLinksByPage(this.state.currentPage);
});
}
getUploadLinksByPage = (page) => {

12
frontend/src/pages/sys-admin/logs-page/file-access-logs.js
View File

@@ -69,7 +69,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -124,7 +123,7 @@ class FileAccessLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isExportExcelDialogOpen: false,
@@ -137,7 +136,14 @@ class FileAccessLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

12
frontend/src/pages/sys-admin/logs-page/file-update-logs.js
View File

@@ -67,7 +67,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -152,7 +151,7 @@ class FileUpdateLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isExportExcelDialogOpen: false,
@@ -165,7 +164,14 @@ class FileUpdateLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

12
frontend/src/pages/sys-admin/logs-page/login-logs.js
View File

@@ -67,7 +67,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -120,7 +119,7 @@ class LoginLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isExportExcelDialogOpen: false,
@@ -133,7 +132,14 @@ class LoginLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

16
frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
View File

@@ -47,9 +47,9 @@ class Content extends Component {
<th width="10%">{gettext('Share From')}</th>
<th width="10%">{gettext('Share To')}</th>
<th width="20%">{gettext('Actions')}</th>
<th width="10%">{gettext('Permission')}</th>
<th width="13%">{gettext('Permission')}</th>
<th width="20%">{gettext('Library')}</th>
<th width="15%">{gettext('Folder')}</th>
<th width="12%">{gettext('Folder')}</th>
<th width="15%">{gettext('Date')}</th>
</tr>
</thead>
@@ -69,7 +69,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -137,7 +136,7 @@ class SharePermissionLogs extends Component {
loading: true,
errorMsg: '',
logList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
isExportExcelDialogOpen: false,
@@ -150,7 +149,14 @@ class SharePermissionLogs extends Component {
}
componentDidMount () {
this.getLogsByPage(this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getLogsByPage(this.state.currentPage);
});
}
getLogsByPage = (page) => {

1
frontend/src/pages/sys-admin/orgs/orgs-content.js
View File

@@ -67,7 +67,6 @@ class Content extends Component {
currentPage={this.props.currentPage}
hasNextPage={this.props.hasNextPage}
curPerPage={this.props.curPerPage}
canResetPerPage={true}
resetPerPage={this.props.resetPerPage}
gotoPreviousPage={this.getPreviousPage}
gotoNextPage={this.getNextPage}

9
frontend/src/pages/sys-admin/orgs/orgs.js
View File

@@ -27,7 +27,14 @@ class Orgs extends Component {
}
componentDidMount() {
this.getItemsByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getItemsByPage(this.state.currentPage);
});
}
getItemsByPage = (page) => {

11
frontend/src/pages/sys-admin/repos/all-repos.js
View File

@@ -20,13 +20,20 @@ class AllRepos extends Component {
errorMsg: '',
repos: [],
pageInfo: {},
perPage: 100,
perPage: 25,
isCreateRepoDialogOpen: false
};
}
componentDidMount () {
this.getReposByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage = 1, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getReposByPage(this.state.currentPage);
});
}
toggleCreateRepoDialog = () => {

1
frontend/src/pages/sys-admin/repos/repos.js
View File

@@ -87,7 +87,6 @@ class Content extends Component {
gotoNextPage={this.getNextPageList}
currentPage={pageInfo.current_page}
hasNextPage={pageInfo.has_next_page}
canResetPerPage={true}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>

26
frontend/src/pages/sys-admin/repos/trash-repos.js
View File

@@ -44,7 +44,7 @@ class Content extends Component {
}
render() {
const { loading, errorMsg, items, pageInfo } = this.props;
const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
if (loading) {
return <Loading />;
} else if (errorMsg) {
@@ -88,7 +88,8 @@ class Content extends Component {
gotoNextPage={this.getNextPageList}
currentPage={pageInfo.current_page}
hasNextPage={pageInfo.has_next_page}
canResetPerPage={false}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>
}
</Fragment>
@@ -270,13 +271,20 @@ class TrashRepos extends Component {
errorMsg: '',
repos: [],
pageInfo: {},
perPage: 100,
perPage: 25,
isCleanTrashDialogOpen: false
};
}
componentDidMount () {
this.getReposByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage = 1, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getReposByPage(this.state.currentPage);
});
}
toggleCleanTrashDialog = () => {
@@ -299,6 +307,14 @@ class TrashRepos extends Component {
});
}
resetPerPage = (perPage) => {
this.setState({
perPage: perPage
}, () => {
this.getReposByPage(1);
});
}
onDeleteRepo = (targetRepo) => {
let repos = this.state.repos.filter(repo => {
return repo.id != targetRepo.id;
@@ -374,6 +390,8 @@ class TrashRepos extends Component {
onDeleteRepo={this.onDeleteRepo}
onRestoreRepo={this.onRestoreRepo}
getListByPage={this.getReposByPage}
resetPerPage={this.resetPerPage}
curPerPage={this.state.perPage}
/>
</div>
</div>

16
frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
View File

@@ -16,7 +16,7 @@ class TrafficOrganizationsTable extends React.Component {
super(props);
this.state = {
userTrafficList: [],
perPage: 100,
perPage: 25,
currentPage: 1,
hasNextPage: false,
month: moment().format('YYYYMM'),
@@ -29,15 +29,22 @@ class TrafficOrganizationsTable extends React.Component {
}
componentDidMount() {
this.onGenerateReports(this.initMonth, this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.onGenerateReports(this.initMonth, this.state.currentPage);
});
}
getPreviousPage = () => {
this.onGenerateReports(this.state.currentPage - 1);
this.onGenerateReports(this.state.month, this.state.currentPage - 1);
}
getNextPage = () => {
this.onGenerateReports(this.state.currentPage + 1);
this.onGenerateReports(this.state.month, this.state.currentPage + 1);
}
handleChange = (e) => {
@@ -128,7 +135,6 @@ class TrafficOrganizationsTable extends React.Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.resetPerPage}
/>

16
frontend/src/pages/sys-admin/statistic/traffic-user-table.js
View File

@@ -17,7 +17,7 @@ class TrafficOrganizationsTable extends React.Component {
this.state = {
userTrafficList: [],
hasNextPage: false,
perPage: 100,
perPage: 25,
currentPage: 1,
month: moment().format('YYYYMM'),
isLoading: false,
@@ -29,15 +29,22 @@ class TrafficOrganizationsTable extends React.Component {
}
componentDidMount() {
this.onGenerateReports(this.initMonth, this.initPage);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.onGenerateReports(this.initMonth, this.state.currentPage);
});
}
getPreviousPage = () => {
this.onGenerateReports(this.state.currentPage - 1);
this.onGenerateReports(this.state.month, this.state.currentPage - 1);
}
getNextPage = () => {
this.onGenerateReports(this.state.currentPage + 1);
this.onGenerateReports(this.state.month, this.state.currentPage + 1);
}
handleChange = (e) => {
@@ -131,7 +138,6 @@ class TrafficOrganizationsTable extends React.Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={perPage}
resetPerPage={this.resetPerPage}
/>

10
frontend/src/pages/sys-admin/users/ldap-users.js
View File

@@ -60,7 +60,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>
@@ -112,7 +111,14 @@ class Users extends Component {
}
componentDidMount () {
this.getUsersListByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getUsersListByPage(this.state.currentPage);
});
}
getUsersListByPage = (page) => {

1
frontend/src/pages/sys-admin/users/users-content.js
View File

@@ -125,7 +125,6 @@ class Content extends Component {
gotoNextPage={this.getNextPage}
currentPage={currentPage}
hasNextPage={hasNextPage}
canResetPerPage={true}
curPerPage={curPerPage}
resetPerPage={this.props.resetPerPage}
/>

9
frontend/src/pages/sys-admin/users/users.js
View File

@@ -45,7 +45,14 @@ class Users extends Component {
if (this.props.isAdmin) { // 'Admin' page
this.getUserList(); // no pagination
} else {
this.getUsersListByPage(1);
let urlParams = (new URL(window.location)).searchParams;
const { currentPage, perPage } = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.getUsersListByPage(this.state.currentPage);
});
}
}