From f359be41c7cbe137846b5637102fd57164ef4221 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 27 Jun 2022 11:45:37 -0400 Subject: [PATCH] CSR-343 Correctly select parts --- .../button-question/button-question.vue | 2 +- .../make-question/make-question.vue | 7 +++--- .../model-question/model-question.vue | 7 +++--- .../glass-part-question.vue | 18 ++++++++++---- src/layouts/vehicle-parts/vehicle-parts.vue | 24 ++++++++++--------- .../style-question/style-question.vue | 7 +++--- .../year-question/year-question.vue | 7 +++--- 7 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 6523bedb3..f4594c06b 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -139,7 +139,7 @@ export default { if (this.useTextForValue){ return answer.Text } - console.log(answer.Name ? answer.Name : answer) + // console.log(answer.Name ? answer.Name : answer) return answer.Name ? answer.Name : answer; }, handleCheckedChanged(val) { diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 26a17955c..5319d96f2 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="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index d8cb21894..5d2b1ebd2 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="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", 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 f6d21f433..029088cd7 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 @@ -17,14 +17,13 @@
@@ -39,7 +38,7 @@ :loaderEnabled="false" isRequired :groupName="`${glassLocation}-${glassName}-${selectedTint}`" - :validationRules="validationRules" + validationRules="part-required" />
@@ -63,8 +62,14 @@ import buttonQuestion from "@/common-components/button-question/button-question" // Supporting files import { getTintImage } from "@/constants/tint-mapper"; import { getCustomTransformValue } from "@/constants/dynamictext-mapper"; +import { defineRule } from "vee-validate"; +import { required } from "@/helpers/validation-rules"; +import { errorMessages } from "@/constants/error-messages"; // import { ErrorMessage } from "vee-validate"; +defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED)); +defineRule("part-required", required(errorMessages.OPTION_REQUIRED)); + export default { name: "glass-part-question", inheritAttrs: false, @@ -80,7 +85,7 @@ export default { glassLocation: String, colorAnswers: Array, modelValue: Object, - validationRules: String, + // validationRules: String, }, mounted() { this.LoadPreselectedValues(); @@ -240,6 +245,11 @@ export default { }); }, }, + watch: { + selectedTint(newTint, previousTint) { + this.selectedPart = null; + } + } }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 431e1632a..47faea58c 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -3,7 +3,6 @@ @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" - v-slot="{ meta }" >
@@ -35,13 +34,12 @@ :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" - validationRules="replace-options-required" />
@@ -69,7 +67,7 @@ import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; // DEFINE VALIDATION RULES -defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED)); +// defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED)); export default { name: "vehicle-parts", @@ -88,12 +86,12 @@ export default { // Glass Part Question dynamic component Object.keys(vm.$refs) - .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) - .forEach((c) => - vm.$refs[c][0].initializeComponent({ - ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, - FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, - }) + .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) + .forEach((c) => + vm.$refs[c][0].initializeComponent({ + ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, + FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, + }) ); }); }, @@ -113,6 +111,10 @@ components: { alert, }, computed: { + isForwardActionDisabled() { + console.log(this.glassParts) + return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0; + }, PartsForQuestions() { const partsData = this.PartsFromApi; @@ -188,7 +190,7 @@ methods: { ); if (isMatched) { - matchedParts.push(currentPart); + // matchedParts.push(currentPart); } // for (let [partKey, partValue] of Object.entries(value.parts)) { diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 45c0f7dea..e578bc192 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="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index a5b263fe8..ff2e2902a 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 @@ :answers="years" groupName="ChooseVehicleYear" textPosition="text-start" - v-model="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -35,14 +35,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } },