+
+
+ )}
+
+ );
+ }
+}
+
+DepartmentsV2MembersList.propTypes = propTypes;
+
+export default DepartmentsV2MembersList;
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
new file mode 100644
index 0000000000..62144758a7
--- /dev/null
+++ b/frontend/src/pages/sys-admin/departments-v2/departments-v2-tree-node.js
@@ -0,0 +1,226 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
+const departmentsV2TreeNodePropTypes = {
+ node: PropTypes.object,
+ checkedDepartmentId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ listSubDepartments: PropTypes.func,
+ onChangeDepartment: PropTypes.func,
+ toggleAddDepartment: PropTypes.func,
+ toggleAddLibrary: PropTypes.func,
+ toggleAddMembers: PropTypes.func,
+ toggleRename: PropTypes.func,
+ toggleDelete: PropTypes.func
+};
+
+class DepartmentsV2TreeNode extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isShowTreeIcon: true,
+ isChildrenShow: false,
+ dropdownOpen: false,
+ active: false
+ };
+ }
+
+ componentDidMount() {
+ const { node } = this.props;
+ if (node.id === -1) {
+ this.listSubDepartments();
+ }
+ }
+
+ toggleChildren = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (this.state.isChildrenShow) {
+ this.setState({ isChildrenShow: false });
+ return;
+ }
+ this.listSubDepartments();
+ };
+
+ listSubDepartments = () => {
+ const { node } = this.props;
+ this.props.listSubDepartments(node.id, (childrenNodes) => {
+ if (Array.isArray(childrenNodes) && childrenNodes.length === 0) {
+ this.setState({ isShowTreeIcon: false });
+ }
+ this.setState({ isChildrenShow: true });
+ });
+ };
+
+ dropdownToggle = (e) => {
+ e.stopPropagation();
+ this.setState({ dropdownOpen: !this.state.dropdownOpen });
+ };
+
+ onMouseEnter = () => {
+ this.setState({ active: true });
+ };
+
+ onMouseLeave = () => {
+ if (this.state.dropdownOpen) return;
+ this.setState({ active: false });
+ };
+
+ renderTreeNodes = (nodes) => {
+ if (nodes.length > 0) {
+ return nodes.map((node) => {
+ return (
+ {this.getDepartmentName()}
+
+
+
+
+ {activeNav === 'members' &&
+ <>
+ {isMembersListLoading && -
+
- + this.changeActiveNav('members')}>{gettext('Members')} + +
- + this.changeActiveNav('repos')}>{gettext('Libraries')} + +
+
+
+
+
+
+ }
+ {!isMembersListLoading && membersList.length === 0 &&
+ | + | {gettext('Name')}{' '}{sortByName && sortIcon} | +{gettext('Role')}{' '}{sortByRole && sortIcon} | +{gettext('Contact email')} | +{/* Operations */} | +
|---|
+
+
+
+
+ }
+ {(activeNav === 'repos' && repos.length === 0) &&
+ | + | {gettext('Name')} | +{gettext('Size')} | ++ |
|---|
this.changeDept(node.id)}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}
+ >
+ {this.state.isShowTreeIcon ?
+ this.toggleChildren(e)}>
+
+
+ :
+
+ }
+ {node.name}
+ {active && node.id !== 'other_users' &&
+ this.dropdownToggle(e)}
+ direction="down"
+ className="department-dropdown-menu"
+ >
+
+
+
+
+
+ {gettext('Add sub-department')}
+
+
+ {gettext('Add Library')}
+
+ {node.id !== -1 && (
+
+
+ {gettext('Add members')}
+
+
+ {gettext('Rename')}
+
+
+ {gettext('Delete')}
+
+
+ {`${gettext('Department ID')} : ${node.id}`}
+
+
+ )}
+
+
+ }
+
+ {this.state.isChildrenShow &&
+
+ {node.children && this.renderTreeNodes(node.children)}
+
+ }
+
+ {rootNodes.map(rootNode => {
+ return (
+
+ );
+ }
+}
+
+DepartmentV2TreePanel.propTypes = DepartmentV2TreePanelPropTypes;
+
+export default DepartmentV2TreePanel;
diff --git a/frontend/src/pages/sys-admin/departments-v2/departments-v2.js b/frontend/src/pages/sys-admin/departments-v2/departments-v2.js
new file mode 100644
index 0000000000..9355dc4b59
--- /dev/null
+++ b/frontend/src/pages/sys-admin/departments-v2/departments-v2.js
@@ -0,0 +1,394 @@
+import React, { Fragment } from 'react';
+import { Button } from 'reactstrap';
+import toaster from '../../../components/toast';
+import { gettext } from '../../../utils/constants';
+import Account from '../../../components/common/account';
+import DepartmentNode from './department-node';
+import DepartmentV2TreePanel from './departments-v2-tree-panel';
+import { systemAdminAPI } from '../../../utils/system-admin-api';
+import DepartmentsV2MembersList from './departments-v2-members-list';
+import AddDepartmentV2Dialog from '../../../components/dialog/sysadmin-dialog/add-department-v2-dialog';
+import AddDepartMemberV2Dialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-depart-member-v2-dialog';
+import RenameDepartmentV2Dialog from '../../../components/dialog/sysadmin-dialog/rename-department-v2-dialog';
+import DeleteDepartmentV2ConfirmDialog from '../../../components/dialog/sysadmin-dialog/delete-department-v2-confirm-dialog';
+import AddRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog';
+import Loading from '../../../components/loading';
+import { Utils } from '../../../utils/utils';
+
+import '../../../css/system-departments-v2.css';
+
+class DepartmentsV2 extends React.Component {
+
+ constructor(props) {
+ super(props);
+ const localSortItems = localStorage.getItem('departments-members-sort-items') || {};
+ this.state = {
+ rootNodes: [],
+ checkedDepartmentId: -1,
+ operateNode: null,
+ isAddDepartmentDialogShow: false,
+ isAddMembersDialogShow: false,
+ isRenameDepartmentDialogShow: false,
+ isDeleteDepartmentDialogShow: false,
+ isShowAddRepoDialog: false,
+ membersList: [],
+ isTopDepartmentLoading: false,
+ isMembersListLoading: false,
+ sortBy: localSortItems.sort_by || 'name', // 'name' or 'role'
+ sortOrder: localSortItems.sort_order || 'asc', // 'asc' or 'desc',
+ };
+ }
+
+ componentDidMount() {
+ this.setState({ isTopDepartmentLoading: true }, () => {
+ systemAdminAPI.sysAdminListAllDepartments().then(res => {
+ const department_list = res.data.data;
+ if (department_list && department_list.length > 0) {
+ const rootNodes = department_list.map(item => {
+ const node = new DepartmentNode({
+ id: item.id,
+ name: item.name,
+ orgId: item.org_id,
+ });
+ return node;
+ });
+ this.setState({
+ rootNodes,
+ checkedDepartmentId: rootNodes[0].id,
+ });
+ this.loadDepartmentMembers(rootNodes[0].id);
+ }
+ this.setState({ isTopDepartmentLoading: false });
+ });
+ });
+ }
+
+ onChangeDepartment = (nodeId) => {
+ this.setState({ checkedDepartmentId: nodeId }, this.loadDepartmentMembers(nodeId));
+ };
+
+ loadDepartmentMembers = (nodeId) => {
+ if (nodeId === -1) {
+ this.setState({
+ isMembersListLoading: false,
+ membersList: [],
+ });
+ return;
+ }
+ this.setState({ isMembersListLoading: true });
+ systemAdminAPI.sysAdminListGroupMembers(nodeId, 0, 100).then(res => {
+ this.setState({
+ membersList: res.data.members,
+ isMembersListLoading: false
+ });
+ }).catch(error => {
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ listSubDepartments = (nodeId, cb) => {
+ const { rootNodes } = this.state;
+ let node = null;
+ rootNodes.forEach(rootNode => {
+ if (!node) {
+ node = rootNode.findNodeById(nodeId);
+ }
+ });
+ if (!node) return;
+ systemAdminAPI.sysAdminGetDepartmentInfo(nodeId).then(res => {
+ const childrenNodes = res.data.groups.map(department => new DepartmentNode({
+ id: department.id,
+ name: department.name,
+ parentGroupId: department.parent_group_id,
+ orgId: department.org_id,
+ parentNode: node,
+ }));
+ node.setChildren(childrenNodes);
+ cb && cb(childrenNodes);
+ }).catch(error => {
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ getRepos = (nodeId, cb) => {
+ systemAdminAPI.sysAdminListGroupRepos(nodeId).then(res => {
+ cb && cb(res.data.libraries);
+ }).catch(error => {
+ if (error.response && error.response.status === 404) {
+ cb && cb(null);
+ return;
+ }
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ toggleAddLibrary = (node) => {
+ this.setState({
+ operateNode: node,
+ isShowAddRepoDialog: !this.state.isShowAddRepoDialog
+ });
+ };
+
+ toggleAddDepartment = (node) => {
+ this.setState({ operateNode: node, isAddDepartmentDialogShow: !this.state.isAddDepartmentDialogShow });
+ };
+
+ toggleAddMembers = (node) => {
+ this.setState({ operateNode: node, isAddMembersDialogShow: !this.state.isAddMembersDialogShow });
+ };
+
+ toggleRename = (node) => {
+ this.setState({ operateNode: node, isRenameDepartmentDialogShow: !this.state.isRenameDepartmentDialogShow });
+ };
+
+ toggleDelete = (node) => {
+ this.setState({ operateNode: node, isDeleteDepartmentDialogShow: !this.state.isDeleteDepartmentDialogShow });
+ };
+
+ addDepartment = (parentNode, department) => {
+ parentNode.addChildren([new DepartmentNode({
+ id: department.id,
+ name: department.name,
+ parentNode: parentNode,
+ orgId: department.org_id,
+ })]);
+ };
+
+ setRootNode = (department) => {
+ const newRootNode = new DepartmentNode({
+ id: department.id,
+ name: department.name,
+ orgId: department.org_id,
+ });
+ const rootNodes = this.state.rootNodes.slice(0);
+ rootNodes.push(newRootNode);
+ this.setState({
+ rootNodes: rootNodes,
+ checkedDepartmentId: newRootNode.id,
+ });
+ this.loadDepartmentMembers(newRootNode.id);
+ };
+
+ renameDepartment = (node, department) => {
+ node.id = department.id;
+ node.name = department.name;
+ };
+
+ onDelete = () => {
+ const { operateNode, checkedDepartmentId } = this.state;
+ systemAdminAPI.sysAdminDeleteDepartment(operateNode.id).then(() => {
+ this.toggleDelete();
+ if (operateNode.parentNode) {
+ operateNode.parentNode.deleteChildById(operateNode.id);
+ if (operateNode.id === checkedDepartmentId && operateNode.parentNode.id !== -1) {
+ this.onChangeDepartment(operateNode.parentNode.id);
+ }
+ } else {
+ let rootNodes = this.state.rootNodes.slice(0);
+ let rootIndex = rootNodes.findIndex(node => node.id === operateNode.id);
+ rootNodes.splice(rootIndex, 1);
+ this.setState({
+ rootNodes,
+ checkedDepartmentId: rootNodes[0].id,
+ });
+ this.loadDepartmentMembers(rootNodes[0].id);
+ }
+ }).catch(error => {
+ if (error.response && error.response.status === 400) {
+ toaster.danger(error.response.data.error_msg);
+ return;
+ }
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ onMemberChanged = () => {
+ const { checkedDepartmentId, operateNode } = this.state;
+ if (checkedDepartmentId && operateNode && checkedDepartmentId !== operateNode.id) return;
+ this.loadDepartmentMembers(operateNode.id);
+ };
+
+ setMemberStaff = (email, isAdmin) => {
+ const { checkedDepartmentId, membersList } = this.state;
+ systemAdminAPI.sysAdminUpdateGroupMemberRole(checkedDepartmentId, email, isAdmin).then(res => {
+ const member = res.data;
+ const newMembersList = membersList.map(memberItem => {
+ if (memberItem.email === email) return member;
+ return memberItem;
+ });
+ this.setState({ membersList: newMembersList });
+ }).catch(error => {
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ deleteMember = (email) => {
+ const { checkedDepartmentId, membersList } = this.state;
+ systemAdminAPI.sysAdminDeleteGroupMember(checkedDepartmentId, email).then(() => {
+ const newMembersList = membersList.filter(memberItem => memberItem.email !== email);
+ this.setState({ membersList: newMembersList });
+ }).catch(error => {
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ };
+
+ sortMembers = (items, sortBy, sortOrder) => {
+ let comparator;
+ switch (`${sortBy}-${sortOrder}`) {
+ case 'name-asc':
+ comparator = function (a, b) {
+ var result = Utils.compareTwoWord(a.name, b.name);
+ return result;
+ };
+ break;
+ case 'name-desc':
+ comparator = function (a, b) {
+ var result = Utils.compareTwoWord(a.name, b.name);
+ return -result;
+ };
+ break;
+ case 'role-asc':
+ comparator = function (a, b) {
+ return a.is_staff && !b.is_staff ? -1 : 1;
+ };
+ break;
+ case 'role-desc':
+ comparator = function (a, b) {
+ return a.is_staff && !b.is_staff ? 1 : -1;
+ };
+ break;
+ default:
+ comparator = function () {
+ return true;
+ };
+ }
+ items.sort((a, b) => {
+ return comparator(a, b);
+ });
+ return items;
+ };
+
+ sortItems = (sortBy, sortOrder) => {
+ localStorage.setItem('departments-members-sort-items', { sort_by: sortBy, sort_order: sortOrder });
+ this.setState({
+ sortBy: sortBy,
+ sortOrder: sortOrder,
+ membersList: this.sortMembers(this.state.membersList, sortBy, sortOrder),
+ });
+ };
+
+
+ render() {
+ const { rootNodes, operateNode, checkedDepartmentId, isAddDepartmentDialogShow, isAddMembersDialogShow,
+ membersList, isMembersListLoading, isTopDepartmentLoading, isRenameDepartmentDialogShow,
+ isDeleteDepartmentDialogShow, sortBy, sortOrder } = this.state;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isAddMembersDialogShow &&
+
+
+ {gettext('Departments')}
+
+ {isTopDepartmentLoading &&
+
+
+
+ }
+
+ {translateRole(role)}
+
+ ),
+ }));
+};
+
+const translateRole = (role) => {
+ switch (role) {
+ case 'Admin':
+ return gettext('Admin');
+ case 'Member':
+ return gettext('Member');
+ case 'default':
+ return gettext('Default');
+ case 'guest':
+ return gettext('Guest');
+ case 'default_admin':
+ return gettext('Default admin');
+ case 'system_admin':
+ return gettext('System admin');
+ case 'daily_admin':
+ return gettext('Daily admin');
+ case 'audit_admin':
+ return gettext('Audit admin');
+ default:
+ return role;
+ }
+};
+
+export { getRoleOptions };
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index 963ee69074..9522038352 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -45,11 +45,7 @@ import SearchGroups from './groups/search-groups';
import GroupRepos from './groups/group-repos';
import GroupMembers from './groups/group-members';
-import Departments from './departments/departments';
-import DepartmentList from './departments/department-list';
-import SubDepartments from './departments/sub-departments';
-import DepartmentMembers from './departments/department-members';
-import DepartmentLibraries from './departments/department-libraries';
+import DepartmentsV2 from './departments-v2/departments-v2';
import ShareLinks from './links/share-links';
import UploadLinks from './links/upload-links';
@@ -89,6 +85,7 @@ import AbuseReports from './abuse-reports';
import '../../css/layout.css';
import '../../css/toolbar.css';
+import '../../css/admin-common.css';
class SysAdmin extends React.Component {
constructor(props) {
@@ -209,7 +206,7 @@ class SysAdmin extends React.Component {
};
return (
-
+
-
+