From a77d9296c98a5128d74322029cd36d9ef1335c3e Mon Sep 17 00:00:00 2001
From: Michael18811380328 <1822852997@qq.com>
Date: Thu, 13 Dec 2018 17:55:22 +0800
Subject: [PATCH] fix-add-group

---
 .../components/dialog/create-group-dialog.js  | 28 +++++++++++++++----
 .../src/components/toolbar/groups-toolbar.js  |  2 +-
 frontend/src/pages/groups/groups-view.js      | 11 +++++++-
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/dialog/create-group-dialog.js b/frontend/src/components/dialog/create-group-dialog.js
index 030bebe2b7..a28b0d433e 100644
--- a/frontend/src/components/dialog/create-group-dialog.js
+++ b/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,
 };
 
diff --git a/frontend/src/components/toolbar/groups-toolbar.js b/frontend/src/components/toolbar/groups-toolbar.js
index 5f3e821c76..e0038ef9b5 100644
--- a/frontend/src/components/toolbar/groups-toolbar.js
+++ b/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")}
diff --git a/frontend/src/pages/groups/groups-view.js b/frontend/src/pages/groups/groups-view.js
index e9a6aa88fe..f828168f6f 100644
--- a/frontend/src/pages/groups/groups-view.js
+++ b/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}
           />
         }