-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
16700 Fixed validation in LimitedRestorationPanel component #258
Conversation
a82453b
to
1bb16aa
Compare
@@ -45,7 +45,6 @@ | |||
hide-spin-buttons | |||
:rules="monthsRules" | |||
:disabled="(radioValue !== 'customMonths')" | |||
@input="onMonthsInput($event)" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of this, I now watch the v-model property (inputValue).
// emit validity | ||
|
||
// emit months and validity | ||
this.emitMonths(valid ? +this.inputValue : null) // emit null if invalid |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks. Yes, this way this component always emits something reasonable without events depending on other events (eg, only emit month if valid).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The other reason I did this is that it allows the parent component to do something different if invalid. In this case (next PR), the parent will clear any existing expiry date.
// wait for component updates | ||
@Watch('radioValue') | ||
@Watch('inputValue') | ||
private async onValueChanged (): Promise<void> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The previous 2 methods fired alternately and not always in the same order due to waiting for the input component to update/validate.
This now handles things more cleanly.
// emit months and validity | ||
this.emitMonths(Number(this.radioValue)) | ||
this.emitMonths(+this.radioValue) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The unary plus operator converts a string to a number more cleanly, imho.
@@ -27,25 +27,23 @@ function createDefaultComponent ( | |||
|
|||
describe('Initialize RelationshipsPanel component', () => { | |||
it('loads the component', () => { | |||
const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent() | |||
const wrapper = createDefaultComponent() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
createDefaultComponent()
already returns a type.
Interesting, some tests that are totally unrelated to this work and PR are failing. I think they're super easy to fix though. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great.
Issue #: bcgov/entity#16700
Description of changes:
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the business-filings-ui license (Apache 2.0).