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 5814a3323..97a8d287f 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -122,7 +122,7 @@ export default { }, handleClick(e) { this.handleSelectionChange(e); - this.$emit("change", this.valueToEmit); + this.$emit("buttonClicked", this.valueToEmit); }, pushClickEventToGA() { this.pushEventToGA( @@ -136,7 +136,7 @@ export default { }, computed: { isChecked() { - if (this.isMultiSelect || this.modelValue instanceof Array) { + if (this.isMultiSelect && this.modelValue instanceof Array) { return this.modelValue.includes(this.value); } @@ -151,9 +151,6 @@ export default { "-" )}`; }, - // baseInputButtonProps() { - - // } }, setup(props) { const inputType = props.isMultiSelect ? "checkbox" : "radio"; diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index b4cadcea4..8a595771d 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -51,7 +51,7 @@ :validationRules="validationRules" :textPosition="textPosition" :selectOnKeypress="selectOnKeypress" - @change="handleAnswerChange" /> + @buttonClicked="handleAnswerChange" />
+ isRequired + />
+}) + \ No newline at end of file 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 6e8962d1c..40fb2cdb4 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,8 +6,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonType="listCard" - isRequired - v-model="selectedValue" + v-model="selectedDamageLocations" validationRules="damage-location-required" /> @@ -19,22 +18,20 @@ import store from "@/store"; import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; -import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin" // DEFINE VALIDATION RULES defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED)); export default ({ name: "damageLocationQuestion", - mixins: [buttonQuestionWrapperMixin], data(){ return { damageOptions: {}, - // selectedValue: [] + selectedDamageLocations: this.modelValue } }, - props: { - modelValue: Array, + props: { + modelValue: [Array, String, Number], groupName: String, cmsWidgetName: String, }, @@ -72,13 +69,13 @@ export default ({ }); }, }, + watch: { + selectedDamageLocations(selectedDamageLocations) { + this.$emit("update:modelValue", selectedDamageLocations); + } + }, components: { buttonQuestion, }, - watch: { - selectedValue(selectedValue) { - this.$emit("update:modelValue", selectedValue) - } - } }) \ No newline at end of file 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 0d22e03a5..df4d045c7 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="selectedValue" + v-model="selectedReplaceOptions" :validationRules="validationRules" :suppressError="suppressError" :isRequired="isRequired" @@ -20,21 +20,22 @@ \ 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 3b2c431f6..0ff4a2371 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,28 +1,36 @@ \ 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 9477dd08b..4b783f2c5 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -1,16 +1,15 @@ diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index de180b13c..a302a80f1 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" :selectOnKeypress="false" isRequired /> @@ -27,9 +27,11 @@ export default { data() { return { models: [], + selectedModel: "" }; }, props: { + modelValue: String, cmsWidgetName: String, }, computed: { @@ -51,5 +53,10 @@ export default { this.models = initialData; }, }, + watch: { + selectedModel(selectedModel) { + this.$emit("update:modelValue", selectedModel); + } + } }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index f59f130fa..e3a5fa7cf 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -64,10 +64,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { Form } from "vee-validate"; import store from "@/store"; -import { storeMutations } from "@/constants/store-mutations.js"; import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; -import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; -import { assertParenthesizedExpression } from "@babel/types"; export default { name: "vehicle-parts", diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 37ae9ecab..039530f81 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" :selectOnKeypress="false" isRequired /> @@ -19,14 +19,15 @@ import buttonQuestion from "@/common-components/button-question/button-question" import store from "@/store"; import { storeActions } from "@/constants/store-actions.js"; import baseMixin from "@/mixins/base-mixin.js"; -import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"; +// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"; export default { name: "style-question", - mixins: [buttonQuestionWrapperMixin], + // mixins: [buttonQuestionWrapperMixin], data() { return { styles: [], + selectedStyle: "" }; }, props: { @@ -55,5 +56,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 34758a85d..694a81cd9 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -8,7 +8,7 @@ :answers="years" groupName="ChooseVehicleYear" textPosition="text-start" - v-model="selectedValue" + v-model="selectedYear" :selectOnKeypress="false" isRequired /> @@ -20,14 +20,15 @@ import buttonQuestion from "@/common-components/button-question/button-question" // Supporting files import { storeActions } from "@/constants/store-actions.js"; import baseMixin from "@/mixins/base-mixin.js"; -import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"; +// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"; export default { name: "year-question", - mixins: [buttonQuestionWrapperMixin], + // mixins: [buttonQuestionWrapperMixin], data() { return { years: [], + selectedYear: "" }; }, props: { @@ -52,5 +53,10 @@ export default { this.years = initialData; }, }, + watch: { + selectedYear(selectedYear) { + this.$emit("update:modelValue", selectedYear); + } + } }; diff --git a/src/mixins/button-question-wrapper-mixin.js b/src/mixins/button-question-wrapper-mixin.js index 9f92ef448..df31218fc 100644 --- a/src/mixins/button-question-wrapper-mixin.js +++ b/src/mixins/button-question-wrapper-mixin.js @@ -1,20 +1,35 @@ +import { ref, isRef } from "vue"; + export default { - props: { - modelValue: [String, Number] - }, - data() { - return { - selectedValue: null, - }; - }, - mounted() { - console.log("MOUNTED: ", this.modelValue) - this.selectedValue = this.modelValue; - }, - watch: { - selectedValue(selectedValue) { - console.log("selectedValue: ", selectedValue) - this.$emit("update:modelValue", selectedValue); + props: { + modelValue: [Array, String, Number], + // modelValueName: { + // type: String, + // required: true, + // }, + }, + data() { + return { + selectedValue: null, + }; + }, + created() { + this.selectedValue = this.modelValue; + + console.log("Created: ", { + selectedValue: this.selectedValue, + // modelValue: this.modelValue, + // modelValueName: this.modelValueName + }) + if (this.modelValueName) { + this[this.modelValueName] = this.selectedValue; + // this.$on("update:modelValue", (dynamicModelValue) => { + // console.log("ON HIT", { + // dynamicModelValue: dynamicModelValue + // }) + // this.selectedValue = dynamicModelValue; + // this.$emit("update:modelValue", dynamicModelValue) + // }) + } }, - }, }; diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js index 2c409e102..c8a10cdeb 100644 --- a/src/mixins/vehicle-questions-mixin.js +++ b/src/mixins/vehicle-questions-mixin.js @@ -74,6 +74,9 @@ export default { const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions); const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions); + console.log({ + hasGlassLocationWithMultipleParts: hasGlassLocationWithMultipleParts + }) if (hasPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.PART_QUESTIONS)) { self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions }); } 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 da33751f3..c5baa41ea 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -5,7 +5,7 @@ 'list-group list-button-horizontal d-flex flex-column w-100', { 'radio-fancy': isCashOrInsurance }, ]" - @change="handleAnswerChange"> + @buttonClicked="handleAnswerChange">
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 7610a6d4b..1c8f0a5c3 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -2,7 +2,7 @@ + @buttonClicked="handleAnswerChange">
.list-group { + .loader { + position: absolute; + } &.list-button { outline: none; input[type="radio"], diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 2a2bf4aeb..45f46f509 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -5,7 +5,7 @@ 'list-card w-100 rounded-3 d-flex align-items-center h-100', { horizontal: isWide }, ]" - @change="handleAnswerChange"> + @buttonClicked="handleAnswerChange">
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index 1d6c83bce..1fbd2c6c1 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -27,7 +27,6 @@ export default {