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

POC tint aut oselection

Browse source
This commit is contained in:
FrankRua 2022-03-03 16:38:04 -05:00
parent bcc0114c52
commit b10d8c55ce
1 changed files with 45 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
</div>
<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
{{ selectedTint }}
<div class="row my-2">
<div class="col">
<listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
@ -61,25 +61,9 @@ export default {
modelValue: Object,
},
mounted() {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts;
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
const tintColor = alreadyPopulatedPartsData[key].color;
Object.keys(this.modelValue).forEach((key) => {
if (this.modelValue[key][0] === partNumber) {
this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "",
value: "",
};
}
});
});
this.LoadPreselectedValues();
if (Object.keys(this.featureListData).length === 1) {
this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
}
},
components: {
@ -127,6 +111,10 @@ export default {
return tintMapByColor;
},
PartDataFromApi() {
return this.$store.getters.pageData(this.$route.query.fmgPage);
}
},
methods: {
initializeComponent(cmsContent) {
@ -156,19 +144,50 @@ export default {
},
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelectIfSinglePart(){
AutoSelectIfSinglePart() {
// Check if the selected tint only has a single feature
const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
Object.keys(partsData.partsOrQuestions).forEach((key) => {
const currentGlassSelection = partsData.partsOrQuestions[key];
Object.keys(this.PartDataFromApi.partsOrQuestions).forEach((key) => {
const currentGlassSelection = this.PartDataFromApi.partsOrQuestions[key];
if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
if (currentGlassSelection.parts.length === 1) {
this.selectedPart = { [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]};
this.selectedPart = {
[currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]
};
}
}
});
},
AutoSelectTintIfOnlyOneColor(tintColor) {
this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "",
value: "",
};
},
LoadPreselectedValues() {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts;
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
const tintColor = alreadyPopulatedPartsData[key].color;
Object.keys(this.modelValue).forEach((key) => {
if (this.modelValue[key][0] === partNumber) {
this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "",
value: "",
};
}
});
});
}
}
},
};