From 19f41c2b0636d2d77026811888e44d1c696badbf Mon Sep 17 00:00:00 2001 From: Michael An <1822852997@qq.com> Date: Mon, 6 May 2019 16:15:11 +0800 Subject: [PATCH] update --- .../pages/org-admin/org-department-item.js | 212 ++++++++++++++---- .../pages/org-admin/org-departments-list.js | 64 ++---- 2 files changed, 188 insertions(+), 88 deletions(-) diff --git a/frontend/src/pages/org-admin/org-department-item.js b/frontend/src/pages/org-admin/org-department-item.js index d81107ef92..3859482e1a 100644 --- a/frontend/src/pages/org-admin/org-department-item.js +++ b/frontend/src/pages/org-admin/org-department-item.js @@ -1,47 +1,65 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; +import moment from 'moment'; import { Link } from '@reach/router'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils.js'; -import { serviceURL, siteRoot, gettext, orgID } from '../../utils/constants'; -import OrgDepartmentsList from './org-departments-list'; +import MainPanelTopbar from './main-panel-topbar'; import ModalPortal from '../../components/modal-portal'; +import RoleEditor from '../../components/select-editor/role-editor'; import AddDepartDialog from '../../components/dialog/org-add-department-dialog'; import AddMemberDialog from '../../components/dialog/org-add-member-dialog'; import DeleteMemberDialog from '../../components/dialog/org-delete-member-dialog'; import AddRepoDialog from '../../components/dialog/org-add-repo-dialog'; import DeleteRepoDialog from '../../components/dialog/org-delete-repo-dialog'; -import RoleEditor from '../../components/select-editor/role-editor'; -import MainPanelTopbar from './main-panel-topbar'; +import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog'; +import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog'; +import { serviceURL, siteRoot, gettext, orgID, lang } from '../../utils/constants'; import '../../css/org-department-item.css'; +moment.locale(lang); + class OrgDepartmentItem extends React.Component { constructor(props) { super(props); this.state = { - members: [], - repos: [], - groups: [], - ancestorGroups: [], - deletedMember: {}, - deletedRepo: {}, - showDeleteMemberDialog: false, - showDeleteRepoDialog: false, - isShowAddRepoDialog: false, - isShowAddMemberDialog: false, - isShowAddDepartDialog: false, - isItemFreezed: false, - isSubdepartChanged: false, groupName: '', + isItemFreezed: false, + ancestorGroups: [], + members: [], + deletedMember: {}, + isShowAddMemberDialog: false, + showDeleteMemberDialog: false, + repos: [], + deletedRepo: {}, + isShowAddRepoDialog: false, + showDeleteRepoDialog: false, + groups: [], + subGroupID: '', + subGroupName: '', + isShowAddDepartDialog: false, + showDeleteDepartDialog: false, + showSetGroupQuotaDialog: false, }; } + componentDidMount() { + const groupID = this.props.groupID; + this.listOrgGroupRepo(groupID); + this.listOrgMembers(groupID); + } + + componentWillReceiveProps(nextProps) { + if (this.props.groupID !== nextProps.groupID) { + this.listOrgGroupRepo(nextProps.groupID); + this.listOrgMembers(nextProps.groupID); + } + } + listOrgGroupRepo = (groupID) => { seafileAPI.orgAdminListDepartGroupRepos(orgID, groupID).then(res => { - this.setState({ - repos: res.data.libraries - }); + this.setState({ repos: res.data.libraries }); }); } @@ -56,21 +74,25 @@ class OrgDepartmentItem extends React.Component { }); } - showDeleteMemberDialog = (member) => { - this.setState({ showDeleteMemberDialog: true, deletedMember: member }); - } - - showDeleteRepoDialog = (repo) => { - this.setState({ showDeleteRepoDialog: true, deletedRepo: repo }); + listSubDepartGroups = (groupID) => { + seafileAPI.orgAdminListGroupInfo(orgID, groupID, true).then(res => { + this.setState({ groups: res.data.groups }); + }); } toggleCancel = () => { this.setState({ showDeleteMemberDialog: false, showDeleteRepoDialog: false, + showDeleteDepartDialog: false, + showSetGroupQuotaDialog: false, }); } + onSubDepartChanged = () => { + this.listSubDepartGroups(this.props.groupID); + } + onRepoChanged = () => { this.listOrgGroupRepo(this.props.groupID); } @@ -83,6 +105,14 @@ class OrgDepartmentItem extends React.Component { this.setState({ isItemFreezed: isFreezed }); } + showDeleteMemberDialog = (member) => { + this.setState({ showDeleteMemberDialog: true, deletedMember: member }); + } + + showDeleteRepoDialog = (repo) => { + this.setState({ showDeleteRepoDialog: true, deletedRepo: repo }); + } + toggleAddRepoDialog = () => { this.setState({ isShowAddRepoDialog: !this.state.isShowAddRepoDialog }); } @@ -95,25 +125,23 @@ class OrgDepartmentItem extends React.Component { this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog}); } - onDepartChanged = () => { - this.setState({ isSubdepartChanged: !this.state.isSubdepartChanged }); + showDeleteDepartDialog = (subGroup) => { + this.setState({ + showDeleteDepartDialog: true, + subGroupID: subGroup.id, + subGroupName: subGroup.name + }); } - componentWillMount() { - const groupID = this.props.groupID; - this.listOrgGroupRepo(groupID); - this.listOrgMembers(groupID); - } - - componentWillReceiveProps(nextProps) { - if (this.props.groupID !== nextProps.groupID) { - this.listOrgGroupRepo(nextProps.groupID); - this.listOrgMembers(nextProps.groupID); - } + showSetGroupQuotaDialog = (subGroupID) => { + this.setState({ + showSetGroupQuotaDialog: true, + subGroupID: subGroupID + }); } render() { - const { members, repos } = this.state; + const { members, repos, groups } = this.state; const groupID = this.props.groupID; const topBtn = 'btn btn-secondary operation-item'; const topbarChildren = ( @@ -148,7 +176,7 @@ class OrgDepartmentItem extends React.Component { {this.state.isShowAddDepartDialog && ( @@ -179,14 +207,42 @@ class OrgDepartmentItem extends React.Component {
- +
+

{gettext('Sub-departments')}

+
+
+ {groups && groups.length > 0 ? + + + + + + + + + + + {groups.map((group, index) => { + return( + + + + ); + })} + +
{gettext('Name')}{gettext('Created At')}{gettext('Quota')}
+ :

{gettext('No sub-departments')}

+ } +
-
-

{gettext('Members')}

-
+

{gettext('Members')}

{(members && members.length === 1 && members[0].role === 'Owner') ? @@ -273,6 +329,25 @@ class OrgDepartmentItem extends React.Component { /> )} + {this.state.showDeleteDepartDialog && ( + + + + )} + {this.state.showSetGroupQuotaDialog && ( + + + + )}
@@ -354,7 +429,6 @@ const MemberItemPropTypes = { MemberItem.propTypes = MemberItemPropTypes; - class RepoItem extends React.Component { constructor(props) { @@ -396,4 +470,50 @@ const RepoItemPropTypes = { RepoItem.propTypes = RepoItemPropTypes; +class GroupItem extends React.Component { + + constructor(props) { + super(props); + this.state = { + highlight: false, + }; + } + + onMouseEnter = () => { + this.setState({ highlight: true }); + } + + onMouseLeave = () => { + this.setState({ highlight: false }); + } + + render() { + const group = this.props.group; + const highlight = this.state.highlight; + const newHref = siteRoot+ 'org/departmentadmin/groups/' + group.id + '/'; + return ( + + {group.name} + {moment(group.created_at).fromNow()} + + {Utils.bytesToSize(group.quota)}{' '} + + + + + + + ); + } +} + +const GroupItemPropTypes = { + group: PropTypes.object.isRequired, + showSetGroupQuotaDialog: PropTypes.func.isRequired, + showDeleteDepartDialog: PropTypes.func.isRequired, + isSubdepartChanged: PropTypes.bool, +}; + +GroupItem.propTypes = GroupItemPropTypes; + export default OrgDepartmentItem; \ No newline at end of file diff --git a/frontend/src/pages/org-admin/org-departments-list.js b/frontend/src/pages/org-admin/org-departments-list.js index 2e695fb4da..26aaa69c20 100644 --- a/frontend/src/pages/org-admin/org-departments-list.js +++ b/frontend/src/pages/org-admin/org-departments-list.js @@ -2,14 +2,14 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; import { Link } from '@reach/router'; -import { seafileAPI } from '../../utils/seafile-api'; -import { siteRoot, gettext, orgID, lang } from '../../utils/constants'; import { Utils } from '../../utils/utils.js'; +import { seafileAPI } from '../../utils/seafile-api'; +import MainPanelTopbar from './main-panel-topbar'; import ModalPortal from '../../components/modal-portal'; import AddDepartDialog from '../../components/dialog/org-add-department-dialog'; import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog'; import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog'; -import MainPanelTopbar from './main-panel-topbar'; +import { siteRoot, gettext, orgID, lang } from '../../utils/constants'; import '../../css/org-department-item.css'; moment.locale(lang); @@ -27,17 +27,15 @@ class OrgDepartmentsList extends React.Component { isShowAddDepartDialog: false, }; } + + componentDidMount() { + this.listDepartGroups(); + } - listDepartGroups = (groupID) => { - if (groupID) { - seafileAPI.orgAdminListGroupInfo(orgID, groupID, true).then(res => { - this.setState({ groups: res.data.groups }); - }); - } else { - seafileAPI.orgAdminListDepartGroups(orgID).then(res => { - this.setState({ groups: res.data.data }); - }); - } + listDepartGroups = () => { + seafileAPI.orgAdminListDepartGroups(orgID).then(res => { + this.setState({ groups: res.data.data }); + }); } showDeleteDepartDialog = (group) => { @@ -48,6 +46,10 @@ class OrgDepartmentsList extends React.Component { this.setState({ showSetGroupQuotaDialog: true, groupID: groupID }); } + toggleAddDepartDialog = () => { + this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog}); + } + toggleCancel = () => { this.setState({ showDeleteDepartDialog: false, @@ -56,35 +58,15 @@ class OrgDepartmentsList extends React.Component { } onDepartChanged = () => { - this.listDepartGroups(this.props.groupID); - } - - toggleAddDepartDialog = () => { - this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog}); - } - - componentDidMount() { - this.listDepartGroups(this.props.groupID); - } - - componentWillReceiveProps(nextProps) { - if (this.props.groupID !== nextProps.groupID || this.props.isSubdepartChanged !== nextProps.isSubdepartChanged) { - this.listDepartGroups(nextProps.groupID); - } + this.listDepartGroups(); } render() { const groups = this.state.groups; - let isSub = this.props.groupID ? true : false; - let header = isSub ? gettext('Sub-departments') : gettext('Departments'); - let noGroup = isSub ? gettext('No sub-departments') : gettext('No departments'); - const topbarChildren = ( - {!this.props.groupID && - - } + {this.state.isShowAddDepartDialog && ( ); - return ( - {!isSub && } +
-

{header}

+

{gettext('Departments')}

@@ -133,8 +114,8 @@ class OrgDepartmentsList extends React.Component { })} - : -

{noGroup}

+ : +

{gettext('No departments')}

}
@@ -206,7 +187,6 @@ const GroupItemPropTypes = { group: PropTypes.object.isRequired, showSetGroupQuotaDialog: PropTypes.func.isRequired, showDeleteDepartDialog: PropTypes.func.isRequired, - isSubdepartChanged: PropTypes.bool, }; GroupItem.propTypes = GroupItemPropTypes;