jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 Fix vehicle-parts preselecting issue

Browse source
This commit is contained in:
Katie 2022-10-11 15:51:16 -04:00
parent d7115f2ac6
commit dcd35f1724
3 changed files with 51 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common-components/button-question/button-question.vue
View file

@ -126,7 +126,6 @@ export default {
},
data() {
return {
selectedValues: "",
lastValuePushedToGa: null,
};
},
@ -199,6 +198,14 @@ export default {
})
);
},
selectedValues: {
get() {
return this.modelValue;
},
set(selectedAnswers) {
this.$emit("update:modelValue", selectedAnswers);
}
}
},
methods: {
formatString(str) {
@ -226,7 +233,6 @@ export default {
this.selectedValues = selectedAnswers;
this.$emit("buttonQuestionChange", selectedAnswers);
this.$emit("update:modelValue", selectedAnswers);
},
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;

62
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -13,8 +13,7 @@
altText=""
isRequired
:groupName="`${glassLocation}-${glassName}`"
:validationRules="tintValidationRules"
>
:validationRules="tintValidationRules">
<div class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion
@ -28,8 +27,9 @@
isRequired
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules"
:shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
/>
:shouldPushClickEventToGAOnMount="
shouldPushClickEventToGAOnMount
" />
</div>
</div>
</buttonQuestion>
@ -57,7 +57,7 @@ export default {
glassColorQuestion: "",
glassFeatureQuestion: "",
selectedTint: "",
shouldPushClickEventToGAOnMount: true
shouldPushClickEventToGAOnMount: true,
};
},
props: {
@ -67,8 +67,8 @@ export default {
modelValue: Object,
alreadyPopulatedPartsData: {
type: Array,
default: () => []
}
default: () => [],
},
},
mounted() {
this.LoadPreselectedValues();
@ -79,12 +79,18 @@ export default {
computed: {
tintValidationRules() {
const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
defineRule(
validationRuleName,
required(errorMessages.OPTION_REQUIRED)
);
return validationRuleName;
},
partValidationRules() {
const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
defineRule(
validationRuleName,
required(errorMessages.OPTION_REQUIRED)
);
return validationRuleName;
},
colorQuestionText() {
@ -115,16 +121,29 @@ export default {
return this.modelValue?.partNumber;
},
set(newValue) {
this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
this.$emit(
"update:modelValue",
this.partsForSelectedTint.filter(
(part) => part.partNumber == newValue
)[0]
);
},
},
partsForSelectedTint() {
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName =>
dataForGlassLocationAndName.glassName == this.glassName &&
dataForGlassLocationAndName.glassLocation == this.glassLocation);
const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(
(dataForGlassLocationAndName) =>
dataForGlassLocationAndName.glassName == this.glassName &&
dataForGlassLocationAndName.glassLocation ==
this.glassLocation
);
const matchingGlassParts =
matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return (
matchingGlassParts.filter(
(part) => part.color == this.selectedTint
) ?? []
);
},
// Creates a map of the feature list data in the correct Name/Value
@ -156,7 +175,9 @@ export default {
},
PartDataFromApi() {
return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
return (
this.$store.getters.pageData(this.$route.query.fmgPage) ?? {}
);
},
},
methods: {
@ -193,7 +214,8 @@ export default {
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelectIfSinglePart() {
if (this.partsForSelectedTint?.length == 1) {
this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
this.selectedPartNumber =
this.partsForSelectedTint[0].partNumber;
}
},
@ -203,7 +225,7 @@ export default {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
this.shouldPushClickEventToGAOnMount = false;
this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
this.selectedTint = this.modelValue?.color
}
});
},
@ -211,8 +233,8 @@ export default {
watch: {
selectedTint() {
this.AutoSelectIfSinglePart();
}
}
},
},
};
</script>

4
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -204,9 +204,7 @@ export default {
const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.glassParts[g.glassLocation + "-" + g.glassName] = {
[g.glassLocation]: [partNumber],
};
this.glassParts[g.glassLocation + "-" + g.glassName] = p;
}
});
});