From 5e51f70ea4f8b9acd471f7f23c1fce03d37761cd Mon Sep 17 00:00:00 2001 From: Aayush Rohila Date: Thu, 5 Oct 2023 13:48:37 +0530 Subject: [PATCH] [APPS-2135][APPS-2155] Moment to date-fns migration. --- .../metadata/metadata-smoke-tests.e2e.ts | 6 +-- .../search-date-range.component.spec.ts | 43 ++++++++------- .../search-date-range.component.ts | 53 +++++++++---------- .../src/lib/common/utils/date-fns-utils.ts | 6 ++- .../analytics-report-parameters.component.ts | 7 ++- 5 files changed, 59 insertions(+), 56 deletions(-) diff --git a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts index 8de3740a56..cc7c1fd5e6 100644 --- a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts +++ b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts @@ -30,7 +30,7 @@ import { MetadataViewPage } from '../../core/pages/metadata-view.page'; import { FileModel } from '../../models/ACS/file.model'; import { browser } from 'protractor'; import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; -import * as moment from 'moment'; +import { DateFnsUtils } from '@alfresco/adf-core'; describe('Metadata component', () => { @@ -113,9 +113,9 @@ describe('Metadata component', () => { await expect(await metadataViewPage.getExpandedAspectName()).toEqual(METADATA.DEFAULT_ASPECT); await expect(await metadataViewPage.getName()).toEqual(pngFileModel.name); await expect(await metadataViewPage.getCreator()).toEqual(pngFileModel.getCreatedByUser().displayName); - await expect(await metadataViewPage.getCreatedDate()).toEqual(moment(pngFileModel.createdAt).format(METADATA.DATA_FORMAT)); + await expect(await metadataViewPage.getCreatedDate()).toEqual(DateFnsUtils.formatDate(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT)); await expect(await metadataViewPage.getModifier()).toEqual(pngFileModel.getCreatedByUser().displayName); - await expect(await metadataViewPage.getModifiedDate()).toEqual(moment(pngFileModel.createdAt).format(METADATA.DATA_FORMAT)); + await expect(await metadataViewPage.getModifiedDate()).toEqual(DateFnsUtils.formatDate(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT)); await expect(await metadataViewPage.getMimetypeName()).toEqual(pngFileModel.getContent().mimeTypeName); await expect(await metadataViewPage.getSize()).toEqual(pngFileModel.getContent().getSizeInBytes()); diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts index e22bcab0af..8112bfdf2c 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts @@ -16,18 +16,20 @@ */ import { SearchDateRangeComponent } from './search-date-range.component'; -import { MomentDateAdapter } from '@alfresco/adf-core'; +import { DateFnsUtils } from '@alfresco/adf-core'; import { DateAdapter } from '@angular/material/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ContentTestingModule } from '../../../testing/content.testing.module'; import { TranslateModule } from '@ngx-translate/core'; +import { DateFnsAdapter } from '@angular/material-date-fns-adapter'; +import { endOfDay, endOfToday, isValid, parse, startOfDay } from 'date-fns'; declare let moment: any; describe('SearchDateRangeComponent', () => { let fixture: ComponentFixture; let component: SearchDateRangeComponent; - let adapter: MomentDateAdapter; + let adapter: DateFnsAdapter; const fromDate = '2016-10-16'; const toDate = '2017-10-16'; const maxDate = '10-Mar-20'; @@ -41,17 +43,18 @@ describe('SearchDateRangeComponent', () => { ] }); fixture = TestBed.createComponent(SearchDateRangeComponent); - adapter = fixture.debugElement.injector.get(DateAdapter) as MomentDateAdapter; + adapter = fixture.debugElement.injector.get(DateAdapter) as DateFnsAdapter; component = fixture.componentInstance; }); afterEach(() => fixture.destroy()); - it('should use moment adapter', () => { + it('should use date-fns adapter', () => { fixture.detectChanges(); - expect(adapter instanceof MomentDateAdapter).toBe(true); - expect(component.datePickerFormat).toBe('DD/MM/YYYY'); + expect(adapter instanceof DateFnsAdapter).toBe(true); + const expectedFormat = DateFnsUtils.convertMomentToDateFnsFormat('DD/MM/YYYY'); + expect(component.datePickerFormat).toBe(expectedFormat); }); it('should setup form elements on init', () => { @@ -62,39 +65,39 @@ describe('SearchDateRangeComponent', () => { expect(component.form).toBeDefined(); }); - it('should setup the format of the date from configuration', () => { - component.settings = { field: 'cm:created', dateFormat: dateFormatFixture }; + it('should check the format of the date from component', () => { + component.settings = { field: 'cm:created', dateFormat: DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture) }; fixture.detectChanges(); - expect(adapter.overrideDisplayFormat).toBe(dateFormatFixture); + expect(component.datePickerFormat).toBe(DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture)); }); it('should setup form control with formatted valid date on change', () => { - component.settings = { field: 'cm:created', dateFormat: dateFormatFixture }; + component.settings = { field: 'cm:created', dateFormat: DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture) }; fixture.detectChanges(); const inputString = '20-feb-18'; - const momentFromInput = moment(inputString, dateFormatFixture); + const dateFromInput = parse(inputString, DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture), new Date()); - expect(momentFromInput.isValid()).toBeTruthy(); + expect(isValid(dateFromInput)).toBeTruthy(); component.onChangedHandler({ value: inputString }, component.from); - expect(component.from.value.toString()).toEqual(momentFromInput.toString()); + expect(component.from.value.toString()).toEqual(dateFromInput.toString()); }); it('should NOT setup form control with invalid date on change', () => { - component.settings = { field: 'cm:created', dateFormat: dateFormatFixture }; + component.settings = { field: 'cm:created', dateFormat: DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture) }; fixture.detectChanges(); const inputString = '20.f.18'; - const momentFromInput = moment(inputString, dateFormatFixture); + const dateFromInput = parse(inputString, DateFnsUtils.convertMomentToDateFnsFormat(dateFormatFixture), new Date()); - expect(momentFromInput.isValid()).toBeFalsy(); + expect(isValid(dateFromInput)).toBeFalsy(); component.onChangedHandler({ value: inputString }, component.from); - expect(component.from.value.toString()).not.toEqual(momentFromInput.toString()); + expect(component.from.value.toString()).not.toEqual(dateFromInput.toString()); }); it('should reset form', () => { @@ -157,8 +160,8 @@ describe('SearchDateRangeComponent', () => { to: toDate }, true); - const startDate = moment(fromDate).startOf('day').format(); - const endDate = moment(toDate).endOf('day').format(); + const startDate = startOfDay(new Date(fromDate)).toISOString(); + const endDate = endOfDay(new Date(toDate)).toISOString(); const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`; @@ -214,7 +217,7 @@ describe('SearchDateRangeComponent', () => { it('should be able to set the maximum date to today', async () => { component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' }; fixture.detectChanges(); - const today = adapter.today().endOf('day').toString().slice(0, -3); + const today = endOfToday().toString().slice(0,30); const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="' + today + '"]'); diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts index 6e1b8b87b8..368841e3d9 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts @@ -15,26 +15,25 @@ * limitations under the License. */ -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; -import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; -import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core'; +import { DateFnsUtils, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core'; import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher'; -import { Moment } from 'moment'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter'; +import { endOfDay, endOfToday, isBefore, isValid, startOfDay } from 'date-fns'; export interface DateRangeValue { from: string; to: string; } -declare let moment: any; - const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY'; @Component({ @@ -42,8 +41,8 @@ const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY'; templateUrl: './search-date-range.component.html', styleUrls: ['./search-date-range.component.scss'], providers: [ - { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, - { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS } + { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] }, + { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS } ], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-date-range' } @@ -68,7 +67,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy private onDestroy$ = new Subject(); - constructor(private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService) {} + constructor(private dateAdapter: DateAdapter, + private userPreferencesService: UserPreferencesService, + @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {} getFromValidationMessage(): string { return this.from.hasError('invalidOnChange') || this.hasParseError(this.from) @@ -93,10 +94,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } ngOnInit() { - this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE; - - const customDateAdapter = this.dateAdapter as MomentDateAdapter; - customDateAdapter.overrideDisplayFormat = this.datePickerFormat; + this.datePickerFormat = this.settings?.dateFormat ? DateFnsUtils.convertMomentToDateFnsFormat(this.settings.dateFormat) : + DateFnsUtils.convertMomentToDateFnsFormat(DEFAULT_FORMAT_DATE); + this.dateFormatConfig.display.dateInput = this.datePickerFormat; this.userPreferencesService .select(UserPreferenceValues.Locale) @@ -107,16 +107,16 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy if (this.settings?.maxDate) { if (this.settings.maxDate === 'today') { - this.maxDate = this.dateAdapter.today().endOf('day'); + this.maxDate = endOfToday(); } else { - this.maxDate = moment(this.settings.maxDate).endOf('day'); + this.maxDate = endOfDay(new Date(this.settings.maxDate)); } } if (this.startValue) { const splitValue = this.startValue.split('||'); - const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat); - const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat); + const fromValue = this.dateAdapter.parse(splitValue[0], DateFnsUtils.convertMomentToDateFnsFormat(this.datePickerFormat)); + const toValue = this.dateAdapter.parse(splitValue[1], DateFnsUtils.convertMomentToDateFnsFormat(this.datePickerFormat)); this.from = new UntypedFormControl(fromValue, validators); this.to = new UntypedFormControl(toValue, validators); } else { @@ -138,12 +138,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy this.onDestroy$.complete(); } - apply(model: { from: string; to: string }, isValid: boolean) { - if (isValid && this.id && this.context && this.settings && this.settings.field) { + apply(model: { from: string; to: string }, isFormValid: boolean) { + if (isFormValid && this.id && this.context && this.settings && this.settings.field) { this.isActive = true; - const start = moment(model.from).startOf('day').format(); - const end = moment(model.to).endOf('day').format(); + const start = startOfDay(new Date(model.from)).toISOString(); + const end = endOfDay(new Date(model.to)).toISOString(); this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`; @@ -223,7 +223,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy onChangedHandler(event: any, formControl: UntypedFormControl) { const inputValue = event.value; const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat); - if (formatDate?.isValid()) { + if (formatDate && isValid(formatDate)) { formControl.setValue(formatDate); } else if (formatDate) { formControl.setErrors({ @@ -234,12 +234,11 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy this.setFromMaxDate(); } - setLocale(locale) { - this.dateAdapter.setLocale(locale); - moment.locale(locale); + setLocale(locale: string) { + this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)); } - hasParseError(formControl): boolean { + hasParseError(formControl: UntypedFormControl): boolean { return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text; } @@ -248,6 +247,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } setFromMaxDate() { - this.fromMaxDate = !this.to.value || (this.maxDate && moment(this.maxDate).isBefore(this.to.value)) ? this.maxDate : moment(this.to.value); + this.fromMaxDate = (!this.to.value || this.maxDate && (isBefore(this.maxDate, this.to.value))) ? this.maxDate : this.to.value; } } 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 3333224624..7d7a908939 100644 --- a/lib/core/src/lib/common/utils/date-fns-utils.ts +++ b/lib/core/src/lib/common/utils/date-fns-utils.ts @@ -86,7 +86,8 @@ export class DateFnsUtils { static momentToDateFnsMap = { D: 'd', Y: 'y', - A: 'a' + A: 'a', + ll: 'PP' }; /** @@ -95,7 +96,8 @@ export class DateFnsUtils { static dateFnsToMomentMap = { d: 'D', y: 'Y', - a: 'A' + a: 'A', + PP: 'll' }; /** diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts index 875d29e4b5..f1e04a69a5 100644 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { DownloadService, LogService } from '@alfresco/adf-core'; +import { DateFnsUtils, DownloadService, LogService } from '@alfresco/adf-core'; import { AfterContentChecked, Component, @@ -31,7 +31,6 @@ import { } from '@angular/core'; import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; -import moment from 'moment'; import { ParameterValueModel } from '../../diagram/models/report/parameter-value.model'; import { ReportParameterDetailsModel } from '../../diagram/models/report/report-parameter-details.model'; import { ReportParametersModel } from '../../diagram/models/report/report-parameters.model'; @@ -187,11 +186,11 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On } convertMomentDate(date: string) { - return moment(date, FORMAT_DATE_ACTIVITI, true).format(FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z'; + return DateFnsUtils.formatDate(new Date(date), FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z' } getTodayDate() { - return moment().format(FORMAT_DATE_ACTIVITI); + return DateFnsUtils.formatDate(new Date(), FORMAT_DATE_ACTIVITI); } convertNumber(value: string): number {