Move and delete rows (dynamic table)

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);
 
-        if (value) {
         this._selectedRow = value;
+
+        if (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();
+            }
+        }
+    }
 }

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>

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');
+    }
 }