Cloning Rows

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

@@ -71,6 +71,7 @@ class Browser extends DashboardView {
       data: null,
       lastMax: -1,
       newObject: null,
+      editCloneRows: null,
 
       lastError: null,
       lastNote: null,
@@ -121,6 +122,7 @@ class Browser extends DashboardView {
     this.closeEditRowDialog = this.closeEditRowDialog.bind(this);
     this.handleShowAcl = this.handleShowAcl.bind(this);
     this.onDialogToggle = this.onDialogToggle.bind(this);
+    this.addEditCloneRows = this.addEditCloneRows.bind(this);
     this.abortAddRow = this.abortAddRow.bind(this);
   }
 
@@ -309,6 +311,12 @@ class Browser extends DashboardView {
     this.showEditRowDialog();
   }
 
+  addEditCloneRows(cloneRows) {
+    this.setState({
+      editCloneRows: cloneRows
+    });
+  }
+
   removeColumn(name) {
     let payload = {
       className: this.props.params.className,
@@ -339,6 +347,7 @@ class Browser extends DashboardView {
       newObject: null,
       lastMax: -1,
       selection: {},
+      editCloneRows: null,
     };
     if (relation) {
       await this.setState(initialState);
@@ -550,8 +559,12 @@ class Browser extends DashboardView {
   }
 
   updateRow(row, attr, value) {
-    const isNewObject = row < 0;
-    const obj = isNewObject ? this.state.newObject : this.state.data[row];
+    let isNewObject = row === -1;
+    let isEditCloneObj = row < -1;
+    let obj = isNewObject ? this.state.newObject : this.state.data[row];
+    if(isEditCloneObj){
+      obj = this.state.editCloneRows[row + (this.state.editCloneRows.length + 1)];
+    }
     if (!obj) {
       return;
     }
@@ -565,11 +578,11 @@ class Browser extends DashboardView {
       obj.set(attr, value);
     }
     obj.save(null, { useMasterKey: true }).then((objectSaved) => {
-      const createdOrUpdated = isNewObject ? 'created' : 'updated';
+      const createdOrUpdated = isNewObject || isEditCloneObj ? 'created' : 'updated';
       let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + createdOrUpdated;
       this.showNote(msg, false);
 
-      const state = { data: this.state.data };
+      const state = { data: this.state.data, editCloneRows: this.state.editCloneRows };
 
       if (isNewObject) {
         const relation = this.state.relation;
@@ -608,13 +621,23 @@ class Browser extends DashboardView {
           this.state.counts[obj.className] += 1;
         }
       }
+      if (isEditCloneObj) {
+        state.editCloneRows = state.editCloneRows.filter(
+          cloneObj => cloneObj._localId !== obj._localId
+        );
+        if (state.editCloneRows.length === 0) state.editCloneRows = 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) {
+      if (!isNewObject && !isEditCloneObj) {
         obj.set(attr, prev);
         this.setState({ data: this.state.data });
       }
@@ -855,6 +878,9 @@ class Browser extends DashboardView {
         }
       });
     } catch (error) {
+      if(error.code === 137){
+        this.addEditCloneRows(toClone);
+      }
       this.setState({
         selection: {},
         showCloneSelectedRowsDialog: false
@@ -1050,6 +1076,7 @@ class Browser extends DashboardView {
             data={this.state.data}
             ordering={this.state.ordering}
             newObject={this.state.newObject}
+            editCloneRows={this.state.editCloneRows}
             relation={this.state.relation}
             disableKeyControls={this.hasExtras()}
             updateRow={this.updateRow}

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

@@ -115,6 +115,46 @@ export default class BrowserTable extends React.Component {
         (rowWidth, { visible, width }) => visible ? rowWidth + width : rowWidth,
         this.props.onAddRow ? 210 : 0
       );
+      let editCloneRows = null;
+      if(this.props.editCloneRows){
+        editCloneRows = (
+          <div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
+            {this.props.editCloneRows.map((cloneRow, idx) => {
+              let index = (this.props.editCloneRows.length + 1) * -1 + idx;
+              const currentCol = this.props.current && this.props.current.row === index ? this.props.current.col : undefined;
+              const isEditingRow = this.props.current && this.props.current.row === index && !!this.props.editing;
+              return (
+                <BrowserRow
+                  key={index}
+                  isEditing={isEditingRow}
+                  className={this.props.className}
+                  columns={this.props.columns}
+                  schema={this.props.schema}
+                  simplifiedSchema={this.props.simplifiedSchema}
+                  filters={this.props.filters}
+                  currentCol={currentCol}
+                  isUnique={this.props.isUnique}
+                  obj={cloneRow}
+                  onPointerClick={this.props.onPointerClick}
+                  onFilterChange={this.props.onFilterChange}
+                  order={this.props.order}
+                  readOnlyFields={READ_ONLY}
+                  row={index}
+                  rowWidth={rowWidth}
+                  selection={this.props.selection}
+                  selectRow={this.props.selectRow}
+                  setCurrent={this.props.setCurrent}
+                  setEditing={this.props.setEditing}
+                  setRelation={this.props.setRelation}
+                  setCopyableValue={this.props.setCopyableValue}
+                  setContextMenu={this.props.setContextMenu}
+                  onEditSelectedRow={this.props.onEditSelectedRow}
+                />
+              );
+            })}
+          </div>
+        )
+      }
       let newRow = null;
       if (this.props.newObject && this.state.offset <= 0) {
         const currentCol = this.props.current && this.props.current.row === -1 ? this.props.current.col : undefined;
@@ -205,6 +245,9 @@ export default class BrowserTable extends React.Component {
           }
           let obj = this.props.current.row < 0 ? this.props.newObject : this.props.data[this.props.current.row];
           let value = obj;
+          if(!obj && this.props.current.row < -1){
+            obj = this.props.editCloneRows[this.props.current.row + this.props.editCloneRows.length + 1];
+          }
           if (!this.props.isUnique) {
             if (type === 'Array' || type === 'Object') {
               // This is needed to avoid unwanted conversions of objects to Parse.Objects.
@@ -226,9 +269,15 @@ export default class BrowserTable extends React.Component {
             value = '';
           }
           let wrapTop = Math.max(0, this.props.current.row * ROW_HEIGHT);
+          if(this.props.current.row < -1 && this.props.editCloneRows){
+            wrapTop = ROW_HEIGHT * (this.props.current.row + (this.props.editCloneRows.length + 1));
+          }
           if (this.props.current.row > -1 && this.props.newObject) {
             wrapTop += 60;
           }
+          if (this.props.current.row >= -1 && this.props.editCloneRows) {
+            wrapTop += ROW_HEIGHT * (this.props.editCloneRows.length + 1);
+          }  
           let wrapLeft = 30;
           for (let i = 0; i < this.props.current.col; i++) {
             const column = this.props.order[i];
@@ -297,6 +346,7 @@ export default class BrowserTable extends React.Component {
         table = (
           <div className={styles.table} ref='table'>
             <div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
+            {editCloneRows}
             {newRow}
             {rows}
             <div style={{ height: Math.max(0, (this.props.data.length - this.state.offset - MAX_ROWS) * ROW_HEIGHT) }} />