From dd09c3ac0289714d821f9c0bca3b70389496974d Mon Sep 17 00:00:00 2001 From: Pablo Martinez Garcia Date: Mon, 11 Jan 2021 10:39:24 +0100 Subject: [PATCH] [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 --- .../date-time/date-time.widget.spec.ts | 107 ++++++++++++++++++ .../widgets/date-time/date-time.widget.ts | 11 +- .../widgets/date/date-cloud.widget.spec.ts | 107 ++++++++++++++++++ .../widgets/date/date-cloud.widget.ts | 10 +- 4 files changed, 231 insertions(+), 4 deletions(-) diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts index 67734fbe54..dd40f6aef1 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts +++ b/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'); + }); + }); + }); + }); + }); + }); }); diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.ts b/lib/core/form/components/widgets/date-time/date-time.widget.ts index 8e0c4ba3be..ba30fba7fb 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.ts +++ b/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(); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts index d1699e630b..2bf368f640 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts +++ b/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'); + }); + }); + }); + }); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts index 7bcd747130..b51bd7556b 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts +++ b/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();