From 8d04bc48450460faffd4fed585fd6ae0ecc95404 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 26 Apr 2022 09:09:22 -0400 Subject: [PATCH 1/6] CSR-447: fix groupName so it can be used as an ID --- src/layouts/vehicle-make/make-question/make-question.vue | 2 +- src/layouts/vehicle-model/model-question/model-question.vue | 2 +- src/layouts/vehicle-style/style-question/style-question.vue | 2 +- src/layouts/vehicle-year/year-question/year-question.vue | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 559568236..e1493c536 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -5,7 +5,7 @@ selectingInitiatesLoad :questionText="questionText" :answers="makes" - groupName="Choose Vehicle Make" + groupName="ChooseVehicleMake" textPosition="text-start" v-model="selectedValueAsArray" isRequired=true diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index c05732352..e3a56e8c7 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -5,7 +5,7 @@ selectingInitiatesLoad :questionText="questionText" :answers="models" - groupName="Choose Vehicle Model" + groupName="ChooseVehicleModel" textPosition="text-start" v-model="selectedValueAsArray" isRequired=true diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 0d3dd54ac..e7a289bfd 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -5,7 +5,7 @@ selectingInitiatesLoad :questionText="questionText" :answers="styles" - groupName="Choose Vehicle Style" + groupName="ChooseVehicleStyle" textPosition="text-start" v-model="selectedValueAsArray" isRequired=true diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 8a53e83db..16bac5442 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -5,7 +5,7 @@ selectingInitiatesLoad :questionText="questionText" :answers="years" - groupName="Choose Vehicle Year" + groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValueAsArray" isRequired=true From f991b73f663bbf6757bb5588bedf09119be99716 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 26 Apr 2022 09:51:13 -0400 Subject: [PATCH 2/6] CSR-447: refactoring logic of buttons and events, remove unused logic --- .../list-button-horizontal.vue | 66 +++++++++++------ src/ux-components/list-button/list-button.vue | 60 ++++++++++------ src/ux-components/list-card/list-card.vue | 70 +++++++++++++------ src/ux-components/radio/radio.vue | 20 +++--- 4 files changed, 139 insertions(+), 77 deletions(-) diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index bd1977ba3..006718bed 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -2,8 +2,12 @@
@@ -77,27 +84,47 @@ export default { checkValue: Boolean, }; }, - created(){ - if(Array.isArray(this.selectedValues)){ - this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0]; + created() { + if (Array.isArray(this.selectedValues)) { + this.checkValue = this.isMultiSelect + ? this.selectedValues.includes(this.value) + : this.selectedValues[0]; } }, methods: { displayLoader() { this.isLoaderDisplayed = true; }, - handleClick(value) { - if(this.selectingInitiatesLoad) { - this.displayLoader(); + handleInputChange() { + if(!this.selectingInitiatesLoad) { + this.handleCheckChange(); + } + }, + handleKeyupArrow() { + if (this.isMultiSelect) { + return; // Prevent arrow keys from doing anything if element is a checkbox + } + + if(!this.selectingInitiatesLoad) { this.handleCheckChange(); } - this.handleChange(value); + this.handleChange(this.value); }, - handleCheckChange(newValue, oldValue){ - const isInitialization = typeof(oldValue) === 'function'; - if (!isInitialization) { - this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() }); + triggerButton() { + if(this.selectingInitiatesLoad) { + this.displayLoader(); + this.handleCheckChange(); } + this.handleChange(this.value); + }, + handleCheckChange() { + const emitEvent = { + checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question + value: this.value.toString(), + buttonId: this.buttonID && this.buttonID.toString(), + }; + this.$emit("isCheckedChanged", emitEvent); + this.$emit("update:modelValue", emitEvent); } }, components: { @@ -105,6 +132,7 @@ export default { }, setup(props) { const inputType = props.isMultiSelect ? "checkbox" : "radio"; + const fieldOptions = { type: inputType, checkedValue: props.value, @@ -118,13 +146,11 @@ export default { } const { - checked, handleChange, errors, } = useField(props.groupName, props.validationRules, fieldOptions); return { - checked, handleChange, errors, fieldOptions, // only need to expose this for unit test purposes diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index d48b2407d..300bf6baa 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -2,8 +2,12 @@
@@ -80,33 +84,47 @@ export default { checkValue: Boolean, }; }, - created(){ - if(Array.isArray(this.selectedValues)){ - this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0]; + created() { + if (Array.isArray(this.selectedValues)) { + this.checkValue = this.isMultiSelect + ? this.selectedValues.includes(this.value) + : this.selectedValues[0]; } }, methods: { displayLoader() { this.isLoaderDisplayed = true; }, - handleClick(value) { + handleInputChange() { + if(!this.selectingInitiatesLoad) { + this.handleCheckChange(); + } + }, + handleKeyupArrow() { + if (this.isMultiSelect) { + return; // Prevent arrow keys from doing anything if element is a checkbox + } + + if(!this.selectingInitiatesLoad) { + this.handleCheckChange(); + } + this.handleChange(this.value); + }, + triggerButton() { if(this.selectingInitiatesLoad) { this.displayLoader(); this.handleCheckChange(); } - this.handleChange(value); + this.handleChange(this.value); }, - handleCheckChange(value, oldValue){ - const isInitialization = typeof(oldValue) === 'function'; - if (!isInitialization) { - const emitEvent = { - checkValue: this.checkValue, - value: this.value.toString(), - buttonId: this.buttonID.toString(), - }; - this.$emit('isCheckedChanged', emitEvent); - this.$emit("update:modelValue", emitEvent); - } + handleCheckChange() { + const emitEvent = { + checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question + value: this.value.toString(), + buttonId: this.buttonID && this.buttonID.toString(), + }; + this.$emit("isCheckedChanged", emitEvent); + this.$emit("update:modelValue", emitEvent); }, }, components: { @@ -128,13 +146,11 @@ export default { } const { - checked, handleChange, errors, } = useField(props.groupName, props.validationRules, fieldOptions); return { - checked, handleChange, errors, fieldOptions, // only need to expose this for unit test purposes diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index a178895fb..ae563a952 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -6,8 +6,12 @@ isWide ? 'horizontal' : '', (errors.length > 0 || hasError) ? 'has-error' : '', ]" - @mouseup="handleChange(value)" - @keyup.space="handleChange(value)" + @mouseup="triggerButton()" + @keyup.space="triggerButton()" + @keyup.up="handleKeyupArrow()" + @keyup.down="handleKeyupArrow()" + @keyup.left="handleKeyupArrow()" + @keyup.right="handleKeyupArrow()" >
@@ -22,6 +23,7 @@ filterByVehicleCategory v-model="selectedDriverSideReplaceOptionsValues" validationRules="driver-side-options-required" + isRequired />
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 543a02bef..8de1f887f 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -44,6 +44,7 @@ v-model="selectedRearReplaceOptions" groupName="BackGlassReplaceOptionsQuestion" validationRules="replace-options-required" + isRequired /> diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue index 3c377ec88..455c27361 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -9,6 +9,7 @@ v-model="selectedValues" :suppressError="suppressError" :validationRules="validationRules" + isRequired /> diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index df2560e17..1e9cfbc0a 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -27,6 +27,7 @@ v-model="selectedWindshieldReplaceOptionsValues" validationRules="windshield-replace-options-required|prevent-split-and-single-together" :suppressError="hasSplitSingleConflict" + isRequired />
- +
@@ -21,12 +21,12 @@
- +
- +