Skip to content

Commit

Permalink
fix(components/datetime): show minimum and maximum date in error mess…
Browse files Browse the repository at this point in the history 
…age (#2762)
  • Loading branch information
@Blackbaud-ErikaMcVey
Blackbaud-ErikaMcVey authored Sep 20, 2024
1 parent ed3f518 commit d3b2e66
Show file tree
Hide file tree
Showing 9 changed files with 123 additions and 20 deletions.
8 changes: 8 additions & 0 deletions libs/components/datetime/src/lib/modules/datepicker/datepicker-input-fuzzy.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,10 @@ export class SkyFuzzyDatepickerInputDirective
validationError = {
skyFuzzyDate: {
maxDate: value,
maxDateFormatted: this.#dateFormatter.format(
fuzzyDateRange.endDate,
this.dateFormat,
),
},
};
}
Expand All @@ -439,6 +443,10 @@ export class SkyFuzzyDatepickerInputDirective
validationError = {
skyFuzzyDate: {
minDate: value,
minDateFormatted: this.#dateFormatter.format(
fuzzyDateRange.startDate,
this.dateFormat,
),
},
};
}
Expand Down
8 changes: 8 additions & 0 deletions libs/components/datetime/src/lib/modules/datepicker/datepicker-input.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,10 @@ export class SkyDatepickerInputDirective
return {
skyDate: {
minDate,
minDateFormatted: this.#dateFormatter.format(
minDate,
this.dateFormat,
),
},
};
}
Expand All @@ -409,6 +413,10 @@ export class SkyDatepickerInputDirective
return {
skyDate: {
maxDate,
maxDateFormatted: this.#dateFormatter.format(
maxDate,
this.dateFormat,
),
},
};
}
Expand Down
12 changes: 12 additions & 0 deletions libs/components/datetime/src/lib/modules/datepicker/datepicker.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -923,6 +923,12 @@ describe('datepicker', () => {
setInputElementValue(fixture.nativeElement, '5/26/2017', fixture);

expect(ngModel.valid).toBe(false);
expect(ngModel.errors).toEqual({
skyDate: {
maxDate: component.maxDate,
maxDateFormatted: '05/25/2017',
},
});
}));

it('should handle change below min date', fakeAsync(() => {
Expand All @@ -933,6 +939,12 @@ describe('datepicker', () => {
setInputElementValue(fixture.nativeElement, '5/1/2017', fixture);

expect(ngModel.valid).toBe(false);
expect(ngModel.errors).toEqual({
skyDate: {
minDate: component.minDate,
minDateFormatted: '05/04/2017',
},
});
}));

it('should pass max date to calendar', fakeAsync(() => {
Expand Down
11 changes: 6 additions & 5 deletions libs/components/datetime/src/lib/modules/datepicker/fuzzy-date.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ interface SkyFuzzyDateRange {
years: string;
months: string;
days: string;
startDate: Date;
endDate: Date;
valid: boolean;
}

Expand Down Expand Up @@ -307,8 +309,8 @@ export class SkyFuzzyDateService implements OnDestroy {
startFuzzyDate: SkyFuzzyDate,
endFuzzyDate: SkyFuzzyDate,
): SkyFuzzyDateRange {
let start;
let end;
const start = this.getMomentFromFuzzyDate(startFuzzyDate);
const end = this.getMomentFromFuzzyDate(endFuzzyDate);
let days;
let months;
let years;
Expand All @@ -320,9 +322,6 @@ export class SkyFuzzyDateService implements OnDestroy {
endFuzzyDate &&
endFuzzyDate.year
) {
start = this.getMomentFromFuzzyDate(startFuzzyDate);
end = this.getMomentFromFuzzyDate(endFuzzyDate);

years = end.diff(start, 'years');
months = end.diff(start, 'months');
days = end.diff(start, 'days');
Expand All @@ -333,6 +332,8 @@ export class SkyFuzzyDateService implements OnDestroy {
years: years,
months: months,
days: days,
startDate: start.toDate(),
endDate: end.toDate(),
valid: valid,
};
}
Expand Down
9 changes: 9 additions & 0 deletions libs/components/datetime/src/lib/modules/datepicker/fuzzy-datepicker.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,9 @@ describe('fuzzy datepicker input', () => {
expect(ngModel.valid).toBe(false);
expect(ngModel.touched).toBe(true);
expect(ngModel.errors?.['skyFuzzyDate'].minDate).toBeTruthy();
expect(ngModel.errors?.['skyFuzzyDate'].minDateFormatted).toEqual(
'02/15/2015',
);

setInputElementValue(nativeElement, '2/15/2015', fixture);

Expand All @@ -1035,6 +1038,9 @@ describe('fuzzy datepicker input', () => {

expect(ngModel.valid).toBe(false);
expect(ngModel.errors?.['skyFuzzyDate'].maxDate).toBeTruthy();
expect(ngModel.errors?.['skyFuzzyDate'].maxDateFormatted).toEqual(
'05/25/2017',
);

flush();
}));
Expand All @@ -1048,6 +1054,9 @@ describe('fuzzy datepicker input', () => {

expect(ngModel.valid).toBe(false);
expect(ngModel.errors?.['skyFuzzyDate'].minDate).toBeTruthy();
expect(ngModel.errors?.['skyFuzzyDate'].minDateFormatted).toEqual(
'05/04/2017',
);

flush();
}));
Expand Down
8 changes: 4 additions & 4 deletions libs/components/forms/src/assets/locales/resources_en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
},
"skyux_form_error_date_max": {
"_description": "Error message for a field with a date after max date",
"message": "Select or enter a date before the max date."
"message": "Select or enter a date on or before {0}."
},
"skyux_form_error_date_min": {
"_description": "Error message for a field with a date before min date",
"message": "Select or enter a date after the min date."
"message": "Select or enter a date on or after {0}."
},
"skyux_form_error_fuzzy_date_future_disabled": {
"_description": "Error message for a field with a in invalid fuzzy date in the future",
Expand All @@ -37,11 +37,11 @@
},
"skyux_form_error_fuzzy_date_max_date": {
"_description": "Error message for a field with a date after max fuzzy date",
"message": "Select or enter a date before the max date."
"message": "Select or enter a date on or before {0}."
},
"skyux_form_error_fuzzy_date_min_date": {
"_description": "Error message for a field with a date before min fuzzy date",
"message": "Select or enter a date after the min date."
"message": "Select or enter a date on or after {0}."
},
"skyux_form_error_fuzzy_date_year_required": {
"_description": "Error message for a field with a date without a year",
Expand Down
22 changes: 18 additions & 4 deletions libs/components/forms/src/lib/modules/form-error/form-errors.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,20 @@
@if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {
<sky-form-error
errorName="minDate"
[errorText]="'skyux_form_error_date_min' | skyLibResources"
[errorText]="
'skyux_form_error_date_min'
| skyLibResources: errors?.['skyDate']['minDateFormatted']
"
/>
}

@if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {
<sky-form-error
errorName="maxDate"
[errorText]="'skyux_form_error_date_max' | skyLibResources"
[errorText]="
'skyux_form_error_date_max'
| skyLibResources: errors?.['skyDate']['maxDateFormatted']
"
/>
}

Expand All @@ -59,14 +65,22 @@
@if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {
<sky-form-error
errorName="fuzzyMaxDate"
[errorText]="'skyux_form_error_fuzzy_date_max_date' | skyLibResources"
[errorText]="
'skyux_form_error_fuzzy_date_max_date'
| skyLibResources: errors?.['skyFuzzyDate']['maxDateFormatted']
"
/>
}

@if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {
<sky-form-error
errorName="fuzzyMinDate"
[errorText]="'skyux_form_error_fuzzy_date_min_date' | skyLibResources"
[errorText]="
'skyux_form_error_fuzzy_date_min_date'
| skyLibResources
: errors?.['skyFuzzyDate'] &&
errors?.['skyFuzzyDate']['minDateFormatted']
"
/>
}

Expand Down
57 changes: 54 additions & 3 deletions libs/components/forms/src/lib/modules/form-error/form-errors.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ describe('Form errors component', () => {
required: true,
maxlength: true,
minlength: true,
skyDate: { invalid: true, minDate: true, maxDate: true },
skyDate: { invalid: true, minDate: '01/01/2024', maxDate: '01/01/2022' },
skyFuzzyDate: {
futureDisabled: true,
invalid: true,
maxDate: true,
minDate: true,
maxDate: '01/2023',
minDate: '01/2024',
yearRequired: true,
},
skyEmail: true,
Expand Down Expand Up @@ -100,6 +100,57 @@ describe('Form errors component', () => {
});
});

it('should include the minimum or maximum date in the date error messages', () => {
componentInstance.errors = {
skyDate: {
invalid: true,
maxDate: new Date('01/01/2025'),
maxDateFormatted: '01/01/2025',
minDate: new Date('01/01/2024'),
minDateFormatted: '01/01/2024',
},
skyFuzzyDate: {
futureDisabled: true,
invalid: true,
maxDate: new Date('01/01/2021'),
maxDateFormatted: '01/01/2021',
minDate: new Date('01/01/2020'),
minDateFormatted: '01/01/2020',
yearRequired: true,
},
};

componentInstance.dirty = true;
componentInstance.touched = true;
fixture.detectChanges();

const minDateErrorMessage = fixture.nativeElement.querySelector(
`sky-form-error[errorName='minDate'] .sky-status-indicator-message`,
);
const maxDateErrorMessage = fixture.nativeElement.querySelector(
`sky-form-error[errorName='maxDate'] .sky-status-indicator-message`,
);
const fuzzyMinDateErrorMessage = fixture.nativeElement.querySelector(
`sky-form-error[errorName='fuzzyMinDate'] .sky-status-indicator-message`,
);
const fuzzyMaxDateErrorMessage = fixture.nativeElement.querySelector(
`sky-form-error[errorName='fuzzyMaxDate'] .sky-status-indicator-message`,
);

expect(minDateErrorMessage.textContent).toEqual(
'Select or enter a date on or after 01/01/2024.',
);
expect(maxDateErrorMessage.textContent).toEqual(
'Select or enter a date on or before 01/01/2025.',
);
expect(fuzzyMinDateErrorMessage.textContent).toEqual(
'Select or enter a date on or after 01/01/2020.',
);
expect(fuzzyMaxDateErrorMessage.textContent).toEqual(
'Select or enter a date on or before 01/01/2021.',
);
});

it('should render custom errors when there are no known errors and labelText is present regardless of touched or dirty', () => {
componentInstance.touched = true;
fixture.detectChanges();
Expand Down
8 changes: 4 additions & 4 deletions libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ const RESOURCES: Record<string, SkyLibResources> = {
},
skyux_form_error_date: { message: 'Select or enter a valid date.' },
skyux_form_error_date_max: {
message: 'Select or enter a date before the max date.',
message: 'Select or enter a date on or before {0}.',
},
skyux_form_error_date_min: {
message: 'Select or enter a date after the min date.',
message: 'Select or enter a date on or after {0}.',
},
skyux_form_error_fuzzy_date_future_disabled: {
message: 'Future dates are disabled, select or enter a date in the past.',
Expand All @@ -41,10 +41,10 @@ const RESOURCES: Record<string, SkyLibResources> = {
message: 'Select or enter a valid date.',
},
skyux_form_error_fuzzy_date_max_date: {
message: 'Select or enter a date before the max date.',
message: 'Select or enter a date on or before {0}.',
},
skyux_form_error_fuzzy_date_min_date: {
message: 'Select or enter a date after the min date.',
message: 'Select or enter a date on or after {0}.',
},
skyux_form_error_fuzzy_date_year_required: { message: 'Year is required.' },
skyux_form_error_email: {
Expand Down

0 comments on commit d3b2e66

Please sign in to comment.