inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[APPS-2135] [APPS-2155] migration of dependency from moment to date-fns (#8851)

Browse Source 
* removed moment dependency from analytics-report-parameter.component.ts

* migration of dependency from moment to date-fns in task-list.component

* migration from moment to date-fns

* branch rebases

* migrated test cases from moment to date-fns depedencies

* added types for parameters

* migration of metadata-smoke-tests.e2e.ts from moment to date-fns

---------

Co-authored-by: vijayanssettu <vijayan.settu@globallogic.com>
This commit is contained in:
Jatin Chugh
2023-08-29 20:58:58 +01:00
committed by GitHub
co-authored by vijayanssettu
parent de0b44d568
commit 0ef6b6ba21
4 changed files with 50 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/content-services/metadata/metadata-smoke-tests.e2e.ts
+4 -4
View File
@@ -30,12 +30,12 @@ import { MetadataViewPage } from '../../core/pages/metadata-view.page';
import { FileModel } from '../../models/ACS/file.model'; import { FileModel } from '../../models/ACS/file.model';
import { browser } from 'protractor'; import { browser } from 'protractor';
import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
import * as moment from 'moment'; import { format } from 'date-fns';
describe('Metadata component', () => { describe('Metadata component', () => {
const METADATA = { const METADATA = {
DATA_FORMAT: 'll', DATA_FORMAT: 'PP',
TITLE: 'Details', TITLE: 'Details',
COMMENTS_TAB: 'COMMENTS', COMMENTS_TAB: 'COMMENTS',
PROPERTY_TAB: 'PROPERTIES', PROPERTY_TAB: 'PROPERTIES',
@@ -113,9 +113,9 @@ describe('Metadata component', () => {
await expect(await metadataViewPage.getExpandedAspectName()).toEqual(METADATA.DEFAULT_ASPECT); await expect(await metadataViewPage.getExpandedAspectName()).toEqual(METADATA.DEFAULT_ASPECT);
await expect(await metadataViewPage.getName()).toEqual(pngFileModel.name); await expect(await metadataViewPage.getName()).toEqual(pngFileModel.name);
await expect(await metadataViewPage.getCreator()).toEqual(pngFileModel.getCreatedByUser().displayName); 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(format(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT));
await expect(await metadataViewPage.getModifier()).toEqual(pngFileModel.getCreatedByUser().displayName); 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(format(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT));
await expect(await metadataViewPage.getMimetypeName()).toEqual(pngFileModel.getContent().mimeTypeName); await expect(await metadataViewPage.getMimetypeName()).toEqual(pngFileModel.getContent().mimeTypeName);
await expect(await metadataViewPage.getSize()).toEqual(pngFileModel.getContent().getSizeInBytes()); 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
+19 -20
View File
@@ -16,22 +16,21 @@
*/ */
import { SearchDateRangeComponent } from './search-date-range.component'; import { SearchDateRangeComponent } from './search-date-range.component';
import { MomentDateAdapter } from '@alfresco/adf-core';
import { DateAdapter } from '@angular/material/core'; import { DateAdapter } from '@angular/material/core';
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module'; import { ContentTestingModule } from '../../../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
declare let moment: any; import { endOfDay, endOfToday, format, isValid, parse, startOfDay } from 'date-fns';
describe('SearchDateRangeComponent', () => { describe('SearchDateRangeComponent', () => {
let fixture: ComponentFixture<SearchDateRangeComponent>; let fixture: ComponentFixture<SearchDateRangeComponent>;
let component: SearchDateRangeComponent; let component: SearchDateRangeComponent;
let adapter: MomentDateAdapter; let adapter: DateFnsAdapter;
const fromDate = '2016-10-16'; const fromDate = '2016-10-16';
const toDate = '2017-10-16'; const toDate = '2017-10-16';
const maxDate = '10-Mar-20'; const maxDate = '10-Mar-20';
const dateFormatFixture = 'DD-MMM-YY'; const dateFormatFixture = 'dd-MMM-yy';
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -41,17 +40,17 @@ describe('SearchDateRangeComponent', () => {
] ]
}); });
fixture = TestBed.createComponent(SearchDateRangeComponent); fixture = TestBed.createComponent(SearchDateRangeComponent);
adapter = fixture.debugElement.injector.get(DateAdapter) as MomentDateAdapter; adapter = fixture.debugElement.injector.get(DateAdapter) as DateFnsAdapter;
component = fixture.componentInstance; component = fixture.componentInstance;
}); });
afterEach(() => fixture.destroy()); afterEach(() => fixture.destroy());
it('should use moment adapter', () => { it('should use date-fns adapter', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(adapter instanceof MomentDateAdapter).toBe(true); expect(adapter instanceof DateFnsAdapter).toBe(true);
expect(component.datePickerFormat).toBe('DD/MM/YYYY'); expect(component.datePickerFormat).toBe('dd-MMM-yy');
}); });
it('should setup form elements on init', () => { it('should setup form elements on init', () => {
@@ -62,11 +61,11 @@ describe('SearchDateRangeComponent', () => {
expect(component.form).toBeDefined(); 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: dateFormatFixture };
fixture.detectChanges(); fixture.detectChanges();
expect(adapter.overrideDisplayFormat).toBe(dateFormatFixture); expect(component.datePickerFormat).toBe(dateFormatFixture);
}); });
it('should setup form control with formatted valid date on change', () => { it('should setup form control with formatted valid date on change', () => {
@@ -74,13 +73,13 @@ describe('SearchDateRangeComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const inputString = '20-feb-18'; const inputString = '20-feb-18';
const momentFromInput = moment(inputString, dateFormatFixture); const dateFromInput = parse(inputString, dateFormatFixture, new Date());
expect(momentFromInput.isValid()).toBeTruthy(); expect(isValid(dateFromInput)).toBeTruthy();
component.onChangedHandler({ value: inputString }, component.from); 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', () => { it('should NOT setup form control with invalid date on change', () => {
@@ -88,13 +87,13 @@ describe('SearchDateRangeComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const inputString = '20.f.18'; const inputString = '20.f.18';
const momentFromInput = moment(inputString, dateFormatFixture); const dateFromInput = parse(inputString, dateFormatFixture, new Date());
expect(momentFromInput.isValid()).toBeFalsy(); expect(isValid(dateFromInput)).toBeFalsy();
component.onChangedHandler({ value: inputString }, component.from); 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', () => { it('should reset form', () => {
@@ -157,8 +156,8 @@ describe('SearchDateRangeComponent', () => {
to: toDate to: toDate
}, true); }, true);
const startDate = moment(fromDate).startOf('day').format(); const startDate = format(startOfDay(new Date(fromDate)), `yyyy-MM-dd'T'HH:mm:ssxx`);
const endDate = moment(toDate).endOf('day').format(); const endDate = format(endOfDay(new Date(toDate)), `yyyy-MM-dd'T'HH:mm:ssxx`);
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`; const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
@@ -214,7 +213,7 @@ describe('SearchDateRangeComponent', () => {
it('should be able to set the maximum date to today', async () => { it('should be able to set the maximum date to today', async () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' }; component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' };
fixture.detectChanges(); 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 + '"]'); 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
+23 -30
View File
@@ -15,12 +15,11 @@
* limitations under the License. * 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 { 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 { import {
MOMENT_DATE_FORMATS, DateFnsUtils,
MomentDateAdapter,
UserPreferencesService, UserPreferencesService,
UserPreferenceValues UserPreferenceValues
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
@@ -29,26 +28,22 @@ import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher'; import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
import { Moment } from 'moment';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { endOfDay, endOfToday, format, isBefore, isValid, startOfDay } from 'date-fns';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
export interface DateRangeValue { export interface DateRangeValue {
from: string; from: string;
to: string; to: string;
} }
declare let moment: any;
const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
@Component({ @Component({
selector: 'adf-search-date-range', selector: 'adf-search-date-range',
templateUrl: './search-date-range.component.html', templateUrl: './search-date-range.component.html',
styleUrls: ['./search-date-range.component.scss'], styleUrls: ['./search-date-range.component.scss'],
providers: [ 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, encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-date-range' } host: { class: 'adf-search-date-range' }
@@ -74,8 +69,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
private onDestroy$ = new Subject<boolean>(); private onDestroy$ = new Subject<boolean>();
constructor(private dateAdapter: DateAdapter<Moment>, constructor(private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) { private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
} }
getFromValidationMessage(): string { getFromValidationMessage(): string {
@@ -94,10 +90,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
} }
ngOnInit() { ngOnInit() {
this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE; this.datePickerFormat = 'dd-MMM-yy';
this.dateFormatConfig.display.dateInput = this.datePickerFormat;
const customDateAdapter = this.dateAdapter as MomentDateAdapter;
customDateAdapter.overrideDisplayFormat = this.datePickerFormat;
this.userPreferencesService this.userPreferencesService
.select(UserPreferenceValues.Locale) .select(UserPreferenceValues.Locale)
@@ -110,9 +104,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
if (this.settings && this.settings.maxDate) { if (this.settings && this.settings.maxDate) {
if (this.settings.maxDate === 'today') { if (this.settings.maxDate === 'today') {
this.maxDate = this.dateAdapter.today().endOf('day'); this.maxDate = endOfToday();
} else { } else {
this.maxDate = moment(this.settings.maxDate).endOf('day'); this.maxDate = endOfDay(new Date(this.settings.maxDate));
} }
} }
@@ -141,12 +135,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.onDestroy$.complete(); 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; this.isActive = true;
const start = moment(model.from).startOf('day').format(); const start = format(startOfDay(new Date(model.from)), `yyyy-MM-dd'T'HH:mm:ssxx`);
const end = moment(model.to).endOf('day').format(); const end = format(endOfDay(new Date(model.to)), `yyyy-MM-dd'T'HH:mm:ssxx`);
this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`; this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`;
@@ -222,7 +216,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
const inputValue = event.value; const inputValue = event.value;
const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat); const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat);
if (formatDate && formatDate.isValid()) { if (formatDate && isValid(formatDate)) {
formControl.setValue(formatDate); formControl.setValue(formatDate);
} else if (formatDate) { } else if (formatDate) {
formControl.setErrors({ formControl.setErrors({
@@ -233,12 +227,11 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.setFromMaxDate(); 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; return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
} }
@@ -247,6 +240,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
} }
setFromMaxDate() { 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/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
+4 -4
View File
@@ -31,7 +31,6 @@ import {
} from '@angular/core'; } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import moment from 'moment';
import { ParameterValueModel } from '../../diagram/models/report/parameter-value.model'; import { ParameterValueModel } from '../../diagram/models/report/parameter-value.model';
import { ReportParameterDetailsModel } from '../../diagram/models/report/report-parameter-details.model'; import { ReportParameterDetailsModel } from '../../diagram/models/report/report-parameter-details.model';
import { ReportParametersModel } from '../../diagram/models/report/report-parameters.model'; import { ReportParametersModel } from '../../diagram/models/report/report-parameters.model';
@@ -39,8 +38,9 @@ import { ReportQuery } from '../../diagram/models/report/report-query.model';
import { AnalyticsService } from '../services/analytics.service'; import { AnalyticsService } from '../services/analytics.service';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { format } from 'date-fns';
const FORMAT_DATE_ACTIVITI = 'YYYY-MM-DD'; const FORMAT_DATE_ACTIVITI = 'yyyy-MM-dd';
@Component({ @Component({
selector: 'adf-analytics-report-parameters', selector: 'adf-analytics-report-parameters',
@@ -194,11 +194,11 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
} }
convertMomentDate(date: string) { convertMomentDate(date: string) {
return moment(date, FORMAT_DATE_ACTIVITI, true).format(FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z'; return format(new Date(date), FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
} }
getTodayDate() { getTodayDate() {
return moment().format(FORMAT_DATE_ACTIVITI); return format(new Date(), FORMAT_DATE_ACTIVITI);
} }
convertNumber(value: string): number { convertNumber(value: string): number {