fix-org-member

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({ selectedOption: null });
-        this.setState({ errorMsg: res.data.failed[0] });
+      if (res.data.failed.length > 0) {
+        this.setState({ errMessage: res.data.failed[0].error_msg });
       }
-      this.setState({
+      if (res.data.success.length > 0) {
-        selectedOption: null,
-      });
-      if (res.data.success) {
         this.props.onMemberChanged();
         this.props.toggle();
       }

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

@@ -35,6 +35,8 @@ class Org extends React.Component {
       isShowAddOrgAdminDialog: false,
       isInviteUserDialogOpen: false,
       isShowAddDepartDialog: false,
+      isShowAddMemberDialog: false,
+      isShowAddRepoDialog: false,
       currentTab: 'users',
     };
   }
@@ -75,6 +77,14 @@ class Org extends React.Component {
     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;
@@ -91,6 +101,8 @@ class Org extends React.Component {
           toggleAddOrgUser={this.toggleAddOrgUser}
           toggleInviteUserDialog={this.toggleInviteUserDialog}
           toggleAddDepartDialog={this.toggleAddDepartDialog}
+          toggleAddMemberDialog={this.toggleAddMemberDialog}
+          toggleAddRepoDialog={this.toggleAddRepoDialog}
         >
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'} />
@@ -117,6 +129,10 @@ class Org extends React.Component {
                 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

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

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,
     });
   }
@@ -124,12 +112,6 @@ class OrgDepartmentItem extends React.Component {
                 {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">
@@ -145,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>
@@ -167,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}
@@ -186,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">
@@ -238,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}
               />
@@ -262,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 {
 
@@ -305,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 
@@ -317,18 +303,18 @@ class MemberItem extends React.Component {
             toggleItemFreezed={this.props.toggleItemFreezed}
           />
         </td>
-        {
+        {!this.props.isItemFreezed ?
-          !this.props.isItemFreezed ?
+          <td className="cursor-pointer text-center" onClick={this.props.showDeleteMemberDialog.bind(this, member)}>
-            <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>
-              <span className={`sf2-icon-delete action-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
+          </td> : <td></td>
-            </td> : <td></td>
+        }
-        }        
       </tr>
     );
   }
 }
 
 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';
@@ -28,15 +28,11 @@ class OrgDepartmentsList extends React.Component {
   listDepartGroups = () => {
     if (this.props.groupID) {
       seafileAPI.orgAdminListGroupInfo(orgID, this.props.groupID, true).then(res => {
-        this.setState({
+        this.setState({ groups: res.data.groups });
-          groups: res.data.groups
-        });
       });
     } else {
       seafileAPI.orgAdminListDepartGroups(orgID).then(res => {
-        this.setState({
+        this.setState({ groups: res.data.data });
-          groups: res.data.data
-        });
       });
     }
   }
@@ -141,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) {