adjust button position

frontend/src/pages/org-admin/index.js

@@ -34,6 +34,7 @@ class Org extends React.Component {
       isShowAddOrgUserDialog: false,
       isShowAddOrgAdminDialog: false,
       isInviteUserDialogOpen: false,
+      isShowAddDepartDialog: false,
       currentTab: 'users',
     };
   }
@@ -70,8 +71,11 @@ class Org extends React.Component {
     this.setState({isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen});
   }
 
-  render() {
+  toggleAddDepartDialog = () => {
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+  }
 
+  render() {
     let { isSidePanelClosed, currentTab, isShowAddOrgUserDialog, isShowAddOrgAdminDialog, isInviteUserDialogOpen } = this.state;
     let href = window.location.href;
     let newPath = 'groups/';
@@ -81,7 +85,13 @@ class Org extends React.Component {
     return (
       <div id="main">
         <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} />
-        <MainPanel currentTab={currentTab} toggleAddOrgAdmin={this.toggleAddOrgAdmin} toggleAddOrgUser={this.toggleAddOrgUser} toggleInviteUserDialog={this.toggleInviteUserDialog}>
+        <MainPanel
+          currentTab={currentTab}
+          toggleAddOrgAdmin={this.toggleAddOrgAdmin}
+          toggleAddOrgUser={this.toggleAddOrgUser}
+          toggleInviteUserDialog={this.toggleInviteUserDialog}
+          toggleAddDepartDialog={this.toggleAddDepartDialog}
+        >
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'} />
             <OrgUsers 
@@ -98,8 +108,16 @@ class Org extends React.Component {
             <OrgLibraries path={siteRoot + 'org/repoadmin'} />
             <OrgLinks path={siteRoot + 'org/publinkadmin'} />
             <OrgDepartments path={siteRoot + 'org/departmentadmin'}>
-              <OrgDepartmentsList path='/' />
+              <OrgDepartmentsList
-              <OrgDepartmentItem path={newPath} />
+                path='/'
+                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
+                toggleAddDepartDialog={this.toggleAddDepartDialog}
+              />
+              <OrgDepartmentItem
+                path={newPath}
+                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
+                toggleAddDepartDialog={this.toggleAddDepartDialog}
+              />
             </OrgDepartments>
             <OrgLogs
               path={siteRoot + 'org/logadmin'}

frontend/src/pages/org-admin/main-panel.js

@@ -22,6 +22,7 @@ class MainPanel extends Component {
   }
 
   render() {
+    const groupID = window.org.pageOptions.groupID;
     return (
       <div className="main-panel o-hidden">
         <div className="main-panel-north border-left-show">
@@ -45,6 +46,11 @@ class MainPanel extends Component {
                 <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
               </button>
               }
+              {(this.props.currentTab === 'departmentadmin' && !groupID) &&
+              <button className="btn btn-secondary operation-item" title={gettext('New Department')} onClick={this.props.toggleAddDepartDialog}>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Department')}
+              </button>
+              }
             </div>
           </div>
           <div className="common-toolbar">

frontend/src/pages/org-admin/org-department-item.js

@@ -109,25 +109,35 @@ class OrgDepartmentItem extends React.Component {
       <div className="main-panel-center flex-row h-100">
         <div className="cur-view-container o-auto">
           <div className="cur-view-path">
+            <div className="fleft">
               <h3 className="sf-heading">
                 {this.state.groupID ? 
                   <a href={serviceURL + '/org/departmentadmin/'}>{gettext('Departments')}</a>
                   : <span>{gettext('Departments')}</span>
                 }
-              {
+                {this.state.ancestorGroups.map(ancestor => {
-                this.state.ancestorGroups.map(ancestor => {
                   let newHref = serviceURL + '/org/departmentadmin/groups/' + ancestor.id + '/';
                   return (
                     <span key={ancestor.id}>{' / '}<a href={newHref}>{ancestor.name}</a></span>
                   );
-                })
+                })}
-              }
                 {this.state.groupID && <span>{' / '}{this.state.groupName}</span>}
               </h3>
             </div>
+            {this.state.groupID &&
+              <div className="fright">
+                <button className="btn-white operation-item" onClick={this.props.toggleAddDepartDialog}>
+                  {gettext('New Sub-departments')}</button>
+              </div>
+            }
+          </div>
 
           <div className="cur-view-subcontainer org-groups">
-            <OrgDepartmentsList groupID={this.state.groupID} />
+            <OrgDepartmentsList
+              groupID={this.state.groupID}
+              isShowAddDepartDialog={this.props.isShowAddDepartDialog}
+              toggleAddDepartDialog={this.props.toggleAddDepartDialog}
+            />
           </div>
           
           <div className="cur-view-subcontainer org-members">

frontend/src/pages/org-admin/org-departments-list.js

@@ -20,7 +20,6 @@ class OrgDepartmentsList extends React.Component {
       groups: null,
       groupID: -1,
       groupName: '',
-      showAddDepartDialog: false,
       showDeleteDepartDialog: false,
       showSetGroupQuotaDialog: false,
     };
@@ -42,10 +41,6 @@ class OrgDepartmentsList extends React.Component {
     }
   }
 
-  showAddDepartDialog = () => {
-    this.setState({ showAddDepartDialog: true });
-  }
-
   showDeleteDepartDialog = (group) => {
     this.setState({ showDeleteDepartDialog: true, groupID: group.id, groupName: group.name });
   }
@@ -56,7 +51,6 @@ class OrgDepartmentsList extends React.Component {
 
   toggleCancel = () => {
     this.setState({
-      showAddDepartDialog: false,
       showDeleteDepartDialog: false,
       showSetGroupQuotaDialog: false,
     });
@@ -74,16 +68,12 @@ class OrgDepartmentsList extends React.Component {
     const groups = this.state.groups;
     let isSub = this.props.groupID ? true : false;
     let header = isSub ? gettext('Sub-departments') : gettext('Departments');
-    let headerButton = isSub ? gettext('New Sub-department') : gettext('New Department');
     let noGroup = isSub ? gettext('No sub-departments') : gettext('No departments');
     return (
       <div className="main-panel-center flex-row h-100">
         <div className="cur-view-container o-auto">
           <div className="cur-view-path">
             <div className="fleft"><h3 className="sf-heading">{header}</h3></div>
-            <div className="fright">
-              <button className="btn-white operation-item" onClick={this.showAddDepartDialog}>{headerButton}</button>
-            </div>
           </div>
           <div className="cur-view-content">
             {groups && groups.length > 0 ?
@@ -115,13 +105,13 @@ class OrgDepartmentsList extends React.Component {
             }
           </div>
           <React.Fragment>
-            {this.state.showAddDepartDialog && (
+            {this.props.isShowAddDepartDialog && (
               <ModalPortal>
                 <AddDepartDialog
-                  toggle={this.toggleCancel}
                   onDepartChanged={this.onDepartChanged}
                   parentGroupID={this.props.groupID}
                   groupID={this.state.groupID}
+                  toggle={this.props.toggleAddDepartDialog}
                 />
               </ModalPortal>
             )}