Activities improvements (#5758)

* [activities] improvement

* [activities] improved the user filter

frontend/src/css/files-activities.css

@@ -58,6 +58,7 @@
 
 .activity-user-list {
   min-height: 4rem;
+  max-height: 200px;
 }
 
 .activity-user-item {
@@ -67,3 +68,7 @@
 .activity-user-item:hover {
   background: #f5f5f5;
 }
+
+.activity-user-name {
+  font-size: 14px;
+}

frontend/src/pages/dashboard/files-activities.js

@@ -51,7 +51,8 @@ class FilesActivities extends Component {
           availableUsers.push({
             email: item.author_email,
             name: item.author_name,
-            avatar_url: item.avatar_url
+            avatar_url: item.avatar_url,
+            isSelected: false
           });
         }
       });
@@ -146,7 +147,8 @@ class FilesActivities extends Component {
           availableUsers.push({
             email: item.author_email,
             name: item.author_name,
-            avatar_url: item.avatar_url
+            avatar_url: item.avatar_url,
+            isSelected: false
           });
         }
       });
@@ -200,6 +202,18 @@ class FilesActivities extends Component {
     });
   };
 
+  toggleSelectUser = (user) => {
+    const { availableUsers } = this.state;
+    this.setState({
+      availableUsers: availableUsers.map(item => {
+        if (item.email == user.email) {
+          item.isSelected = !user.isSelected;
+        }
+        return item;
+      })
+    });
+  };
+
   handleScroll = (event) => {
     if (!this.state.isLoadingMore && this.state.hasMore) {
       const clientHeight = event.target.clientHeight;
@@ -242,6 +256,7 @@ class FilesActivities extends Component {
                     availableUsers={availableUsers}
                     currentSelectedUsers={targetUsers}
                     setTargetUsers={this.setTargetUsers}
+                    toggleSelectUser={this.toggleSelectUser}
                   />
                 )}
                 <FileActivitiesContent items={this.state.items} isLoadingMore={this.state.isLoadingMore} />

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 => {
+      query: ''
-        item.isSelected = false;
-        return item;
-      }),
-      filteredAvailableUsers: props.availableUsers.map(item => {
-        item.isSelected = false;
-        return item;
-      })
     };
   }
 
@@ -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) => {
+  onQueryChange = (e) => {
-    const { availableUsers } = this.state;
-    const query = e.target.value.trim();
-    const filteredAvailableUsers = availableUsers.filter(item => item.email.indexOf(query) != -1);
     this.setState({
-      filteredAvailableUsers: filteredAvailableUsers
+      query: e.target.value
     });
   };
 
   toggleSelectItem = (e, targetItem) => {
     e.stopPropagation();
-    const { availableUsers } = this.state;
+    this.props.toggleSelectUser(targetItem);
-    const handleItem = (item) => {
-      if (item.email == targetItem.email) {
-        item.isSelected = !targetItem.isSelected;
-      }
-      return item;
-    };
-
-    this.setState({
-      availableUsers: availableUsers.map(handleItem)
-    });
   };
 
   render() {
-    const { isPopoverOpen, availableUsers, filteredAvailableUsers } = this.state;
+    const { isPopoverOpen, query } = this.state;
-    const { currentSelectedUsers } = this.props;
+    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,31 +81,32 @@ 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"
+                value={query}
-                onKeyDown={this.searchUsers}
+                onChange={this.onQueryChange}
               />
-              <ul className="activity-user-list list-unstyled">
+            </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="ml-2">{item.name}</span>
+                      <span className="activity-user-name ml-2">{item.name}</span>
                     </div>
                     {item.isSelected && <i className="sf2-icon-tick text-gray"></i>}
                   </li>
@@ -131,7 +114,6 @@ class UserSelector extends Component {
               })}
             </ul>
           </div>
-          </div>
         )}
       </div>
     );