From 6e901a69183b573e3b408c2514cebdc851f2fe85 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 15 Sep 2022 14:44:50 -0400 Subject: [PATCH 01/29] CSR-762 Add mini test --- .../button-question/button-question.vue | 153 +++++++++++++----- src/common-components/test-button.vue | 35 ++++ src/layouts/test.vue | 56 +++++++ src/mixins/button-mixin.js | 61 +++++++ src/router/index.js | 6 + src/ux-components/list-card/list-card.vue | 4 +- 6 files changed, 276 insertions(+), 39 deletions(-) create mode 100644 src/common-components/test-button.vue create mode 100644 src/layouts/test.vue create mode 100644 src/mixins/button-mixin.js diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 91ad272a0..624f4185a 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,18 +1,60 @@ @@ -59,8 +109,9 @@ import listButton from "@/ux-components/list-button/list-button"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import listCard from "@/ux-components/list-card/list-card"; -import { ErrorMessage } from 'vee-validate'; +import { ErrorMessage } from "vee-validate"; import radio from "@/ux-components/radio/radio"; +import testButton from "@/common-components/test-button.vue"; export default { name: "buttonQuestion", @@ -90,7 +141,8 @@ export default { isOverflowScrollable: Boolean, isWide: Boolean, isCashOrInsurance: Boolean, - modelValue: [Array, String], + modelValue: [Array, Number, String], + value: [Number, String], validationRules: String, suppressError: Boolean, useTextForValue: Boolean, @@ -100,11 +152,9 @@ export default { getFieldSetClasses() { if (this.isOverflowScrollable) { return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"; - } - else if (this.buttonType == "listCard") { + } else if (this.buttonType == "listCard") { return "w-100"; - } - else { + } else { return ""; } }, @@ -117,11 +167,11 @@ export default { case "listButtonHorizontal": classes = "d-flex flex-row p-0"; break; - case 'listCard': + case "listCard": classes = "row g-2 justify-content-center"; break; - case 'radio': - classes = 'ui-radio d-flex' + case "radio": + classes = "ui-radio d-flex"; break; } return classes; @@ -129,7 +179,7 @@ export default { getComponentWrapperClasses() { let classes = ""; - classes += this.isWide ? "col-12" : "col"; + classes += this.isWid ? "col-12" : "col"; if (this.buttonType == "radio") { classes += " radio-button-container"; @@ -137,28 +187,31 @@ export default { return classes; }, - getColLength(){ - if(this.isWide) { - return "12" + getColLength() { + if (this.isWide) { + return "12"; } else { return ""; } }, selectedValues: { - get: function() { + get: function () { return this.modelValue; }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } + set: function (newValue) { + // this.$emit("update:modelValue", newValue); + }, }, }, methods: { formatString(str) { - return str.replace(" ", "-"); + console.log(str); + return str?.replace(" ", "-"); }, - getValue(answer){ - if (this.useTextForValue) { return answer.Text } + getValue(answer) { + if (this.useTextForValue) { + return answer.Text; + } return answer.Name ? answer.Name : answer; }, getAnswerString(answer, prop = "Name") { @@ -168,24 +221,49 @@ export default { case "boolean": return this.formatString(answer.toString()); default: - return answer[prop] ? this.formatString(answer[prop]) : this.formatString(answer.toString()); + return answer[prop] + ? this.formatString(answer[prop]) + : this.formatString(answer.toString()); } }, handleCheckedChanged(val) { - if(this.selectingInitiatesLoad) { + if (this.selectingInitiatesLoad) { this.selectedValues = val.value; } else { - if(Array.isArray(this.selectedValues)) { + if (Array.isArray(this.selectedValues)) { const newSelectedValues = this.selectedValues; - val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); + val.checkValue + ? newSelectedValues.push(val.value) + : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); this.selectedValues = newSelectedValues; - } - else { + } else { this.selectedValues = val.value; } } this.$emit("isCheckedChanged", val); }, + handleSelectionChange(event, value) { + console.log(value) + console.log("BQ handleSelectionChange: ", event) + let isChecked = event.target.checked; + if (this.isMultiSelect && this.modelValue instanceof Array) { + let newValue = [...this.modelValue]; + const toggledValue = event.target.value; + console.log("A: ", this.modelValue) + console.log("isChecked: ", isChecked) + console.log("value: ", event.target.value) + if (isChecked) { + newValue.push(toggledValue); + } else { + newValue.splice(newValue.indexOf(toggledValue), 1); + } + console.log("handleCheckboxChange: ", newValue); + this.$emit("update:modelValue", newValue); + } else { + console.log("handleRadioChange: ", isChecked); + this.$emit("update:modelValue", value); + } + }, }, components: { listButton, @@ -193,6 +271,7 @@ export default { listCard, ErrorMessage, radio, + testButton, }, }; @@ -231,9 +310,9 @@ export default { .vehicle-parts { .question-text { span { - font-size: .875rem; + font-size: 0.875rem; text-align: left; - margin: 0 0 .5rem 0; + margin: 0 0 0.5rem 0; } } .question-text { diff --git a/src/common-components/test-button.vue b/src/common-components/test-button.vue new file mode 100644 index 000000000..64c252d72 --- /dev/null +++ b/src/common-components/test-button.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/layouts/test.vue b/src/layouts/test.vue new file mode 100644 index 000000000..018fd0875 --- /dev/null +++ b/src/layouts/test.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js new file mode 100644 index 000000000..2281b3f2c --- /dev/null +++ b/src/mixins/button-mixin.js @@ -0,0 +1,61 @@ +export default { + model: { + prop: "modelValue", + event: "change", + }, + props: { + value: { + type: [String, Number], + required: true, + }, + modelValue: { + type: [Array, String, Number], + required: true, + }, + isMultiSelect: Boolean, + isWide: Boolean, + buttonImage: String, + buttonImageId: String, + buttonLabel: { + type: String, + required: true, + }, + isRequired: { + type: Boolean, + required: true, + }, + buttonLabelSubCopy: { + type: String, + required: true, + }, + groupName: { + type: String, + required: true, + }, + }, + data() {}, + methods: { + handleSelectionChange(event) { + let isChecked = event.target.checked; + if (this.isMultiSelect && this.modelValue instanceof Array) { + let newValue = [...this.modelValue]; + if (isChecked && !newValue.includes(this.value)) { + newValue.push(this.value); + } else { + newValue.splice(newValue.indexOf(this.value), 1); + } + this.$emit("change", newValue); + } else { + this.$emit("change", isChecked); + } + }, + }, + computed: { + isChecked() { + if (this.isMultiSelect && this.modelValue instanceof Array) { + this.modelValue.includes(this.value); + } + return this.modelValue === this.value; + }, + }, +}; diff --git a/src/router/index.js b/src/router/index.js index 4daa23613..7d23fb4bb 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config"; // Components import quote from "@/layouts/quote/quote.vue"; +import test from "@/layouts/test" const routes = [ { @@ -30,6 +31,11 @@ const routes = [ name: "quote", component: quote, }, + { + path: "/test", // This is a temporary route for testing. + name: "test", + component: test, + }, { path: "/", name: "root", diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index c0c2a71c9..4664be3e4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -76,7 +76,7 @@ export default { buttonLabel: String, //Required: Label text isRequired: Boolean, //Required: is aria-required required or not? altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily. - buttonID: String, //Required: Unique + buttonID: String, // TODO KO We don't use this //Required: Unique groupName: String, //Rquired: Unique buttonLabelSubCopy: String, //Optional: sub text value: { @@ -84,7 +84,7 @@ export default { type: String, default: "", }, - colLength: String, + // colLength: String, validationRules: String, selectedValues: [Array, String], hasError: Boolean, From ace997bbf56191e75cecbf7d69d473ffd74c602f Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 15 Sep 2022 17:30:46 -0400 Subject: [PATCH 02/29] CSR-762 WIP --- .../button-question/button-question.vue | 66 +++--- .../button-wrapper/button-wrapper.vue | 28 +++ src/common-components/test-button.vue | 35 --- src/layouts/test.vue | 29 ++- src/mixins/button-mixin.js | 29 ++- src/ux-components/list-button/list-button.vue | 213 ++++++++++-------- 6 files changed, 235 insertions(+), 165 deletions(-) create mode 100644 src/common-components/button-wrapper/button-wrapper.vue delete mode 100644 src/common-components/test-button.vue diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 624f4185a..3300e4fe6 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -42,7 +42,7 @@ v-for="answer in answers" :key="answer.Name ? answer.Name : answer" > - + @@ -33,15 +54,15 @@ export default { sampleAnswers: [ { Text: "Part 1", - Value: "PART1", + Name: "PART1", }, { Text: "Part 2", - Value: "PART2", + Name: "PART2", }, { Text: "Part 3", - Value: "PART3", + Name: "PART3", }, ], selectedMultiselectValues: [], diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 2281b3f2c..22ed53d5b 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -1,4 +1,5 @@ export default { + emits: ["change"], model: { prop: "modelValue", event: "change", @@ -32,22 +33,36 @@ export default { type: String, required: true, }, + validationRules: { + type: String, + required: true, + }, + classes: [String, Array, Object], }, - data() {}, methods: { handleSelectionChange(event) { + console.log(event); + console.log(this.value); + console.log(this.modelValue); let isChecked = event.target.checked; + console.log("BM value: ", this.value); + let valueToEmit; if (this.isMultiSelect && this.modelValue instanceof Array) { let newValue = [...this.modelValue]; - if (isChecked && !newValue.includes(this.value)) { + if (isChecked && !this.modelValue.includes(this.value)) { newValue.push(this.value); } else { newValue.splice(newValue.indexOf(this.value), 1); } - this.$emit("change", newValue); + + valueToEmit = newValue; } else { - this.$emit("change", isChecked); + valueToEmit = isChecked; } + + console.log("ButtonWrapper is emitting: ", valueToEmit); + this.$emit("change", valueToEmit); + // this.$emit("change", event); }, }, computed: { @@ -57,5 +72,11 @@ export default { } return this.modelValue === this.value; }, + inputType() { + return this.isMultiSelect ? "checkbox" : "radio"; + }, + buttonId() { + return JSON.stringify(this.value); + }, }, }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index e51d5cc77..e91c2380c 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,14 +1,8 @@ + + \ No newline at end of file diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 8889a0fdc..bfb0de678 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,5 +1,7 @@ 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 { \ 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 16d67b3ee..2b5c148ed 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 @@ :groupName="groupName" buttonType="listCard" isRequired - v-model="selectedValues" + v-model="selectedDamageLocations" validationRules="damage-location-required" /> @@ -27,7 +27,8 @@ export default ({ name: "damageLocationQuestion", data(){ return { - damageOptions: Object, + damageOptions: {}, + selectedDamageLocations: [] } }, props: { @@ -47,14 +48,6 @@ 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, @@ -80,5 +73,11 @@ export default ({ components: { buttonQuestion, }, + watch: { + selectedDamageLocations(selectedDamageLocations) { + console.log("DLQ: ", selectedDamageLocations) + this.$emit("update:modelValue", selectedDamageLocations) + } + } }) \ No newline at end of file diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js index 146b5b6b3..6c9b138ec 100644 --- a/src/mixins/button-mixin.js +++ b/src/mixins/button-mixin.js @@ -1,78 +1,5 @@ +import { queryStrings } from "@/constants/query-strings"; + export default { - emits: ["change"], - model: { - prop: "modelValue", - event: "change", - }, - props: { - value: { - type: [String, Number], - required: true, - }, - modelValue: { - type: [Array, String, Number], - required: true, - }, - isMultiSelect: Boolean, - isWide: Boolean, - buttonImage: String, - buttonImageId: String, - buttonLabel: { - type: String, - required: true, - }, - isRequired: { - type: Boolean, - required: true, - }, - buttonLabelSubCopy: { - type: String, - required: true, - }, - groupName: { - type: String, - required: true, - }, - validationRules: String, - classes: [String, Array, Object], - }, - methods: { - handleSelectionChange(event) { - console.log(event); - console.log(this.value); - console.log(this.modelValue); - let isChecked = event.target.checked; - console.log("BM value: ", this.value); - let valueToEmit; - if (this.isMultiSelect && this.modelValue instanceof Array) { - let newValue = [...this.modelValue]; - if (isChecked && !this.modelValue.includes(this.value)) { - newValue.push(this.value); - } else { - newValue.splice(newValue.indexOf(this.value), 1); - } - - valueToEmit = newValue; - } else { - valueToEmit = this.value; - } - - console.log("ButtonWrapper is emitting: ", valueToEmit); - this.$emit("change", valueToEmit); - }, - }, - computed: { - isChecked() { - if (this.isMultiSelect && this.modelValue instanceof Array) { - this.modelValue.includes(this.value); - } - return this.modelValue === this.value; - }, - inputType() { - return this.isMultiSelect ? "checkbox" : "radio"; - }, - buttonId() { - return `${this.groupName} ${JSON.stringify(this.value)}`; - }, - }, + }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index ec0d0cf43..4e6a9d683 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -28,16 +28,13 @@ :classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]" @change="(e) => $emit('change', e)" > --> - +
@@ -214,8 +212,8 @@ export default { input[type="radio"], input[type="checkbox"] { position: static; //override bootstrap - height: 0; - opacity: 0; + // height: 0; + // opacity: 0; &:focus-visible + .list-button-content { box-shadow: 0 0 0 2.5px $blue; diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 4664be3e4..f2a47e1e4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,73 +1,84 @@ diff --git a/src/common-components/button-wrapper/button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue similarity index 76% rename from src/common-components/button-wrapper/button-wrapper.vue rename to src/common-components/input-button-wrapper/input-button-wrapper.vue index 126876415..59f614710 100644 --- a/src/common-components/button-wrapper/button-wrapper.vue +++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue @@ -1,5 +1,9 @@ diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index b9f2310ad..34758a85d 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -9,7 +9,7 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="true" + :selectOnKeypress="false" isRequired />
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 f35a29bd9..5fb41f2f6 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -168,7 +168,6 @@ export default { From b14ca820ac0b61653df72cfb5f92d6e28ed87bb4 Mon Sep 17 00:00:00 2001 From: Katie Date: Wed, 21 Sep 2022 15:29:01 -0400 Subject: [PATCH 20/29] CSR-762 Fix estimate page, start on question-chain --- .../button-question/button-question.vue | 7 ++-- .../input-button-wrapper.vue | 9 ++--- .../question-chain/question-chain.vue | 40 +++++++++++++++++-- src/layouts/estimate/estimate.vue | 5 +-- src/layouts/part-questions/part-questions.vue | 9 ++++- src/ux-components/list-button/list-button.vue | 1 + 6 files changed, 54 insertions(+), 17 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 5b0808a9c..5fe1aa6e4 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -261,9 +261,10 @@ export default { // this.$emit("isCheckedChanged", val); // }, handleAnswerChange(eventValue) { - // console.log({ - // bqEvent: eventValue - // }) + console.log({ + bqEvent: eventValue + }) + this.$emit("change", eventValue); this.$emit("update:modelValue", eventValue); }, }, diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue index 3fd39fbcf..57fe58505 100644 --- a/src/common-components/input-button-wrapper/input-button-wrapper.vue +++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue @@ -102,7 +102,7 @@ export default { // const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked; if (this.isChecked) { - console.log("HI THERE"); + // console.log("HI THERE"); this.handleChange(this.modelValue); } }, @@ -241,7 +241,7 @@ export default { this.valueToEmit = newValue; } else { - console.log("not multi"); + // console.log("not multi"); this.valueToEmit = this.value; } @@ -253,7 +253,7 @@ export default { // } }, handleClick(e) { - console.log("handleClick"); + // console.log("handleClick"); this.handleSelectionChange(e); // console.log("HC"); // console.log({ @@ -335,8 +335,7 @@ export default { }; - - From 87a4389e1395e03b85d1e72a09099ee6c29cc882 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 22 Sep 2022 11:32:45 -0400 Subject: [PATCH 22/29] CSR-762 Cleanup --- .../base-input-button.vue} | 150 +---- .../button-question/button-question.vue | 99 +--- .../cash-or-insurance-question.vue | 25 +- .../windshield-chip-count-question.vue | 16 - src/mixins/vehicle-questions-mixin.js | 1 - .../list-button-horizontal.vue | 538 ++++++++---------- src/ux-components/list-button/list-button.vue | 372 ++++-------- src/ux-components/list-card/list-card.vue | 164 +----- src/ux-components/radio/radio.vue | 68 +-- 9 files changed, 403 insertions(+), 1030 deletions(-) rename src/common-components/{input-button-wrapper/input-button-wrapper.vue => base-input-button/base-input-button.vue} (50%) diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/base-input-button/base-input-button.vue similarity index 50% rename from src/common-components/input-button-wrapper/input-button-wrapper.vue rename to src/common-components/base-input-button/base-input-button.vue index 57fe58505..54fcc3b7d 100644 --- a/src/common-components/input-button-wrapper/input-button-wrapper.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -3,12 +3,6 @@ :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :for="buttonId" @mousedown.left="handleEventAction('click', $event)"> - - click, keypress - // space => keypressSubmit, keypress - // arrow left/right => keypress - - // if selectOnKeypress (YMMS) - // if click => emit event - // if space/enter => emit event - // if arrow => emit event - // else (!selectOnKeypress) - // if click => emit event - // if space/enter => emit event - // if arrow => handleSelection - - // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) { - // this.handleClick(e); - // } - // else { - // this.handleSelectionChange(e); - // } }, handleSelectionChange(e) { - // console.log("HSC"); - // console.log(e); - // console.log(this.value); - // console.log(this.modelValue); - // let isChecked = event.target.checked; - // console.log("BM value: ", this.value); - // let valueToEmit; - // console.log("isMultiselect") - // console.log(this.isMultiSelect) - // console.log({ - // modelValue: this.modelValue, - // isMultiselect: this.isMultiSelect - // }) if ( this.isMultiSelect && (this.modelValue instanceof Array || this.modelValue == null) ) { let newValue = this.modelValue ? [...this.modelValue] : []; - // console.log("newValue", newValue) - // console.log({ - // newValue: newValue, - // // isChecked: isChecked - // }) if (!newValue.includes(this.value)) { - // console.log("isChecked") newValue.push(this.value); } else { - // console.log("isn't checked") newValue.splice(newValue.indexOf(this.value), 1); } this.valueToEmit = newValue; } else { - // console.log("not multi"); this.valueToEmit = this.value; } - console.log("handlingChange", this.valueToEmit); this.handleChange(this.valueToEmit); this.pushClickEventToGA(); - // if (this.selectOnKeypress) { - // this.handleClick(e) - // } }, handleClick(e) { - // console.log("handleClick"); this.handleSelectionChange(e); - // console.log("HC"); - // console.log({ - // eventEmitting: e, - // valueToEmit: this.valueToEmit, - // }); this.$emit("change", this.valueToEmit); }, pushClickEventToGA() { @@ -284,7 +161,7 @@ export default { return this.isMultiSelect ? "checkbox" : "radio"; }, buttonId() { - return `${this.groupName} ${JSON.stringify(this.value)}`; + return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`; }, }, setup(props) { @@ -294,41 +171,18 @@ export default { type: inputType, validateOnValueUpdate: false, validateOnMount: false, - // checkedValue: props.value, - // potentialInitialValue: props.selectedValues, }; - // Set initialValue for validation setup if pre-selected - // NOTE: props.selectedValues could be an array of strings, or an array of integers... - // if ( - // props.selectedValues && - // (props.selectedValues.includes(props.value) || - // props.selectedValues.includes(parseInt(props.value))) - // ) { - // fieldOptions["initialValue"] = fieldOptions.potentialInitialValue; - // } - - // const { handleChange, errors, value } = useField( - // toRef(props, "groupName"), - // toRef(props, "validationRules"), - // fieldOptions - // ); - - console.log(props.validationRules); - const { handleChange, meta, errors, value } = useField( toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions ); - // const validateValue = value; - return { handleChange, errors, meta, - // validateValue, fieldOptions, // only need to expose this for unit test purposes }; }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 2fece851c..51dd15f77 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -52,34 +52,6 @@ :textPosition="textPosition" :selectOnKeypress="selectOnKeypress" @change="handleAnswerChange" /> - -
({ + buttonLabel: answer.Text ?? answer, + altText: answer.Name ? answer.Name : answer, + buttonLabelSubCopy: answer.SubText, + buttonImage: answer.AnswerImageUrl, + buttonImageId: answer.ImageId, + groupName: this.formatString(this.groupName), + value: this.useTextForValue + ? answer.Text + : answer.Name ?? answer, + })); // TODO KO temporary. It should always just be an array - return (Array.isArray(this.answers) ? this.answers : [])?.map( - (answer) => ({ - buttonLabel: answer.Text ?? answer, - altText: answer.Name ? answer.Name : answer, - buttonLabelSubCopy: answer.SubText, - buttonImage: answer.AnswerImageUrl, - buttonImageId: answer.ImageId, - groupName: this.formatString(this.groupName), - value: this.useTextForValue - ? answer.Text - : answer.Name ?? answer, - }) - ); + // return (Array.isArray(this.answers) ? this.answers : [])?.map( + // (answer) => ({ + // buttonLabel: answer.Text ?? answer, + // altText: answer.Name ? answer.Name : answer, + // buttonLabelSubCopy: answer.SubText, + // buttonImage: answer.AnswerImageUrl, + // buttonImageId: answer.ImageId, + // groupName: this.formatString(this.groupName), + // value: this.useTextForValue + // ? answer.Text + // : answer.Name ?? answer, + // }) + // ); }, }, methods: { @@ -249,26 +224,10 @@ export default { : this.formatString(answer.toString()); } }, - // handleCheckedChanged(val) { - // if (this.selectingInitiatesLoad) { - // this.selectedValues = val.value; - // } else { - // if (Array.isArray(this.selectedValues)) { - // const newSelectedValues = this.selectedValues; - // val.checkValue - // ? newSelectedValues.push(val.value) - // : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); - // this.selectedValues = newSelectedValues; - // } else { - // this.selectedValues = val.value; - // } - // } - // this.$emit("isCheckedChanged", val); - // }, handleAnswerChange(primaryAnswerValue) { console.log({ - bqEvent: primaryAnswerValue - }) + bqEvent: primaryAnswerValue, + }); this.primaryValue = primaryAnswerValue; this.$emit("change", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue index b2431406d..3e96fba94 100644 --- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue +++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue @@ -6,39 +6,40 @@ buttonType="listButtonHorizontal" v-model="selectedValues" isCashOrInsurance - isRequired - /> + isRequired />
\ No newline at end of file +}; + 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 f0aa82252..af063722f 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 @@ -24,21 +24,11 @@ export default ({ name: "windshieldOptions", mixins: [buttonQuestionWrapperMixin], props: { - // modelValue: Number, groupName: String, isAvailable: Boolean, validationRules: String, cmsWidgetName: String, }, - // methods: { - // // TODO KO is this being used? Always three options - // updateSelectedValues() { - // // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER - // if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { - // this.selectedValues = [this.answersToDisplay[0].Name]; - // } - // }, - // }, computed: { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); @@ -47,12 +37,6 @@ export default ({ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, }, - // watch: { - // isAvailable(val) { - // // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE - // val && this.updateSelectedValues(); - // } - // }, components: { buttonQuestion, } diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js index 49d5f2a40..2c409e102 100644 --- a/src/mixins/vehicle-questions-mixin.js +++ b/src/mixins/vehicle-questions-mixin.js @@ -115,7 +115,6 @@ export default { // if single parts only const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions); // save to store lineItems.glassParts - // TODO KO self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts); self.$refs.loadingModal.showModal(); 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 5fb41f2f6..d8a9584fc 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,35 +1,35 @@ diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 85c85d140..72f7329ae 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,276 +1,140 @@ diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index edd9dddfd..d05655619 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,5 +1,5 @@ @@ -260,9 +117,6 @@ export default { input[type="checkbox"], input[type="radio"] { - // opacity: 0; - // width: 0; - // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it position: absolute; + .list-card-content { diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 8a136c2d2..5f1f81b38 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -1,6 +1,5 @@ From 25a27563ab42158887a984c9b5aa3fa28f1103a2 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 22 Sep 2022 14:00:44 -0400 Subject: [PATCH 23/29] CSR-762 Add shared props --- .../base-input-button/base-input-button.vue | 39 ++++---- .../button-question/button-question.vue | 51 +++++------ .../question-chain/question-chain.vue | 22 +---- src/layouts/estimate/estimate.spec.js | 1 - src/layouts/test.vue | 91 ------------------- .../damage-location-question.vue | 1 - .../replace-options-question.vue | 15 --- src/layouts/vehicle-damage/vehicle-damage.vue | 18 ---- .../windshield-damage-type-question.vue | 21 ----- .../windshield-options/windshield-options.vue | 5 - .../glass-part-question.vue | 10 +- src/layouts/vehicle-year/vehicle-year.vue | 1 - src/mixins/input-button-wrapper-mixin.js | 35 +++++++ src/router/index.js | 6 -- .../list-button-horizontal.vue | 50 +--------- src/ux-components/list-button/list-button.vue | 25 ++--- src/ux-components/list-card/list-card.vue | 36 +------- src/ux-components/radio/radio.vue | 22 +---- 18 files changed, 105 insertions(+), 344 deletions(-) delete mode 100644 src/layouts/test.vue create mode 100644 src/mixins/input-button-wrapper-mixin.js 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 54fcc3b7d..5a8883557 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -3,6 +3,7 @@ :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :for="buttonId" @mousedown.left="handleEventAction('click', $event)"> + + :key="answer.value ? answer.value : answer"> ({ - buttonLabel: answer.Text ?? answer, - altText: answer.Name ? answer.Name : answer, - buttonLabelSubCopy: answer.SubText, - buttonImage: answer.AnswerImageUrl, - buttonImageId: answer.ImageId, - groupName: this.formatString(this.groupName), - value: this.useTextForValue - ? answer.Text - : answer.Name ?? answer, - })); + console.log({ + answers: this.answers, + isArray: Array.isArray(this.answers), + }); // TODO KO temporary. It should always just be an array - // return (Array.isArray(this.answers) ? this.answers : [])?.map( - // (answer) => ({ - // buttonLabel: answer.Text ?? answer, - // altText: answer.Name ? answer.Name : answer, - // buttonLabelSubCopy: answer.SubText, - // buttonImage: answer.AnswerImageUrl, - // buttonImageId: answer.ImageId, - // groupName: this.formatString(this.groupName), - // value: this.useTextForValue - // ? answer.Text - // : answer.Name ?? answer, - // }) - // ); + return (Array.isArray(this.answers) ? this.answers : [])?.map( + (answer) => ({ + buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, + altText: + answer.altText ?? (answer.Name ? answer.Name : answer), + buttonLabelSubCopy: + answer.buttonLabelSubCopy ?? answer.SubText, + buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, + buttonImageId: answer.buttonImageId ?? answer.ImageId, + groupName: this.formatString(this.groupName), + value: + answer.value ?? (this.useTextForValue + ? answer.Text + : answer.Name ?? answer), + }) + ); }, }, methods: { @@ -225,9 +221,6 @@ export default { } }, handleAnswerChange(primaryAnswerValue) { - console.log({ - bqEvent: primaryAnswerValue, - }); this.primaryValue = primaryAnswerValue; this.$emit("change", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 5e9ebd97c..71d517e77 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -56,13 +56,13 @@ export default { questionSequence: q.questionSequence, answers: q.answers.map((a) => { return { - Text: a.answerText, + buttonLabel: a.answerText, // Name will either be nextQuestionSequence or answerResult // Name will be used by list-button as the input value. // It must be a single string or number, so concatenating together a string with // 4 pieces of data separated by pipe characters: // question number|type of answer|answer value|answer text - Name: a.nextQuestionSequence ? + value: a.nextQuestionSequence ? q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText : q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText, nextQuestionSequence: a.nextQuestionSequence, @@ -78,10 +78,6 @@ export default { } }); - console.log({ - modelValue: this.modelValue, - questions: this.questions - }) if (!this.modelValue?.length > 0 && this.questions.length > 0) { // set this.currentQuestionNum to first valid question this.currentQuestionNum = this.questions[0].questionSequence; @@ -93,10 +89,6 @@ export default { }, methods: { handleAnswer(question, returnedAnswer) { - console.log({ - returnedAnswer: returnedAnswer - }) - question.answerSelected = returnedAnswer; /* returnedAnswer example format: @@ -108,17 +100,11 @@ export default { */ const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer); - console.log({ - isQuestionChainComplete: isQuestionChainComplete - }) if (isQuestionChainComplete) { this.$emit("update:modelValue", isQuestionChainComplete); } }, getQuestionChainAnswerIfComplete(returnedAnswer) { // this method will return either a final answer or Boolean false - console.log("getQuestionChainAnswerIfComplete: ", { - returnedAnswer: returnedAnswer - }) if (!returnedAnswer) { return false } // Example returnedAnswers: @@ -153,10 +139,6 @@ export default { } }); - console.log({ - questionType: questionType, - returnedAnswerArray: returnedAnswerArray - }) // return false if there's a nextQuestion... or return an object with final answers (truthy) if (questionType === "nextQuestion") { diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js index 5bfb2e517..379ab76f7 100644 --- a/src/layouts/estimate/estimate.spec.js +++ b/src/layouts/estimate/estimate.spec.js @@ -168,7 +168,6 @@ describe("estimate.vue", () => { store.commit(storeMutations.UPDATE_IS_REPAIR, null); // Act - console.log(store.getters.damage) let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); // Assert diff --git a/src/layouts/test.vue b/src/layouts/test.vue deleted file mode 100644 index 51a236485..000000000 --- a/src/layouts/test.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - 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 7f57cbe15..6e8962d1c 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 @@ -77,7 +77,6 @@ export default ({ }, watch: { selectedValue(selectedValue) { - // console.log("DLQ: ", selectedValue) this.$emit("update:modelValue", selectedValue) } } 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 3b8e6d803..0741607bc 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 @@ -47,14 +47,11 @@ export default ({ this.replaceOptions = replaceOptions; }, updateSelectedValues() { - console.log("UPDATING FOR ", this.groupName) // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER // ex: BackGlass stationary - // console.log(this.answersToDisplay) if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { const selectedAnswer = this.answersToDisplay[0].Name; this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer; - console.log("HIIIIII2", this.selectedValue) } }, }, @@ -65,14 +62,6 @@ 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 => @@ -98,10 +87,6 @@ export default ({ val && this.updateSelectedValues(); }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { - console.log({ - groupName: this.groupName, - shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion - }) if (!shouldDisplayReplaceOptionsQuestion) { this.selectedValue = []; } diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index f05f9a65f..efcfaa5b8 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -268,17 +268,6 @@ export default { getRearReplaceOptionsFromStore(){ var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(glass => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName; - // store.getters.damage.glassToReplace?.forEach(glass => { - // if (glass.glassLocation === damageLocationsSelected.REAR){ - // rearReplaceOptions.push(glass.glassName); - // } - // }); - - console.log({ - glassToReplace: store.getters.damage.glassToReplace, - rearReplaceOptions: rearReplaceOptions - }) - return rearReplaceOptions; }, @@ -290,7 +279,6 @@ export default { selectedWindshieldChipCount: this.selectedWindshieldOptions.selectedWindshieldChipCount }, false); - console.log(this.selectedGlassToReplace()) return this.navigateForward(); }, @@ -325,9 +313,6 @@ export default { } if (this.isRearWindowDamageLocation) { - console.log({ - selectedRearReplaceOptions: this.selectedRearReplaceOptions - }) selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: this.selectedRearReplaceOptions}); } @@ -378,9 +363,6 @@ export default { hasSplitSingleConflict() { if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false; - console.log({ - selectedWindshieldOptions: this.selectedWindshieldOptions - }) return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield => { return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase(); 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 2df1f7f78..3b2c431f6 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 @@ -23,7 +23,6 @@ export default ({ name: "windshieldDamageTypeQuestion", mixins: [buttonQuestionWrapperMixin], props: { - // modelValue: String, groupName: String, isAvailable: Boolean, suppressError: Boolean, @@ -37,29 +36,9 @@ export default ({ answersFromCms(){ return this.getCmsContent(this.cmsWidgetName, 'Answers'); }, - // selectedValues: { - // get: function() { - // return this.modelValue; - // }, - // set: function(newValue) { - // this.$emit("update:modelValue", newValue); - // } - // }, }, components: { buttonQuestion, }, - // watch: { - // isAvailable(isAvailable) { - // if (!isAvailable) { - // // console.log({ - // // isAvailable: isAvailable - // // }) - // // console.log("updating") - // this.selectedValue = null; - // // this.$emit("update:modelValue", null); - // } - // } - // } }) \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index d02873a63..f22370d69 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -96,9 +96,6 @@ export default ({ }, getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){ // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL) - console.log("GETWINDSHIELDOPTIONS", { - selectedValues: this.selectedValues - }) return { selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType, selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount, @@ -112,7 +109,6 @@ export default ({ return this.modelValue; }, set: function(newValue) { - // console.log("HIIII", newValue) this.$emit("update:modelValue", newValue); } }, @@ -137,7 +133,6 @@ export default ({ return this.selectedValues.selectedWindshieldReplaceOptions; }, set: function(newValue) { - console.log("HIIII", newValue) this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValue, null, newValue); } }, diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 34b04750f..9147076c8 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -97,9 +97,9 @@ export default { let tintOptions = []; Object.keys(this.featureListData).forEach((tintOption) => { tintOptions.push({ - Name: tintOption, - Text: tintOption, - AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage( + value: tintOption, + buttonLabel: tintOption, + buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage( this.glassLocation, tintOption )}`), @@ -201,10 +201,6 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - console.log({ - alreadyPopulatedPartsData: this.alreadyPopulatedPartsData, - alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData - }) this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color; } }); diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index fe8c2dc00..fe9f6f30c 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -88,7 +88,6 @@ export default { watch: { selectedYear(year) { - console.log("selectedYear: ", year) const parsedYear = parseInt(year); this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear); this.$router.navigateWithSaving( diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js new file mode 100644 index 000000000..02009c385 --- /dev/null +++ b/src/mixins/input-button-wrapper-mixin.js @@ -0,0 +1,35 @@ +export default { + props: { + modelValue: [Array, String, Number], + value: [String, Number], + isMultiSelect: Boolean, + groupName: String, + buttonLabel: [Number, String], + buttonLabelSubCopy: String, + buttonImage: String, + altText: String, + textPosition: String, + screenReaderOnlyText: String, + valueToLogType: String, + validationRules: String, + isWide: Boolean + }, + data() { + return { + selectedValue: null, + }; + }, + mounted() { + this.selectedValue = this.modelValue; + }, + methods: { + handleAnswerChange(e) { + this.$emit("change", e); + }, + }, + watch: { + selectedValue(selectedValue) { + this.$emit("update:modelValue", selectedValue); + }, + }, +}; diff --git a/src/router/index.js b/src/router/index.js index d31d32e29..9dd7b2acf 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,7 +23,6 @@ import { applicationConfig } from "../constants/application-config"; // Components import quote from "@/layouts/quote/quote.vue"; -import test from "@/layouts/test" const routes = [ { @@ -31,11 +30,6 @@ const routes = [ name: "quote", component: quote, }, - { - path: "/test", // This is a temporary route for testing. - name: "test", - component: test, - }, { path: "/", name: "root", 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 d8a9584fc..da33751f3 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,15 +1,10 @@ diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 5f1f81b38..7851de56e 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -1,11 +1,8 @@