Activities improvements (#5758)

* [activities] improvement

* [activities] improved the user filter

frontend/src/pages/dashboard/user-selector.js

@@ -9,6 +9,7 @@ const propTypes = {
   availableUsers: PropTypes.array.isRequired,
   currentSelectedUsers: PropTypes.array.isRequired,
   setTargetUsers: PropTypes.func.isRequired,
+  toggleSelectUser: PropTypes.func.isRequired
 };
 
 class UserSelector extends Component {
@@ -17,14 +18,7 @@ class UserSelector extends Component {
     super(props);
     this.state = {
       isPopoverOpen: false,
-      availableUsers: props.availableUsers.map(item => {
-        item.isSelected = false;
-        return item;
-      }),
-      filteredAvailableUsers: props.availableUsers.map(item => {
-        item.isSelected = false;
-        return item;
-      })
+      query: ''
     };
   }
 
@@ -41,14 +35,14 @@ class UserSelector extends Component {
     if (isPopoverOpen && !this.userSelector.contains(e.target)) {
       this.togglePopover();
     }
-  }
+  };
 
   togglePopover = () => {
     this.setState({
       isPopoverOpen: !this.state.isPopoverOpen
     }, () => {
       if (!this.state.isPopoverOpen) {
-        const { availableUsers } = this.state;
+        const { availableUsers } = this.props;
         const selectedUsers = availableUsers.filter(item => item.isSelected);
         this.props.setTargetUsers(selectedUsers);
       }
@@ -58,36 +52,24 @@ class UserSelector extends Component {
   onToggleClick = (e) => {
     e.stopPropagation();
     this.togglePopover();
-  }
+  };
 
-  searchUsers = (e) => {
-    const { availableUsers } = this.state;
-    const query = e.target.value.trim();
-    const filteredAvailableUsers = availableUsers.filter(item => item.email.indexOf(query) != -1);
+  onQueryChange = (e) => {
     this.setState({
-      filteredAvailableUsers: filteredAvailableUsers
+      query: e.target.value
     });
   };
 
   toggleSelectItem = (e, targetItem) => {
     e.stopPropagation();
-    const { availableUsers } = this.state;
-    const handleItem = (item) => {
-      if (item.email == targetItem.email) {
-        item.isSelected = !targetItem.isSelected;
-      }
-      return item;
-    };
-
-    this.setState({
-      availableUsers: availableUsers.map(handleItem)
-    });
+    this.props.toggleSelectUser(targetItem);
   };
 
   render() {
-    const { isPopoverOpen, availableUsers, filteredAvailableUsers } = this.state;
-    const { currentSelectedUsers } = this.props;
+    const { isPopoverOpen, query } = this.state;
+    const { currentSelectedUsers, availableUsers } = this.props;
     const selectedUsers = availableUsers.filter(item => item.isSelected);
+    const filteredAvailableUsers = query.trim() ? availableUsers.filter(item => item.email.indexOf(query.trim()) != -1) : availableUsers;
     return (
       <div className="mt-4 position-relative">
         <span className="cur-activity-modifiers d-inline-block p-2 rounded" onClick={this.onToggleClick}>
@@ -99,38 +81,38 @@ class UserSelector extends Component {
         </span>
         {isPopoverOpen && (
           <div className="position-absolute activity-modifier-selector-container rounded shadow" ref={ref => this.userSelector = ref}>
-            <ul className="activity-selected-modifiers px-3 py-2 list-unstyled">
+            <ul className="activity-selected-modifiers px-3 py-1 list-unstyled">
               {selectedUsers.map((item, index) => {
                 return (
                   <li key={index} className="activity-selected-modifier">
                     <img src={item.avatar_url} className="avatar w-5 h-5" alt="" />
-                    <span className="ml-2">{item.name}</span>
+                    <span className="activity-user-name ml-2">{item.name}</span>
                     <i className="sf2-icon-close unselect-activity-user ml-2" onClick={(e) => {this.toggleSelectItem(e, item);}}></i>
                   </li>
                 );
               })}
             </ul>
-            <div className="p-3">
+            <div className="px-3 pt-3">
               <Input
                 type="text"
                 placeholder={gettext('Search users...')}
-                className="mb-1"
-                onKeyDown={this.searchUsers}
+                value={query}
+                onChange={this.onQueryChange}
               />
-              <ul className="activity-user-list list-unstyled">
-                {filteredAvailableUsers.map((item, index) => {
-                  return (
-                    <li key={index} className="activity-user-item h-6 p-1 rounded d-flex justify-content-between align-items-center" onClick={(e) => {this.toggleSelectItem(e, item);}}>
-                      <div>
-                        <img src={item.avatar_url} className="avatar w-5 h-5" alt="" />
-                        <span className="ml-2">{item.name}</span>
-                      </div>
-                      {item.isSelected && <i className="sf2-icon-tick text-gray"></i>}
-                    </li>
-                  );
-                })}
-              </ul>
             </div>
+            <ul className="activity-user-list list-unstyled p-3 o-auto">
+              {filteredAvailableUsers.map((item, index) => {
+                return (
+                  <li key={index} className="activity-user-item h-6 p-1 rounded d-flex justify-content-between align-items-center" onClick={(e) => {this.toggleSelectItem(e, item);}}>
+                    <div>
+                      <img src={item.avatar_url} className="avatar w-5 h-5" alt="" />
+                      <span className="activity-user-name ml-2">{item.name}</span>
+                    </div>
+                    {item.isSelected && <i className="sf2-icon-tick text-gray"></i>}
+                  </li>
+                );
+              })}
+            </ul>
           </div>
         )}
       </div>