fix add admin dialog bug

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

@@ -1,33 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
 import UserSelect from '../user-select';
+import { seafileAPI } from '../../utils/seafile-api';
+import OrgUserInfo from '../../models/org-user';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
-  addOrgAdmin: PropTypes.func.isRequired,
+  onAddedOrgAdmin: PropTypes.func.isRequired,
 };
 
 class AddOrgAdminDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedOption: null
+      selectedOption: null,
+      errMessage: '',
     };
     this.options = [];
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({
+      selectedOption: option,
+      errMessage: ''
+    });
     this.options = [];
   }
 
   addOrgAdmin = () => {
-    if (this.state.selectedOption) {
-      let userEmail = this.state.selectedOption.email;
-      this.props.addOrgAdmin(userEmail);
+    if (!this.state.selectedOption) return;
+    const userEmail = this.state.selectedOption.email;
+    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
+      let userInfo = new OrgUserInfo(res.data);
+      this.props.onAddedOrgAdmin(userInfo);
+    }).catch((error) => {
+      if (error.response) {
+        this.setState({
+          errMessage: error.response.data.error_msg
+        });
       }
+    });
   }
 
   toggle = () => {
@@ -46,6 +60,7 @@ class AddOrgAdminDialog extends React.Component {
             placeholder={gettext('Select a user as admin...')}
             onSelectChange={this.handleSelectChange}
           />
+          {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>

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

@@ -99,8 +99,8 @@ class OrgLibraries extends Component {
                 <thead>
                   <tr>
                     <th width="4%"></th>
-                    <th width="31%">{gettext('Name')}</th>
-                    <th width="26%">ID</th>
+                    <th width="27%">{gettext('Name')}</th>
+                    <th width="30%">ID</th>
                     <th width="24%">{gettext('Owner')}</th>
                     <th width="15%" className="text-center">{gettext('Operations')}</th>
                   </tr>

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

@@ -69,6 +69,7 @@ class OrgUsers extends Component {
       Toast.success(msg);
     }).catch(err => {
       Toast.danger(err.response.data.error_msg);
+      this.toggleAddOrgUser();
     });
   }
 
@@ -113,9 +114,7 @@ class OrgUsers extends Component {
     });
   }
 
-  addOrgAdmin = (userEmail) => {
-    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
-      let userInfo = new OrgUserInfo(res.data);
+  onAddedOrgAdmin = (userInfo) => {
     this.state.orgAdminUsers.unshift(userInfo);
     this.setState({
       orgAdminUsers: this.state.orgAdminUsers
@@ -124,7 +123,6 @@ class OrgUsers extends Component {
     msg = msg.replace('%s', userInfo.email);
     Toast.success(msg);
     this.toggleAddOrgAdmin();
-    });
   } 
 
   render() {
@@ -138,7 +136,7 @@ class OrgUsers extends Component {
           </button>
           {this.state.isShowAddOrgAdminDialog &&
             <ModalPortal>
-              <AddOrgAdminDialog toggle={this.toggleAddOrgAdmin} addOrgAdmin={this.addOrgAdmin}/>
+              <AddOrgAdminDialog toggle={this.toggleAddOrgAdmin} onAddedOrgAdmin={this.onAddedOrgAdmin}/>
             </ModalPortal>
           }
         </Fragment>