added pagination for 'system admin - orgs' & improved paginator (#4260)

frontend/src/components/paginator.js

@@ -39,15 +39,18 @@ class Paginator extends Component {
           {this.props.hasNextPage &&
             <a href="#" onClick={this.goToNext} className="ml-4">{gettext('Next')}</a>
           }
-        </div>
-        {this.props.canResetPerPage &&
-          <div className="text-center">
-            {gettext('Per page:')}{' '}
-            <span className={`${curPerPage === 25 ? '' : 'a-simulate '} mr-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 '} mr-1`} onClick={() => {return this.resetPerPage(100);}}>100</span>
-          </div>
+          {(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>
       </Fragment>
     );
   }

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

@@ -5,6 +5,7 @@ import { Utils } from '../../../utils/utils';
 import { siteRoot, gettext } from '../../../utils/constants';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
 import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-user-role-editor';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
@@ -17,6 +18,14 @@ class Content extends Component {
     super(props);
   }
 
+  getPreviousPage = () => {
+    this.props.getListByPage(this.props.currentPage - 1);
+  }       
+            
+  getNextPage = () => {
+    this.props.getListByPage(this.props.currentPage + 1);
+  }
+
   render() {
     const { loading, errorMsg, items } = this.props;
     if (loading) {
@@ -53,6 +62,17 @@ class Content extends Component {
               })}
             </tbody>
           </table>
+          {this.props.currentPage &&
+          <Paginator
+            currentPage={this.props.currentPage}
+            hasNextPage={this.props.hasNextPage}
+            curPerPage={this.props.curPerPage}
+            canResetPerPage={true}
+            resetPerPage={this.props.resetPerPage}
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+          />
+          }
         </Fragment>
       );
       return items.length ? table : emptyTip; 

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

@@ -19,15 +19,25 @@ class Orgs extends Component {
       loading: true,
       errorMsg: '',
       orgList: [],
+      currentPage: 1,
+      perPage: 25,
+      hasNextPage: false,
       isAddOrgDialogOpen: false
     };
   }
 
-  componentDidMount () {
-    seafileAPI.sysAdminListOrgs().then((res) => {
+  componentDidMount() {
+    this.getItemsByPage(1);
+  }
+
+  getItemsByPage = (page) => {
+    const { perPage } = this.state;
+    seafileAPI.sysAdminListOrgs(page, perPage).then((res) => {
       this.setState({
         loading: false,
-        orgList: res.data.organizations
+        orgList: res.data.organizations,
+        currentPage: page,
+        hasNextPage: Utils.hasNextPage(page, perPage, res.data.total_count)
       });
     }).catch((error) => {
       if (error.response) {
@@ -52,6 +62,14 @@ class Orgs extends Component {
     });
   }
 
+  resetPerPage = (perPage) => {
+    this.setState({
+      perPage: perPage
+    }, () => {  
+      this.getItemsByPage(1);
+    });
+  }
+
   toggleAddOrgDialog = () => {
     this.setState({isAddOrgDialogOpen: !this.state.isAddOrgDialogOpen});
   }
@@ -127,6 +145,11 @@ class Orgs extends Component {
                 loading={this.state.loading}
                 errorMsg={this.state.errorMsg}
                 items={this.state.orgList}
+                currentPage={this.state.currentPage}
+                hasNextPage={this.state.hasNextPage}
+                curPerPage={this.state.perPage} 
+                resetPerPage={this.resetPerPage}
+                getListByPage={this.getItemsByPage}
                 updateRole={this.updateRole}
                 deleteOrg={this.deleteOrg}
               />

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

@@ -27,7 +27,6 @@ class Users extends Component {
       loading: true,
       errorMsg: '',
       userList: [],
-      totalItemCount: 0,
       hasNextPage: false,
       currentPage: 1,
       perPage: 25,