[group-member] add-multi-members (#2783)

frontend/src/components/dialog/manage-members-dialog.js

@@ -5,6 +5,7 @@ import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import PermissionEditor from '../permission-editor';
+import UserSelect from '../../models/user-select';
 import '../../css/manage-members-dialog.css';
 
 const propTypes = {
@@ -21,57 +22,37 @@ class ManageMembersDialog extends React.Component {
     this.state = {
       groupMembers: [],
       selectedOption: null,
-      errMessage: '',
+      errMessage: [],
+      clearSelect: false,
     };
-    this.options = [];
   }
 
-  handleSelectChange = (option) => {
+  onSelectChange = (option) => {
     this.setState({
       selectedOption: option,
-      errMessage: '',
+      errMessage: [],
+      clearSelect: false,
     });
-    this.options = [];
-  }
-
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <React.Fragment>
-              <img src={res.data.users[i].avatar_url} className="avatar" alt=""/>
-              <span className="transfer-group-name">{res.data.users[i].name}</span>
-            </React.Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
   }
 
   addGroupMember = () => {
-    if (this.state.selectedOption && this.state.selectedOption.email) {
+    let emails = [];
-      this.refs.memberSelect.select.onChange([], { action: 'clear' });
+    for (let i = 0; i < this.state.selectedOption.length; i++) {
-      seafileAPI.addGroupMember(this.props.groupID, this.state.selectedOption.email).then((res) => {
+      emails.push(this.state.selectedOption[i].email);
+    }
+    seafileAPI.addGroupMembers(this.props.groupID, emails).then((res) => {
       this.onGroupMembersChange();
-        this.options = [];
       this.setState({
         selectedOption: null,
+        clearSelect: true,
       });
-      }).catch((error) => {
+      if (res.data.failed.length > 0) {
-        if (error.response) {
         this.setState({
-            errMessage: error.response.data.error_msg
+          errMessage: res.data.failed
         });
       }
     });
   }
-  }
 
   listGroupMembers = () => {
     seafileAPI.listGroupMembers(this.props.groupID).then((res) => {
@@ -100,17 +81,26 @@ class ManageMembersDialog extends React.Component {
         <ModalBody>
           <p>{gettext('Add group member')}</p>
           <div className='group-transfer'>
-            <AsyncSelect
+            <UserSelect
-              className='group-transfer-select'
+              placeholder='Search users...'
-              isClearable classNamePrefix
+              onSelectChange={this.onSelectChange}
-              loadOptions={this.loadOptions}
+              clearSelect={this.state.clearSelect}
-              onChange={this.handleSelectChange}
+              isMulti={true}
-              placeholder={gettext('Search users...')}
+              className="group-transfer-select"
-              ref="memberSelect"
             />
-            <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button>
+            {this.state.selectedOption ?
+              <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
+              <Button color="secondary" disabled>{gettext('Submit')}</Button>
+            }
           </div>
-          <span className="error">{this.state.errMessage}</span>
+          {
+            this.state.errMessage.length > 0 &&
+            this.state.errMessage.map((item, index = 0) => {
+              return (
+                <div className="group-error error" key={index}>{item.error_msg}</div>
+              );
+            })
+          }
           <div className="manage-members">
             <Table hover size="sm" className="manage-members-table">
               <thead>

frontend/src/css/manage-members-dialog.css

@@ -42,3 +42,6 @@
 .group-transfer .btn {
   width: 75px;
 }
+.group-error {
+  margin-top: 10px;
+}

frontend/src/models/user-select.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AsyncSelect from 'react-select/lib/Async';
+import { seafileAPI } from '../utils/seafile-api.js';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  placeholder: PropTypes.string.isRequired,
+  onSelectChange: PropTypes.func.isRequired,
+  clearSelect: PropTypes.bool.isRequired,
+  isMulti: PropTypes.bool.isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+class UserSelect extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.options = [];
+  }
+
+  handleSelectChange = (option) => {
+    this.options = [];
+    this.props.onSelectChange(option);
+  }
+
+  loadOptions = (input, callback) => {
+    const value = input.trim();
+    if (value.length > 0) {
+      seafileAPI.searchUsers(value).then((res) => {
+        this.options = [];
+        for (let i = 0 ; i < res.data.users.length; i++) {
+          const item = res.data.users[i];
+          let obj = {};
+          obj.value = item.name;
+          obj.email = item.email;
+          obj.label =
+            <React.Fragment>
+              <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
+              <span className='select-module select-module-name'>{item.name}</span>
+            </React.Fragment>;
+          this.options.push(obj);
+        }
+        callback(this.options);
+      });
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.clearSelect === true && this.props.clearSelect === false) {
+      this.refs.userSelect.select.onChange([], { action: 'clear' });
+    }
+  }
+
+  render() {
+    return (
+      <AsyncSelect
+        isClearable
+        classNamePrefix
+        isMulti={this.props.isMulti}
+        loadOptions={this.loadOptions}
+        onChange={this.handleSelectChange}
+        placeholder={gettext(this.props.placeholder)}
+        className={this.props.className}
+        ref="userSelect"
+      />
+    );
+  }
+}
+
+UserSelect.propTypes = propTypes;
+
+export default UserSelect;