From 76b1bd9b2e26a231ffab673820efdd99e1b8da92 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 08:44:58 -0400 Subject: [PATCH 1/7] CSR-762 Undo changing from computed to watch --- .../damage-location-question.vue | 23 ++--- .../replace-options-question.vue | 28 +++--- .../windshield-chip-count-question.vue | 23 +++-- .../windshield-damage-type-question.vue | 42 ++++----- .../make-question/make-question.vue | 89 ++++++++++--------- .../model-question/model-question.vue | 16 ++-- .../style-question/style-question.vue | 18 ++-- .../year-question/year-question.vue | 47 +++++----- 8 files changed, 146 insertions(+), 140 deletions(-) diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index 40fb2cdb4..16d67b3ee 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -6,7 +6,8 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="selectedDamageLocations" + isRequired + v-model="selectedValues" validationRules="damage-location-required" /> @@ -26,12 +27,11 @@ export default ({ name: "damageLocationQuestion", data(){ return { - damageOptions: {}, - selectedDamageLocations: this.modelValue + damageOptions: Object, } }, - props: { - modelValue: [Array, String, Number], + props: { + modelValue: Array, groupName: String, cmsWidgetName: String, }, @@ -47,6 +47,14 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, damageOptionsMap(){ return { Windshield: true, @@ -69,11 +77,6 @@ export default ({ }); }, }, - watch: { - selectedDamageLocations(selectedDamageLocations) { - this.$emit("update:modelValue", selectedDamageLocations); - } - }, components: { buttonQuestion, }, diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index b3d7f537c..d4da8cd1b 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -8,7 +8,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="selectedReplaceOptions" + v-model="selectedValues" :validationRules="validationRules" :suppressError="suppressError" :isRequired="isRequired" @@ -23,17 +23,16 @@ import store from "@/store"; export default ({ name: "replaceOptionsQuestion", - data() { + data(){ return { replaceOptions: [], - selectedReplaceOptions: this.modelValue } }, props: { - modelValue: [Array, String, Number], isAvailable: Boolean, filterByVehicleCategory: Boolean, groupName: String, + modelValue: [Array, String, Number], isMultiSelect: Boolean, validationRules: String, suppressError: Boolean, @@ -41,15 +40,13 @@ export default ({ isRequired: Boolean, }, methods: { - initializeComponent(replaceOptions) { + initializeComponent(replaceOptions){ this.replaceOptions = replaceOptions; }, updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER - // ex: BackGlass stationary - if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { - const selectedAnswer = this.answersToDisplay[0].Name; - this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer; + if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { + this.selectedValues = [this.answersToDisplay[0].Name]; } }, }, @@ -60,6 +57,14 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, answersToDisplay(){ const filteredAnswers = Array.isArray(this.answersFromCms) ? this.answersFromCms.filter(ans => @@ -86,11 +91,8 @@ export default ({ }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { if (!shouldDisplayReplaceOptionsQuestion) { - this.selectedReplaceOptions = []; + this.selectedValues = []; } - }, - selectedReplaceOptions(selectedReplaceOptions) { - this.$emit("update:modelValue", selectedReplaceOptions); } }, components: { diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue index c2188f9e8..fc26c1d8c 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue @@ -7,7 +7,7 @@ :groupName="groupName" buttonType="listButtonHorizontal" useTextForValue - v-model="numberOfChips" + v-model="selectedValue" :validationRules="validationRules" isRequired /> @@ -19,12 +19,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"; export default ({ - name: "windshieldChipCountQuestion", - data() { - return { - numberOfChips: this.modelValue - } - }, + name: "windshieldOptions", props: { modelValue: [String, Number], groupName: String, @@ -39,14 +34,18 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, + selectedValue: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + const numberValue = Number(newValue); + this.$emit("update:modelValue", numberValue); + } + }, }, components: { buttonQuestion, - }, - watch: { - numberOfChips(numberOfChips) { - this.$emit("update:modelValue", numberOfChips); - } } }) \ No newline at end of file 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 5a275c45f..e76536103 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 @@ -1,18 +1,16 @@ @@ -20,13 +18,8 @@ + } +}) + \ No newline at end of file diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index c3e906cdd..c2a7cd2d2 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -1,15 +1,16 @@ diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 2c1dc46bd..393df6fc9 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -7,7 +7,7 @@ :answers="models" groupName="ChooseVehicleModel" textPosition="text-start" - v-model="selectedModel" + v-model="selectedValue" :selectOnKeypress="false" isRequired /> @@ -25,7 +25,6 @@ export default { data() { return { models: [], - selectedModel: "" }; }, props: { @@ -36,6 +35,14 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, + selectedValue: { + get: function() { + return this.modelValue + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + } }, components: { buttonQuestion, @@ -51,10 +58,5 @@ export default { this.models = initialData; }, }, - watch: { - selectedModel(selectedModel) { - this.$emit("update:modelValue", selectedModel); - } - } }; diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 8e60df50d..806f7ac41 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -7,8 +7,7 @@ :answers="styles" groupName="ChooseVehicleStyle" textPosition="text-start" - v-model="selectedStyle" - :selectOnKeypress="false" + v-model="selectedValue" isRequired /> @@ -25,16 +24,24 @@ export default { data() { return { styles: [], - selectedStyle: "" }; }, props: { + modelValue: String, cmsWidgetName: String, }, computed: { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, + selectedValue: { + get: function() { + return this.modelValue + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + } }, components: { buttonQuestion, @@ -54,10 +61,5 @@ export default { this.styles = initialData; }, }, - watch: { - selectedStyle(selectedStyle) { - this.$emit("update:modelValue", selectedStyle); - } - } }; diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 1835a7f74..6851f282c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,18 +1,15 @@ From 3fad6ae84224d60b59f499251147623614b9e6d0 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 08:48:33 -0400 Subject: [PATCH 2/7] CSR-762 Add back missing attributes --- src/layouts/vehicle-style/style-question/style-question.vue | 1 + src/layouts/vehicle-year/year-question/year-question.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 806f7ac41..bf8fd3d07 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -8,6 +8,7 @@ groupName="ChooseVehicleStyle" textPosition="text-start" v-model="selectedValue" + :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 6851f282c..06af5ce64 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -8,6 +8,7 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" + :selectOnKeypress="false" isRequired /> From d093a9b8424dba0df27317f3a9c9f39e3260e2fc Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 09:31:14 -0400 Subject: [PATCH 3/7] CSR-762 Fix repair/replace combo rule --- .../vehicle-damage/windshield-options/windshield-options.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index f22370d69..cd229e007 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => { return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || - !selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) || - selectedDamageLocations.length === 1; + (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || + (selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1); }); defineRule("repair-only", (value) => { return value.toString() === damageLocationsSelected.REPAIR; From 458ee702ae0b712abc135fa5d3755cff2d703d7a Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 14:13:24 -0400 Subject: [PATCH 4/7] CSR-762 Change requests/fix bugs --- .../base-input-button/base-input-button.vue | 1 + .../address-vehicles-question.vue | 12 +++++------- src/layouts/address-vehicles/address-vehicles.vue | 2 +- src/mixins/input-button-wrapper-mixin.js | 5 ++++- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index e46e1a07d..4d5feba17 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -14,6 +14,7 @@ :value="value" :checked="isChecked" @blur="handleBlur" + @keypress.space="handleEventAction('keypressSubmit', $event)" @keypress.enter="handleEventAction('keypressSubmit', $event)" @change="handleEventAction('change', $event)" /> diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 4bdaa8887..ade10ed99 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue @@ -5,7 +5,7 @@ groupName="ChooseAddressVehicle" :questionText="questionText" :answers="vehicles" - v-model="selectedVehicleVinAsArray" + v-model="selectedVehicleVin" isRequired :validation-rules="validationRules" :valueToLogType="ValueToLogTypes.LAST_5" @@ -63,18 +63,16 @@ export default { questionText() { return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText"); }, - selectedVehicleVinAsArray: { + selectedVehicleVin: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : []; - return modelValueAsArray; + return this.modelValue; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } }, selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above - return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] ); + return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length-1] ); }, }, components: { diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index 081b83fe9..a0edf876f 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -195,7 +195,7 @@ export default { selectedVehicleVin: { handler() { // does this vehicle match the previously selected carId? - this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId; + this.isCarIdDifferent = this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId; if (this.isCarIdDifferent) { this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`); } else { diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index f2b34a83f..10a759927 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -16,7 +16,10 @@ export default { valueToLogType: String, validationRules: String, isWide: Boolean, - isRequired: Boolean + isRequired: { + type: Boolean, + default: true + } }, data() { return { From 4293781d9b20216df2c9f7e97aa9f1dfe71e96e1 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 15:54:35 -0400 Subject: [PATCH 5/7] CSR-762 Fix space --- .../base-input-button/base-input-button.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 4d5feba17..a3d890234 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -14,8 +14,8 @@ :value="value" :checked="isChecked" @blur="handleBlur" - @keypress.space="handleEventAction('keypressSubmit', $event)" - @keypress.enter="handleEventAction('keypressSubmit', $event)" + @keypress.space="handleEventAction('space', $event)" + @keypress.enter="handleEventAction('enter', $event)" @change="handleEventAction('change', $event)" /> @@ -75,13 +75,14 @@ export default { handleEventAction(eventType, e) { const eventTypes = { CHANGE: "change", - KEYPRESS_SUBMIT: "keypressSubmit", + ENTER: "enter", + SPACE: "space", CLICK: "click", }; if (this.isMultiSelect) { switch (eventType) { - case eventTypes.KEYPRESS_SUBMIT: + case eventTypes.ENTER: case eventTypes.CHANGE: this.handleClick(e); window.lastFocusedInputGroup = this.groupName; @@ -91,7 +92,8 @@ export default { } else { switch (eventType) { case eventTypes.CLICK: - case eventTypes.KEYPRESS_SUBMIT: + case eventTypes.ENTER: + case eventTypes.SPACE: this.handleClick(e); this.test(); break; From 187b02e512187a610313a1228ae3942514aa53c8 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 16:27:35 -0400 Subject: [PATCH 6/7] CSR-762 Fix scrolling issue --- src/common-components/button-question/button-question.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 1346a4f0e..9176bd1bb 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -13,6 +13,7 @@
+
{{ questionText }} {{ From c2fa0784a7d8b117d8520a9c055a2d1a9f015f2c Mon Sep 17 00:00:00 2001 From: Katie Date: Tue, 4 Oct 2022 08:51:41 -0400 Subject: [PATCH 7/7] CSR-762 Fix tests --- .../address-vehicles-question.spec.js | 6 +++--- .../windshield-chip-count-question.spec.js | 2 +- .../windshield-damage-type-question.spec.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js index 70f056e3b..16451b219 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js @@ -34,14 +34,14 @@ describe("addressVehiclesQuestion.vue", () => { const wrapper = shallowMount(addressVehiclesQuestion, { mixins: [mockMixin], propsData: { - vehicles: ["1", "2"], - modelValue: ["1", "2"], + vehicles: ["1", "2", "newValue"], + modelValue: "2", } }); // Act const localThis = { $emit: jest.fn() } - addressVehiclesQuestion.computed.selectedVehicleVinAsArray.set.call(localThis, ['newValue']); + addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue'); // Assert expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue"); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js index 635f389f1..795606526 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js @@ -17,7 +17,7 @@ describe("windshield-chip-count-question.vue", () => { const { wrapper } = setupMocks({ modelValueProp: 1 }); //Act - await wrapper.setData({ numberOfChips: 2 }); + wrapper.vm.selectedValue = "2"; //Assert expect(wrapper.emitted()["update:modelValue"][0]).toEqual([2]); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js index 2e3b5aa3c..4b247d705 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js @@ -15,7 +15,7 @@ describe("windshield-damage-type-question.vue", () => { await wrapper.vm.$nextTick(); //Assert - expect(wrapper.vm.selectedWindshieldDamageType).toEqual("Repair"); + expect(wrapper.vm.selectedValues).toEqual("Repair"); expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Replace" }]); }); });