Revert "Revert "Merge branch 'imprv/user-status-filtering-front-of-sort' into feat/user-management""

This reverts commit e598df2e23bcc89670cb5216daf897065783b8c3.

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

@@ -19,9 +19,15 @@ class UserTable extends React.Component {
 
     };
 
+    // this.onClickColumnSort = this.onClickColumnSort.bind(this);
     this.getUserStatusLabel = this.getUserStatusLabel.bind(this);
   }
 
+
+  onClickColumnSort(sortName) {
+    console.log(sortName);
+  }
+
   /**
    * return status label element by `userStatus`
    * @param {string} userStatus
@@ -83,11 +89,31 @@ class UserTable extends React.Component {
           <thead>
             <tr>
               <th width="100px">#</th>
-              <th>{t('status')}</th>
-              <th><code>username</code></th>
-              <th>{t('Name')}</th>
-              <th>{t('Email')}</th>
-              <th width="100px">{t('Created')}</th>
+              <th>
+                {t('status')}
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('StatusAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('StatusDesc')}></a>
+              </th>
+              <th>
+                <code>username</code>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('UserNameAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('UserNameDesc')}></a>
+              </th>
+              <th>
+                {t('Name')}
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('NameAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('NameDesc')}></a>
+              </th>
+              <th>
+                {t('Email')}
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('EmailAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('EmailDesc')}></a>
+              </th>
+              <th width="100px">
+                {t('Created')}
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('CreatedAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('CreatedDesc')}></a>
+              </th>
               <th width="150px">{t('Last_Login')}</th>
               <th width="70px"></th>
             </tr>

src/client/js/services/AdminUsersContainer.js

@@ -18,6 +18,8 @@ export default class AdminUsersContainer extends Container {
 
     this.state = {
       users: [],
+      descColumns: [],
+      statusList: [],
       isPasswordResetModalShown: false,
       isUserInviteModalShown: false,
       userForPasswordResetModal: null,

src/server/routes/apiv3/users.js

@@ -140,24 +140,36 @@ module.exports = (crowi) => {
 
   router.get('/search-user-status/', validator.statusList, ApiV3FormValidator, async(req, res) => {
 
-    // status
     const page = parseInt(req.query.page) || 1;
+    // status
     const { statusList } = req.body;
     const statusNoList = statusList.map(element => statusNo[element]);
     // Search from input
-    const inputWord = req.body.inputWord || 1;
+    const inputWord = req.body.inputWord || '';
     const searchWord = new RegExp(`${inputWord}`);
+    const orColumns = ['name', 'username', 'email'];
+    const orOutput = {};
+    orColumns.forEach((element) => {
+      orOutput[element] = { $in: searchWord };
+    });
+
+    // Sort
+    const { descColumns } = req.body;
+    const sortOutput = {};
+    descColumns.forEach((element) => {
+      sortOutput[element] = -1;
+    });
 
     try {
       const paginateResult = await User.paginate(
         {
           $and: [
             { status: { $in: statusNoList } },
-            { $or: [{ name: { $in: searchWord } }, { username: { $in: searchWord } }, { email: { $in: searchWord } }] },
+            { $or: [orOutput] },
           ],
         },
         {
-          sort: { status: 1, username: 1, createdAt: 1 },
+          sort: sortOutput,
           page,
           limit: PAGE_ITEMS,
         },