radio updates

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

@@ -1,33 +1,62 @@
 <template>
-<div class="container">
+  <div class="container">
     <div class="row">
       <p class="mb-0">{{ colorQuestionText }}</p>
     </div>
-</div>
+  </div>
 
-<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+  <div
+    class="container nested-radio"
+    v-for="(value, name, index) in featureListData"
+    :key="index"
+  >
     <div class="row my-2">
       <div class="col">
-            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+        <listCard
+          v-model="selectedTint[name]"
+          :value="`${glassLocation}-${glassName}-${name}`"
+          :isRadio="true"
+          :isWide="true"
+          :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
               name
             )}`)
-          " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
+          "
+          :buttonLabel="name"
+          altText=""
+          :buttonID="`${glassLocation}-${glassName}-${name}`"
+          :groupName="`${glassLocation}-${glassName}`"
+          @isCheckedChanged="ResetTintAndPartSelections()"
+        />
       </div>
     </div>
     <transition name="fade" mode="out-in">
-        <div v-if="
+      <div
+        v-if="
           selectedTint[name] != undefined &&
           selectedTint[name].buttonId ===
             `${glassLocation}-${glassName}-${name}`
-        " class="row my-2" aria-live="polite">
+        "
+        class="row my-2"
+        aria-live="polite"
+      >
         <div class="col">
-                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
+          <buttonQuestion
+            v-model="selectedPart[glassLocation]"
+            buttonType="radio"
+            class="radioQuestion"
+            :questionText="glassFeatureQuestion"
+            :answers="value"
+            textPosition="text-start"
+            :loaderEnabled="false"
+            :isRequired="true"
+            :groupName="`${glassLocation}-${glassName}-${name}`"
+          />
         </div>
       </div>
     </transition>
-</div>
+  </div>
 </template>
 
 <script>
@@ -36,12 +65,8 @@ import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 // Supporting files
-import {
+import { getTintImage } from "@/constants/tint-mapper";
-    getTintImage
+import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
-} from "@/constants/tint-mapper";
-import {
-    getCustomTransformValue
-} from "@/constants/dynamictext-mapper";
 
 export default {
   name: "glass-part-question",
@@ -116,7 +141,7 @@ export default {
 
     PartDataFromApi() {
       return this.$store.getters.pageData(this.$route.query.fmgPage);
-        }
+    },
   },
   methods: {
     initializeComponent(cmsContent) {
@@ -139,7 +164,6 @@ export default {
     // Reset selections when tint changes for the same glass to ensure proper selection.
     // Also checks if only a single part is present for the tint.
     ResetTintAndPartSelections() {
-
       this.selectedTint = {};
       this.selectedPart = {};
       this.AutoSelectIfSinglePart();
@@ -149,12 +173,18 @@ export default {
     AutoSelectIfSinglePart() {
       // Check if the selected tint only has a single feature
       Object.keys(this.PartDataFromApi.partsOrQuestions).forEach((key) => {
-                const currentGlassSelection = this.PartDataFromApi.partsOrQuestions[key];
+        const currentGlassSelection =
+          this.PartDataFromApi.partsOrQuestions[key];
 
-                if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
+        if (
+          currentGlassSelection.glassName === this.glassName &&
+          currentGlassSelection.glassLocation === this.glassLocation
+        ) {
           if (currentGlassSelection.parts.length === 1) {
             this.selectedPart = {
-                            [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]
+              [currentGlassSelection.glassLocation]: [
+                currentGlassSelection.parts[0].partNumber,
+              ],
             };
           }
         }
@@ -165,7 +195,7 @@ export default {
       this.selectedTint[tintColor] = {
         buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
         checkValue: "",
-                value: "",
+        value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
       };
     },
 
@@ -184,7 +214,7 @@ export default {
               this.selectedTint[tintColor] = {
                 buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
                 checkValue: "",
-                                value: "",
+                value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
               };
             }
           });

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -136,7 +136,7 @@ export default {
             }
           });
         });
-
+        console.log(this.glassParts)
         return {
           glassName: g.glassName,
           glassLocation: g.glassLocation,

src/ux-components/list-card/list-card.vue

@@ -70,6 +70,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
+    modelValue: Object,
     hasError: Boolean,
   },
   data(){
@@ -81,6 +82,14 @@ export default {
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
+    this.$nextTick(() => {
+      if(Object.keys(this.modelValue).length > 0) {
+        this.checkValue = this.modelValue.value;
+        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
+        this.$emit('isCheckedChanged', emitEvent);
+        this.$emit('update:modelValue', emitEvent);
+      }
+    })
   },
   computed: {
     getLabelClasses() {