Merge pull request #2643 from haiwen/fix-add-group

fix-create-group

frontend/src/components/dialog/create-group-dialog.js

@@ -10,6 +10,7 @@ class CreateGroupDialog extends React.Component {
     super(props);
     this.state = {
       groupName: '',
+      errorMsg: '',
     };
   }
 
@@ -18,6 +19,11 @@ class CreateGroupDialog extends React.Component {
     this.setState({
       groupName: name
     });
+    if (this.state.errorMsg) {
+      this.setState({
+        errorMsg: ''
+      })
+    }
   }
 
   handleSubmitGroup = () => {
@@ -25,13 +31,23 @@ class CreateGroupDialog extends React.Component {
     if (name) {
       let that = this;
       seafileAPI.createGroup(name).then((res)=> {
-        that.props.listGroups();
+        that.props.onCreateGroup();
+      }).catch((error) => {
+        let errorMsg = gettext(error.response.data.error_msg);
+        this.setState({
+          errorMsg: errorMsg
+        });
       });
     }
     this.setState({
       groupName: '',
     });
-    this.props.toggleAddGroupModal();
+  }
+
+  handleKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      this.handleSubmitGroup();
+    }
   }
 
   render() {
@@ -40,11 +56,13 @@ class CreateGroupDialog extends React.Component {
         <ModalHeader toggle={this.toggle}>{gettext('New group')}</ModalHeader>
         <ModalBody>
           <label htmlFor="groupName">{gettext('Name')}</label>
-          <Input type="text" id="groupName" value={this.state.groupName} onChange={this.handleGroupChange}/>
+          <Input type="text" id="groupName" value={this.state.groupName}
+            onChange={this.handleGroupChange} onKeyDown={this.handleKeyDown}/>
+          <span className="error">{this.state.errorMsg}</span>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.handleSubmitGroup}>{gettext('Submit')}</Button>
           <Button color="secondary" onClick={this.props.toggleAddGroupModal}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.handleSubmitGroup}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );
@@ -53,7 +71,7 @@ class CreateGroupDialog extends React.Component {
 
 const CreateGroupDialogPropTypes = {
   toggleAddGroupModal: PropTypes.func.isRequired,
-  listGroups: PropTypes.func.isRequired,
+  onCreateGroup: PropTypes.func.isRequired,
   showAddGroupModal: PropTypes.bool.isRequired,
 };
 

frontend/src/components/toolbar/groups-toolbar.js

@@ -21,7 +21,7 @@ class GroupsToolbar extends React.Component {
     let { onShowSidePanel, onSearchedClick } = this.props;
     return (
       <div className="main-panel-north">
-        <div className="cur-view-toolbar">
+        <div className="cur-view-toolbar border-left-show">
           <div className="operation">
             <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
               <i className="fas fa-plus-square op-icon"></i>{gettext("New Group")}

frontend/src/pages/groups/groups-view.js

@@ -122,6 +122,15 @@ class GroupsView extends React.Component {
     });
   }
 
+  onCreateGroup = () => {
+    this.setState({
+      showAddGroupModal: false,
+      isLoading: true,
+      groupList: [],
+    });
+    this.listGroups();
+  }
+
   componentDidMount() {
     this.listGroups();
   }
@@ -154,7 +163,7 @@ class GroupsView extends React.Component {
         { this.state.showAddGroupModal &&
           <CreateGroupDialog
             toggleAddGroupModal={this.toggleAddGroupModal}
-            listGroups={this.listGroups}
+            onCreateGroup={this.onCreateGroup}
             showAddGroupModal={this.state.showAddGroupModal}
           />
         }