#985 'required' validation for dynamic table

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts

@@ -37,7 +37,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.FUNCTIONAL_GROUP,
         FormFieldTypes.RADIO_BUTTONS,
         FormFieldTypes.UPLOAD,
-        FormFieldTypes.AMOUNT
+        FormFieldTypes.AMOUNT,
+        FormFieldTypes.DYNAMIC_TABLE
     ];
 
     isSupported(field: FormFieldModel): boolean {
@@ -66,6 +67,10 @@ export class RequiredFieldValidator implements FormFieldValidator {
                 return field.value && field.value.length > 0;
             }
 
+            if (field.type === FormFieldTypes.DYNAMIC_TABLE) {
+                return field.value && field.value instanceof Array && field.value.length > 0;
+            }
+
             if (field.value === null || field.value === undefined || field.value === '') {
                 return false;
             }

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css

@@ -7,27 +7,32 @@
     background-color: #eef !important;
 }
 
-.dynamic-table-widget__table {
+.dynamic-table-widget__table-container {
     overflow-y: auto;
     width: 100%;
 }
 
-.dynamic-table-widget__table > table {
+.dynamic-table-widget__table {
     width: 100%;
 }
 
-.dynamic-table-widget__invalid .mdl-textfield__input {
+.dynamic-table-widget__invalid .dynamic-table-widget__label {
-    border-color: #d50000;
-}
-
-.dynamic-table-widget__invalid .mdl-textfield__label {
     color: #d50000;
 }
 
-.dynamic-table-widget__invalid .mdl-textfield__label:after {
+.dynamic-table-widget__invalid .dynamic-table-widget__table-container {
-    background-color: #d50000;
+    border: 1px solid #d50000;
 }
 
-.dynamic-table-widget__invalid .mdl-textfield__error {
+.dynamic-table-widget__invalid .dynamic-table-widget__table {
+    border: none;
+}
+
+.dynamic-table-widget__summary {
+    visibility: hidden;
+    color: #d50000;
+}
+
+.dynamic-table-widget__invalid .dynamic-table-widget__summary {
     visibility: visible !important;
 }

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html

@@ -1,9 +1,10 @@
-<div class="dynamic-table-widget">
+<div class="dynamic-table-widget"
-     <div>{{content.name}}</div>
+    [class.dynamic-table-widget__invalid]="!isValid()">
+     <div class="dynamic-table-widget__label">{{content.name}}</div>
 
      <div *ngIf="!editMode">
-         <div class="dynamic-table-widget__table">
+         <div class="dynamic-table-widget__table-container">
-            <table class="mdl-data-table mdl-js-data-table">
+            <table class="mdl-data-table mdl-js-data-table dynamic-table-widget__table">
                 <thead>
                     <tr>
                         <th *ngFor="let column of content.visibleColumns"
@@ -61,4 +62,6 @@
         (cancel)="onCancelChanges()">
      </row-editor>
 
+     <div class="dynamic-table-widget__summary">{{content?.field.validationSummary}}</div>
+
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { DynamicTableWidget } from './dynamic-table.widget';
-import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../core/index';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn, FormModel, FormFieldTypes } from './../core/index';
 
 describe('DynamicTableWidget', () => {
 
@@ -206,4 +206,46 @@ describe('DynamicTableWidget', () => {
         expect(widget.editRow).toBeNull();
     });
 
+    it('should be valid by default', () => {
+        widget.content.field = null;
+        expect(widget.isValid()).toBeTruthy();
+
+        widget.content = null;
+        expect(widget.isValid()).toBeTruthy();
+    });
+
+    it('should take validation state from underlying field', () => {
+        let form = new FormModel();
+        widget.content = new DynamicTableModel(form, {
+            type: FormFieldTypes.DYNAMIC_TABLE,
+            required: true,
+            value: null
+        });
+
+        expect(widget.content.field.validate()).toBeFalsy();
+        expect(widget.isValid()).toBe(widget.content.field.isValid);
+        expect(widget.content.field.isValid).toBeFalsy();
+
+        widget.content.field.value = [{}];
+
+        expect(widget.content.field.validate()).toBeTruthy();
+        expect(widget.isValid()).toBe(widget.content.field.isValid);
+        expect(widget.content.field.isValid).toBeTruthy();
+
+    });
+
+    it('should prepend default currency for amount columns', () => {
+        let row = <DynamicTableRow> { value: { key: '100' } };
+        let column = <DynamicTableColumn> { id: 'key', type: 'Amount' };
+        let actual = widget.getCellValue(row, column);
+        expect(actual).toBe('$ 100');
+    });
+
+    it('should prepend custom currency for amount columns', () => {
+        let row = <DynamicTableRow> { value: { key: '100' } };
+        let column = <DynamicTableColumn> { id: 'key', type: 'Amount', amountCurrency: 'GBP' };
+        let actual = widget.getCellValue(row, column);
+        expect(actual).toBe('GBP 100');
+    });
+
 });

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -39,6 +39,16 @@ export class DynamicTableWidget extends WidgetComponent {
         super();
     }
 
+    isValid() {
+        let result = true;
+
+        if (this.content && this.content.field) {
+            result = this.content.field.isValid;
+        }
+
+        return result;
+    }
+
     onRowClicked(row: DynamicTableRow) {
         if (this.content) {
             this.content.selectedRow = row;