move dialog

2025-09-04 08:28:11 +00:00 · 2019-05-05 15:18:54 +08:00
parent b183c7c3ab
commit 9574c5943f
13 changed files with 310 additions and 337 deletions
--- a/frontend/src/components/dialog/org-add-admin-dialog.js
+++ b/frontend/src/components/dialog/org-add-admin-dialog.js
@@ -36,8 +36,8 @@ class AddOrgAdminDialog extends React.Component {

  render() {
    return (
-      <Modal isOpen={true}>
-        <ModalHeader>{gettext('Add Admins')}</ModalHeader>
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Add Admins')}</ModalHeader>
        <ModalBody>
          <UserSelect
            ref="userSelect"
--- a/frontend/src/pages/org-admin/index.js
+++ b/frontend/src/pages/org-admin/index.js
@@ -5,8 +5,6 @@ import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
 import OrgUsers from './org-users';
-import OrgUsersList from './org-users-list';
-import OrgAdminList from './org-admin-list';
 import OrgGroups from './org-groups';
 import OrgLibraries from './org-libraries';
 import OrgInfo from './org-info';
@@ -30,12 +28,6 @@ class Org extends React.Component {
    super(props);
    this.state = {
      isSidePanelClosed: false,
-      isShowAddOrgUserDialog: false,
-      isShowAddOrgAdminDialog: false,
-      isInviteUserDialogOpen: false,
-      isShowAddDepartDialog: false,
-      isShowAddMemberDialog: false,
-      isShowAddRepoDialog: false,
      currentTab: 'users',
    };
  }
@@ -60,32 +52,8 @@ class Org extends React.Component {
    this.setState({currentTab: param});          
  }

-  toggleAddOrgUser = () => {
-    this.setState({isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog});
-  } 
-
-  toggleAddOrgAdmin = () => {
-    this.setState({isShowAddOrgAdminDialog: !this.state.isShowAddOrgAdminDialog});
-  } 
-
-  toggleInviteUserDialog = () => {
-    this.setState({isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen});
-  }
-
-  toggleAddDepartDialog = () => {
-    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
-  }
-
-  toggleAddMemberDialog = () => {
-    this.setState({ isShowAddMemberDialog: !this.state.isShowAddMemberDialog });
-  }
-
-  toggleAddRepoDialog = () => {
-    this.setState({ isShowAddRepoDialog: !this.state.isShowAddRepoDialog });
-  }
-
  render() {
-    let { isSidePanelClosed, currentTab, isShowAddOrgUserDialog, isShowAddOrgAdminDialog, isInviteUserDialogOpen } = this.state;
+    let { isSidePanelClosed, currentTab } = this.state;
    return (
      <div id="main">
        <SidePanel
@@ -96,56 +64,27 @@ class Org extends React.Component {
        />       
        <div className="main-panel o-hidden">
          <Router className="reach-router">
-            <OrgInfo path={siteRoot + 'org/orgmanage'} currentTab={currentTab}/>
+            <OrgInfo path={siteRoot + 'org/orgmanage'}/>
            <OrgUsers 
              path={siteRoot + 'org/useradmin'}
              currentTab={currentTab} 
              tabItemClick={this.tabItemClick}
-              toggleAddOrgAdmin={this.toggleAddOrgAdmin}
-              toggleAddOrgUser={this.toggleAddOrgUser} 
-            >
-              <OrgUsersList path="/"
-                currentTab={currentTab}
-                isShowAddOrgUserDialog={isShowAddOrgUserDialog}
-                isInviteUserDialogOpen={isInviteUserDialogOpen}
-                toggleAddOrgUser={this.toggleAddOrgUser}
-                toggleInviteUserDialog={this.toggleInviteUserDialog}
-              />
-              <OrgAdminList path="admins"
-                currentTab={currentTab}
-                isShowAddOrgAdminDialog={isShowAddOrgAdminDialog}
-                toggleAddOrgAdmin={this.toggleAddOrgAdmin}
-              />
-            </OrgUsers>
-            <OrgGroups path={siteRoot + 'org/groupadmin'} currentTab={currentTab}/>
-            <OrgLibraries path={siteRoot + 'org/repoadmin'} currentTab={currentTab}/>
-            <OrgLinks path={siteRoot + 'org/publinkadmin'} currentTab={currentTab}/>
-            <OrgDepartments path={siteRoot + 'org/departmentadmin'} currentTab={currentTab}>
-              <OrgDepartmentsList
-                path='/'
-                currentTab={currentTab}
-                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
-                toggleAddDepartDialog={this.toggleAddDepartDialog}
-              />
-              <OrgDepartmentItem
-                path='groups/:groupID'
-                currentTab={currentTab}
-                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
-                toggleAddDepartDialog={this.toggleAddDepartDialog}
-                isShowAddMemberDialog={this.state.isShowAddMemberDialog}
-                toggleAddMemberDialog={this.toggleAddMemberDialog}
-                isShowAddRepoDialog={this.state.isShowAddRepoDialog}
-                toggleAddRepoDialog={this.toggleAddRepoDialog}
-              />
+            />
+            <OrgGroups path={siteRoot + 'org/groupadmin'}/>
+            <OrgLibraries path={siteRoot + 'org/repoadmin'}/>
+            <OrgLinks path={siteRoot + 'org/publinkadmin'}/>
+            <OrgDepartments path={siteRoot + 'org/departmentadmin'}>
+              <OrgDepartmentsList path='/'/>
+              <OrgDepartmentItem path='groups/:groupID'/>
            </OrgDepartments>
            <OrgLogs
              path={siteRoot + 'org/logadmin'}
-              currentTab={currentTab} 
+              currentTab={currentTab}
              tabItemClick={this.tabItemClick}
            >
-              <OrgLogsFileAudit path='/' currentTab={currentTab} />
-              <OrgLogsFileUpdate path={siteRoot + 'file-update'} currentTab={currentTab} />
-              <OrgLogsPermAudit path={siteRoot + 'perm-audit'} currentTab={currentTab} />
+              <OrgLogsFileAudit path='/'/>
+              <OrgLogsFileUpdate path={siteRoot + 'file-update'}/>
+              <OrgLogsPermAudit path={siteRoot + 'perm-audit'}/>
            </OrgLogs>
          </Router>
        </div>
--- a/frontend/src/pages/org-admin/main-panel-topbar.js
+++ b/frontend/src/pages/org-admin/main-panel-topbar.js
@@ -1,60 +1,20 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, invitationLink } from '../../utils/constants';
 import Account from '../../components/common/account';

 const propTypes = {
-  currentTab: PropTypes.string,
-  toggleAddOrgUser: PropTypes.func,
-  toggleAddOrgAdmin: PropTypes.func,
-  toggleInviteUserDialog: PropTypes.func,
-  toggleAddDepartDialog: PropTypes.func,
-  toggleAddMemberDialog: PropTypes.func,
-  toggleAddRepoDialog: PropTypes.func,
+  children: PropTypes.object,
 };

 class MainPanelTopbar extends Component {

  render() {
-    const topBtn = 'btn btn-secondary operation-item';
-    const groupID = this.props.groupID;
    return (
      <div className="main-panel-north border-left-show">
        <div className="cur-view-toolbar">
          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
          <div className="operation">
-            {this.props.currentTab === 'users' &&
-              <Fragment>
-                <button className={topBtn} title={gettext('Add user')} onClick={this.props.toggleAddOrgUser}>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}
-                </button>
-                {invitationLink &&
-                  <button className={topBtn} title={gettext('Invite user')} onClick={this.props.toggleInviteUserDialog}>
-                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite user')}</button>
-                }
-              </Fragment>
-            }
-            {this.props.currentTab === 'admins' &&
-              <button className={topBtn} title={gettext('Add admin')} onClick={this.props.toggleAddOrgAdmin}>
-                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
-              </button>
-            }
-            {this.props.currentTab === 'departmentadmin' && 
-              <Fragment>
-                {!groupID && <button className={topBtn} title={gettext('New Department')}
-                  onClick={this.props.toggleAddDepartDialog}>{gettext('New Department')}</button>
-                }
-                {groupID && <button className={topBtn} title={gettext('New Sub-department')}
-                  onClick={this.props.toggleAddDepartDialog}>{gettext('New Sub-department')}</button>
-                }
-                {groupID && <button className={topBtn} title={gettext('Add Member')}
-                  onClick={this.props.toggleAddMemberDialog}>{gettext('Add Member')}</button>
-                }
-                {groupID && <button className={topBtn} onClick={this.props.toggleAddRepoDialog}
-                  title={gettext('New Library')}>{gettext('New Library')}</button>
-                }
-              </Fragment>
-            }
+            {this.props.children}
          </div>
        </div>
        <div className="common-toolbar">
--- a/frontend/src/pages/org-admin/org-admin-list.js
+++ b/frontend/src/pages/org-admin/org-admin-list.js
@@ -1,19 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, orgID } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import Toast from '../../components/toast';
-import OrgUserInfo from '../../models/org-user';
-import ModalPortal from '../../components/modal-portal';
-import AddOrgAdminDialog from '../../components/dialog/org-add-admin-dialog';
+import { gettext } from '../../utils/constants';
 import UserItem from './org-user-item';

 import '../../css/org-admin-paginator.css';

 const propTypes = {
-  toggleAddOrgAdmin: PropTypes.func.isRequired,
  currentTab: PropTypes.string.isRequired,
-  isShowAddOrgAdminDialog: PropTypes.bool.isRequired,
+  toggleDelete: PropTypes.func.isRequired,
+  toggleRevokeAdmin: PropTypes.func.isRequired,
+  orgAdminUsers: PropTypes.array.isRequired,
+  initOrgAdmin: PropTypes.func.isRequired,
 };

 class OrgAdminList extends React.Component {
@@ -21,18 +18,16 @@ class OrgAdminList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      orgAdminUsers: [],
      isItemFreezed: false,
    };
  }

  componentDidMount() {
-    seafileAPI.listOrgUsers(orgID, true).then(res => {
-      let userList = res.data.user_list.map(item => {
-        return new OrgUserInfo(item);
-      });
-      this.setState({orgAdminUsers: userList});
-    });
+    this.props.initOrgAdmin();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props.initOrgAdmin();
  }

  onFreezedItem = () => {
@@ -43,44 +38,8 @@ class OrgAdminList extends React.Component {
    this.setState({isItemFreezed: false});
  }

-  toggleDelete = (email) => {
-    seafileAPI.deleteOrgUser(orgID, email).then(res => {
-      this.setState({
-        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
-      });
-      let msg = gettext('Successfully deleted %s');
-      msg = msg.replace('%s', email);
-      Toast.success(msg);
-    });
-  } 
-
-  toggleRevokeAdmin = (email) => {
-    seafileAPI.setOrgAdmin(orgID, email, false).then(res => {
-      this.setState({
-        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
-      });
-      let msg = gettext('Successfully revoke the admin permission of %s');
-      msg = msg.replace('%s', email);
-      Toast.success(msg);
-    });
-  }
-
-  addOrgAdmin = (userEmail) => {
-    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
-      let userInfo = new OrgUserInfo(res.data);
-      this.state.orgAdminUsers.unshift(userInfo);
-      this.setState({
-        orgAdminUsers: this.state.orgAdminUsers
-      });
-      this.props.toggleAddOrgAdmin();
-      let msg = gettext('Successfully set %s as admin.');
-      msg = msg.replace('%s', userInfo.email);
-      Toast.success(msg);
-    });
-  } 
-
  render() {
-    let orgAdminUsers = this.state.orgAdminUsers;
+    let orgAdminUsers = this.props.orgAdminUsers;

    return (
      <div className="cur-view-content">
@@ -102,8 +61,8 @@ class OrgAdminList extends React.Component {
                  user={item}
                  currentTab={this.props.currentTab}
                  isItemFreezed={this.state.isItemFreezed}
-                  toggleDelete={this.toggleDelete}
-                  toggleRevokeAdmin={this.toggleRevokeAdmin}
+                  toggleDelete={this.props.toggleDelete}
+                  toggleRevokeAdmin={this.props.toggleRevokeAdmin}
                  onFreezedItem={this.onFreezedItem}
                  onUnfreezedItem={this.onUnfreezedItem}
                />
@@ -111,11 +70,6 @@ class OrgAdminList extends React.Component {
            })}
          </tbody>
        </table>
-        {this.props.isShowAddOrgAdminDialog && (
-          <ModalPortal>
-            <AddOrgAdminDialog toggle={this.props.toggleAddOrgAdmin} addOrgAdmin={this.addOrgAdmin} />
-          </ModalPortal>
-        )}
      </div>
    );
  }
--- a/frontend/src/pages/org-admin/org-department-item.js
+++ b/frontend/src/pages/org-admin/org-department-item.js
@@ -6,6 +6,7 @@ import { Utils } from '../../utils/utils.js';
 import { serviceURL, siteRoot, gettext, orgID } from '../../utils/constants';
 import OrgDepartmentsList from './org-departments-list';
 import ModalPortal from '../../components/modal-portal';
+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';
@@ -27,6 +28,9 @@ class OrgDepartmentItem extends React.Component {
      deletedRepo: {},
      showDeleteMemberDialog: false,
      showDeleteRepoDialog: false,
+      isShowAddRepoDialog: false,
+      isShowAddMemberDialog: false,
+      isShowAddDepartDialog: false,
      isItemFreezed: false,
      groupName: '',
    };
@@ -80,6 +84,18 @@ class OrgDepartmentItem extends React.Component {
    });
  }

+  toggleAddRepoDialog = () => {
+    this.setState({ isShowAddRepoDialog: !this.state.isShowAddRepoDialog });
+  }
+
+  toggleAddMemberDialog = () => {
+    this.setState({ isShowAddMemberDialog: !this.state.isShowAddMemberDialog });
+  }
+
+  toggleAddDepartDialog = () => {
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+  }
+
  componentWillMount() {
    const groupID = this.props.groupID;
    this.listOrgGroupRepo(groupID);
@@ -96,15 +112,51 @@ class OrgDepartmentItem extends React.Component {
  render() {
    const { members, repos } = this.state;
    const groupID = this.props.groupID;
+    const topBtn = 'btn btn-secondary operation-item';
+    const topbarChildren = (
+      <Fragment>
+        {groupID && <button className={topBtn} title={gettext('New Sub-department')}
+          onClick={this.toggleAddDepartDialog}>{gettext('New Sub-department')}</button>
+        }
+        {groupID && <button className={topBtn} title={gettext('Add Member')}
+          onClick={this.toggleAddMemberDialog}>{gettext('Add Member')}</button>
+        }
+        {groupID && <button className={topBtn} onClick={this.toggleAddRepoDialog}
+          title={gettext('New Library')}>{gettext('New Library')}</button>
+        }
+        {this.state.isShowAddMemberDialog && (
+          <ModalPortal>
+            <AddMemberDialog
+              toggle={this.toggleAddMemberDialog}
+              onMemberChanged={this.onMemberChanged}
+              groupID={groupID}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isShowAddRepoDialog && (
+          <ModalPortal>
+            <AddRepoDialog
+              toggle={this.toggleAddRepoDialog}
+              onRepoChanged={this.onRepoChanged}
+              groupID={groupID}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isShowAddDepartDialog && (
+          <ModalPortal>
+            <AddDepartDialog
+              onDepartChanged={window.onDepartChanged}
+              parentGroupID={groupID}
+              toggle={this.toggleAddDepartDialog}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+
    return (
      <Fragment>
-        <MainPanelTopbar
-          currentTab={this.props.currentTab}
-          groupID={groupID}
-          toggleAddDepartDialog={this.props.toggleAddDepartDialog}
-          toggleAddMemberDialog={this.props.toggleAddMemberDialog}
-          toggleAddRepoDialog={this.props.toggleAddRepoDialog}
-        />
+        <MainPanelTopbar children={topbarChildren} />
        <div className="main-panel-center flex-row h-100">
          <div className="cur-view-container o-auto">
            <div className="cur-view-path">
@@ -124,11 +176,7 @@ class OrgDepartmentItem extends React.Component {
            </div>

            <div className="cur-view-subcontainer org-groups">
-              <OrgDepartmentsList
-                groupID={groupID}
-                isShowAddDepartDialog={this.props.isShowAddDepartDialog}
-                toggleAddDepartDialog={this.props.toggleAddDepartDialog}
-              />
+              <OrgDepartmentsList groupID={groupID} />
            </div>
            
            <div className="cur-view-subcontainer org-members">
@@ -222,24 +270,6 @@ class OrgDepartmentItem extends React.Component {
                />
              </ModalPortal>
            )}
-            {this.props.isShowAddMemberDialog && (
-              <ModalPortal>
-                <AddMemberDialog
-                  toggle={this.props.toggleAddMemberDialog}
-                  onMemberChanged={this.onMemberChanged}
-                  groupID={groupID}
-                />
-              </ModalPortal>
-            )}
-            {this.props.isShowAddRepoDialog && (
-              <ModalPortal>
-                <AddRepoDialog
-                  toggle={this.props.toggleAddRepoDialog}
-                  onRepoChanged={this.onRepoChanged}
-                  groupID={groupID}
-                />
-              </ModalPortal>
-            )}
          </React.Fragment>
        </div>
      </Fragment>
@@ -247,18 +277,6 @@ class OrgDepartmentItem extends React.Component {
  }
 }

-const OrgDepartmentItemPropTypes = {
-  isShowAddDepartDialog: PropTypes.bool.isRequired,
-  isShowAddMemberDialog: PropTypes.bool.isRequired,
-  isShowAddRepoDialog: PropTypes.bool.isRequired,
-  toggleAddDepartDialog: PropTypes.func.isRequired,
-  toggleAddMemberDialog: PropTypes.func.isRequired,
-  toggleAddRepoDialog: PropTypes.func.isRequired,
-};
-
-OrgDepartmentItem.propTypes = OrgDepartmentItemPropTypes;
-
-
 class MemberItem extends React.Component {

  constructor(props) {
--- a/frontend/src/pages/org-admin/org-departments-list.js
+++ b/frontend/src/pages/org-admin/org-departments-list.js
@@ -24,6 +24,7 @@ class OrgDepartmentsList extends React.Component {
      groupName: '',
      showDeleteDepartDialog: false,
      showSetGroupQuotaDialog: false,
+      isShowAddDepartDialog: false,
    };
  }

@@ -58,8 +59,13 @@ class OrgDepartmentsList extends React.Component {
    this.listDepartGroups(this.props.groupID);
  }

+  toggleAddDepartDialog = () => {
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+  }
+
  componentWillMount() {
    this.listDepartGroups(this.props.groupID);
+    window.onDepartChanged = this.onDepartChanged;
  }

  componentWillReceiveProps(nextProps) {
@@ -73,17 +79,28 @@ class OrgDepartmentsList extends React.Component {
    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 = (
+      <Fragment>
+        {!this.props.groupID && <button className='btn btn-secondary operation-item' title={gettext('New Department')}
+          onClick={this.toggleAddDepartDialog}>{gettext('New Department')}</button>
+        }
+        {this.state.isShowAddDepartDialog && (
+          <ModalPortal>
+            <AddDepartDialog
+              onDepartChanged={this.onDepartChanged}
+              parentGroupID={this.props.groupID}
+              groupID={this.state.groupID}
+              toggle={this.toggleAddDepartDialog}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+
    return (
      <Fragment>
-        {!isSub &&
-          <MainPanelTopbar
-            currentTab={this.props.currentTab}
-            groupID={this.props.groupID}
-            toggleAddDepartDialog={this.props.toggleAddDepartDialog}
-            toggleAddMemberDialog={this.props.toggleAddMemberDialog}
-            toggleAddRepoDialog={this.props.toggleAddRepoDialog}
-          />
-        }
+        {!isSub && <MainPanelTopbar children={topbarChildren} />}
        <div className="main-panel-center flex-row h-100">
          <div className="cur-view-container o-auto">
            <div className="cur-view-path">
@@ -119,16 +136,6 @@ class OrgDepartmentsList extends React.Component {
              }
            </div>
            <React.Fragment>
-              {this.props.isShowAddDepartDialog && (
-                <ModalPortal>
-                  <AddDepartDialog
-                    onDepartChanged={this.onDepartChanged}
-                    parentGroupID={this.props.groupID}
-                    groupID={this.state.groupID}
-                    toggle={this.props.toggleAddDepartDialog}
-                  />
-                </ModalPortal>
-              )}
              {this.state.showDeleteDepartDialog && (
                <ModalPortal>
                  <DeleteDepartDialog
@@ -156,14 +163,6 @@ class OrgDepartmentsList extends React.Component {
  }
 }

-const OrgDepartmentsListPropTypes = {
-  isShowAddDepartDialog: PropTypes.bool.isRequired,
-  toggleAddDepartDialog: PropTypes.func.isRequired,
-};
-
-OrgDepartmentsList.propTypes = OrgDepartmentsListPropTypes;
-
-
 class GroupItem extends React.Component {

  constructor(props) {
--- a/frontend/src/pages/org-admin/org-groups.js
+++ b/frontend/src/pages/org-admin/org-groups.js
@@ -73,7 +73,7 @@ class OrgGroups extends Component {
    let groups = this.state.orgGroups;
    return (
      <Fragment>
-        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <MainPanelTopbar/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path">
--- a/frontend/src/pages/org-admin/org-info.js
+++ b/frontend/src/pages/org-admin/org-info.js
@@ -32,7 +32,7 @@ class OrgInfo extends Component {
  render() {
    return (
      <Fragment>
-        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <MainPanelTopbar/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path">
--- a/frontend/src/pages/org-admin/org-libraries.js
+++ b/frontend/src/pages/org-admin/org-libraries.js
@@ -88,7 +88,7 @@ class OrgLibraries extends Component {
    let repos = this.state.orgRepos;
    return (
      <Fragment>
-        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <MainPanelTopbar/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path">
--- a/frontend/src/pages/org-admin/org-links.js
+++ b/frontend/src/pages/org-admin/org-links.js
@@ -64,7 +64,7 @@ class OrgLinks extends React.Component {
    const linkList = this.state.linkList;
    return (
      <Fragment>
-        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <MainPanelTopbar/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path">
--- a/frontend/src/pages/org-admin/org-logs.js
+++ b/frontend/src/pages/org-admin/org-logs.js
@@ -16,7 +16,7 @@ class OrgLogs extends Component {
  render() {
    return (
      <Fragment>
-        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <MainPanelTopbar/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path org-user-nav">
--- a/frontend/src/pages/org-admin/org-users-list.js
+++ b/frontend/src/pages/org-admin/org-users-list.js
@@ -1,20 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, orgID, invitationLink } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import OrgUserInfo from '../../models/org-user';
-import Toast from '../../components/toast';
-import ModalPortal from '../../components/modal-portal';
-import AddOrgUserDialog from '../../components/dialog/org-add-user-dialog'; 
-import InviteUserDialog from '../../components/dialog/org-admin-invite-user-dialog';
+import { gettext } from '../../utils/constants';
 import UserItem from './org-user-item';

 const propTypes = {
  currentTab: PropTypes.string.isRequired,
-  toggleAddOrgUser: PropTypes.func.isRequired,
-  isShowAddOrgUserDialog: PropTypes.bool.isRequired,
-  toggleInviteUserDialog: PropTypes.func.isRequired,
-  isInviteUserDialogOpen: PropTypes.bool.isRequired
+  initOrgUsersData: PropTypes.func.isRequired,
+  toggleDelete: PropTypes.func.isRequired,
+  orgUsers: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  pageNext: PropTypes.bool.isRequired,
 };

 class OrgUsersList extends React.Component {
@@ -22,29 +17,12 @@ class OrgUsersList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      orgUsers: [],
      isItemFreezed: false,
-      page: 1,
-      pageNext: false,
    };
  }

  componentDidMount() {
-    let page = this.state.page;
-    this.initData(page);
-  }
-
-  initData = (page) => {
-    seafileAPI.listOrgUsers(orgID, '', page).then(res => {
-      let userList = res.data.user_list.map(item => {
-        return new OrgUserInfo(item);
-      });
-      this.setState({
-        orgUsers: userList,
-        pageNext: res.data.page_next,
-        page: res.data.page,
-      });
-    });
+    this.props.initOrgUsersData(this.props.page);
  }

  onFreezedItem = () => {
@@ -55,37 +33,9 @@ class OrgUsersList extends React.Component {
    this.setState({isItemFreezed: false});
  }

-  toggleDelete = (email) => {
-    seafileAPI.deleteOrgUser(orgID, email).then(res => {
-      let users = this.state.orgUsers.filter(item => item.email != email);
-      this.setState({orgUsers: users});
-      let msg = gettext('Successfully deleted %s');
-      msg = msg.replace('%s', email);
-      Toast.success(msg);
-    });
-  } 
-
-  handleSubmit = (email, name, password) => {
-    seafileAPI.addOrgUser(orgID, email, name, password).then(res => {
-      let userInfo = new OrgUserInfo(res.data);
-      this.state.orgUsers.unshift(userInfo);
-      this.setState({
-        orgUsers: this.state.orgUsers 
-      });
-      this.props.toggleAddOrgUser();
-      let msg;
-      msg = gettext('successfully added user %s.');
-      msg = msg.replace('%s', email);
-      Toast.success(msg);
-    }).catch(err => {
-      Toast.danger(err.response.data.error_msg);
-      this.props.toggleAddOrgUser();
-    });
-  } 
-
  onChangePageNum = (e, num) => {
    e.preventDefault();
-    let page = this.state.page;
+    let page = this.props.page;

    if (num == 1) {
      page = page + 1;
@@ -93,12 +43,11 @@ class OrgUsersList extends React.Component {
      page = page - 1;
    }

-    this.initData(page);
+    this.props.initOrgUsersData(page);
  }

  render() {
-    let orgUsers = this.state.orgUsers;
-
+    let { orgUsers, page, pageNext } = this.props;
    return (
      <div className="cur-view-content">
        <table>
@@ -119,7 +68,7 @@ class OrgUsersList extends React.Component {
                  user={item}
                  currentTab={this.props.currentTab}
                  isItemFreezed={this.state.isItemFreezed}
-                  toggleDelete={this.toggleDelete}
+                  toggleDelete={this.props.toggleDelete}
                  onFreezedItem={this.onFreezedItem}
                  onUnfreezedItem={this.onUnfreezedItem}
                />
@@ -127,20 +76,10 @@ class OrgUsersList extends React.Component {
          </tbody>
        </table>
        <div className="paginator">
-          {this.state.page !=1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
-          {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
-          {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+          {page !=1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+          {(page != 1 && pageNext) && <span> | </span>}
+          {pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
        </div>
-        {this.props.isShowAddOrgUserDialog && (
-          <ModalPortal>
-            <AddOrgUserDialog toggle={this.props.toggleAddOrgUser} handleSubmit={this.handleSubmit} />
-          </ModalPortal>
-        )}
-        {this.props.isInviteUserDialogOpen && (
-          <ModalPortal>
-            <InviteUserDialog invitationLink={invitationLink} toggle={this.props.toggleInviteUserDialog} />
-          </ModalPortal>
-        )}
      </div>
    );
  }
--- a/frontend/src/pages/org-admin/org-users.js
+++ b/frontend/src/pages/org-admin/org-users.js
@@ -1,40 +1,204 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from '@reach/router';
-import { siteRoot, gettext } from '../../utils/constants';
+import OrgUsersList from './org-users-list';
+import OrgAdminList from './org-admin-list';
 import MainPanelTopbar from './main-panel-topbar';
+import AddOrgAdminDialog from '../../components/dialog/org-add-admin-dialog';
+import ModalPortal from '../../components/modal-portal';
+import AddOrgUserDialog from '../../components/dialog/org-add-user-dialog'; 
+import InviteUserDialog from '../../components/dialog/org-admin-invite-user-dialog';
+import Toast from '../../components/toast';
+import { seafileAPI } from '../../utils/seafile-api';
+import OrgUserInfo from '../../models/org-user';
+import { siteRoot, gettext, invitationLink, orgID } from '../../utils/constants';

 class OrgUsers extends Component {

  constructor(props) {
    super(props);
+    this.state = {
+      orgAdminUsers: [],
+      isShowAddOrgAdminDialog: false,
+      orgUsers: [],
+      page: 1,
+      pageNext: false,
+      isShowAddOrgUserDialog: false,
+      isInviteUserDialogOpen: false,
+    };
  }

  tabItemClick = (param) => {
    this.props.tabItemClick(param);
  }

+  toggleAddOrgAdmin = () => {
+    this.setState({isShowAddOrgAdminDialog: !this.state.isShowAddOrgAdminDialog});
+  }
+
+  toggleAddOrgUser = () => {
+    this.setState({isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog});
+  }
+
+  toggleInviteUserDialog = () => {
+    this.setState({isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen});
+  }
+
+  initOrgUsersData = (page) => {
+    seafileAPI.listOrgUsers(orgID, '', page).then(res => {
+      let userList = res.data.user_list.map(item => {
+        return new OrgUserInfo(item);
+      });
+      this.setState({
+        orgUsers: userList,
+        pageNext: res.data.page_next,
+        page: res.data.page,
+      });
+    });
+  }
+
+  addOrgUser = (email, name, password) => {
+    seafileAPI.addOrgUser(orgID, email, name, password).then(res => {
+      let userInfo = new OrgUserInfo(res.data);
+      this.state.orgUsers.unshift(userInfo);
+      this.setState({
+        orgUsers: this.state.orgUsers 
+      });
+      this.toggleAddOrgUser();
+      let msg = gettext('successfully added user %s.');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    }).catch(err => {
+      Toast.danger(err.response.data.error_msg);
+    });
+  }
+
+  toggleOrgUsersDelete = (email) => {
+    seafileAPI.deleteOrgUser(orgID, email).then(res => {
+      let users = this.state.orgUsers.filter(item => item.email != email);
+      this.setState({orgUsers: users});
+      let msg = gettext('Successfully deleted %s');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    });
+  } 
+
+  initOrgAdmin = () => {
+    seafileAPI.listOrgUsers(orgID, true).then(res => {
+      let userList = res.data.user_list.map(item => {
+        return new OrgUserInfo(item);
+      });
+      this.setState({orgAdminUsers: userList});
+    });
+  }
+
+  toggleOrgAdminDelete = (email) => {
+    seafileAPI.deleteOrgUser(orgID, email).then(res => {
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
+      });
+      let msg = gettext('Successfully deleted %s');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    });
+  }
+
+  toggleRevokeAdmin = (email) => {
+    seafileAPI.setOrgAdmin(orgID, email, false).then(res => {
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
+      });
+      let msg = gettext('Successfully revoke the admin permission of %s');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    });
+  }
+
+  addOrgAdmin = (userEmail) => {
+    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
+      let userInfo = new OrgUserInfo(res.data);
+      this.state.orgAdminUsers.unshift(userInfo);
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers
+      });
+      let msg = gettext('Successfully set %s as admin.');
+      msg = msg.replace('%s', userInfo.email);
+      Toast.success(msg);
+      this.toggleAddOrgAdmin();
+    });
+  } 
+
  render() {
+    const topBtn = 'btn btn-secondary operation-item';
+    let topbarChildren;
+    if (this.props.currentTab === 'admins') {
+      topbarChildren = (
+        <Fragment>
+          <button className={topBtn} title={gettext('Add admin')} onClick={this.toggleAddOrgAdmin}>
+             <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
+          </button>
+        {this.state.isShowAddOrgAdminDialog &&
+          <ModalPortal>
+            <AddOrgAdminDialog toggle={this.toggleAddOrgAdmin} addOrgAdmin={this.addOrgAdmin}/>
+          </ModalPortal>
+        }
+        </Fragment>
+      );
+    } else if (this.props.currentTab === 'users') {
+      topbarChildren = (
+        <Fragment>
+          <button className={topBtn} title={gettext('Add user')} onClick={this.toggleAddOrgUser}>
+            <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}</button>
+          {invitationLink &&
+            <button className={topBtn} title={gettext('Invite user')} onClick={this.toggleInviteUserDialog}>
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite user')}</button>
+          }
+          {this.state.isShowAddOrgUserDialog &&
+            <ModalPortal>
+              <AddOrgUserDialog handleSubmit={this.addOrgUser} toggle={this.toggleAddOrgUser}/>
+            </ModalPortal>
+          }
+          {this.state.isInviteUserDialogOpen &&
+            <ModalPortal>
+              <InviteUserDialog invitationLink={invitationLink} toggle={this.toggleInviteUserDialog}/>
+            </ModalPortal>
+          }
+        </Fragment>
+      );
+    }
+
    return (
      <Fragment>
-        <MainPanelTopbar
-          currentTab={this.props.currentTab}
-          toggleAddOrgUser={this.props.toggleAddOrgUser}
-          toggleInviteUserDialog={this.props.toggleInviteUserDialog}
-          toggleAddOrgAdmin={this.props.toggleAddOrgAdmin}
-        />
+        <MainPanelTopbar children={topbarChildren}/>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
            <div className="cur-view-path org-user-nav">
              <ul className="nav">
                <li className="nav-item" onClick={() => this.tabItemClick('users')}>
-                  <Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + 'org/useradmin/'} title={gettext('All')}>{gettext('All')}</Link>
+                  <span className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`}>{gettext('All')}</span>
                </li>
                <li className="nav-item" onClick={() => this.tabItemClick('admins')}>
-                  <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + 'org/useradmin/admins/'} title={gettext('Admin')}>{gettext('Admin')}</Link>
+                  <span className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} >{gettext('Admin')}</span>
                </li>
              </ul>
            </div>
-            {this.props.children}
+            {this.props.currentTab === 'users' &&
+              <OrgUsersList
+                currentTab={this.props.currentTab}
+                initOrgUsersData={this.initOrgUsersData}
+                toggleDelete={this.toggleOrgUsersDelete}
+                orgUsers={this.state.orgUsers}
+                page={this.state.page}
+                pageNext={this.state.pageNext}
+              />
+            }
+            {this.props.currentTab === 'admins' &&
+              <OrgAdminList
+                currentTab={this.props.currentTab}
+                toggleDelete={this.toggleOrgAdminDelete}
+                toggleRevokeAdmin={this.toggleRevokeAdmin}
+                orgAdminUsers={this.state.orgAdminUsers}
+                initOrgAdmin={this.initOrgAdmin}
+              />
+            }
          </div>
        </div>
      </Fragment>