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

[ADF-2984] Show date invalid message on search date range picker (#3323)

Browse Source 
* [ADF-2984] Show date invalid message on search date range picker

* [ADF-2984] test that required format is displayed when date input is invalid

* [ADF-2984] More space above buttons
This commit is contained in:
Suzana Dirla
2018-05-18 19:22:12 +03:00
committed by Eugenio Romano
parent 2ad5dac77a
commit 67e0c02a5a
5 changed files with 179 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/i18n/en.json
View File

@@ -189,6 +189,7 @@
"REQUIRED-VALUE": "Required value",
"NO-DAYS": "No days selected.",
"INVALID-FORMAT": "Invalid Format",
"INVALID-DATE": "Invalid date. Please enter the date in the format '{{ requiredFormat }}'",
"BEYOND-MAX-DATE": "Date is too late."
}
},

12
lib/content-services/search/components/search-date-range/search-date-range.component.html
View File

@@ -7,12 +7,15 @@
(focusout)="onChangedHandler($event, from)">
<mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
<mat-datepicker #fromDatepicker></mat-datepicker>
<mat-error *ngIf="from.hasError('required')">
<mat-error *ngIf="from.hasError('required') && !from.hasError('matDatepickerParse')">
{{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
</mat-error>
<mat-error *ngIf="from.hasError('matDatepickerMax')">
{{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
</mat-error>
<mat-error *ngIf="from.hasError('matDatepickerParse')">
{{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
</mat-error>
</mat-form-field>
<mat-form-field>
@@ -24,7 +27,7 @@
(focusout)="onChangedHandler($event, to)">
<mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
<mat-datepicker #toDatepicker></mat-datepicker>
<mat-error *ngIf="to.hasError('required')">
<mat-error *ngIf="to.hasError('required') && !to.hasError('matDatepickerParse')">
{{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
</mat-error>
<mat-error *ngIf="to.hasError('matDatepickerMin')">
@@ -33,9 +36,12 @@
<mat-error *ngIf="to.hasError('matDatepickerMax')">
{{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
</mat-error>
<mat-error *ngIf="to.hasError('matDatepickerParse')">
{{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
</mat-error>
</mat-form-field>
<div class="facet-buttons">
<div class="facet-buttons facet-buttons--topSpace">
<button mat-button color="primary" type="button" (click)="reset()">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>

66
lib/content-services/search/components/search-date-range/search-date-range.component.spec.ts
View File

@@ -17,10 +17,16 @@
import { CustomMomentDateAdapter, SearchDateRangeComponent } from './search-date-range.component';
import { Observable } from 'rxjs/Observable';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { setupTestBed } from '@alfresco/adf-core';
import { By } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
declare let moment: any;
describe('SearchDateRangeComponent', () => {
describe('component class', () => {
let component: SearchDateRangeComponent;
let fromDate = '2016-10-16';
@@ -36,7 +42,7 @@ describe('SearchDateRangeComponent', () => {
const buildUserPreferences = (): any => {
const userPreferences = {
userPreferenceStatus: { LOCALE: localeFixture },
userPreferenceStatus: {LOCALE: localeFixture},
select: (property) => {
return Observable.of(userPreferences.userPreferenceStatus[property]);
}
@@ -64,38 +70,38 @@ describe('SearchDateRangeComponent', () => {
});
it('should setup the format of the date from configuration', () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
component.settings = {field: 'cm:created', dateFormat: dateFormatFixture};
component.ngOnInit();
expect(theDateAdapter.customDateFormat).toBe(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: dateFormatFixture};
component.ngOnInit();
const inputString = '20.feb.18';
const momentFromInput = moment(inputString, dateFormatFixture);
expect(momentFromInput.isValid()).toBeTruthy();
component.onChangedHandler({ srcElement: { value: inputString }}, component.from);
expect(component.from.value).toEqual(momentFromInput);
component.onChangedHandler({srcElement: {value: inputString}}, component.from);
expect(component.from.value.toString()).toEqual(momentFromInput.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: dateFormatFixture};
component.ngOnInit();
const inputString = '20.f.18';
const momentFromInput = moment(inputString, dateFormatFixture);
expect(momentFromInput.isValid()).toBeFalsy();
component.onChangedHandler({ srcElement: { value: inputString }}, component.from);
expect(component.from.value).not.toEqual(momentFromInput);
component.onChangedHandler({srcElement: {value: inputString}}, component.from);
expect(component.from.value.toString()).not.toEqual(momentFromInput.toString());
});
it('should reset form', () => {
component.ngOnInit();
component.form.setValue({ from: fromDate, to: toDate });
component.form.setValue({from: fromDate, to: toDate});
expect(component.from.value).toEqual(fromDate);
expect(component.to.value).toEqual(toDate);
@@ -104,7 +110,7 @@ describe('SearchDateRangeComponent', () => {
expect(component.from.value).toEqual('');
expect(component.to.value).toEqual('');
expect(component.form.value).toEqual({ from: '', to: '' });
expect(component.form.value).toEqual({from: '', to: ''});
});
it('should update query builder on reset', () => {
@@ -135,7 +141,7 @@ describe('SearchDateRangeComponent', () => {
component.id = 'createdDateRange';
component.context = context;
component.settings = { field: 'cm:created' };
component.settings = {field: 'cm:created'};
spyOn(context, 'update').and.stub();
@@ -152,5 +158,43 @@ describe('SearchDateRangeComponent', () => {
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
expect(context.update).toHaveBeenCalled();
});
});
describe('component DOM', () => {
let component: SearchDateRangeComponent;
let fixture: ComponentFixture<SearchDateRangeComponent>;
let translateService: TranslateService;
let translationSpy: jasmine.Spy;
const dateFormatFixture = 'DD MMM YYYY';
setupTestBed({
imports: [ContentTestingModule]
});
beforeEach(() => {
fixture = TestBed.createComponent(SearchDateRangeComponent);
component = fixture.componentInstance;
translateService = TestBed.get(TranslateService);
translationSpy = spyOn(translateService, 'get').and.callFake((key) => {
return Observable.of(key);
});
component.settings = {'dateFormat': dateFormatFixture, field: 'cm:created'};
fixture.detectChanges();
});
it('should display the required format when input date is invalid', () => {
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
inputEl.value = 'invalid-date';
inputEl.dispatchEvent(new Event('input'));
fixture.detectChanges();
inputEl.dispatchEvent(new Event('blur'));
fixture.detectChanges();
expect(translationSpy.calls.mostRecent().args)
.toEqual(['SEARCH.FILTER.VALIDATION.INVALID-DATE', {requiredFormat: dateFormatFixture}]);
});
});
});

3
lib/content-services/search/components/search-date-range/search-date-range.component.ts
View File

@@ -127,8 +127,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
const inputValue = event.srcElement.value;
if (inputValue) {
const formatDate = moment(inputValue, this.datePickerDateFormat);
const formatDate = this.dateAdapter.parse(inputValue, this.datePickerDateFormat);
if (formatDate.isValid()) {
formControl.setValue(formatDate);
}

4
lib/content-services/search/components/search-filter/search-filter.component.scss
View File

@@ -24,6 +24,10 @@
.mat-button {
text-transform: uppercase;
}
&--topSpace {
padding-top: 15px;
}
}
}