inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[APPS-2108] ADF date-fns adapter implementation (#8983)

Browse Source 
* adf date-fns adapter, migrate date widget

* [ci:force] fix tests

* [ci:force] update docs

* fix types and tests

* fix how the real date is stored, extra tests

* remove useless e2e as covered by tests already
This commit is contained in:
Denys Vuika
2023-10-10 11:58:04 +01:00
committed by GitHub
parent 4cc4498b0e
commit ce549249e5
9 changed files with 237 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
lib/core/src/lib/common/utils/date-fns-adapter.ts Normal file
View File

@@ -0,0 +1,89 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
import { DateFnsUtils } from './date-fns-utils';
import { Inject, Injectable, Optional } from '@angular/core';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
import { UserPreferenceValues, UserPreferencesService } from '../services/user-preferences.service';
import { Locale } from 'date-fns';
/**
* Date-fns adapter with moment-to-date-fns conversion.
*
* Automatically switches locales based on user preferences.
* Supports custom display format.
*
* @example
*
* Add the following to the component `providers` section
*
* providers: [
* { provide: MAT_DATE_FORMATS, useValue: ADF_FORM_DATE_FORMATS },
* { provide: DateAdapter, useClass: AdfDateFnsAdapter }
* ]
*
* Setting custom format
*
* constructor(private dateAdapter: DateAdapter<Date>) {}
*
* ngOnInit() {
* const adapter = this.dateAdapter as AdfDateFnsAdapter;
adapter.displayFormat = '<custom date-fns format>';
* }
*/
@Injectable()
export class AdfDateFnsAdapter extends DateFnsAdapter {
private _displayFormat?: string = null;
get displayFormat(): string | null {
return this._displayFormat;
}
set displayFormat(value: string | null) {
this._displayFormat = value ? DateFnsUtils.convertMomentToDateFnsFormat(value) : null;
}
constructor(
@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: Locale,
@Optional() @Inject(MAT_DATE_FORMATS) private formats: MatDateFormats,
preferences: UserPreferencesService
) {
super(matDateLocale);
preferences.select(UserPreferenceValues.Locale).subscribe((locale: string) => {
this.setLocale(DateFnsUtils.getLocaleFromString(locale));
});
}
override parse(value: any, parseFormat: string | string[]): Date {
const format = Array.isArray(parseFormat)
? parseFormat.map(DateFnsUtils.convertMomentToDateFnsFormat)
: DateFnsUtils.convertMomentToDateFnsFormat(parseFormat);
return super.parse(value, format);
}
override format(date: Date, displayFormat: string): string {
displayFormat = DateFnsUtils.convertMomentToDateFnsFormat(displayFormat);
if (this.displayFormat && displayFormat === this.formats?.display?.dateInput) {
return super.format(date, this.displayFormat || displayFormat);
}
return super.format(date, displayFormat);
}
}

1
lib/core/src/lib/common/utils/public-api.ts
View File

@@ -21,3 +21,4 @@ export * from './moment-date-formats.model';
export * from './moment-date-adapter';
export * from './string-utils';
export * from './date-fns-utils';
export * from './date-fns-adapter';

2
lib/core/src/lib/core.module.ts
View File

@@ -64,6 +64,7 @@ import { loadAppConfig } from './app-config/app-config.loader';
import { AppConfigService } from './app-config/app-config.service';
import { StorageService } from './common/services/storage.service';
import { AlfrescoApiLoaderService, createAlfrescoApiInstance } from './api-factories/alfresco-api-v2-loader.service';
import { AdfDateFnsAdapter } from './common/utils/date-fns-adapter';
@NgModule({
imports: [
@@ -148,6 +149,7 @@ export class CoreModule {
TranslateStore,
TranslateService,
{ provide: TranslateLoader, useClass: TranslateLoaderService },
AdfDateFnsAdapter,
{
provide: APP_INITIALIZER,
useFactory: loadAppConfig,

126
lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts
View File

@@ -16,18 +16,21 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment';
import { DateAdapter } from '@angular/material/core';
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 { DateFieldValidator, MaxDateFieldValidator, MinDateFieldValidator } from '../core/form-field-validator';
describe('DateWidgetComponent', () => {
let widget: DateWidgetComponent;
let fixture: ComponentFixture<DateWidgetComponent>;
let element: HTMLElement;
let adapter: DateAdapter<Date>;
let form: FormModel;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -36,14 +39,19 @@ describe('DateWidgetComponent', () => {
CoreTestingModule
]
});
form = new FormModel();
form.fieldValidators = [new DateFieldValidator(), new MinDateFieldValidator(), new MaxDateFieldValidator()];
fixture = TestBed.createComponent(DateWidgetComponent);
adapter = fixture.debugElement.injector.get(DateAdapter);
element = fixture.nativeElement;
widget = fixture.componentInstance;
});
it('[C310333] - should be able to set a placeholder', () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
id: 'date-id',
name: 'date-name',
placeholder: 'My Placeholder'
@@ -54,7 +62,7 @@ describe('DateWidgetComponent', () => {
it('should setup min value for date picker', () => {
const minValue = '13-03-1982';
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
id: 'date-id',
name: 'date-name',
minValue
@@ -62,13 +70,65 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = moment(minValue, widget.field.dateDisplayFormat);
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = adapter.parse(minValue, widget.DATE_FORMAT) as Date;
expect(adapter.compareDate(widget.minDate, expected)).toBe(0);
});
it('should validate min date value constraint', async () => {
const minValue = '13-03-1982';
const field = new FormFieldModel(form, {
id: 'date-id',
type: 'date',
name: 'date-name',
dateDisplayFormat: 'DD-MM-YYYY',
minValue
});
widget.field = field;
widget.ngOnInit();
widget.onDateChange({
value: new Date('1982/03/12')
} as any);
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBeFalsy();
expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_LESS_THAN');
expect(field.validationSummary.attributes.get('minValue')).toBe('13-03-1982');
});
it('should validate max date value constraint', async () => {
const maxValue = '13-03-1982';
const field = new FormFieldModel(form, {
id: 'date-id',
type: 'date',
name: 'date-name',
dateDisplayFormat: 'DD-MM-YYYY',
maxValue
});
widget.field = field;
widget.ngOnInit();
widget.onDateChange({
value: new Date('2023/03/13')
} as any);
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBeFalsy();
expect(field.validationSummary.message).toBe('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN');
expect(field.validationSummary.attributes.get('maxValue')).toBe('13-03-1982');
});
it('should date field be present', () => {
const minValue = '13-03-1982';
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
minValue
});
@@ -80,28 +140,28 @@ describe('DateWidgetComponent', () => {
it('should setup max value for date picker', () => {
const maxValue = '31-03-1982';
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
maxValue
});
widget.ngOnInit();
const expected = moment(maxValue, widget.field.dateDisplayFormat);
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = adapter.parse(maxValue, widget.DATE_FORMAT) as Date;
expect(adapter.compareDate(widget.maxDate, expected)).toBe(0);
});
it('should eval visibility on date changed', () => {
spyOn(widget, 'onFieldChanged').and.callThrough();
const field = new FormFieldModel(new FormModel(), {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9-9-9999',
type: 'date',
readOnly: 'false'
type: 'date'
});
widget.field = field;
widget.onDateChange({
value: moment('12/12/2012', widget.field.dateDisplayFormat)
value: new Date('12/12/2012')
} as any);
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
@@ -137,14 +197,12 @@ describe('DateWidgetComponent', () => {
});
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9-9-9999',
type: 'date',
readOnly: 'false'
type: 'date'
});
widget.field.isVisible = true;
fixture.detectChanges();
await fixture.whenStable();
@@ -156,15 +214,13 @@ describe('DateWidgetComponent', () => {
});
it('[C310335] - Should be able to change display format for Date widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999',
value: '30-12-9999',
type: 'date',
readOnly: 'false'
dateDisplayFormat: 'MM-DD-YYYY'
});
widget.field.isVisible = true;
widget.field.dateDisplayFormat = 'MM-DD-YYYY';
fixture.detectChanges();
await fixture.whenStable();
@@ -172,7 +228,7 @@ describe('DateWidgetComponent', () => {
let dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement?.value).toContain('12-30-9999');
widget.field.value = '05.06.2019';
widget.field.value = '05-06-2019';
widget.field.dateDisplayFormat = 'DD.MM.YYYY';
fixture.componentInstance.ngOnInit();
@@ -184,30 +240,29 @@ describe('DateWidgetComponent', () => {
});
it('should disable date button when is readonly', () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9-9-9999',
type: 'date',
readOnly: 'false'
type: 'date'
});
widget.field.isVisible = true;
widget.field.readOnly = false;
fixture.detectChanges();
let dateButton = element.querySelector<HTMLButtonElement>('button');
expect(dateButton).toBeDefined();
expect(dateButton.disabled).toBeFalsy();
widget.field.readOnly = true;
fixture.detectChanges();
dateButton = element.querySelector<HTMLButtonElement>('button');
expect(dateButton).toBeDefined();
expect(dateButton.disabled).toBeTruthy();
});
it('should set isValid to false when the value is not a correct date value', () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: 'aa',
@@ -223,23 +278,22 @@ describe('DateWidgetComponent', () => {
});
it('should display always the json value', async () => {
const field = new FormFieldModel(new FormModel(), {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999',
value: '30-12-9999',
type: 'date',
readOnly: 'false'
dateDisplayFormat: 'MM-DD-YYYY'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY';
widget.field = field;
fixture.detectChanges();
await fixture.whenStable();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement?.value).toContain('12-30-9999');
expect(dateElement).toBeDefined();
expect(dateElement.value).toContain('12-30-9999');
widget.field.value = '03-02-2020';
@@ -247,6 +301,6 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(dateElement?.value).toContain('03-02-2020');
expect(dateElement.value).toContain('02-03-2020');
});
});

54
lib/core/src/lib/form/components/widgets/date/date.widget.ts
View File

@@ -17,23 +17,21 @@
/* eslint-disable @angular-eslint/component-selector */
import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service';
import { MomentDateAdapter } from '../../../../common/utils/moment-date-adapter';
import { MOMENT_DATE_FORMATS } from '../../../../common/utils/moment-date-formats.model';
import { Component, OnInit, ViewEncapsulation, OnDestroy, Input } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment, { Moment } from 'moment';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { ADF_FORM_DATE_FORMATS } from '../../../date-formats';
import { AdfDateFnsAdapter } from '../../../../common/utils/date-fns-adapter';
@Component({
selector: 'date-widget',
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
{ provide: MAT_DATE_FORMATS, useValue: ADF_FORM_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
templateUrl: './date.widget.html',
host: {
'(click)': 'event($event)',
@@ -49,44 +47,40 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker';
encapsulation: ViewEncapsulation.None
})
export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
DATE_FORMAT = 'dd-MM-yyyy';
DATE_FORMAT = 'DD-MM-YYYY';
minDate: Moment;
maxDate: Moment;
startAt: Moment;
minDate: Date;
maxDate: Date;
startAt: Date;
@Input()
value: any = null;
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService) {
constructor(public formService: FormService, private dateAdapter: DateAdapter<Date>) {
super(formService);
}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
if (this.field.dateDisplayFormat) {
const adapter = this.dateAdapter as AdfDateFnsAdapter;
adapter.displayFormat = this.field.dateDisplayFormat;
}
if (this.field) {
if (this.field.minValue) {
this.minDate = moment(this.field.minValue, this.DATE_FORMAT);
this.minDate = this.dateAdapter.parse(this.field.minValue, this.DATE_FORMAT);
}
if (this.field.maxValue) {
this.maxDate = moment(this.field.maxValue, this.DATE_FORMAT);
this.maxDate = this.dateAdapter.parse(this.field.maxValue, this.DATE_FORMAT);
}
this.startAt = moment(this.field.value, this.field.dateDisplayFormat);
this.value = moment(this.field.value, this.field.dateDisplayFormat);
if (this.field.value) {
this.startAt = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT);
this.value = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT);
}
}
}
@@ -95,16 +89,16 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe
this.onDestroy$.complete();
}
onDateChange(event: MatDatepickerInputEvent<Moment>) {
onDateChange(event: MatDatepickerInputEvent<Date>) {
const value = event.value;
const input = event.targetElement as HTMLInputElement;
const date = moment(value, this.field.dateDisplayFormat, true);
if (date.isValid()) {
this.field.value = date.format(this.field.dateDisplayFormat);
if (value) {
this.field.value = this.dateAdapter.format(value, this.DATE_FORMAT);
} else {
this.field.value = input.value;
}
this.onFieldChanged(this.field);
}
}

31
lib/core/src/lib/form/date-formats.ts Normal file
View File

@@ -0,0 +1,31 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { MatDateFormats } from '@angular/material/core';
export const ADF_FORM_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'dd-MM-yyyy'
},
display: {
dateInput: 'dd-MM-yyyy',
monthLabel: 'LLL',
monthYearLabel: 'LLL uuuu',
dateA11yLabel: 'PP',
monthYearA11yLabel: 'LLLL uuuu'
}
};