From 3ac9d786d3a82cb7d2ab70edf18879bb425837d4 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Tue, 16 May 2023 15:06:32 +0530
Subject: [PATCH] SLT-418

---
 .../vehicle-question/vehicle-question.vue     | 33 ++------
 .../vehicle-selection/vehicle-selection.vue   | 78 +++++++++++--------
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/iss-components/vehicle-question/vehicle-question.vue b/src/iss-components/vehicle-question/vehicle-question.vue
index 7161173c..b599d138 100644
--- a/src/iss-components/vehicle-question/vehicle-question.vue
+++ b/src/iss-components/vehicle-question/vehicle-question.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { useMainStore } from '@/store';
+
 import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
 
 export default {
@@ -20,8 +20,7 @@ export default {
   },
   props: {
     modelValue: String,
-    updateValues: Function,
-    years:[]
+    updateValues: Function,    
   },
   components: {
   dropdownQuestion
@@ -29,36 +28,20 @@ export default {
   computed: {
     selectedValue: {
       get: function() {    
-        return this.modelValue;
+        return this.modelValue?.toString();
       },
       set: function(newValue) {
-        this.$emit("update:modelValue",newValue);
+        this.$emit("update:modelValue",newValue?.toString());
       }
     },
-    Options() {
-      if(this.years != null)
-      return this.years;
-
-          const Answers = this.values;
-          const AnswersObj ={};
-          if(Answers)
-          {
-              for (let answer of Object.values(Answers)) {
-                  if (answer) {
-                      AnswersObj[answer] = answer;
-                  }
-              }
-          }
-          return AnswersObj
+    Options() {      
+          return this.values;
       },
   },
-  methods: {
-    loadInitialData() {
-        return useMainStore().getVehicleYears();
-      },
+  methods: {  
     async getNewValues() {
       const results = await this.updateValues();
-      this.values = results?.data;
+      this.values = results?.data;      
     },
   },
 };
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index bf8e3952..736d4520 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -9,10 +9,10 @@
                        <div class="col">
                            <div class="select-car-form rounded">
                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="VehicleyearQuestion" cmsWidgetName="VehicleYearQuestion" :options="years" validationRules="year-required" inputId="yearQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="VehiclemakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="VehiclemodelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="VehiclestyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
                               <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
                                <siteFooter
                                  cmsWidgetName="SiteFooterWidget"
@@ -37,7 +37,8 @@ import siteHeader from "@/iss-components/site-header/site-header";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import VehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
+import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
+import { useMainStore } from '@/store';
 
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -61,62 +62,74 @@ export default {
            selectedYear: null,
            selectedMake: null,
            selectedModel: null,
-           selectedStyle: null,
-           years: []
+           selectedStyle: null,           
        };
    },
 props:{
     cmsWidgetName:String,
     validationRules:String,
 },
+  
+   mounted(){     
+     this.Years.getNewValues();
+   },
+
    async beforeRouteEnter(to, from, next) {
        // Call APIs
-       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-       const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
+       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);       
 
        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
-           },
-           {
-               resultKey: "yearQuestionInitialData",
-               promise: yearQuestionInitialDataPromise,
-           },
-
+           },        
        ];
 
        let resultMap = await settleAllPromises(promiseResultMap);
 
        // Call the "next" function to complete the transition to this page.
-       next((vm) => {
-        vm.years = resultMap.yearQuestionInitialData;
+       next((vm) => {         
            vm.setCmsContent(resultMap.cmsContent);
     });
       
   },
    watch: {
        selectedYear(yearIndex) {
-           const parsedYearIndex = parseInt(yearIndex);
-           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
-
-           this.$refs["VehiclemakeQuestion"].getNewValues();
-
+           const parsedYearIndex = parseInt(yearIndex);           
+           this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
+           this.Makes.getNewValues();
        },
-       selectedMake(make) {
-           this.mainStore.updateVehicleMake( make );
-           this.$refs["VehiclemodelQuestion"].getNewValues();         
+       selectedMake(makeIndex) {
+        const parsedMakeIndex = parseInt(makeIndex);    
+           this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
+           this.Models.getNewValues();      
        },
-       selectedModel(model) {
-           this.mainStore.updateVehicleModel( model );
-           this.$refs["VehiclestyleQuestion"].getNewValues(); 
+       selectedModel(modelIndex) {
+        const parsedModelIndex = parseInt(modelIndex); 
+           this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
+            this.Styles.getNewValues();           
        },
-       selectedStyle(style) {
-           this.mainStore.updateVehicleStyle( style );
+       selectedStyle(styleIndex) {
+        const parsedStyleIndex = parseInt(styleIndex); 
+           this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
        },
    },
+computed:{
+    Years(){
+        return this.$refs["vehicleYearQuestion"];
+    },
+    Makes(){
+        return this.$refs["vehicleMakeQuestion"];
+    },
+    Models(){
+        return this.$refs["vehicleModelQuestion"];
+    },
+    Styles(){
+        return this.$refs["vehicleStyleQuestion"];
+    }
 
+},
    methods: {
        arePagePrerequisitesValid() {
            return true;
@@ -135,6 +148,9 @@ props:{
                     this.$route
                 );
             });
+     },    
+     async updateYearValues() {
+        return await useMainStore().getVehicleYears();
      },
      async updateMakeValues() {
         return await this.mainStore.getVehicleMakes();
@@ -152,7 +168,7 @@ props:{
        vehicleBanner,
        siteFooter,
        Form,
-       VehicleQuestion
+       vehicleQuestion
    },
 };
 </script>