05 current department support more operations

frontend/src/pages/sys-admin/departments-v2/departments-node-dropdown-menu.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownItem, DropdownMenu } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
+function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers, toggleAddDepartment, toggleAddLibrary }) {
+  return (
+    <DropdownMenu
+      right={true}
+      modifiers={{ preventOverflow: { boundariesElement: document.body } }}
+      positionFixed={true}
+    >
+      <DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
+        {gettext('Add sub-department')}
+      </DropdownItem>
+      <DropdownItem key={`${node.id}-add-repo`} onClick={() => toggleAddLibrary(node)}>
+        {gettext('Add Library')}
+      </DropdownItem>
+      <DropdownItem key={`${node.id}-add-members`} onClick={() => toggleAddMembers(node)}>
+        {gettext('Add members')}
+      </DropdownItem>
+      <DropdownItem key={`${node.id}-rename`} onClick={() => toggleRename(node)}>
+        {gettext('Rename')}
+      </DropdownItem>
+      <DropdownItem key={`${node.id}-delete`} onClick={() => toggleDelete(node)}>
+        {gettext('Delete')}
+      </DropdownItem>
+      <DropdownItem key={`${node.id}-id`} disabled={true}>
+        {`${gettext('Department ID')} : ${node.id}`}
+      </DropdownItem>
+    </DropdownMenu>
+  );
+}
+
+DepartmentNodeMenu.propTypes = {
+  node: PropTypes.object.isRequired,
+  toggleDelete: PropTypes.func.isRequired,
+  toggleRename: PropTypes.func.isRequired,
+  toggleAddMembers: PropTypes.func.isRequired,
+  toggleAddDepartment: PropTypes.func.isRequired,
+  toggleAddLibrary: PropTypes.func.isRequired,
+};
+
+export default DepartmentNodeMenu;

frontend/src/pages/sys-admin/departments-v2/departments-v2-members-list.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Table } from 'reactstrap';
+import { Table, Dropdown, DropdownToggle } from 'reactstrap';
 import Loading from '../../../components/loading';
 import EmptyTip from '../../../components/empty-tip';
 import { gettext } from '../../../utils/constants';
@@ -8,6 +8,7 @@ import DepartmentsV2MembersItem from './departments-v2-members-item';
 import RepoItem from '../departments/repo-item';
 import ModalPortal from '../../../components/modal-portal';
 import DeleteRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog';
+import DepartmentNodeMenu from './departments-node-dropdown-menu';
 
 const propTypes = {
   rootNodes: PropTypes.array,
@@ -32,6 +33,7 @@ class DepartmentsV2MembersList extends React.Component {
       repos: [],
       deletedRepo: {},
       showDeleteRepoDialog: false,
+      dropdownOpen: false,
     };
   }
 
@@ -75,20 +77,20 @@ class DepartmentsV2MembersList extends React.Component {
     this.setState({ isItemFreezed: !this.state.isItemFreezed });
   };
 
-  getDepartmentName = () => {
+  getCurrentDepartment = () => {
     const { rootNodes, checkedDepartmentId } = this.props;
-    if (!rootNodes) return '';
+    if (!rootNodes) return {};
-    let name = '';
+    let currentDepartment = {};
     let arr = [...rootNodes];
-    while (!name && arr.length > 0) {
+    while (!currentDepartment.id && arr.length > 0) {
       let curr = arr.shift();
       if (curr.id === checkedDepartmentId) {
-        name = curr.name;
+        currentDepartment = curr;
       } else if (curr.children && curr.children.length > 0) {
         arr.push(...curr.children);
       }
     }
-    return name;
+    return currentDepartment;
   };
 
   sortByName = (e) => {
@@ -117,16 +119,47 @@ class DepartmentsV2MembersList extends React.Component {
     });
   };
 
+  dropdownToggle = (e) => {
+    e.stopPropagation();
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
+  };
+
   render() {
     const { activeNav, repos } = this.state;
     const { membersList, isMembersListLoading, sortBy, sortOrder } = this.props;
     const sortByName = sortBy === 'name';
     const sortByRole = sortBy === 'role';
     const sortIcon = <span className={`sort-dirent sf3-font sf3-font-down ${sortOrder === 'asc' ? 'rotate-180' : ''}`}></span>;
+    const currentDepartment = this.getCurrentDepartment();
 
     return (
       <div className="department-content-main">
-        <div className="department-content-main-name">{this.getDepartmentName()}</div>
+        <div className="department-content-main-name">
+          {currentDepartment.name}
+          <Dropdown
+            isOpen={this.state.dropdownOpen}
+            toggle={(e) => this.dropdownToggle(e)}
+            direction="down"
+            className="department-dropdown-menu"
+          >
+            <DropdownToggle
+              tag='span'
+              role="button"
+              className='sf3-font-down sf3-font ml-1 sf-dropdown-toggle'
+              title={gettext('More operations')}
+              aria-label={gettext('More operations')}
+              data-toggle="dropdown"
+            />
+            <DepartmentNodeMenu
+              node={currentDepartment}
+              toggleAddDepartment={this.props.toggleAddDepartment}
+              toggleAddLibrary={this.props.toggleAddLibrary}
+              toggleAddMembers={this.props.toggleAddMembers}
+              toggleRename={this.props.toggleRename}
+              toggleDelete={this.props.toggleDelete}
+            />
+          </Dropdown>
+        </div>
 
         <div className="cur-view-path tab-nav-container">
           <ul className="nav">

frontend/src/pages/sys-admin/departments-v2/departments-v2-tree-node.js

@@ -1,8 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { Dropdown, DropdownToggle } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import DepartmentNodeMenu from './departments-node-dropdown-menu';
 
 const departmentsV2TreeNodePropTypes = {
   node: PropTypes.object,
@@ -105,22 +106,6 @@ class DepartmentsV2TreeNode extends Component {
     }
   };
 
-  toggleAddDepartment = (node) => {
-    this.props.toggleAddDepartment(node);
-  };
-
-  toggleAddMembers = (node) => {
-    this.props.toggleAddMembers(node);
-  };
-
-  toggleRename = (node) => {
-    this.props.toggleRename(node);
-  };
-
-  toggleDelete = (node) => {
-    this.props.toggleDelete(node);
-  };
-
   render() {
     const { node, checkedDepartmentId } = this.props;
     const { isChildrenShow, dropdownOpen, active } = this.state;
@@ -144,7 +129,7 @@ class DepartmentsV2TreeNode extends Component {
             <span style={{ width: 24 }}></span>
           }
           <span className="departments-v2-tree-node-text text-truncate">{node.name}</span>
-          {active && node.id !== 'other_users' &&
+          {active &&
             <Dropdown
               isOpen={dropdownOpen}
               toggle={(e) => this.dropdownToggle(e)}
@@ -161,52 +146,14 @@ class DepartmentsV2TreeNode extends Component {
               >
                 <i className="sf3-font sf3-font-more mr-1"></i>
               </DropdownToggle>
-              <DropdownMenu
+              <DepartmentNodeMenu
-                right={true}
+                node={node}
-                modifiers={{ preventOverflow: { boundariesElement: document.body } }}
+                toggleAddDepartment={this.props.toggleAddDepartment}
-                positionFixed={true}
+                toggleAddLibrary={this.props.toggleAddLibrary}
-              >
+                toggleAddMembers={this.props.toggleAddMembers}
-                <DropdownItem
+                toggleRename={this.props.toggleRename}
-                  key={`${node.id}-add-department`}
+                toggleDelete={this.props.toggleDelete}
-                  onClick={this.toggleAddDepartment.bind(this, node)}
+              />
-                >
-                  {gettext('Add sub-department')}
-                </DropdownItem>
-                <DropdownItem
-                  key={`${node.id}-add-repo`}
-                  onClick={this.props.toggleAddLibrary.bind(this, node)}
-                >
-                  {gettext('Add Library')}
-                </DropdownItem>
-                {node.id !== -1 && (
-                  <Fragment>
-                    <DropdownItem
-                      key={`${node.id}-add-members`}
-                      onClick={this.toggleAddMembers.bind(this, node)}
-                    >
-                      {gettext('Add members')}
-                    </DropdownItem>
-                    <DropdownItem
-                      key={`${node.id}-rename`}
-                      onClick={this.toggleRename.bind(this, node)}
-                    >
-                      {gettext('Rename')}
-                    </DropdownItem>
-                    <DropdownItem
-                      key={`${node.id}-delete`}
-                      onClick={this.toggleDelete.bind(this, node)}
-                    >
-                      {gettext('Delete')}
-                    </DropdownItem>
-                    <DropdownItem
-                      key={`${node.id}-id`}
-                      disabled={true}
-                    >
-                      {`${gettext('Department ID')} : ${node.id}`}
-                    </DropdownItem>
-                  </Fragment>
-                )}
-              </DropdownMenu>
             </Dropdown>
           }
         </div>

frontend/src/pages/sys-admin/departments-v2/departments-v2.js

@@ -336,6 +336,11 @@ class DepartmentsV2 extends React.Component {
                     getRepos={this.getRepos}
                     deleteGroup={this.deleteGroup}
                     createGroup={this.createGroup}
+                    toggleAddDepartment={this.toggleAddDepartment}
+                    toggleAddLibrary={this.toggleAddLibrary}
+                    toggleAddMembers={this.toggleAddMembers}
+                    toggleRename={this.toggleRename}
+                    toggleDelete={this.toggleDelete}
                   />
                 </>
               }