Merge pull request #3393 from haiwen/adjust-button

adjust button position

frontend/src/components/dialog/org-add-member-dialog.js

@@ -30,15 +30,13 @@ class AddMemberDialog extends React.Component {
     if (!this.state.selectedOption) return;
     const email = this.state.selectedOption.email;
     this.refs.orgSelect.clearSelect();
-    this.setState({ errorMsg: [] });
+    this.setState({ errMessage: [] });
     seafileAPI.orgAdminAddDepartGroupUser(orgID, this.props.groupID, email).then((res) => {
-      if (res.data.failed) {
-        this.setState({ errorMsg: res.data.failed[0] });
+      this.setState({ selectedOption: null });
+      if (res.data.failed.length > 0) {
+        this.setState({ errMessage: res.data.failed[0].error_msg });
       }
-      this.setState({
-        selectedOption: null,
-      });
-      if (res.data.success) {
+      if (res.data.success.length > 0) {
         this.props.onMemberChanged();
         this.props.toggle();
       }

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

@@ -34,6 +34,9 @@ class Org extends React.Component {
       isShowAddOrgUserDialog: false,
       isShowAddOrgAdminDialog: false,
       isInviteUserDialogOpen: false,
+      isShowAddDepartDialog: false,
+      isShowAddMemberDialog: false,
+      isShowAddRepoDialog: false,
       currentTab: 'users',
     };
   }
@@ -70,8 +73,19 @@ class Org extends React.Component {
     this.setState({isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen});
   }
 
-  render() {
+  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 href = window.location.href;
     let newPath = 'groups/';
@@ -81,7 +95,15 @@ 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}
+          toggleAddMemberDialog={this.toggleAddMemberDialog}
+          toggleAddRepoDialog={this.toggleAddRepoDialog}
+        >
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'} />
             <OrgUsers 
@@ -98,8 +120,20 @@ class Org extends React.Component {
             <OrgLibraries path={siteRoot + 'org/repoadmin'} />
             <OrgLinks path={siteRoot + 'org/publinkadmin'} />
             <OrgDepartments path={siteRoot + 'org/departmentadmin'}>
-              <OrgDepartmentsList path='/' />
-              <OrgDepartmentItem path={newPath} />
+              <OrgDepartmentsList
+                path='/'
+                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
+                toggleAddDepartDialog={this.toggleAddDepartDialog}
+              />
+              <OrgDepartmentItem
+                path={newPath}
+                isShowAddDepartDialog={this.state.isShowAddDepartDialog}
+                toggleAddDepartDialog={this.toggleAddDepartDialog}
+                isShowAddMemberDialog={this.state.isShowAddMemberDialog}
+                toggleAddMemberDialog={this.toggleAddMemberDialog}
+                isShowAddRepoDialog={this.state.isShowAddRepoDialog}
+                toggleAddRepoDialog={this.toggleAddRepoDialog}
+              />
             </OrgDepartments>
             <OrgLogs
               path={siteRoot + 'org/logadmin'}

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext, invitationLink } from '../../utils/constants';
 import Account from '../../components/common/account';
 
+const groupID = window.org.pageOptions.groupID;
 const propTypes = {
   currentTab: PropTypes.string.isRequired,
   children: PropTypes.object.isRequired,
@@ -22,6 +23,7 @@ class MainPanel extends Component {
   }
 
   render() {
+    const topBtn = 'btn btn-secondary operation-item';
     return (
       <div className="main-panel o-hidden">
         <div className="main-panel-north border-left-show">
@@ -45,6 +47,18 @@ class MainPanel extends Component {
                 <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>
+              }
             </div>
           </div>
           <div className="common-toolbar">

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils.js';
-import { serviceURL, mediaUrl, gettext, orgID } from '../../utils/constants';
+import { serviceURL, gettext, orgID } from '../../utils/constants';
 import OrgDepartmentsList from './org-departments-list';
 import ModalPortal from '../../components/modal-portal';
 import AddMemberDialog from '../../components/dialog/org-add-member-dialog';
@@ -23,14 +23,12 @@ class OrgDepartmentItem extends React.Component {
       ancestorGroups: [],
       deletedMember: {},
       deletedRepo: {},
-      showAddMemberDialog: false,
       showDeleteMemberDialog: false,
-      showAddRepoDialog: false,
       showDeleteRepoDialog: false,
       isItemFreezed: false,
       groupID: null,
       groupName: '',
-    }
+    };
   }
 
   listOrgGroupRepo = (groupID) => {
@@ -52,27 +50,17 @@ class OrgDepartmentItem extends React.Component {
     });
   }
 
-  showAddMemberDialog = () => {
-    this.setState({ showAddMemberDialog: true });
-  }
-
   showDeleteMemberDialog = (member) => {
     this.setState({ showDeleteMemberDialog: true, deletedMember: member });
   }
 
-  showAddRepoDialog = () => {
-    this.setState({ showAddRepoDialog: true });
-  }
-
   showDeleteRepoDialog = (repo) => {
     this.setState({ showDeleteRepoDialog: true, deletedRepo: repo });
   }
 
   toggleCancel = () => {
     this.setState({
-      showAddMemberDialog: false,
       showDeleteMemberDialog: false,
-      showAddRepoDialog: false,
       showDeleteRepoDialog: false,
     });
   }
@@ -109,25 +97,29 @@ 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">
-            <h3 className="sf-heading">
-              { this.state.groupID ? 
-                <a href={serviceURL + '/org/departmentadmin/'}>{gettext('Departments')}</a>
-                : <span>{gettext('Departments')}</span>
-              }
-              {
-                this.state.ancestorGroups.map(ancestor => {
+            <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 => {
                   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>
+                })}
+                {this.state.groupID && <span>{' / '}{this.state.groupName}</span>}
+              </h3>
+            </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">
@@ -135,12 +127,9 @@ class OrgDepartmentItem extends React.Component {
               <div className="fleft">
                 <h3 className="sf-heading">{gettext('Members')}</h3>
               </div>
-              <div className="fright">
-                <button className="btn-white operation-item" onClick={this.showAddMemberDialog}>{gettext('Add Member')}</button>
-              </div>
             </div>
             <div className="cur-view-content">
-              {(members && members.length === 1 && members[0].role === "Owner") ?
+              {(members && members.length === 1 && members[0].role === 'Owner') ?
                 <p className="no-member">{gettext('No members')}</p> :
                 <table>
                   <thead>
@@ -157,7 +146,6 @@ class OrgDepartmentItem extends React.Component {
                         <React.Fragment key={index}>
                           <MemberItem
                             member={member}
-                            showAddMemberDialog={this.showAddMemberDialog}
                             showDeleteMemberDialog={this.showDeleteMemberDialog}
                             isItemFreezed={this.state.isItemFreezed}
                             onMemberChanged={this.onMemberChanged}
@@ -176,9 +164,6 @@ class OrgDepartmentItem extends React.Component {
           <div className="cur-view-subcontainer org-libriries">
             <div className="cur-view-path">
               <div className="fleft"><h3 className="sf-heading">{gettext('Libraries')}</h3></div>
-              <div className="fright">
-                <button className="btn-white operation-item" onClick={this.showAddRepoDialog}>{gettext('New Library')}</button>
-              </div>
             </div>
             { repos.length > 0 ?
               <div className="cur-view-content">
@@ -228,19 +213,19 @@ class OrgDepartmentItem extends React.Component {
               />
             </ModalPortal>
           )}
-          {this.state.showAddMemberDialog && (
+          {this.props.isShowAddMemberDialog && (
             <ModalPortal>
               <AddMemberDialog
-                toggle={this.toggleCancel}
+                toggle={this.props.toggleAddMemberDialog}
                 onMemberChanged={this.onMemberChanged}
                 groupID={this.state.groupID}
               />
             </ModalPortal>
           )}
-          {this.state.showAddRepoDialog && (
+          {this.props.isShowAddRepoDialog && (
             <ModalPortal>
               <AddRepoDialog
-                toggle={this.toggleCancel}
+                toggle={this.props.toggleAddRepoDialog}
                 onRepoChanged={this.onRepoChanged}
                 groupID={this.state.groupID}
               />
@@ -252,6 +237,17 @@ 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 {
 
@@ -295,7 +291,7 @@ class MemberItem extends React.Component {
     if (member.role === 'Owner') return null;
     return (
       <tr className={highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><img src={member.avatar_url} alt="member-header" width="24"/></td>
+        <td><img src={member.avatar_url} alt="member-header" width="24" className="avatar"/></td>
         <td><a href={memberLink}>{member.name}</a></td>
         <td>
           <RoleEditor 
@@ -307,11 +303,10 @@ class MemberItem extends React.Component {
             toggleItemFreezed={this.props.toggleItemFreezed}
           />
         </td>
-        {
-          !this.props.isItemFreezed ?
-            <td className="cursor-pointer text-center" onClick={this.props.showDeleteMemberDialog.bind(this, member)}>
-              <span className={`sf2-icon-delete action-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
-            </td> : <td></td>
+        {!this.props.isItemFreezed ?
+          <td className="cursor-pointer text-center" onClick={this.props.showDeleteMemberDialog.bind(this, member)}>
+            <span className={`sf2-icon-x3 action-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
+          </td> : <td></td>
         }
       </tr>
     );
@@ -319,6 +314,7 @@ class MemberItem extends React.Component {
 }
 
 const MemberItemPropTypes = {
+  member: PropTypes.object.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   onMemberChanged: PropTypes.func.isRequired,
   showDeleteMemberDialog: PropTypes.func.isRequired,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
-import { siteRoot, serviceURL, gettext, orgID, lang } from '../../utils/constants';
+import { serviceURL, gettext, orgID, lang } from '../../utils/constants';
 import { Utils } from '../../utils/utils.js';
 import ModalPortal from '../../components/modal-portal';
 import AddDepartDialog from '../../components/dialog/org-add-department-dialog';
@@ -20,7 +20,6 @@ class OrgDepartmentsList extends React.Component {
       groups: null,
       groupID: -1,
       groupName: '',
-      showAddDepartDialog: false,
       showDeleteDepartDialog: false,
       showSetGroupQuotaDialog: false,
     };
@@ -29,23 +28,15 @@ class OrgDepartmentsList extends React.Component {
   listDepartGroups = () => {
     if (this.props.groupID) {
       seafileAPI.orgAdminListGroupInfo(orgID, this.props.groupID, true).then(res => {
-        this.setState({
-          groups: res.data.groups
-        });
+        this.setState({ groups: res.data.groups });
       });
     } else {
       seafileAPI.orgAdminListDepartGroups(orgID).then(res => {
-        this.setState({
-          groups: res.data.data
-        });
+        this.setState({ groups: res.data.data });
       });
     }
   }
 
-  showAddDepartDialog = () => {
-    this.setState({ showAddDepartDialog: true });
-  }
-
   showDeleteDepartDialog = (group) => {
     this.setState({ showDeleteDepartDialog: true, groupID: group.id, groupName: group.name });
   }
@@ -56,7 +47,6 @@ class OrgDepartmentsList extends React.Component {
 
   toggleCancel = () => {
     this.setState({
-      showAddDepartDialog: false,
       showDeleteDepartDialog: false,
       showSetGroupQuotaDialog: false,
     });
@@ -74,16 +64,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 +101,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>
             )}
@@ -151,6 +137,14 @@ 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) {