[AAE-4241] Populate date and datetime widgets on retrieve metadata (#6412)

* AAE-4241 Populate date and datetime widget on retrieve metadata

* AAE-4241 Trigger build

* AAE-4241 Use on change to allow inline editing

* AAE-4241 Fix unit tests

* AAE-4241 Increase coverage

* AAE-4241 Add coverage

lib/core/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -24,6 +24,7 @@ import { setupTestBed } from '../../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { SimpleChanges } from '@angular/core';
 
 describe('DateTimeWidgetComponent', () => {
 
@@ -185,4 +186,110 @@ describe('DateTimeWidgetComponent', () => {
             expect(tooltip).toEqual(widget.field.tooltip);
         }));
     });
+
+    it('should display always the json value', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            id: 'date-field-id',
+            name: 'datetime-field-name',
+            value: '12-30-9999 10:30 AM',
+            type: 'datetime',
+            readOnly: 'false'
+        });
+        field.isVisible = true;
+        field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A';
+        widget.field = field;
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#date-field-id')).toBeDefined();
+                expect(element.querySelector('#date-field-id')).not.toBeNull();
+                const dateElement: any = element.querySelector('#date-field-id');
+                expect(dateElement.value).toContain('12-30-9999 10:30 AM');
+
+                const newField = { ...field, value: '03-02-2020 12:00 AM' };
+
+                const changes: SimpleChanges = {
+                    'field': {
+                        previousValue: field,
+                        currentValue: newField,
+                        firstChange: false,
+                        isFirstChange(): boolean { return this.firstChange; }
+                    }
+                };
+                widget.ngOnChanges(changes);
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(dateElement.value).toContain('03-02-2020 12:00 AM');
+                    });
+            });
+    });
+
+    it('should not call on change when is first change or field is not set or the field value does not change', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            id: 'datetime-field-id',
+            name: 'datetime-field-name',
+            value: '12-30-9999 10:30 AM',
+            type: 'datetime',
+            readOnly: 'false'
+        });
+        field.isVisible = true;
+        field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A',
+        widget.field = field;
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#datetime-field-id')).toBeDefined();
+                expect(element.querySelector('#datetime-field-id')).not.toBeNull();
+                const dateTimeElement: any = element.querySelector('#datetime-field-id');
+                expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
+
+                const newField = { ...field, value: '03-02-2020 12:00 AM' };
+
+                let changes: SimpleChanges = {
+                    'field': {
+                        previousValue: field,
+                        currentValue: newField,
+                        firstChange: true,
+                        isFirstChange(): boolean { return this.firstChange; }
+                    }
+                };
+                widget.ngOnChanges(changes);
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
+                        changes = {};
+                        widget.ngOnChanges(changes);
+                        fixture.detectChanges();
+                        fixture.whenStable()
+                            .then(() => {
+                                expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
+                                changes = {
+                                    'field': {
+                                        previousValue: field,
+                                        currentValue: field,
+                                        firstChange: false,
+                                        isFirstChange(): boolean { return this.firstChange; }
+                                    }
+                                };
+                                widget.ngOnChanges(changes);
+                                fixture.detectChanges();
+                                fixture.whenStable()
+                                    .then(() => {
+                                        expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
+                                        changes = null;
+                                        widget.ngOnChanges(changes);
+                                        fixture.detectChanges();
+                                        fixture.whenStable()
+                                            .then(() => {
+                                                expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
+                                            });
+                                    });
+                            });
+                    });
+            });
+    });
 });

lib/core/form/components/widgets/date-time/date-time.widget.ts

@@ -17,7 +17,7 @@
 
 /* tslint:disable:component-selector  */
 
-import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
 import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
@@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators';
     styleUrls: ['./date-time.widget.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
+export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy, OnChanges {
 
     minDate: Moment;
     maxDate: Moment;
@@ -81,6 +81,13 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
                 'minutes');
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes && changes.field  && !changes.field.firstChange && changes.field.currentValue.value !== changes.field.previousValue.value) {
+            this.displayDate = moment(changes.field.currentValue.value, this.field.dateDisplayFormat)
+                .add(moment(changes.field.currentValue.value, this.field.dateDisplayFormat).utcOffset(), 'minutes');
+        }
+    }
+
     ngOnDestroy() {
         this.onDestroy$.next(true);
         this.onDestroy$.complete();

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -21,6 +21,7 @@ import { setupTestBed, FormFieldModel, FormModel } from '@alfresco/adf-core';
 import moment from 'moment-es6';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { SimpleChanges } from '@angular/core';
 
 describe('DateWidgetComponent', () => {
 
@@ -196,4 +197,110 @@ describe('DateWidgetComponent', () => {
             expect(tooltip).toEqual(widget.field.tooltip);
         }));
     });
+
+    it('should display always the json value', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            id: 'date-field-id',
+            name: 'date-name',
+            value: '12-30-9999',
+            type: 'date',
+            readOnly: 'false'
+        });
+        field.isVisible = true;
+        field.dateDisplayFormat = 'MM-DD-YYYY';
+        widget.field = field;
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#date-field-id')).toBeDefined();
+                expect(element.querySelector('#date-field-id')).not.toBeNull();
+                const dateElement: any = element.querySelector('#date-field-id');
+                expect(dateElement.value).toContain('12-30-9999');
+
+                const newField = { ...field, value: '03-02-2020' };
+
+                const changes: SimpleChanges = {
+                    'field': {
+                        previousValue: field,
+                        currentValue: newField,
+                        firstChange: false,
+                        isFirstChange(): boolean { return this.firstChange; }
+                    }
+                };
+                widget.ngOnChanges(changes);
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(dateElement.value).toContain('03-02-2020');
+                    });
+            });
+    });
+
+    it('should not call on change when is first change or field is not set or the field value does not change', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            id: 'date-field-id',
+            name: 'date-name',
+            value: '12-30-9999',
+            type: 'date',
+            readOnly: 'false'
+        });
+        field.isVisible = true;
+        field.dateDisplayFormat = 'MM-DD-YYYY';
+        widget.field = field;
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#date-field-id')).toBeDefined();
+                expect(element.querySelector('#date-field-id')).not.toBeNull();
+                const dateElement: any = element.querySelector('#date-field-id');
+                expect(dateElement.value).toContain('12-30-9999');
+
+                const newField = { ...field, value: '03-02-2020' };
+
+                let changes: SimpleChanges = {
+                    'field': {
+                        previousValue: field,
+                        currentValue: newField,
+                        firstChange: true,
+                        isFirstChange(): boolean { return this.firstChange; }
+                    }
+                };
+                widget.ngOnChanges(changes);
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(dateElement.value).toContain('12-30-9999');
+                        changes = {};
+                        widget.ngOnChanges(changes);
+                        fixture.detectChanges();
+                        fixture.whenStable()
+                            .then(() => {
+                                expect(dateElement.value).toContain('12-30-9999');
+                                changes = {
+                                    'field': {
+                                        previousValue: field,
+                                        currentValue: field,
+                                        firstChange: false,
+                                        isFirstChange(): boolean { return this.firstChange; }
+                                    }
+                                };
+                                widget.ngOnChanges(changes);
+                                fixture.detectChanges();
+                                fixture.whenStable()
+                                    .then(() => {
+                                        expect(dateElement.value).toContain('12-30-9999');
+                                        changes = null;
+                                        widget.ngOnChanges(changes);
+                                        fixture.detectChanges();
+                                        fixture.whenStable()
+                                            .then(() => {
+                                                expect(dateElement.value).toContain('12-30-9999');
+                                            });
+                                    });
+                            });
+                    });
+            });
+    });
 });

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -17,7 +17,7 @@
 
 /* tslint:disable:component-selector  */
 
-import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import moment from 'moment-es6';
 import { Moment } from 'moment';
@@ -46,7 +46,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent,
     },
     encapsulation: ViewEncapsulation.None
 })
-export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
+export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy, OnChanges {
 
     typeId = 'DateCloudWidgetComponent';
     DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
@@ -84,6 +84,12 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
         this.displayDate = moment(this.field.value, this.field.dateDisplayFormat);
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes && changes.field  && !changes.field.firstChange && changes.field.currentValue.value !== changes.field.previousValue.value) {
+            this.displayDate = moment(changes.field.currentValue.value, this.field.dateDisplayFormat);
+        }
+    }
+
     ngOnDestroy() {
         this.onDestroy$.next(true);
         this.onDestroy$.complete();