From e42e0869ba671f867d5d9c5571dd22f001de9eb1 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 6 Oct 2023 14:54:28 +0100 Subject: [PATCH] [APPS-2108] Switch search date range to the material date adapter (#8973) * cleanup and setup testing * switch to material adapter instead of adf one --- .../search-date-range.component.spec.ts | 16 +------- .../search-date-range.component.ts | 39 +++++++++---------- .../services/user-preferences.service.ts | 2 +- 3 files changed, 20 insertions(+), 37 deletions(-) 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 e22bcab0af2..6d4aa6587a6 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,11 +16,11 @@ */ import { SearchDateRangeComponent } from './search-date-range.component'; -import { MomentDateAdapter } 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 { MomentDateAdapter } from '@angular/material-moment-adapter'; declare let moment: any; @@ -47,13 +47,6 @@ describe('SearchDateRangeComponent', () => { afterEach(() => fixture.destroy()); - it('should use moment adapter', () => { - fixture.detectChanges(); - - expect(adapter instanceof MomentDateAdapter).toBe(true); - expect(component.datePickerFormat).toBe('DD/MM/YYYY'); - }); - it('should setup form elements on init', () => { fixture.detectChanges(); @@ -62,13 +55,6 @@ describe('SearchDateRangeComponent', () => { expect(component.form).toBeDefined(); }); - it('should setup the format of the date from configuration', () => { - component.settings = { field: 'cm:created', dateFormat: dateFormatFixture }; - fixture.detectChanges(); - - expect(adapter.overrideDisplayFormat).toBe(dateFormatFixture); - }); - it('should setup form control with formatted valid date on change', () => { component.settings = { field: 'cm:created', dateFormat: dateFormatFixture }; fixture.detectChanges(); 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 6e1b8b87b84..824704ef927 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 @@ -16,10 +16,9 @@ */ import { Component, 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 { FormControl, FormGroup, Validators } from '@angular/forms'; +import { DateAdapter } from '@angular/material/core'; +import { 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'; @@ -27,6 +26,7 @@ import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher'; import { Moment } from 'moment'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter'; export interface DateRangeValue { from: string; @@ -42,17 +42,17 @@ 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: MomentDateAdapter }, + { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { strict: true } } ], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-date-range' } }) export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy { - from: UntypedFormControl; - to: UntypedFormControl; + from: FormControl; + to: FormControl; - form: UntypedFormGroup; + form: FormGroup; matcher = new LiveErrorStateMatcher(); id: string; @@ -95,11 +95,8 @@ 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.userPreferencesService - .select(UserPreferenceValues.Locale) + .select(UserPreferenceValues.Locale) .pipe(takeUntil(this.onDestroy$)) .subscribe((locale) => this.setLocale(locale)); @@ -117,14 +114,14 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy const splitValue = this.startValue.split('||'); const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat); const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat); - this.from = new UntypedFormControl(fromValue, validators); - this.to = new UntypedFormControl(toValue, validators); + this.from = new FormControl(fromValue, validators); + this.to = new FormControl(toValue, validators); } else { - this.from = new UntypedFormControl('', validators); - this.to = new UntypedFormControl('', validators); + this.from = new FormControl('', validators); + this.to = new FormControl('', validators); } - this.form = new UntypedFormGroup({ + this.form = new FormGroup({ from: this.from, to: this.to }); @@ -220,7 +217,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } } - onChangedHandler(event: any, formControl: UntypedFormControl) { + onChangedHandler(event: any, formControl: FormControl) { const inputValue = event.value; const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat); if (formatDate?.isValid()) { @@ -234,12 +231,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy this.setFromMaxDate(); } - setLocale(locale) { + setLocale(locale: string) { this.dateAdapter.setLocale(locale); moment.locale(locale); } - hasParseError(formControl): boolean { + hasParseError(formControl: FormControl): boolean { return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text; } diff --git a/lib/core/src/lib/common/services/user-preferences.service.ts b/lib/core/src/lib/common/services/user-preferences.service.ts index 01078088b24..57dd29ab9c5 100644 --- a/lib/core/src/lib/common/services/user-preferences.service.ts +++ b/lib/core/src/lib/common/services/user-preferences.service.ts @@ -83,7 +83,7 @@ export class UserPreferencesService { * @param property The property to watch * @returns Notification callback */ - select(property: string): Observable { + select(property: string): Observable { return this.onChange .pipe( map((userPreferenceStatus) => userPreferenceStatus[property]),