Merged branch 'feat/user-management' into feat/1257-label-click

resolved conflicts

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,10 +90,12 @@ class UserManagement extends React.Component {
           <div className="d-flex justify-content-start align-items-center my-2">
             <div>
               <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>
             </div>
 
-            {/* To do: when a label is clicked, the check button is checked */}
             <div className="mx-5">
               <input
                 type="checkbox"
@@ -130,6 +142,12 @@ class UserManagement extends React.Component {
               />
               <label htmlFor="c5" className="label label-info">Invited</label>
             </div>
+
+            <div>
+              <button type="button" className="btn btn-default btn-outline btn-sm">
+              Reset
+              </button>
+            </div>
           </div>
         </div>
 

src/client/js/services/AdminUsersContainer.js

@@ -25,6 +25,7 @@ export default class AdminUsersContainer extends Container {
       activePage: 1,
       pagingLimit: Infinity,
       selectedStatusList: new Set(['All']),
+      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