From dd258faafb21b3d9f7b0564a0abd24893e91d999 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Fri, 4 Mar 2022 09:32:42 +0000 Subject: [PATCH] Updated members filter datepicker error messages no issue - shortened invalid date format error message in `` to "Date must be YYYY-MM-DD" so it's less likely to wrap - added `@maxDateError` and `@minDateError` arguments to `` allowing override of the default "Must be on or before xxxx-xx-xx" message shown when the inputted date is outside of the allowed range - updated `` usage in the "Created" member filter to use "Must be in the past" error message when a future date is selected --- ghost/admin/app/components/gh-date-picker.js | 7 +++-- .../app/components/members/filter-value.hbs | 1 + .../components/gh-date-picker-test.js | 28 +++++++++++++++++-- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/ghost/admin/app/components/gh-date-picker.js b/ghost/admin/app/components/gh-date-picker.js index d0ddc202ac..5d66cbfd2d 100644 --- a/ghost/admin/app/components/gh-date-picker.js +++ b/ghost/admin/app/components/gh-date-picker.js @@ -39,7 +39,7 @@ export default class GhDatePicker extends Component { this.error = null; if (!dateStr.match(/^\d\d\d\d-\d\d-\d\d$/)) { - this.error = `Invalid date format, must be ${this.dateFormat}`; + this.error = `Date must be ${this.dateFormat}`; this.args.onError?.(new DateError({ message: this.error, date: dateStr @@ -59,7 +59,8 @@ export default class GhDatePicker extends Component { } if (this.args.minDate && mDate.isBefore(moment(this.args.minDate))) { - this.error = `Must be on or after ${moment(this.args.minDate).format(this.dateFormat)}`; + this.error = this.args.minDateError || `Must be on or after ${moment(this.args.minDate).format(this.dateFormat)}`; + this.args.onError?.(new DateError({ message: this.error, date: dateStr @@ -68,7 +69,7 @@ export default class GhDatePicker extends Component { } if (this.args.maxDate && mDate.isAfter(moment(this.args.maxDate))) { - this.error = `Must be on or before ${moment(this.args.maxDate).format(this.dateFormat)}`; + this.error = this.args.maxDateError || `Must be on or before ${moment(this.args.maxDate).format(this.dateFormat)}`; this.args.onError?.(new DateError({ message: this.error, date: dateStr diff --git a/ghost/admin/app/components/members/filter-value.hbs b/ghost/admin/app/components/members/filter-value.hbs index 53f4b956d5..9d626e53b9 100644 --- a/ghost/admin/app/components/members/filter-value.hbs +++ b/ghost/admin/app/components/members/filter-value.hbs @@ -51,6 +51,7 @@ diff --git a/ghost/admin/tests/integration/components/gh-date-picker-test.js b/ghost/admin/tests/integration/components/gh-date-picker-test.js index d9fa44e921..e820b4cebc 100644 --- a/ghost/admin/tests/integration/components/gh-date-picker-test.js +++ b/ghost/admin/tests/integration/components/gh-date-picker-test.js @@ -213,12 +213,12 @@ describe('Integration: Component: gh-date-picker', function () { await fillIn('[data-test-date-picker-input]', 'narp'); await blur('[data-test-date-picker-input]'); - expect(find('[data-test-date-picker-error]')).to.contain.text('Invalid date format'); + expect(find('[data-test-date-picker-error]')).to.contain.text('Date must be YYYY-MM-DD'); expect(changeSpy.callCount, '@onChange call count').to.equal(0); expect(errorSpy.callCount, '@onError call count').to.equal(1); expect(errorSpy.firstCall.args[0]).to.be.instanceof(Error); - expect(errorSpy.firstCall.args[0].message).to.contain('Invalid date format'); + expect(errorSpy.firstCall.args[0].message).to.contain('Date must be YYYY-MM-DD'); }); it('clears error on internal change to valid', async function () { @@ -294,6 +294,18 @@ describe('Integration: Component: gh-date-picker', function () { expect(errorSpy.firstCall.args[0].date).to.be.equal('2022-02-10'); }); + it('allows for min date error override', async function () { + this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate(); + this.set('minDate', moment('2022-02-11 12:00:00.000Z').toDate()); + + await render(hbs``); + + await fillIn('[data-test-date-picker-input]', '2022-02-10'); + await blur('[data-test-date-picker-input]'); + + expect(find('[data-test-date-picker-error]')).to.have.text('Must be in the future'); + }); + it('errors when date input is later than max', async function () { this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate(); this.set('maxDate', moment('2022-02-25 12:00:00.000Z').toDate()); @@ -316,5 +328,17 @@ describe('Integration: Component: gh-date-picker', function () { expect(errorSpy.firstCall.args[0].message).to.equal('Must be on or before 2022-02-25'); expect(errorSpy.firstCall.args[0].date).to.be.equal('2022-02-28'); }); + + it('allows for max date error override', async function () { + this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate(); + this.set('maxDate', moment('2022-02-25 12:00:00.000Z').toDate()); + + await render(hbs``); + + await fillIn('[data-test-date-picker-input]', '2022-02-28'); + await blur('[data-test-date-picker-input]'); + + expect(find('[data-test-date-picker-error]')).to.have.text('Must be in the past'); + }); }); });