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

* [system admin] improved pagination for all

* [paginator] show 'current page'

* redesigned paginator

* [pagination] cleanup

frontend/src/components/paginator.js

@@ -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.isRequired,
-  resetPerPage: PropTypes.func,
+  curPerPage: PropTypes.number.isRequired
-  curPerPage: PropTypes.number,
 };
 
 class Paginator extends Component {
 
-  resetPerPage = (perPage) => {
+  resetPerPage = (e) => {
+    const perPage = e.target.value;
+    this.updateURL(1, perPage);
     this.props.resetPerPage(perPage);
   }
 
-  goToPrevious = (e) => {
+  goToPrevious = () => {
-    e.preventDefault();
+    const { currentPage, curPerPage } = this.props;
+    this.updateURL(currentPage - 1, curPerPage);
     this.props.gotoPreviousPage();
   } 
 
-  goToNext = (e) => {
+  goToNext = () => {
-    e.preventDefault();
+    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 paginator d-flex align-items-center justify-content-center">
-        <div className="my-6 text-center">
+        <button
-          {this.props.currentPage != 1 &&
+          className="btn btn-secondary"
-            <a href="#" onClick={this.goToPrevious}>{gettext('Previous')}</a>
+          disabled={currentPage == 1}
-          }
+          onClick={this.goToPrevious}
-          {this.props.hasNextPage &&
+        >
-            <a href="#" onClick={this.goToNext} className="ml-4">{gettext('Next')}</a>
+          <span className="fas fa-chevron-left"></span>
-          }
+        </button>
-          {(this.props.currentPage != 1 || this.props.hasNextPage) &&
+        <span className="btn btn-primary mx-4">{currentPage}</span>
-            <span className="d-inline-block mx-2">|</span>
+        <button
-          }
+          className="btn btn-secondary"
-          {this.props.canResetPerPage &&
+          disabled={!this.props.hasNextPage}
-          <Fragment>
+          onClick={this.goToNext}
-            {gettext('Per page:')}
+        >
-            <span className={`${curPerPage === 25 ? '' : 'a-simulate '} mx-1`} onClick={() => {return this.resetPerPage(25);}}>25</span>
+          <span className="fas fa-chevron-right"></span>
-            <span className={`${curPerPage === 50 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(50);}}>50</span>
+        </button>
-            <span className={`${curPerPage === 100 ? '' : 'a-simulate '}`} onClick={() => {return this.resetPerPage(100);}}>100</span>
+
-          </Fragment>
+        <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>
     );
   }
 }

frontend/src/css/pagination.css

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

frontend/src/pages/sys-admin/admin-logs/login-logs.js

@@ -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) => {

frontend/src/pages/sys-admin/admin-logs/operation-logs.js

@@ -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) => {

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

@@ -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>

frontend/src/pages/sys-admin/groups/groups-content.js

@@ -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>

frontend/src/pages/sys-admin/groups/groups.js

@@ -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>

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

@@ -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) => {

frontend/src/pages/sys-admin/institutions/institutions.js

@@ -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) => {

frontend/src/pages/sys-admin/invitations/invitations.js

@@ -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) => {

frontend/src/pages/sys-admin/links/share-links.js

@@ -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) => {

frontend/src/pages/sys-admin/links/upload-links.js

@@ -68,7 +68,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -133,7 +132,7 @@ class UploadLinks extends Component {
       loading: true,
       errorMsg: '',
       uploadLinkList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
     };
@@ -141,7 +140,14 @@ class UploadLinks extends Component {
   }
 
   componentDidMount() {
-    this.getUploadLinksByPage(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.getUploadLinksByPage(this.state.currentPage);
+    });
   }
 
   getUploadLinksByPage = (page) => {

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

@@ -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) => {

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

@@ -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) => {

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

@@ -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) => {

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

@@ -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) => {

frontend/src/pages/sys-admin/orgs/orgs-content.js

@@ -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}

frontend/src/pages/sys-admin/orgs/orgs.js

@@ -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) => {

frontend/src/pages/sys-admin/repos/all-repos.js

@@ -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 = () => {

frontend/src/pages/sys-admin/repos/repos.js

@@ -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}
           />

frontend/src/pages/sys-admin/repos/trash-repos.js

@@ -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>

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

@@ -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}
         />

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

@@ -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}
         />

frontend/src/pages/sys-admin/users/ldap-users.js

@@ -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) => {

frontend/src/pages/sys-admin/users/users-content.js

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

frontend/src/pages/sys-admin/users/users.js

@@ -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);
+      });
     }
   }