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-2136] migrate search-datetime-range to date-fns (#9004)

Browse Source 
* strongly typed forms

* migrate to date-fns

* [ci:force] mark moment pipes for deprecation

* [ci:force] try migrate the metadata smoke e2e

* [ci:force] remove dead code

* cleanup dead code and switch e2e to date-fns

* [ci:force] migrate tests

* revert metadata

* [ci:force] migrate e2e

* [ci:force] delete date util
This commit is contained in:
Denys Vuika
2023-10-18 07:56:10 +01:00
committed by GitHub
parent af24aceb65
commit 7d5fbecf3f
22 changed files with 350 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.spec.ts
View File

@@ -15,20 +15,22 @@
* limitations under the License.
*/
import { SearchDatetimeRangeComponent } from './search-datetime-range.component';
import { DEFAULT_DATETIME_FORMAT, SearchDatetimeRangeComponent } from './search-datetime-range.component';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
import { DateFnsUtils } from '@alfresco/adf-core';
import { isValid } from 'date-fns';
declare let moment: any;
describe('SearchDatetimeRangeComponent', () => {
let fixture: ComponentFixture<SearchDatetimeRangeComponent>;
let component: SearchDatetimeRangeComponent;
const fromDatetime = '2016-10-16 12:30';
const toDatetime = '2017-10-16 20:00';
const maxDatetime = '10-Mar-20 20:00';
const datetimeFormatFixture = 'DD-MMM-YY HH:mm';
const fromDatetime = new Date('2016-10-16 12:30');
const toDatetime = new Date('2017-10-16 20:00');
const datetimeFormatFixture = 'DD-MMM-YY HH:mm'; // dd-MMM-yy HH:mm
const maxDatetime = DateFnsUtils.parseDate('10-Mar-20 20:00', datetimeFormatFixture);
beforeEach(() => {
TestBed.configureTestingModule({
@@ -59,13 +61,13 @@ describe('SearchDatetimeRangeComponent', () => {
await fixture.whenStable();
const inputString = '20-feb-18 20:00';
const momentFromInput = moment(inputString, datetimeFormatFixture);
const fromDate = DateFnsUtils.parseDate(inputString, datetimeFormatFixture);
expect(momentFromInput.isValid()).toBeTruthy();
expect(isValid(fromDate)).toBeTrue();
component.onChangedHandler({ value: inputString }, component.from);
component.onChangedHandler({ value: fromDate } as MatDatetimepickerInputEvent<Date>, component.from);
expect(component.from.value.toString()).toEqual(momentFromInput.toString());
expect(component.from.value.toString()).toEqual(fromDate.toString());
});
it('should NOT setup form control with invalid datetime on change', async () => {
@@ -74,30 +76,28 @@ describe('SearchDatetimeRangeComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const inputString = '2017-10-16 20:f:00';
const momentFromInput = moment(inputString, datetimeFormatFixture);
component.onChangedHandler({ value: new Date('2017-10-16 20:f:00') } as MatDatetimepickerInputEvent<Date>, component.from);
expect(momentFromInput.isValid()).toBeFalsy();
component.onChangedHandler({ value: inputString }, component.from);
expect(component.from.value.toString()).not.toEqual(momentFromInput.toString());
expect(component.from.value).toBeNull();
});
it('should reset form', async () => {
fixture.detectChanges();
await fixture.whenStable();
component.form.setValue({ from: fromDatetime, to: toDatetime });
component.form.setValue({
from: fromDatetime,
to: toDatetime
});
expect(component.from.value).toEqual(fromDatetime);
expect(component.to.value).toEqual(toDatetime);
component.reset();
expect(component.from.value).toEqual('');
expect(component.to.value).toEqual('');
expect(component.form.value).toEqual({ from: '', to: '' });
expect(component.from.value).toBeNull();
expect(component.to.value).toBeNull();
expect(component.form.value).toEqual({ from: null, to: null });
});
it('should reset fromMaxDatetime on reset', async () => {
@@ -152,7 +152,7 @@ describe('SearchDatetimeRangeComponent', () => {
to: toDatetime
}, true);
const expectedQuery = `cm:created:['2016-10-16T12:30:00Z' TO '2017-10-16T20:00:59Z']`;
const expectedQuery = `cm:created:['2016-10-16T12:30:00.000Z' TO '2017-10-16T20:00:59.000Z']`;
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
expect(context.update).toHaveBeenCalled();
@@ -163,8 +163,8 @@ describe('SearchDatetimeRangeComponent', () => {
queryFragments: {},
update: () => {}
};
const fromInGmt = '2021-02-24T17:00:00+02:00';
const toInGmt = '2021-02-28T15:00:00+02:00';
const fromInGmt = new Date('2021-02-24T17:00:00+02:00');
const toInGmt = new Date('2021-02-28T15:00:00+02:00');
component.id = 'createdDateRange';
component.context = context;
@@ -180,7 +180,7 @@ describe('SearchDatetimeRangeComponent', () => {
to: toInGmt
}, true);
const expectedQuery = `cm:created:['2021-02-24T15:00:00Z' TO '2021-02-28T13:00:59Z']`;
const expectedQuery = `cm:created:['2021-02-24T15:00:00.000Z' TO '2021-02-28T13:00:59.000Z']`;
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
expect(context.update).toHaveBeenCalled();
@@ -190,7 +190,7 @@ describe('SearchDatetimeRangeComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
component.onChangedHandler({ value: '10/14/2020 10:00:00 PM' }, component.from);
component.onChangedHandler({ value: new Date('invalid') } as MatDatetimepickerInputEvent<Date>, component.from);
fixture.detectChanges();
await fixture.whenStable();
@@ -198,18 +198,17 @@ describe('SearchDatetimeRangeComponent', () => {
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATETIME');
});
it('should not show datetime-format error when valid found', async () => {
it('should display date with default format in the input', async () => {
component.settings = { field: 'cm:created' };
fixture.detectChanges();
await fixture.whenStable();
component.onChangedHandler({ value: new Date() } as MatDatetimepickerInputEvent<Date>, component.from);
const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="datetime-range-from-input"]');
input.value = '10/16/2017 9:00 PM';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
const expected = DateFnsUtils.formatDate(new Date(), DEFAULT_DATETIME_FORMAT);
expect(input.value).toBe(expected);
});
it('should have no maximum datetime by default', async () => {

98
lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts
View File

@@ -15,42 +15,48 @@
* limitations under the License.
*/
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ADF_DATE_FORMATS, ADF_DATETIME_FORMATS, AdfDateFnsAdapter, AdfDateTimeFnsAdapter, DateFnsUtils } 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 { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { isValid, isBefore, startOfMinute, endOfMinute } from 'date-fns';
export interface DatetimeRangeValue {
from: string;
to: string;
}
declare let moment: any;
interface FormProps {
from: FormControl<Date>;
to: FormControl<Date>;
}
const DEFAULT_DATETIME_FORMAT: string = 'DD/MM/YYYY HH:mm';
export const DEFAULT_DATETIME_FORMAT: string = 'dd/MM/yyyy HH:mm';
@Component({
selector: 'adf-search-datetime-range',
templateUrl: './search-datetime-range.component.html',
styleUrls: ['./search-datetime-range.component.scss'],
providers: [{ provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-date-range' }
})
export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDestroy {
from: UntypedFormControl;
to: UntypedFormControl;
export class SearchDatetimeRangeComponent implements SearchWidget, OnInit {
from: FormControl<Date>;
to: FormControl<Date>;
form: UntypedFormGroup;
form: FormGroup<FormProps>;
matcher = new LiveErrorStateMatcher();
id: string;
@@ -64,9 +70,8 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
enableChangeUpdate: boolean;
displayValue$: Subject<string> = new Subject<string>();
private onDestroy$ = new Subject<boolean>();
constructor(private dateAdapter: DatetimeAdapter<Moment>, private userPreferencesService: UserPreferencesService) {}
constructor(private dateAdapter: DateAdapter<Date>,
private dateTimeAdapter: DatetimeAdapter<Date>) {}
getFromValidationMessage(): string {
return this.from.hasError('invalidOnChange') || this.hasParseError(this.from)
@@ -93,29 +98,30 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
ngOnInit() {
this.datetimePickerFormat = this.settings?.datetimeFormat ? this.settings.datetimeFormat : DEFAULT_DATETIME_FORMAT;
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => this.setLocale(locale));
const dateAdapter = this.dateAdapter as AdfDateFnsAdapter;
dateAdapter.displayFormat = this.datetimePickerFormat;
const dateTimeAdapter = this.dateTimeAdapter as AdfDateTimeFnsAdapter;
dateTimeAdapter.displayFormat = this.datetimePickerFormat;
const validators = Validators.compose([Validators.required]);
if (this.settings?.maxDatetime) {
this.maxDatetime = moment(this.settings.maxDatetime);
this.maxDatetime = new Date(this.settings.maxDatetime);
}
if (this.startValue) {
const splitValue = this.startValue.split('||');
const fromValue = this.dateAdapter.parse(splitValue[0], this.datetimePickerFormat);
const toValue = this.dateAdapter.parse(splitValue[1], this.datetimePickerFormat);
this.from = new UntypedFormControl(fromValue, validators);
this.to = new UntypedFormControl(toValue, validators);
this.from = new FormControl<Date>(fromValue, validators);
this.to = new FormControl<Date>(toValue, validators);
} else {
this.from = new UntypedFormControl('', validators);
this.to = new UntypedFormControl('', validators);
this.from = new FormControl<Date>(null, validators);
this.to = new FormControl<Date>(null, validators);
}
this.form = new UntypedFormGroup({
this.form = new FormGroup<FormProps>({
from: this.from,
to: this.to
});
@@ -124,17 +130,12 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
this.enableChangeUpdate = this.settings?.allowUpdateOnChange ?? true;
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
apply(model: { from: string; to: string }, isValid: boolean) {
if (isValid && this.id && this.context && this.settings && this.settings.field) {
apply(model: Partial<{ from: Date; to: Date }>, isValidValue: boolean) {
if (isValidValue && this.id && this.context && this.settings && this.settings.field) {
this.isActive = true;
const start = moment.utc(model.from).startOf('minute').format();
const end = moment.utc(model.to).endOf('minute').format();
const start = DateFnsUtils.utcToLocal(startOfMinute(model.from)).toISOString();
const end = DateFnsUtils.utcToLocal(endOfMinute(model.to)).toISOString();
this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`;
this.updateDisplayValue();
@@ -186,8 +187,8 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
clear() {
this.isActive = false;
this.form.reset({
from: '',
to: ''
from: null,
to: null
});
if (this.id && this.context) {
this.context.queryFragments[this.id] = '';
@@ -211,10 +212,10 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
}
}
onChangedHandler(event: any, formControl: UntypedFormControl) {
const inputValue = event.value;
const formatDate = this.dateAdapter.parse(inputValue, this.datetimePickerFormat);
if (formatDate?.isValid()) {
onChangedHandler(event: MatDatetimepickerInputEvent<Date>, formControl: FormControl<Date>) {
const formatDate = event.value;
if (isValid(formatDate)) {
formControl.setValue(formatDate);
} else if (formatDate) {
formControl.setErrors({
@@ -225,21 +226,16 @@ export class SearchDatetimeRangeComponent implements SearchWidget, OnInit, OnDes
this.setFromMaxDatetime();
}
setLocale(locale) {
this.dateAdapter.setLocale(locale);
moment.locale(locale);
}
hasParseError(formControl): boolean {
hasParseError(formControl: FormControl<Date>): boolean {
return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
}
forcePlaceholder(event: any) {
event.srcElement.click();
event.target.click();
}
setFromMaxDatetime() {
this.fromMaxDatetime =
!this.to.value || (this.maxDatetime && moment(this.maxDatetime).isBefore(this.to.value)) ? this.maxDatetime : moment(this.to.value);
!this.to.value || (this.maxDatetime && isBefore(this.maxDatetime, this.to.value)) ? this.maxDatetime : this.to.value;
}
}