[APPS-2135][APPS-2155] Moment to date-fns migration.

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());
 

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<SearchDateRangeComponent>;
     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(adapter instanceof DateFnsAdapter).toBe(true);
-        expect(component.datePickerFormat).toBe('DD/MM/YYYY');
+        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', () => {
+    it('should check the format of the date from component', () => {
-        component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
+        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 startDate = startOfDay(new Date(fromDate)).toISOString();
-        const endDate = moment(toDate).endOf('day').format();
+        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 + '"]');
 

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 { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
-import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-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: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
-        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }
+        { 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<boolean>();
 
-    constructor(private dateAdapter: DateAdapter<Moment>, private userPreferencesService: UserPreferencesService) {}
+    constructor(private dateAdapter: DateAdapter<DateFnsAdapter>,
+        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;
+        this.datePickerFormat = this.settings?.dateFormat ? DateFnsUtils.convertMomentToDateFnsFormat(this.settings.dateFormat) :
-
+        DateFnsUtils.convertMomentToDateFnsFormat(DEFAULT_FORMAT_DATE);
-        const customDateAdapter = this.dateAdapter as MomentDateAdapter;
+        this.dateFormatConfig.display.dateInput = this.datePickerFormat;
-        customDateAdapter.overrideDisplayFormat = 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 fromValue = this.dateAdapter.parse(splitValue[0], DateFnsUtils.convertMomentToDateFnsFormat(this.datePickerFormat));
-            const toValue = this.dateAdapter.parse(splitValue[1], 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) {
+    apply(model: { from: string; to: string }, isFormValid: boolean) {
-        if (isValid && this.id && this.context && this.settings && this.settings.field) {
+        if (isFormValid && this.id && this.context && this.settings && this.settings.field) {
             this.isActive = true;
 
-            const start = moment(model.from).startOf('day').format();
+            const start = startOfDay(new Date(model.from)).toISOString();
-            const end = moment(model.to).endOf('day').format();
+            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) {
+    setLocale(locale: string) {
-        this.dateAdapter.setLocale(locale);
+        this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale));
-        moment.locale(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;
     }
 }

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'
     };
 
     /**

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 {