added sort function for status in adminUsersContainer

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

@@ -83,7 +83,17 @@ class UserTable extends React.Component {
           <thead>
             <tr>
               <th width="100px">#</th>
-              <th>{t('status')}</th>
+              <th>
+                <div className="d-flex justify-content-around align-items-center">
+                  {t('status')}
+                  <div className="d-flex flex-column text-center">
+                    <Fragment>
+                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('status')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('status')}></a>
+                    </Fragment>
+                  </div>
+                </div>
+              </th>
               <th><code>username</code></th>
               <th>{t('Name')}</th>
               <th>{t('Email')}</th>

src/client/js/services/AdminUsersContainer.js

@@ -17,8 +17,8 @@ export default class AdminUsersContainer extends Container {
 
     this.state = {
       users: [],
-      sort: 'status',
-      sortOrder: 'asc',
+      sort: 'status', // 何をソートするか
+      sortOrder: 'asc', // 昇順か降順か
       isPasswordResetModalShown: false,
       isUserInviteModalShown: false,
       userForPasswordResetModal: null,
@@ -46,6 +46,7 @@ export default class AdminUsersContainer extends Container {
     this.setState({ notifyComment });
   }
 
+  // status
   isSelected(statusType) {
     return this.state.selectedStatusList.has(statusType);
   }
@@ -86,6 +87,7 @@ export default class AdminUsersContainer extends Container {
     this.retrieveUsersByPagingNum(1);
   }
 
+  // Input Serch Text
   handleChangeSearchText(searchText) {
     this.setState({ searchText });
     this.retrieveUsersByPagingNum(1);
@@ -95,6 +97,19 @@ export default class AdminUsersContainer extends Container {
     this.setState({ searchText: '' });
   }
 
+  // sorting
+  onClickSortAsc(sort) {
+    this.setState({ sort });
+    this.setState({ sortOrder: 'asc' });
+    this.retrieveUsersByPagingNum(1);
+  }
+
+  onClickSortDesc(sort) {
+    this.setState({ sort });
+    this.setState({ sortOrder: 'desc' });
+    this.retrieveUsersByPagingNum(1);
+  }
+
   /**
    * syncUsers of selectedPage
    * @memberOf AdminUsersContainer