From 27dbd03fe682c54f009d579b5ccb408668230478 Mon Sep 17 00:00:00 2001 From: SheenaMalhotra182 Date: Mon, 9 Oct 2023 22:55:47 +0530 Subject: [PATCH] [ACS-5857] reverted moment migration for DateWidget and DateCloudWidget --- .../src/lib/common/utils/date-fns-utils.ts | 2 +- .../widgets/core/form-field-validator.ts | 31 +++++----- .../widgets/core/form-field.model.spec.ts | 7 ++- .../widgets/core/form-field.model.ts | 26 +++----- .../widgets/date-time/date-time.widget.ts | 2 +- .../widgets/date/date.widget.spec.ts | 27 ++------ .../components/widgets/date/date.widget.ts | 16 +++-- .../widgets/date/date-cloud.widget.html | 8 +-- .../widgets/date/date-cloud.widget.spec.ts | 61 +++++++------------ .../widgets/date/date-cloud.widget.ts | 61 +++++++++---------- 10 files changed, 96 insertions(+), 145 deletions(-) diff --git a/lib/core/src/lib/common/utils/date-fns-utils.ts b/lib/core/src/lib/common/utils/date-fns-utils.ts index ca7840f4ab..9dd9d9c09c 100644 --- a/lib/core/src/lib/common/utils/date-fns-utils.ts +++ b/lib/core/src/lib/common/utils/date-fns-utils.ts @@ -163,7 +163,7 @@ export class DateFnsUtils { /** * Parses a date string using the specified date format. * - * @param value - The date string to parse. + * @param date - The date string to parse. * @param dateFormat - The date format string to use for parsing. * @returns The parsed Date object. */ diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts b/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts index c90e689210..e3a46c1ec6 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts @@ -17,6 +17,7 @@ /* eslint-disable @angular-eslint/component-selector */ +import moment from 'moment'; import { FormFieldTypes } from './form-field-types'; import { isNumberValue } from './form-field-utils'; import { FormFieldModel } from './form-field.model'; @@ -148,8 +149,8 @@ export class DateFieldValidator implements FormFieldValidator { // Validates that the input string is a valid date formatted as (default D-M-YYYY) static isValidDate(inputDate: string, dateFormat: string = 'D-M-YYYY'): boolean { if (inputDate) { - const date = DateFnsUtils.parseDate(inputDate, dateFormat); - return isValid(date); + const d = moment(inputDate, dateFormat, true); + return d.isValid(); } return false; @@ -164,7 +165,7 @@ export class DateFieldValidator implements FormFieldValidator { if (DateFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) { return true; } - field.validationSummary.message = DateFnsUtils.convertDateFnsToMomentFormat(field.dateDisplayFormat); + field.validationSummary.message = field.dateDisplayFormat; return false; } return true; @@ -211,8 +212,8 @@ export class DateTimeFieldValidator implements FormFieldValidator { export abstract class BoundaryDateFieldValidator implements FormFieldValidator { - DATE_FORMAT_CLOUD = 'yyyy-MM-dd'; - DATE_FORMAT = 'dd-MM-yyyy'; + DATE_FORMAT_CLOUD = 'YYYY-MM-DD'; + DATE_FORMAT = 'DD-MM-YYYY'; supportedTypes = [ FormFieldTypes.DATE @@ -251,17 +252,17 @@ export class MinDateFieldValidator extends BoundaryDateFieldValidator { // remove time and timezone info let fieldValueData; if (typeof field.value === 'string') { - fieldValueData = DateFnsUtils.parseDate(field.value.split('T')[0], dateFormat); + fieldValueData = moment(field.value.split('T')[0], dateFormat); } else { fieldValueData = field.value; } const minValueDateFormat = this.extractDateFormat(field.minValue); - const min = DateFnsUtils.parseDate(field.minValue, minValueDateFormat); + const min = moment(field.minValue, minValueDateFormat); - if (isBefore(fieldValueData, min)) { + if (fieldValueData.isBefore(min)) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`; - field.validationSummary.attributes.set('minValue', DateFnsUtils.formatDate(min, field.dateDisplayFormat).toLocaleUpperCase()); + field.validationSummary.attributes.set('minValue', min.format(field.dateDisplayFormat).toLocaleUpperCase()); isFieldValid = false; } return isFieldValid; @@ -281,17 +282,17 @@ export class MaxDateFieldValidator extends BoundaryDateFieldValidator { // remove time and timezone info let fieldValueData; if (typeof field.value === 'string') { - fieldValueData = DateFnsUtils.parseDate(field.value.split('T')[0], dateFormat); + fieldValueData = moment(field.value.split('T')[0], dateFormat); } else { fieldValueData = field.value; } const maxValueDateFormat = this.extractDateFormat(field.maxValue); - const max = DateFnsUtils.parseDate(field.maxValue, maxValueDateFormat); + const max = moment(field.maxValue, maxValueDateFormat); - if (isAfter(fieldValueData, max)) { + if (fieldValueData.isAfter(max)) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`; - field.validationSummary.attributes.set('maxValue', DateFnsUtils.formatDate(max, field.dateDisplayFormat).toLocaleUpperCase()); + field.validationSummary.attributes.set('maxValue', max.format(field.dateDisplayFormat).toLocaleUpperCase()); isFieldValid = false; } return isFieldValid; @@ -320,7 +321,7 @@ export class MinDateTimeFieldValidator implements FormFieldValidator { if (this.isSupported(field) && field.value && field.isVisible) { const dateFormat = field.dateDisplayFormat; - if (!DateFieldValidator.isValidDate(field.value, dateFormat)) { + if (!DateTimeFieldValidator.isValidDate(field.value, dateFormat)) { field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE'; isFieldValid = false; } else { @@ -366,7 +367,7 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator { if (this.isSupported(field) && field.value && field.isVisible) { const dateFormat = field.dateDisplayFormat; - if (!DateFieldValidator.isValidDate(field.value, dateFormat)) { + if (!DateTimeFieldValidator.isValidDate(field.value, dateFormat)) { field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE'; isFieldValid = false; } else { diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts index a6899f8eb5..655a00f7ed 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ +import moment from 'moment'; import { FormFieldTypes } from './form-field-types'; import { FormFieldModel } from './form-field.model'; import { FormModel } from './form.model'; @@ -273,9 +274,9 @@ describe('FormFieldModel', () => { dateDisplayFormat: 'DD-MM-YYYY' }); - const currentDate = new Date(); - const expectedDate = DateFnsUtils.formatDate(currentDate, 'DD-MM-YYYY'); - const expectedDateFormat = `${DateFnsUtils.formatDate(currentDate, 'YYYY-MM-DD')}T00:00:00.000Z`; + const currentDate = moment(new Date()); + const expectedDate = moment(currentDate).format('DD-MM-YYYY'); + const expectedDateFormat = `${currentDate.format('YYYY-MM-DD')}T00:00:00.000Z`; expect(field.value).toBe(expectedDate); expect(form.values['ddmmyyy']).toEqual(expectedDateFormat); diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts index 0c97a14eca..dccde63942 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts @@ -16,6 +16,7 @@ */ /* eslint-disable @angular-eslint/component-selector */ +import moment from 'moment'; import { WidgetVisibilityModel } from '../../../models/widget-visibility.model'; import { ContainerColumnModel } from './container-column.model'; import { ErrorMessageModel } from './error-message.model'; @@ -39,7 +40,7 @@ export class FormFieldModel extends FormWidgetModel { private _isValid: boolean = true; private _required: boolean = false; - readonly defaultDateFormat: string = 'd-M-yyyy'; + readonly defaultDateFormat: string = 'D-M-YYYY'; readonly defaultDateTimeFormat: string = 'd-M-yyyy hh:mm a'; // model members @@ -190,7 +191,7 @@ export class FormFieldModel extends FormWidgetModel { this.visibilityCondition = json.visibilityCondition ? new WidgetVisibilityModel(json.visibilityCondition) : undefined; this.enableFractions = json.enableFractions; this.currency = json.currency; - this.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat(json.dateDisplayFormat) || this.getDefaultDateFormat(json); + this.dateDisplayFormat = json.dateDisplayFormat || this.getDefaultDateFormat(json); this._value = this.parseValue(json); this.validationSummary = new ErrorMessageModel(); this.tooltip = json.tooltip; @@ -241,22 +242,11 @@ export class FormFieldModel extends FormWidgetModel { } private getDefaultDateFormat(jsonField: any): string { - if (jsonField.fields) { - Object.keys(jsonField.fields).forEach((el) => { - if (jsonField.fields[el]) { - jsonField.fields[el].forEach((element) => { - element.dateDisplayFormat = element.dateDisplayFormat - ? DateFnsUtils.convertMomentToDateFnsFormat(element.dateDisplayFormat) - : element.dateDisplayFormat; - }); - } - }); - } let originalType = jsonField.type; if (FormFieldTypes.isReadOnlyType(jsonField.type) && jsonField.params && jsonField.params.field) { originalType = jsonField.params.field.type; } - return originalType === FormFieldTypes.DATETIME ? this.defaultDateTimeFormat : this.defaultDateFormat; + return originalType === FormFieldTypes.DATETIME ? DateFnsUtils.convertMomentToDateFnsFormat(this.defaultDateTimeFormat) : this.defaultDateFormat; } private isTypeaheadFieldType(type: string): boolean { @@ -366,12 +356,12 @@ export class FormFieldModel extends FormWidgetModel { if (value) { let dateValue; if (isNumberValue(value)) { - dateValue = new Date(value); + dateValue = moment(value); } else { - dateValue = DateFnsUtils.parseDate(value.split('T')[0], 'YYYY-M-D'); + dateValue = moment.utc(value.split('T')[0], 'YYYY-M-D'); } - if (isValid(dateValue)) { - value = DateFnsUtils.formatDate(dateValue, this.dateDisplayFormat); + if (dateValue?.isValid()) { + value = dateValue.utc().format(this.dateDisplayFormat); } } } diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts index e45cfb4280..64f889e202 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts @@ -46,7 +46,7 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, + private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService, @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats, private translationService: TranslationService) { diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts index e13d283775..7c364f8885 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts @@ -16,14 +16,13 @@ */ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import moment from 'moment'; import { FormFieldModel } from '../core/form-field.model'; import { FormModel } from '../core/form.model'; import { DateWidgetComponent } from './date.widget'; import { CoreTestingModule } from '../../../../testing/core.testing.module'; import { TranslateModule } from '@ngx-translate/core'; import { FormFieldTypes } from '../core/form-field-types'; -import { isSameDay } from 'date-fns'; -import { DateFnsUtils } from '../../../../common'; describe('DateWidgetComponent', () => { let widget: DateWidgetComponent; @@ -63,8 +62,8 @@ describe('DateWidgetComponent', () => { widget.ngOnInit(); - const expectedMinDate = DateFnsUtils.parseDate(minValue, widget.field.dateDisplayFormat); - expect(isSameDay(widget.minDate, expectedMinDate)).toBeTruthy(); + const expected = moment(minValue, widget.field.dateDisplayFormat); + expect(widget.minDate.isSame(expected)).toBeTruthy(); }); it('should date field be present', () => { @@ -86,8 +85,8 @@ describe('DateWidgetComponent', () => { }); widget.ngOnInit(); - const expectedMaxDate = DateFnsUtils.parseDate(maxValue, widget.field.dateDisplayFormat); - expect(isSameDay(widget.maxDate, expectedMaxDate)).toBeTruthy(); + const expected = moment(maxValue, widget.field.dateDisplayFormat); + expect(widget.maxDate.isSame(expected)).toBeTruthy(); }); it('should eval visibility on date changed', () => { @@ -250,20 +249,4 @@ describe('DateWidgetComponent', () => { expect(dateElement?.value).toContain('03-02-2020'); }); - - describe('format label', () => { - beforeEach(() => { - widget.field = new FormFieldModel(new FormModel({ taskId: '' }), { - name: 'Date', - dateDisplayFormat: 'd-M-yyyy' - }); - fixture.detectChanges(); - }); - - it('should format label correctly', () => { - const result = widget.formatDateLabel(widget.field); - - expect(result).toBe('Date (D-M-YYYY)'); - }); - }); }); diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.ts index 4f6b8d232a..74c916bf4b 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.ts @@ -32,9 +32,8 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker'; @Component({ selector: 'date-widget', providers: [ - { provide: DateAdapter, useClass: DateFnsAdapter }, - { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS } - ], + { provide: DateAdapter, useClass: MomentDateAdapter }, + { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], templateUrl: './date.widget.html', host: { '(click)': 'event($event)', @@ -63,10 +62,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, - private userPreferencesService: UserPreferencesService, - @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats, - private translationService: TranslationService) { + private dateAdapter: DateAdapter, + private userPreferencesService: UserPreferencesService) { super(formService); } @@ -74,9 +71,10 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe this.userPreferencesService .select(UserPreferenceValues.Locale) .pipe(takeUntil(this.onDestroy$)) - .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); + .subscribe(locale => this.dateAdapter.setLocale(locale)); - this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat; + const momentDateAdapter = this.dateAdapter as MomentDateAdapter; + momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat; if (this.field) { if (this.field.minValue) { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index 03789caed5..f65fb13fa0 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -1,11 +1,11 @@
-
- - + { @@ -52,8 +52,8 @@ describe('DateWidgetComponent', () => { widget.ngOnInit(); - const expected = DateFnsUtils.parseDate(minValue, DATE_FORMAT_CLOUD); - expect(isSameDay(widget.minDate, expected)).toBeTruthy(); + const expected = moment(minValue, DATE_FORMAT_CLOUD); + expect(widget.minDate.isSame(expected)).toBeTruthy(); }); it('should date field be present', () => { @@ -75,8 +75,8 @@ describe('DateWidgetComponent', () => { }); widget.ngOnInit(); - const expected = DateFnsUtils.parseDate(maxValue, DATE_FORMAT_CLOUD); - expect(isSameDay(widget.maxDate, expected)).toBeTruthy(); + const expected = moment(maxValue, DATE_FORMAT_CLOUD); + expect(widget.maxDate.isSame(expected)).toBeTruthy(); }); it('should eval visibility on date changed', () => { @@ -91,8 +91,8 @@ describe('DateWidgetComponent', () => { }); widget.field = field; - const todayDate = new Date(); - widget.onDateChanged({ value: DateFnsUtils.formatDate(todayDate, DATE_FORMAT_CLOUD) }); + const todayDate = moment().format(DATE_FORMAT_CLOUD); + widget.onDateChanged({ value: todayDate }); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); @@ -293,10 +293,9 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const todayDate = new Date(); - const expected = DateFnsUtils.formatDate(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD); - const minDateFormatted = DateFnsUtils.formatDate(widget.minDate, DATE_FORMAT_CLOUD); - expect(minDateFormatted).toEqual(expected); + const todayDate = moment().format(DATE_FORMAT_CLOUD); + const expected = moment(todayDate).subtract(widget.field.minDateRangeValue, 'days'); + expect(widget.minDate).toEqual(expected); }); it('should min date and max date be undefined if dynamic min and max date are not set', async () => { @@ -344,10 +343,9 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const todayDate = new Date(); - const expected = DateFnsUtils.formatDate(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD); - const maxDateFormatted = DateFnsUtils.formatDate(widget.maxDate, DATE_FORMAT_CLOUD); - expect(maxDateFormatted).toEqual(expected); + const todayDate = moment().format(DATE_FORMAT_CLOUD); + const expected = moment(todayDate).add(widget.field.maxDateRangeValue, 'days'); + expect(widget.maxDate).toEqual(expected); }); it('should maxDate and minDate be undefined if minDateRangeValue and maxDateRangeValue are null', async () => { @@ -394,6 +392,7 @@ describe('DateWidgetComponent', () => { describe('check date validation by dynamic date ranges', () => { it('should minValue be equal to today date minus minDateRangeValue', async () => { + spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: null, @@ -405,8 +404,7 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const currentDate = new Date(); - const expectedMinValueString = DateFnsUtils.formatDate(subDays(currentDate, 1), DATE_FORMAT_CLOUD); + const expectedMinValueString = '2022-07-21'; expect(widget.field.minValue).toEqual(expectedMinValueString); expect(widget.maxDate).toBeUndefined(); @@ -414,6 +412,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue be equal to today date plus maxDateRangeValue', async () => { + spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: 8, @@ -425,8 +424,7 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const currentDate = new Date(); - const expectedMaxValueString = DateFnsUtils.formatDate(addDays(currentDate, 8), DATE_FORMAT_CLOUD); + const expectedMaxValueString = '2022-07-30'; expect(widget.field.maxValue).toEqual(expectedMaxValueString); expect(widget.minDate).toBeUndefined(); @@ -434,6 +432,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue and minValue be null if maxDateRangeValue and minDateRangeValue are null', async () => { + spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: null, @@ -452,6 +451,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue and minValue not be null if maxDateRangeVale and minDateRangeValue are not null', async () => { + spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: 8, @@ -463,9 +463,8 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const currentDate = new Date(); - const expectedMaxValueString = DateFnsUtils.formatDate(addDays(currentDate, 8), DATE_FORMAT_CLOUD); - const expectedMinValueString = DateFnsUtils.formatDate(subDays(currentDate, 10), DATE_FORMAT_CLOUD); + const expectedMaxValueString = '2022-07-30'; + const expectedMinValueString = '2022-07-12'; expect(widget.field.maxValue).toEqual(expectedMaxValueString); expect(widget.field.minValue).toEqual(expectedMinValueString); @@ -543,20 +542,4 @@ describe('DateWidgetComponent', () => { expect(element.querySelector('.adf-invalid')).toBeTruthy(); }); }); - - describe('format label', () => { - beforeEach(() => { - widget.field = new FormFieldModel(new FormModel({ taskId: '' }), { - name: 'Date Field', - dateDisplayFormat: 'd-M-yyyy' - }); - fixture.detectChanges(); - }); - - it('should format label correctly', () => { - const result = widget.formatLabel(widget.field); - - expect(result).toBe('Date Field (D-M-YYYY)'); - }); - }); }); 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 6946a17360..8d62144249 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,23 +17,22 @@ /* eslint-disable @angular-eslint/component-selector */ -import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core'; -import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core'; +import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; +import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; +import moment, { Moment } from 'moment'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { - WidgetComponent, - UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils, TranslationService, FormFieldModel + MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent, + UserPreferencesService, UserPreferenceValues, FormService } from '@alfresco/adf-core'; import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model'; -import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter'; -import { addDays, isValid, subDays } from 'date-fns'; @Component({ selector: 'date-widget', providers: [ - { provide: DateAdapter, useClass: DateFnsAdapter }, - { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }], + { provide: DateAdapter, useClass: MomentDateAdapter }, + { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], templateUrl: './date-cloud.widget.html', styleUrls: ['./date-cloud.widget.scss'], host: { @@ -52,16 +51,14 @@ import { addDays, isValid, subDays } from 'date-fns'; export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { typeId = 'DateCloudWidgetComponent'; - minDate: Date; - maxDate: Date; + minDate: Moment; + maxDate: Moment; private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, - private userPreferencesService: UserPreferencesService, - @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats, - private translationService: TranslationService) { + private dateAdapter: DateAdapter, + private userPreferencesService: UserPreferencesService) { super(formService); } @@ -69,49 +66,47 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, this.userPreferencesService .select(UserPreferenceValues.Locale) .pipe(takeUntil(this.onDestroy$)) - .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); + .subscribe(locale => this.dateAdapter.setLocale(locale)); - this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat; + const momentDateAdapter = this.dateAdapter as MomentDateAdapter; + momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat; if (this.field) { if (this.field.dynamicDateRangeSelection) { - const today = new Date(); + const today = this.getTodaysFormattedDate(); if (Number.isInteger(this.field.minDateRangeValue)) { - this.minDate = subDays(today, this.field.minDateRangeValue); - this.field.minValue = DateFnsUtils.formatDate(this.minDate, DATE_FORMAT_CLOUD); + this.minDate = moment(today).subtract(this.field.minDateRangeValue, 'days'); + this.field.minValue = this.minDate.format(DATE_FORMAT_CLOUD); } if (Number.isInteger(this.field.maxDateRangeValue)) { - this.maxDate = addDays(today, this.field.maxDateRangeValue); - this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, DATE_FORMAT_CLOUD); + this.maxDate = moment(today).add(this.field.maxDateRangeValue, 'days'); + this.field.maxValue = this.maxDate.format(DATE_FORMAT_CLOUD); } } else { if (this.field.minValue) { - this.minDate = DateFnsUtils.parseDate(this.field.minValue, DATE_FORMAT_CLOUD); + this.minDate = moment(this.field.minValue, DATE_FORMAT_CLOUD); } if (this.field.maxValue) { - this.maxDate = DateFnsUtils.parseDate(this.field.maxValue, DATE_FORMAT_CLOUD); + this.maxDate = moment(this.field.maxValue, DATE_FORMAT_CLOUD); } } } } + getTodaysFormattedDate() { + return moment().format(DATE_FORMAT_CLOUD); + } + ngOnDestroy() { this.onDestroy$.next(true); this.onDestroy$.complete(); } - formatLabel(field: FormFieldModel): string { - const displayName = this.translationService.instant(field.name); - const displayFormat = DateFnsUtils.convertDateFnsToMomentFormat(field.dateDisplayFormat); - - return `${displayName} (${displayFormat})`; - } - onDateChanged(newDateValue) { - const date = DateFnsUtils.parseDate(newDateValue, this.field.dateDisplayFormat); - if (isValid(date)) { - this.field.value = DateFnsUtils.formatDate(date, this.field.dateDisplayFormat); + const date = moment(newDateValue, this.field.dateDisplayFormat, true); + if (date.isValid()) { + this.field.value = date.format(this.field.dateDisplayFormat); } else { this.field.value = newDateValue; }