POC tint aut oselection

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -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) {
+        this.LoadPreselectedValues();
-            // Populate button-question model-value if parts data already exists in VueX
+        if (Object.keys(this.featureListData).length === 1) {
-            const alreadyPopulatedPartsData =
+            this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
-                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: "",
-                        };
-                    }
-                });
-            });
         }
     },
     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(this.PartDataFromApi.partsOrQuestions).forEach((key) => {
-
+                const currentGlassSelection = this.PartDataFromApi.partsOrQuestions[key];
-            Object.keys(partsData.partsOrQuestions).forEach((key) => {
-                const currentGlassSelection = partsData.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: "",
+                            };
+                        }
+                    });
+                });
+            }
         }
     },
 };