added cancel button for new row (#1690)

* added cancel button for new row

* removed extra line on add new row

* added "add" button for new row

* changed order of button for new row

Author: sadakchap

src/dashboard/Data/Browser/Browser.react.js

@@ -122,6 +122,7 @@ class Browser extends DashboardView {
     this.handleShowAcl = this.handleShowAcl.bind(this);
     this.onDialogToggle = this.onDialogToggle.bind(this);
     this.abortAddRow = this.abortAddRow.bind(this);
+    this.saveNewRow = this.saveNewRow.bind(this);
   }
 
   componentWillMount() {
@@ -303,6 +304,66 @@ class Browser extends DashboardView {
     }
   }
 
+  saveNewRow(){
+    const obj = this.state.newObject;
+    if (!obj) {
+      return;
+    }
+
+    obj.save(null, { useMasterKey: true }).then(
+      objectSaved => {
+        let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
+        this.showNote(msg, false);
+
+        const state = { data: this.state.data };
+        const relation = this.state.relation;
+        if (relation) {
+          const parent = relation.parent;
+          const parentRelation = parent.relation(relation.key);
+          parentRelation.add(obj);
+          const targetClassName = relation.targetClassName;
+          parent.save(null, { useMasterKey: true }).then(
+            () => {
+              this.setState({
+                newObject: null,
+                data: [obj, ...this.state.data],
+                relationCount: this.state.relationCount + 1,
+                counts: {
+                  ...this.state.counts,
+                  [targetClassName]: this.state.counts[targetClassName] + 1
+                }
+              });
+            },
+            error => {
+              let msg = typeof error === "string" ? error : error.message;
+              if (msg) {
+                msg = msg[0].toUpperCase() + msg.substr(1);
+              }
+              obj.set(attr, prev);
+              this.setState({ data: this.state.data });
+              this.showNote(msg, true);
+            }
+          );
+        } else {
+          state.newObject = null;
+          if (this.props.params.className === obj.className) {
+            this.state.data.unshift(obj);
+          }
+          this.state.counts[obj.className] += 1;
+        }
+        
+        this.setState(state);
+      },
+      error => {
+        let msg = typeof error === "string" ? error : error.message;
+        if (msg) {
+          msg = msg[0].toUpperCase() + msg.substr(1);
+        }
+        this.showNote(msg, true);
+      }
+    );
+  }
+
   addRowWithModal() {
     this.addRow();
     this.selectRow(undefined, true);
@@ -573,60 +634,22 @@ class Browser extends DashboardView {
     } else {
       obj.set(attr, value);
     }
+    if(isNewObject){
+      this.setState({
+        isNewObject: obj
+      });
+      return;
+    }
     obj.save(null, { useMasterKey: true }).then((objectSaved) => {
-      const createdOrUpdated = isNewObject ? 'created' : 'updated';
-      let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + createdOrUpdated;
+      let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
       this.showNote(msg, false);
-
       const state = { data: this.state.data };
-
-      if (isNewObject) {
-        const relation = this.state.relation;
-        if (relation) {
-          const parent = relation.parent;
-          const parentRelation = parent.relation(relation.key);
-          parentRelation.add(obj);
-          const targetClassName = relation.targetClassName;
-          parent.save(null, { useMasterKey: true }).then(() => {
-            this.setState({
-              newObject: null,
-              data: [
-                obj,
-                ...this.state.data,
-              ],
-              relationCount: this.state.relationCount + 1,
-              counts: {
-                ...this.state.counts,
-                [targetClassName]: this.state.counts[targetClassName] + 1,
-              },
-            });
-          }, (error) => {
-            let msg = typeof error === 'string' ? error : error.message;
-            if (msg) {
-              msg = msg[0].toUpperCase() + msg.substr(1);
-            }
-            obj.set(attr, prev);
-            this.setState({ data: this.state.data });
-            this.showNote(msg, true);
-          });
-        } else {
-          state.newObject = null;
-          if (this.props.params.className === obj.className) {
-            this.state.data.unshift(obj);
-          }
-          this.state.counts[obj.className] += 1;
-        }
-      }
       this.setState(state);
     }, (error) => {
       let msg = typeof error === 'string' ? error : error.message;
       if (msg) {
         msg = msg[0].toUpperCase() + msg.substr(1);
       }
-      if (!isNewObject) {
-        obj.set(attr, prev);
-        this.setState({ data: this.state.data });
-      }
 
       this.showNote(msg, true);
     });
@@ -1048,6 +1071,7 @@ class Browser extends DashboardView {
             onCloneSelectedRows={this.showCloneSelectedRowsDialog}
             onEditSelectedRow={this.showEditRowDialog}
             onEditPermissions={this.onDialogToggle}
+            onSaveNewRow={this.saveNewRow}
             onAbortAddRow={this.abortAddRow}
 
             columns={columns}
@@ -1067,6 +1091,7 @@ class Browser extends DashboardView {
             setRelation={this.setRelation}
             onAddColumn={this.showAddColumn}
             onAddRow={this.addRow}
+            onAbortAddRow={this.abortAddRow}
             onAddRowWithModal={this.addRowWithModal}
             onAddClass={this.showCreateClass}
             showNote={this.showNote} />

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -119,7 +119,7 @@ export default class BrowserTable extends React.Component {
       if (this.props.newObject && this.state.offset <= 0) {
         const currentCol = this.props.current && this.props.current.row === -1 ? this.props.current.col : undefined;
         newRow = (
-          <div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
+          <div style={{ borderBottom: '1px solid #169CEE' }}>
             <BrowserRow
               key={-1}
               className={this.props.className}
@@ -140,7 +140,24 @@ export default class BrowserTable extends React.Component {
               setRelation={this.props.setRelation}
               setCopyableValue={this.props.setCopyableValue}
               setContextMenu={this.props.setContextMenu}
-              onEditSelectedRow={this.props.onEditSelectedRow} />
+              onEditSelectedRow={this.props.onEditSelectedRow} 
+            />
+            <Button
+              value="Add"
+              width="55px"
+              primary={true}
+              onClick={() => {
+                this.props.onSaveNewRow();
+                this.props.setEditing(false);
+              }}
+              additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
+            />
+            <Button
+              value="Cancel"
+              width="55px"
+              onClick={this.props.onAbortAddRow}
+              additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
+            />
           </div>
         );
       }