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.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} /> }