From 94c3ea326fc9d68435ebf3897f88bfc4338b30e7 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 16 Sep 2022 10:18:59 -0400 Subject: [PATCH] CSR-762 Update YMMS --- .../button-question/button-question.vue | 1 + .../make-question/make-question.vue | 18 ++++---- src/layouts/vehicle-make/vehicle-make.vue | 22 ++++++---- .../model-question/model-question.vue | 18 ++++---- .../style-question/style-question.vue | 18 ++++---- .../year-question/year-question.vue | 41 ++++++++----------- src/mixins/button-mixin.js | 5 +-- src/ux-components/list-button/list-button.vue | 5 ++- src/ux-components/loader/loader.vue | 5 +-- 9 files changed, 64 insertions(+), 69 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index d5964fd2f..19e80d16e 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -50,6 +50,7 @@ :groupName="groupName" :value="answer.value" :modelValue="modelValue" + selectingInitiatesLoad @change="(e) => handleAnswerChange(e)" /> diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index d0046fe30..f346a6d81 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 @@ :answers="makes" groupName="ChooseVehicleMake" textPosition="text-start" - v-model="selectedValue" + v-model="selectedMake" isRequired /> @@ -23,7 +23,8 @@ export default { name: "make-question", data() { return { - makes: Array, + makes: [], + selectedMake: null }; }, props: { @@ -34,14 +35,6 @@ 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, @@ -57,5 +50,10 @@ export default { this.makes = initialData; }, }, + watch: { + selectedMake(selectedMake) { + this.$emit("update:modelValue", selectedMake) + } + } }; diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index f5a42eefe..2bd49498f 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -3,14 +3,21 @@
- +
- +
@@ -26,7 +33,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; -import { storeMutations } from "@/constants/store-mutations"; import { storeActions } from "@/constants/store-actions"; import store from "@/store"; @@ -75,7 +81,7 @@ export default { ); }, arePagePrerequisitesValid() { - if (store.getters.vehicle.year){ + if (store.getters.vehicle.year) { return true; } return false; @@ -84,7 +90,7 @@ export default { watch: { selectedMake(make) { - this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); + this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); this.$router.navigateWithSaving( this.navigationScenarios.SELECTED_MAKE, this.$route diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 096f4d70c..bf21cec35 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="selectedValue" + v-model="selectedModel" isRequired /> @@ -23,7 +23,8 @@ export default { name: "model-question", data() { return { - models: Array, + models: [], + selectedModel: null }; }, props: { @@ -34,14 +35,6 @@ 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, @@ -57,5 +50,10 @@ 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 4e6e90798..bfc51ea0e 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 @@ :answers="styles" groupName="ChooseVehicleStyle" textPosition="text-start" - v-model="selectedValue" + v-model="selectedStyle" isRequired /> @@ -23,7 +23,8 @@ export default { name: "style-question", data() { return { - styles: Array, + styles: [], + selectedStyle: null }; }, props: { @@ -34,14 +35,6 @@ 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, @@ -61,5 +54,10 @@ 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 bfb0de678..57f4b5bcb 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,18 +1,16 @@ @@ -26,7 +24,7 @@ export default { data() { return { years: [], - selectedValue: null + selectedYear: null, }; }, props: { @@ -37,17 +35,9 @@ export default { buttonQuestion, }, computed: { - questionText(){ - return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + questionText() { + return this.getCmsContent(this.cmsWidgetName, "QuestionText"); }, - // selectedValue: { - // get: function() { - // return this.modelValue - // }, - // set: function(newValue) { - // this.$emit("update:modelValue", newValue); - // } - // } }, methods: { loadInitialData() { @@ -60,5 +50,10 @@ export default { this.years = initialData; }, }, + watch: { + selectedYear(selectedYear) { + this.$emit("update:modelValue", selectedYear) + } + } }; diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 609a40399..146b5b6b3 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -33,10 +33,7 @@ export default { type: String, required: true, }, - validationRules: { - type: String, - required: true, - }, + validationRules: String, classes: [String, Array, Object], }, methods: { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 0923d071a..ec0d0cf43 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -85,7 +85,10 @@ export default { screenReaderOnlyText: String, selectingInitiatesLoad: Boolean, loaderColor: String, - loaderPosition: String, + loaderPosition: { + type: String, + default: "right" + }, hasError: Boolean, valueToLogType: String, }, diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index 9b3473eb1..1d6c83bce 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -27,6 +27,8 @@ export default {