#969 editable input for date column editor

- editable input for date column editor
- display required validation state for date editor (input field)
- date validation for manually inputed value
- min/max date ranges changed to (-100 years from now to +100 years
from now) for date widget and date column editor

refs #969
refs #959

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

@@ -69,6 +69,7 @@ export class DynamicTableModel extends FormWidgetModel {
 
         this._validators = [
             new RequiredCellValidator(),
+            new DateCellValidator(),
             new NumberCellValidator()
         ];
     }
@@ -206,7 +207,34 @@ export class RequiredCellValidator implements CellValidator {
 
         return true;
     }
+}
 
+export class DateCellValidator implements CellValidator {
+
+    private supportedTypes: string[] = [
+        'Date'
+    ];
+
+    isSupported(column: DynamicTableColumn): boolean {
+        return column && this.supportedTypes.indexOf(column.type) > -1;
+    }
+
+    validate(row: DynamicTableRow, column: DynamicTableColumn, summary?: DynamicRowValidationSummary): boolean {
+
+        if (this.isSupported(column)) {
+            let value = row.value[column.id];
+            let dateValue = moment(value, 'D-M-YYYY');
+            if (!dateValue.isValid()) {
+                if (summary) {
+                    summary.isValid = false;
+                    summary.text = `Invalid '${column.name}' format.`;
+                }
+                return false;
+            }
+        }
+
+        return true;
+    }
 }
 
 export class NumberCellValidator implements CellValidator {

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts

@@ -38,7 +38,8 @@ export class DateWidget extends TextFieldWidgetComponent implements OnInit, Afte
 
         let settings: any = {
             type: 'date',
-            future: moment().add(21, 'years')
+            past: moment().subtract(100, 'years'),
+            future: moment().add(100, 'years')
         };
 
         if (this.field) {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html

@@ -4,11 +4,11 @@
             <input id="dateInput"
                 class="mdl-textfield__input"
                 type="text"
-                [value]="table.getCellValue(row, column)"
+                [value]="value"
                 [attr.id]="column.id"
-                [readonly]="true"
                 [required]="column.required"
                 [disabled]="!column.editable"
+                (keyup)="onDateChanged($event)"
                 (onOk)="onDateSelected($event)">
             <label class="mdl-textfield__label" [attr.for]="column.id">{{column.name}} (d-M-yyyy)</label>
         </div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts

@@ -17,7 +17,7 @@
 
 import { ElementRef } from '@angular/core';
 import { DateEditorComponent } from './date.editor';
-import { DynamicTableModel, DynamicTableRow, DynamicTableColumn/*, DynamicRowValidationSummary*/ } from './../../../core/index';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../../core/index';
 
 describe('DateEditorComponent', () => {
 
@@ -54,7 +54,7 @@ describe('DateEditorComponent', () => {
 
         let settings = component.settings;
         expect(settings.type).toBe('date');
-        expect(settings.future.year()).toBe(moment().year() + 21);
+        expect(settings.future.year()).toBe(moment().year() + 100);
         expect(settings.init.isSame(moment('14-03-1879', component.DATE_FORMAT))).toBeTruthy();
         expect(component.datePicker.trigger).toBe(trigger);
     });
@@ -135,4 +135,38 @@ describe('DateEditorComponent', () => {
         expect(called).toBeTruthy();
     });
 
+    it('should update picker when input changed', () => {
+        const input = '14-03-2016';
+        let event = { target: { value: input } };
+        component.ngOnInit();
+        component.onDateChanged(event);
+
+        expect(component.datePicker.time.isSame(moment(input, 'DD-MM-YYYY'))).toBeTruthy();
+    });
+
+    it('should update row value upon user input', () => {
+        const input = '14-03-2016';
+        let event = { target: { value: input } };
+
+        component.ngOnInit();
+        component.onDateChanged(event);
+
+        let actual = row.value[column.id];
+        expect(actual).toBe('2016-03-14T00:00:00.000Z');
+    });
+
+    it('should flush value on user input', () => {
+        spyOn(table, 'flushValue').and.callThrough();
+        let event = { target: { value: 'value' } };
+
+        component.ngOnInit();
+        component.onDateChanged(event);
+
+        expect(table.flushValue).toHaveBeenCalled();
+    });
+
+    it('should not setup datepicker trigger', () => {
+        let component =
+    });
+
 });

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -30,6 +30,7 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
 
     datePicker: any;
     settings: any;
+    value: any;
 
     constructor(private elementRef: ElementRef) {
         super();
@@ -38,12 +39,13 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
     ngOnInit() {
         this.settings = {
             type: 'date',
-            future: moment().add(21, 'years')
+            past: moment().subtract(100, 'years'),
+            future: moment().add(100, 'years')
         };
 
-        let value = this.table.getCellValue(this.row, this.column);
-        if (value) {
-            this.settings.init = moment(value, this.DATE_FORMAT);
+        this.value = this.table.getCellValue(this.row, this.column);
+        if (this.value) {
+            this.settings.init = moment(this.value, this.DATE_FORMAT);
         }
 
         this.datePicker = new mdDateTimePicker.default(this.settings);
@@ -52,9 +54,18 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
         }
     }
 
+    onDateChanged(event: any) {
+        let newValue = (<HTMLInputElement> event.target).value;
+        let dateValue = moment(newValue, this.DATE_FORMAT);
+        this.datePicker.time = dateValue;
+        this.row.value[this.column.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`;
+        this.table.flushValue();
+    };
+
     onDateSelected(event: CustomEvent) {
+        this.value = this.datePicker.time.format('DD-MM-YYYY');
         let newValue = this.datePicker.time.format('YYYY-MM-DD');
-        this.row.value[this.column.id] = newValue + 'T00:00:00.000Z';
+        this.row.value[this.column.id] = `${newValue}T00:00:00.000Z`;
         this.table.flushValue();
 
         if (this.elementRef) {
@@ -75,5 +86,4 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
         }
         return false;
     }
-
 }