['Activities'] redesigned it: offer 2 nav tabs 'All Activities' & 'My Activities'; offer 'Modified by' user filter (#5747)

2025-09-20 19:08:21 +00:00 · 2023-11-09 12:25:22 +08:00
parent 6d9ecc6fa9
commit d12a619e5f
9 changed files with 604 additions and 298 deletions
--- a/frontend/src/pages/dashboard/user-selector.js
+++ b/frontend/src/pages/dashboard/user-selector.js
@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+import '../../css/files-activities.css';
+
+const propTypes = {
+  availableUsers: PropTypes.array.isRequired,
+  currentSelectedUsers: PropTypes.array.isRequired,
+  setTargetUsers: PropTypes.func.isRequired,
+};
+
+class UserSelector extends Component {
+
+  constructor(props) {
+    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;
+      })
+    };
+  }
+
+  togglePopover = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen
+    }, () => {
+      if (!this.state.isPopoverOpen) {
+        const { availableUsers } = this.state;
+        const selectedUsers = availableUsers.filter(item => item.isSelected);
+        this.props.setTargetUsers(selectedUsers);
+      }
+    });
+  };
+
+  searchUsers = (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
+    });
+  };
+
+  toggleSelectItem = (targetItem) => {
+    const { availableUsers } = this.state;
+    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 { currentSelectedUsers } = this.props;
+    const selectedUsers = availableUsers.filter(item => item.isSelected);
+    return (
+      <div className="mt-4 position-relative">
+        <span className="d-inline-block p-2 activity-modifier rounded" onClick={this.togglePopover}>
+          {gettext('Modified by:')}
+          {currentSelectedUsers.length > 0 && (
+            <span className="d-inline-block ml-1">{currentSelectedUsers.map(item => item.name).join(', ')}</span>
+          )}
+          <i className="fas fa-caret-down ml-2 toggle-icon"></i>
+        </span>
+        {isPopoverOpen && (
+          <div className="position-absolute activity-modifier-selector-container rounded shadow">
+            <ul className="activity-selected-modifiers px-3 py-2 list-unstyled d-flex">
+              {selectedUsers.map((item, index) => {
+                return (
+                  <li key={index} className="activity-selected-modifier">
+                    <img src={item.avatar_url} className="select-module select-module-icon avatar" alt="" />
+                    <span className='select-module select-module-name'>{item.name}</span>
+                    <i className="sf2-icon-close unselect-activity-user ml-2" onClick={this.toggleSelectItem.bind(this, item)}></i>
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="p-3">
+              <Input
+                type="text"
+                placeholder={gettext('Search users...')}
+                className="mb-1"
+                onKeyDown={this.searchUsers}
+              />
+              <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={this.toggleSelectItem.bind(this, item)}>
+                      <div>
+                        <img src={item.avatar_url} className="select-module select-module-icon avatar" alt="" />
+                        <span className='select-module select-module-name'>{item.name}</span>
+                      </div>
+                      {item.isSelected && <i className="sf2-icon-tick text-gray"></i>}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+UserSelector.propTypes = propTypes;
+
+export default UserSelector;