From 4f566a7ba2894dbc699d6cef6e207d9ad955f54d Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 20 Oct 2016 12:07:28 +0100
Subject: [PATCH] Move and delete rows (dynamic table)

---
 .../widgets/core/dynamic-table.model.ts       | 41 ++++++++++++++++++-
 .../dynamic-table/dynamic-table.widget.html   | 27 ++++++++++++
 .../dynamic-table/dynamic-table.widget.ts     | 30 ++++++++++++++
 3 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts
index 88ca94ce66..1ca9ae732d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts
@@ -43,8 +43,9 @@ export class DynamicTableModel extends FormWidgetModel {
 
         this.rows.forEach(row => row.selected = false);
 
+        this._selectedRow = value;
+
         if (value) {
-            this._selectedRow = value;
             this._selectedRow.selected = true;
         }
     }
@@ -65,4 +66,42 @@ export class DynamicTableModel extends FormWidgetModel {
             }
         }
     }
+
+    flushValue() {
+        this.field.value = this.rows.map(r => r.value);
+        this.field.updateForm();
+    }
+
+    moveRow(row: DynamicTableRow, offset: number) {
+        let oldIndex = this.rows.indexOf(row);
+        if (oldIndex > -1) {
+            let newIndex = (oldIndex + offset);
+
+            if (newIndex < 0) {
+                newIndex = 0;
+            } else if (newIndex >= this.rows.length) {
+                newIndex = this.rows.length;
+            }
+
+            let arr = this.rows.slice();
+            arr.splice(oldIndex, 1);
+            arr.splice(newIndex, 0, row);
+            this.rows = arr;
+
+            this.flushValue();
+        }
+    }
+
+    deleteRow(row: DynamicTableRow) {
+        if (row) {
+            if (this.selectedRow === row) {
+                this.selectedRow = null;
+            }
+            let idx = this.rows.indexOf(row);
+            if (idx > -1) {
+                this.rows.splice(idx, 1);
+                this.flushValue();
+            }
+        }
+    }
 }
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
index 23ffd99b58..799bc19d86 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
@@ -23,5 +23,32 @@
         </tbody>
     </table>
 
+    <div>
+        <button class="mdl-button mdl-js-button mdl-button--icon"
+                [disabled]="!hasSelection()"
+                (click)="moveSelectionUp()">
+            <i class="material-icons">arrow_upward</i>
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--icon"
+                [disabled]="!hasSelection()"
+                (click)="moveSelectionDown()">
+            <i class="material-icons">arrow_downward</i>
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--icon"
+                (click)="addNewRow()">
+            <i class="material-icons">add_circle_outline</i>
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--icon"
+                [disabled]="!hasSelection()"
+                (click)="deleteSelection()">
+            <i class="material-icons">remove_circle_outline</i>
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--icon"
+                [disabled]="!hasSelection()"
+                (click)="editSelection()">
+            <i class="material-icons">edit</i>
+        </button>
+    </div>
+
      <span *ngIf="content.validationSummary" class="mdl-textfield__error">{{content.validationSummary}}</span>
 </div>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
index b0eceaf07c..cab933f33a 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
@@ -38,4 +38,34 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
             this.content.selectedRow = row;
         }
     }
+
+    hasSelection(): boolean {
+        return !!(this.content && this.content.selectedRow);
+    }
+
+    moveSelectionUp() {
+        if (this.content) {
+            this.content.moveRow(this.content.selectedRow, -1);
+        }
+    }
+
+    moveSelectionDown() {
+        if (this.content) {
+            this.content.moveRow(this.content.selectedRow, 1);
+        }
+    }
+
+    addNewRow() {
+        console.log('add new row clicked');
+    }
+
+    deleteSelection() {
+        if (this.content) {
+            this.content.deleteRow(this.content.selectedRow);
+        }
+    }
+
+    editSelection() {
+        console.log('edit selection clicked');
+    }
 }