[ADF-4716] Dynamic Table not working properly (regression) (#4896)

* [ADF-4716] Dynamic Table not working properly (regression)
[ADF-4722] Wrong date is displayed when updating row of dynamic table
* removing dynamic table date added

* * fix e2e

e2e/process-services/dynamic-table-date-picker.e2e.ts

@@ -67,9 +67,10 @@ describe('Dynamic Table', () => {
         const app = resources.Files.DYNAMIC_TABLE_APP;
 
         const randomText = {
-            date: 'HELLO WORLD',
+            date: '12/12/2012',
+            wrongDate: 'HELLO WORLD',
             dateTime: 'Test',
-            error: `Field 'columnDate' is required.`
+            error: `Invalid 'columnDate' format.`
         };
 
         const rowPosition = 0;
@@ -111,7 +112,7 @@ describe('Dynamic Table', () => {
 
         it('[C286279] Should be able to save row with Date field', () => {
             widget.dynamicTable().clickAddButton();
-            widget.dynamicTable().addRandomStringOnDate(randomText.date);
+            widget.dynamicTable().addRandomStringOnDate(randomText.wrongDate);
             widget.dynamicTable().clickSaveButton();
 
             expect(widget.dynamicTable().checkErrorMessage()).toBe(randomText.error);

lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts

@@ -37,7 +37,12 @@ export class DateCellValidator implements CellValidator {
 
         if (this.isSupported(column)) {
             const value = row.value[column.id];
-            const dateValue = moment(value, 'D-M-YYYY');
+
+            if (!value && !column.required) {
+                return true;
+            }
+
+            const dateValue = moment(value, 'YYYY-MM-DDTHH:mm:ss.SSSSZ', true);
             if (!dateValue.isValid()) {
                 if (summary) {
                     summary.isValid = false;

lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html

@@ -1,6 +1,6 @@
 <div>
     <mat-form-field class="adf-date-editor">
-        <label [attr.for]="column.id">{{column.name}} (DATE_FORMAT)</label>
+        <label [attr.for]="column.id">{{column.name}} ({{DATE_FORMAT}})</label>
         <input matInput
             id="dateInput"
             type="text"
@@ -9,7 +9,7 @@
             [id]="column.id"
             [required]="column.required"
             [disabled]="!column.editable"
-            (focusout)="onDateChanged($event.srcElement.value)"
+            (focusout)="onDateChanged($event.srcElement)"
             (dateChange)="onDateChanged($event)">
         <mat-datepicker-toggle  *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
     </mat-form-field>

lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts

@@ -16,15 +16,16 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import moment from 'moment-es6';
 import { FormFieldModel, FormModel } from '../../../index';
-import { DynamicTableColumn  } from './../../dynamic-table-column.model';
+import { DynamicTableColumn } from './../../dynamic-table-column.model';
-import { DynamicTableRow  } from './../../dynamic-table-row.model';
+import { DynamicTableRow } from './../../dynamic-table-row.model';
 import { DynamicTableModel } from './../../dynamic-table.widget.model';
 import { DateEditorComponent } from './date.editor';
 import { setupTestBed } from '../../../../../../testing/setupTestBed';
 import { CoreModule } from '../../../../../../core.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+import { MatDatepickerInputEvent } from '@angular/material';
 
 describe('DateEditorComponent', () => {
     let component: DateEditorComponent;
@@ -59,31 +60,90 @@ describe('DateEditorComponent', () => {
         expect(fixture.componentInstance instanceof DateEditorComponent).toBe(true, 'should create DateEditorComponent');
     });
 
-    it('should update fow value on change', () => {
+    describe('using Date Piker', () => {
-        component.ngOnInit();
+        it('should update row value on change', () => {
-        const newDate = moment('14-03-1879', 'DD-MM-YYYY');
+            const input = <MatDatepickerInputEvent<any>> {value: '14-03-2016' };
-        component.onDateChanged(newDate);
+
-        expect(row.value[column.id]).toBe('1879-03-14T00:00:00.000Z');
+            component.ngOnInit();
+            component.onDateChanged(input);
+
+            const 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();
+            const input = <MatDatepickerInputEvent<any>> {value: '14-03-2016' };
+
+            component.ngOnInit();
+            component.onDateChanged(input);
+
+            expect(table.flushValue).toHaveBeenCalled();
+        });
     });
 
-    it('should update row value upon user input', () => {
+    describe('user manual input', () => {
-        const input = {value: '14-03-2016' };
 
-        component.ngOnInit();
+        beforeEach(() => {
-        component.onDateChanged(input);
+            spyOn(component, 'onDateChanged').and.callThrough();
+            spyOn(table, 'flushValue').and.callThrough();
+        });
 
-        const actual = row.value[column.id];
+        it('should update row value upon user input', () => {
-        expect(actual).toBe('2016-03-14T00:00:00.000Z');
+            const inputElement = fixture.debugElement.query(By.css('input'));
-    });
+            inputElement.nativeElement.value = '14-03-1879';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
 
-    it('should flush value on user input', () => {
+            expect(component.onDateChanged).toHaveBeenCalled();
-        spyOn(table, 'flushValue').and.callThrough();
+            const actual = row.value[column.id];
-        const input = {value: '14-03-2016' };
+            expect(actual).toBe('1879-03-14T00:00:00.000Z');
+        });
 
-        component.ngOnInit();
+        it('should flush value on user input', () => {
-        component.onDateChanged(input);
+            const inputElement = fixture.debugElement.query(By.css('input'));
+            inputElement.nativeElement.value = '14-03-1879';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
+
+            expect(table.flushValue).toHaveBeenCalled();
+        });
+
+        it('should not flush value when user input is wrong', () => {
+            const inputElement = fixture.debugElement.query(By.css('input'));
+            inputElement.nativeElement.value = 'ab-bc-de';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+
+            fixture.detectChanges();
+            expect(table.flushValue).not.toHaveBeenCalled();
+
+            inputElement.nativeElement.value = '12';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
+            expect(table.flushValue).not.toHaveBeenCalled();
+
+            inputElement.nativeElement.value = '12-11';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
+            expect(table.flushValue).not.toHaveBeenCalled();
+
+            inputElement.nativeElement.value = '12-13-12';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
+            expect(table.flushValue).not.toHaveBeenCalled();
+        });
+
+        it('should remove the date when user removes manually', () => {
+            const inputElement = fixture.debugElement.query(By.css('input'));
+            inputElement.nativeElement.value = '';
+            inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+            fixture.detectChanges();
+
+            expect(component.onDateChanged).toHaveBeenCalled();
+            const actual = row.value[column.id];
+            expect(actual).toBe('');
+        });
 
-        expect(table.flushValue).toHaveBeenCalled();
     });
 
 });

lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -22,7 +22,7 @@ import { UserPreferencesService, UserPreferenceValues } from '../../../../../../
 import { MomentDateAdapter } from '../../../../../../utils/momentDateAdapter';
 import { MOMENT_DATE_FORMATS } from '../../../../../../utils/moment-date-formats.model';
 import { Component, Input, OnInit } from '@angular/core';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
+import { DateAdapter, MAT_DATE_FORMATS, MatDatepickerInputEvent } from '@angular/material';
 import moment from 'moment-es6';
 import { Moment } from 'moment';
 import { DynamicTableColumn } from './../../dynamic-table-column.model';
@@ -67,19 +67,23 @@ export class DateEditorComponent implements OnInit {
         const momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
         momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT;
 
-        this.value = moment(this.table.getCellValue(this.row, this.column), 'YYYY-MM-DD');
+        this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
     }
 
-    onDateChanged(newDateValue) {
+    onDateChanged(newDateValue: MatDatepickerInputEvent<any> | HTMLInputElement) {
         if (newDateValue && newDateValue.value) {
+            /* validates the user inputs */
             const momentDate = moment(newDateValue.value, this.DATE_FORMAT, true);
 
             if (!momentDate.isValid()) {
-                this.row.value[this.column.id] = '';
+                this.row.value[this.column.id] =  newDateValue.value;
             } else {
                 this.row.value[this.column.id] = `${momentDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
                 this.table.flushValue();
             }
+        } else {
+            /* removes the date  */
+            this.row.value[this.column.id] = '';
         }
     }