Add Pagination And Setting Button

src/client/js/components/Admin/Users/UserTable.jsx

@@ -7,6 +7,32 @@ import AppContainer from '../../../services/AppContainer';
 
 class UserTable extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      users: this.props.users,
+    };
+
+    this.onDelete = this.onDelete.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      users: nextProps.users,
+    });
+  }
+
+  onDelete(e) {
+    const { target } = e;
+    const userId = target.getAttribute('data-user-id');
+    const user = this.state.users.find((user) => {
+      return user._id === userId;
+    });
+
+    this.props.onDelete(user);
+  }
+
 
   render() {
     const { t } = this.props;
@@ -25,9 +51,23 @@ class UserTable extends React.Component {
               <th>{ t('Email') }</th>
               <th width="100px">{ t('Created') }</th>
               <th width="150px">{ t('Last_Login') }</th>
-              <th width="70px"></th>
+              <th width="70px">
+                <div className="btn-group admin-user-menu">
+                  <button type="button" className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
+                    <i className="icon-settings"></i> <span className="caret"></span>
+                  </button>
+                </div>
+              </th>
             </tr>
           </thead>
+          <tbody>
+            {this.state.users.map((user) => {
+              return (
+                <tr key={user._id}>
+                </tr>
+              );
+            })}
+          </tbody>
         </table>
       </Fragment>
     );
@@ -42,6 +82,9 @@ const UserTableWrapper = (props) => {
 UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  users: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDelete: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserTableWrapper);

src/client/js/components/Admin/Users/Users.jsx

@@ -2,17 +2,57 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import PaginationWrapper from '../../PaginationWrapper';
 import InviteUserControl from './InviteUserControl';
 import UserTable from './UserTable';
 
-import AppContainer from '../../../services/AppContainer';
 import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 class UserPage extends React.Component {
 
   constructor(props) {
     super();
 
+    this.state = {
+      users: [],
+      activePage: 1,
+      totalUsers: 0,
+      pagingLimit: Infinity,
+    };
+
+  }
+
+  async syncUsersAndRelations() {
+    let users = [];
+    let userRelations = {};
+    let totalUsers = 0;
+    let pagingLimit = Infinity;
+
+    try {
+      const params = { page: this.state.activePage };
+      const responses = await Promise.all([
+        this.props.appContainer.apiv3.get('/user-groups', params),
+        this.props.appContainer.apiv3.get('/user-group-relations', params),
+      ]);
+
+      const [usersRes, userRelationsRes] = responses;
+      users = usersRes.data.users;
+      totalUsers = usersRes.data.totalUsers;
+      pagingLimit = usersRes.data.pagingLimit;
+      userRelations = userRelationsRes.data.userRelations;
+
+      this.setState({
+        users,
+        userRelations,
+        totalUsers,
+        pagingLimit,
+      });
+    }
+    catch (err) {
+      toastError(err);
+    }
   }
 
   render() {
@@ -27,7 +67,18 @@ class UserPage extends React.Component {
             { t('user_management.external_account') }
           </a>
         </p>
-        <UserTable />
+        <UserTable
+          users={this.state.users}
+          onDelete={this.showDeleteModal}
+          userRelations={this.state.userRelations}
+        />
+        <PaginationWrapper
+          activePage={this.state.activePage}
+          changePage={this.handlePage}
+          totalItemsCount={this.state.totalUsers}
+          pagingLimit={this.state.pagingLimit}
+        >
+        </PaginationWrapper>
       </Fragment>
     );
   }