From a21e7aa2c4819172a03025f7deb96f4d172cc5cc Mon Sep 17 00:00:00 2001 From: Mark Harris Date: Thu, 3 Feb 2022 09:58:44 -0500 Subject: [PATCH 1/3] modelValue refactoring start --- .../button-question/button-question.vue | 10 ++++++++- src/layouts/vehicle-year/vehicle-year.vue | 4 ++-- .../year-question/year-question.vue | 21 ++++++++++++------- src/ux-components/list-button/list-button.vue | 7 +++++-- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7b9654139..84cee026b 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -30,7 +30,7 @@ :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="this.answers.length < 3 ? '' : '-4'" - v-model="modelValue" + v-model="selectedValues" data-test="button" /> @@ -98,6 +98,14 @@ export default { } return classes; }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, }, data(){ return { diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 2ee00e5eb..6dd990b15 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -28,7 +28,7 @@ export default { name: "vehicle-year", data() { return { - selectedYear: [], + selectedYear: String, }; }, computed: {}, @@ -73,7 +73,7 @@ export default { watch: { selectedYear(year) { - + this.$store.commit(this.storeMutations.UPDATE_YEAR, year); this.$router.navigateAfterSave( this.navigationScenarios.SELECTED_YEAR, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 36af97bca..ce79269c6 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Year" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -26,12 +26,24 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, }, emits: ['update:modelValue'], components: { buttonQuestion, }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } + }, methods: { loadInitialData() { return baseMixin.methods.dispatchNonBlockingStoreAction( @@ -44,10 +56,5 @@ export default { this.years = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 449f464af..00e51747d 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -94,8 +94,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, components: { From 268968213e4a59dd62c34ab65f9394a198317536 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 3 Feb 2022 12:42:11 -0500 Subject: [PATCH 2/3] Refactoring v-model to computed values --- .../damage-location-question.vue | 15 +++++++------ .../replace-options-question.vue | 15 +++++++------ src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- .../make-question/make-question.vue | 21 ++++++++++++------- src/layouts/vehicle-make/vehicle-make.vue | 2 +- .../model-question/model-question.vue | 21 ++++++++++++------- src/layouts/vehicle-model/vehicle-model.vue | 2 +- .../style-question/style-question.vue | 21 ++++++++++++------- src/layouts/vehicle-style/vehicle-style.vue | 2 +- .../list-button-horizontal.vue | 7 +++++-- src/ux-components/list-card/list-card.vue | 7 +++++-- 11 files changed, 74 insertions(+), 41 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 97c08c3b8..4000a61c7 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 @@ -7,7 +7,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - v-model="modelValue" + v-model="selectedValues" /> @@ -39,6 +39,14 @@ export default ({ } }, computed: { + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, damageOptionsMap(){ return { Windshield: true, @@ -56,11 +64,6 @@ export default ({ : []; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - } - }, 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 f01f0cd90..2c46d96fd 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="modelValue" + v-model="selectedValues" /> @@ -43,6 +43,14 @@ export default ({ } }, computed: { + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, answersToDisplay(){ return Array.isArray(this.answersFromCms) ? this.answersFromCms.filter(ans => @@ -53,11 +61,6 @@ export default ({ : []; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - } - }, components: { buttonQuestion, } diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 3524c84bc..a681d6120 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -74,7 +74,7 @@ export default { }, data(){ return { - damageLocationQuestionData: [], + damageLocationQuestionData: ["Car-SideDoor"], driverSideOptionsData: [], } }, diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 3bda78285..9eeefb7b5 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Make" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -45,10 +57,5 @@ export default { this.makes = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index fcb6a999d..ff82506e7 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-make", data() { return { - selectedMake: [], + selectedMake: String, }; }, computed: {}, diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index be2c64be5..3e27198b6 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 @@ groupName="Choose Vehicle Model" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -45,10 +57,5 @@ export default { this.models = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 9e5c0243d..e5e8bb946 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -33,7 +33,7 @@ export default { name: "vehicle-model", data() { return { - selectedModel: [], + selectedModel: String, }; }, computed: {}, diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index e44514904..7b316f42a 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Style" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -28,7 +28,19 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, + }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } }, components: { buttonQuestion, @@ -49,10 +61,5 @@ export default { this.styles = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index 98c86aa93..25594099c 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -32,7 +32,7 @@ export default { name: "vehicle-style", data() { return { - selectedStyle: [], + selectedStyle: String, }; }, computed: {}, 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 967523893..db2f9f382 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -92,8 +92,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, components: { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 7010ee487..3a3afe010 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -94,8 +94,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, setup(props) { From 35530f91993cba636357b6e464ade074257a78fa Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 3 Feb 2022 12:44:13 -0500 Subject: [PATCH 3/3] Taking out preset value for vehicle damage --- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index ec0ccc0a3..9d57e4345 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -72,7 +72,7 @@ export default { }, data(){ return { - damageLocationQuestionData: ["Car-SideDoor"], + damageLocationQuestionData: [], driverSideOptionsData: [], } },