Merge pull request #1687 from weseek/feat/1222-user-management-control

Feat/1222 user management control

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

@@ -20,6 +20,7 @@ class UserManagement extends React.Component {
   constructor(props) {
     super();
     this.handlePage = this.handlePage.bind(this);
+    this.handleChangeSearchText = this.handleChangeSearchText.bind(this);
   }
 
   componentWillMount() {
@@ -47,6 +48,9 @@ class UserManagement extends React.Component {
     return true;
   }
 
+  handleChangeSearchText(event) {
+    this.props.adminUsersContainer.handleChangeSearchText(event.target.value);
+  }
 
   render() {
     const { t, adminUsersContainer } = this.props;
@@ -62,6 +66,12 @@ class UserManagement extends React.Component {
       </div>
     );
 
+    const clearButton = (
+      adminUsersContainer.state.searchText.length > 0
+        ? <i className="icon-close search-clear"></i>
+        : ''
+    );
+
     return (
       <Fragment>
         {adminUsersContainer.state.userForPasswordResetModal && <PasswordResetModal />}
@@ -80,7 +90,10 @@ class UserManagement extends React.Component {
 
             <label className="col-md-3 mb-0 my-3">
               <i className="icon-magnifier mr-1"></i>
-              <input type="text" name="name" />
+              <span className="search-typeahead">
+                <input type="text" name="name" onChange={this.handleChangeSearchText} />
+                { clearButton }
+              </span>
             </label>
           </div>
 

src/client/js/services/AdminUsersContainer.js

@@ -25,6 +25,7 @@ export default class AdminUsersContainer extends Container {
       activePage: 1,
       pagingLimit: Infinity,
       selectedStatusList: new Set(),
+      searchText: '',
     };
 
     this.showPasswordResetModal = this.showPasswordResetModal.bind(this);
@@ -77,6 +78,10 @@ export default class AdminUsersContainer extends Container {
     this.setState({ selectedStatusList });
   }
 
+  handleChangeSearchText(searchText) {
+    this.setState({ searchText });
+  }
+
   /**
    * syncUsers of selectedPage
    * @memberOf AdminUsersContainer