Make copied row appear immediately below current row

Author: JElchison

src/editors/table.js

@@ -336,11 +336,14 @@ export class TableEditor extends ArrayEditor {
           return false
         }
 
-        const i = e.currentTarget.getAttribute('data-i') * 1
-        const newval = this.getValue().filter((row, j) => j !== i) /* If this is the one we're deleting */
-        this.setValue(newval)
+        const j = e.currentTarget.getAttribute('data-i') * 1
+        const value = this.getValue()
+
+        value.splice(j, 1)
+
+        this.setValue(value)
         this.onChange(true)
-        this.jsoneditor.trigger('deleteRow', this.rows[i])
+        this.jsoneditor.trigger('deleteRow', this.rows[j])
       })
       controlsHolder.appendChild(this.rows[i].delete_button)
     }
@@ -352,19 +355,15 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].copy_button.addEventListener('click', e => {
         e.preventDefault()
         e.stopPropagation()
-        const i = e.currentTarget.getAttribute('data-i') * 1
+
+        const j = e.currentTarget.getAttribute('data-i') * 1
         const value = this.getValue()
 
-        value.forEach((row, j) => {
-          if (j === i) {
-            value.push(row)
-          }
-        })
+        value.splice(j + 1, 0, value[j])
 
         this.setValue(value)
-        this.refreshValue(true)
         this.onChange(true)
-        this.jsoneditor.trigger('copyRow', value[value.length - 1])
+        this.jsoneditor.trigger('copyRow', this.rows[j + 1])
       })
       controlsHolder.appendChild(this.rows[i].copy_button)
     }
@@ -376,17 +375,15 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].moveup_button.addEventListener('click', e => {
         e.preventDefault()
         e.stopPropagation()
-        const i = e.currentTarget.getAttribute('data-i') * 1
 
-        if (i <= 0) return
-        const rows = this.getValue()
-        const tmp = rows[i - 1]
-        rows[i - 1] = rows[i]
-        rows[i] = tmp
+        const j = e.currentTarget.getAttribute('data-i') * 1
+        const value = this.getValue()
 
-        this.setValue(rows)
+        value.splice(j - 1, 0, value.splice(j, 1)[0])
+
+        this.setValue(value)
         this.onChange(true)
-        this.jsoneditor.trigger('moveRow', this.rows[i - 1])
+        this.jsoneditor.trigger('moveRow', this.rows[j - 1])
       })
       controlsHolder.appendChild(this.rows[i].moveup_button)
     }
@@ -398,17 +395,15 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].movedown_button.addEventListener('click', e => {
         e.preventDefault()
         e.stopPropagation()
-        const i = e.currentTarget.getAttribute('data-i') * 1
-        const rows = this.getValue()
-        if (i >= rows.length - 1) return
 
-        const tmp = rows[i + 1]
-        rows[i + 1] = rows[i]
-        rows[i] = tmp
+        const j = e.currentTarget.getAttribute('data-i') * 1
+        const value = this.getValue()
 
-        this.setValue(rows)
+        value.splice(j + 1, 0, value.splice(j, 1)[0])
+
+        this.setValue(value)
         this.onChange(true)
-        this.jsoneditor.trigger('moveRow', this.rows[i + 1])
+        this.jsoneditor.trigger('moveRow', this.rows[j + 1])
       })
       controlsHolder.appendChild(this.rows[i].movedown_button)
     }

tests/codeceptjs/editors/array_test.js

@@ -12,41 +12,44 @@ Scenario('should trigger array (table) editing triggers', async (I) => {
   I.amOnPage('table-move-events.html');
   I.seeElement('[data-schemapath="root.0"]');
   I.seeElement('[data-schemapath="root.1"]');
+  I.seeElement('[data-schemapath="root.2"]');
+  I.seeElement('[data-schemapath="root.3"]');
+  I.seeElement('[data-schemapath="root.4"]');
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["A","B"]');
+  assert.equal(value, '["A","B","C","D","E"]');
 
   I.amAcceptingPopups();
   I.click('//button[contains(@class, "json-editor-btn-moveup") and @data-i="1"]');
   I.seeInPopup('moveRow');
   I.acceptPopup();
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["B","A"]');
+  assert.equal(value, '["B","A","C","D","E"]');
 
   I.amAcceptingPopups();
-  I.click('//button[contains(@class, "json-editor-btn-movedown") and @data-i="0"]');
+  I.click('//button[contains(@class, "json-editor-btn-movedown") and @data-i="1"]');
   I.seeInPopup('moveRow');
   I.acceptPopup();
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["A","B"]');
+  assert.equal(value, '["B","C","A","D","E"]');
 
   I.amAcceptingPopups();
-  I.click('//button[contains(@class, "json-editor-btn-copy") and @data-i="1"]');
+  I.click('//button[contains(@class, "json-editor-btn-copy") and @data-i="2"]');
   I.seeInPopup('copyRow');
   I.acceptPopup();
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["A","B","B"]');
+  assert.equal(value, '["B","C","A","A","D","E"]');
 
   I.amAcceptingPopups();
   I.click('.json-editor-btntype-add');
   I.seeInPopup('addRow');
   I.acceptPopup();
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["A","B","B",""]');
+  assert.equal(value, '["B","C","A","A","D","E",""]');
 
   // This test will fail when using Puppeteer due to the way Puppeteer handles popups.
   // Puppeteer apparently only sees the text in the last popup, so it doesn't see the
@@ -62,7 +65,7 @@ Scenario('should trigger array (table) editing triggers', async (I) => {
   I.acceptPopup();
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
-  assert.equal(value, '["A","B","B"]');
+  assert.equal(value, '["B","C","A","A","D","E"]');
 
   // This test will fail when using Puppeteer due to the way Puppeteer handles popups.
   I.amAcceptingPopups();

tests/pages/table-move-events.html

@@ -29,7 +29,7 @@
   document.querySelector('.get-value').addEventListener('click', function () {
     debug.value = JSON.stringify(editor.getValue());
   });
-  editor.setValue(["A","B"]);
+  editor.setValue(["A","B","C","D","E"]);
   editor.on('copyRow', function () {
     alert('copyRow');
     console.log('copyRow');