diff --git a/frontend/src/pages/sys-admin/departments-v2/departments-node-dropdown-menu.js b/frontend/src/pages/sys-admin/departments-v2/departments-node-dropdown-menu.js
new file mode 100644
index 0000000000..3606a9123b
--- /dev/null
+++ b/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 (
+
+ toggleAddDepartment(node)}>
+ {gettext('Add sub-department')}
+
+ toggleAddLibrary(node)}>
+ {gettext('Add Library')}
+
+ toggleAddMembers(node)}>
+ {gettext('Add members')}
+
+ toggleRename(node)}>
+ {gettext('Rename')}
+
+ toggleDelete(node)}>
+ {gettext('Delete')}
+
+
+ {`${gettext('Department ID')} : ${node.id}`}
+
+
+ );
+}
+
+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;
diff --git a/frontend/src/pages/sys-admin/departments-v2/departments-v2-members-list.js b/frontend/src/pages/sys-admin/departments-v2/departments-v2-members-list.js
index 42331187ad..bfd242b66e 100644
--- a/frontend/src/pages/sys-admin/departments-v2/departments-v2-members-list.js
+++ b/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 '';
- let name = '';
+ if (!rootNodes) return {};
+ 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 = ;
+ const currentDepartment = this.getCurrentDepartment();
return (
-
{this.getDepartmentName()}
+
+ {currentDepartment.name}
+ this.dropdownToggle(e)}
+ direction="down"
+ className="department-dropdown-menu"
+ >
+
+
+
+
diff --git a/frontend/src/pages/sys-admin/departments-v2/departments-v2-tree-node.js b/frontend/src/pages/sys-admin/departments-v2/departments-v2-tree-node.js
index c689c5125a..efa29d16b7 100644
--- a/frontend/src/pages/sys-admin/departments-v2/departments-v2-tree-node.js
+++ b/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 {
}
{node.name}
- {active && node.id !== 'other_users' &&
+ {active &&
this.dropdownToggle(e)}
@@ -161,52 +146,14 @@ class DepartmentsV2TreeNode extends Component {
>
-
-
- {gettext('Add sub-department')}
-
-
- {gettext('Add Library')}
-
- {node.id !== -1 && (
-
-
- {gettext('Add members')}
-
-
- {gettext('Rename')}
-
-
- {gettext('Delete')}
-
-
- {`${gettext('Department ID')} : ${node.id}`}
-
-
- )}
-
+
}
diff --git a/frontend/src/pages/sys-admin/departments-v2/departments-v2.js b/frontend/src/pages/sys-admin/departments-v2/departments-v2.js
index 9355dc4b59..ea5b74a9ce 100644
--- a/frontend/src/pages/sys-admin/departments-v2/departments-v2.js
+++ b/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}
/>
>
}