refactor

src/constants/query-strings.js

@@ -1,5 +1,5 @@
 const queryStrings = {
-    ISS_PAGE: 'issPage'
+    ISS_PAGE: 'issPage',
   };
   
   export { queryStrings };

src/layouts/entry-page/entry-page.vue

@@ -33,15 +33,17 @@
                     this.$route
                 );
             },
-            async validateClientTagOnEntry() {
-
+            parseQueryParms() {
                 // Dump the query string parameters into an array. Remove casing on the key for easy compare.
                 let queryStringParams = [];
                 for ( let param in this.$route.query)
                 {
                     queryStringParams[param.toLowerCase()] = this.$route.query[param];
                 }
-
+                return queryStringParams;
+            },
+            async validateClientTagOnEntry() {
+                const queryStringParams = this.parseQueryParms();
                 const clientTag = queryStringParams["clienttag"];
                 const clientTagPresent = !!clientTag;
                 let authorized = false;

src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue

@@ -1,6 +1,6 @@
 <template>
   <dropdownQuestion
-  :options="Options"
+  :options="values"
   disableAutoFill
   placeHolderText="Select an option"
   v-model="selectedValue"
@@ -31,18 +31,28 @@ export default {
         return this.modelValue?.toString();
       },
       set: function(newValue) {
-        this.$emit("update:modelValue",newValue?.toString());
+        if(newValue)
+        {
+          const val = this.values[newValue]
+          this.$emit("update:modelValue", val);
+        }
+        else
+        {
+          this.$emit("update:modelValue", null);
+        }
       }
     },
-    Options() {      
-          return this.values;
-      },
   },
   methods: {  
     async getNewValues() {
       const results = await this.updateValues();
-      this.values = results?.data;      
+      this.values = results?.data;   
+      this.selectedValue = null;  
     },
+    clearValues() {
+      this.values = [];
+      this.selectedValue = null;
+    }
   },
 };
 </script>

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -15,6 +15,7 @@
                                <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
+                                 class="mx-4"
                                  cmsWidgetName="SiteFooterWidget"
                                  @ForwardClicked="forwardButtonAction"
                                  :isForwardActionDisabled="!meta.valid"
@@ -37,7 +38,7 @@ 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 "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue";
 import { useMainStore } from '@/store';
 
 // Supporting files
@@ -65,110 +66,136 @@ export default {
            selectedStyle: null,           
        };
    },
-props:{
-    cmsWidgetName:String,
-    validationRules:String,
-},
+    props:{
+        cmsWidgetName:String,
+        validationRules:String,
+    },
   
-   mounted(){     
-     this.Years.getNewValues();
-   },
+    mounted(){     
+        this.Years.getNewValues();
+    },
 
-   async beforeRouteEnter(to, from, next) {
-       // Call APIs
-       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);       
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);       
 
-       // Settle promises and get results
-       const promiseResultMap = [
-           {
-               resultKey: "cmsContent",
-               promise: cmsContentPromise,
-           },        
-       ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },        
+        ];
 
-       let resultMap = await settleAllPromises(promiseResultMap);
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-       // Call the "next" function to complete the transition to this page.
-       next((vm) => {         
-           vm.setCmsContent(resultMap.cmsContent);
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {         
+            vm.setCmsContent(resultMap.cmsContent);
     });
-      
-  },
-   watch: {
-       selectedYear(yearIndex) {
-           const parsedYearIndex = parseInt(yearIndex);           
-           this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
-           this.Makes.getNewValues();
-       },
-       selectedMake(makeIndex) {
-        const parsedMakeIndex = parseInt(makeIndex);    
-           this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
-           this.Models.getNewValues();      
-       },
-       selectedModel(modelIndex) {
-        const parsedModelIndex = parseInt(modelIndex); 
-           this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
-            this.Styles.getNewValues();           
-       },
-       selectedStyle(styleIndex) {
-        const parsedStyleIndex = parseInt(styleIndex); 
-           this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
-       },
-   },
-computed:{
-    Years(){
-        return this.$refs["vehicleYearQuestion"];
+        
     },
-    Makes(){
-        return this.$refs["vehicleMakeQuestion"];
+    watch: {
+        selectedYear(value) {
+            this.mainStore.updateVehicleYear(value);
+            if(value)
+            {   
+                this.Makes.getNewValues();
+            }
+            else{
+                this.Makes.clearValues();
+            }
+        },
+        selectedMake(value) {
+            this.mainStore.updateVehicleMake(value);
+            if(value)
+            {   
+                this.Models.getNewValues();
+            }
+            else{
+                this.Models.clearValues();
+            }
+        },
+        selectedModel(value) {
+            this.mainStore.updateVehicleModel(value);
+            if(value)
+            {   
+                this.Styles.getNewValues();
+            }
+            else{
+                this.Styles.clearValues();
+            }
+        },
+        selectedStyle(value) {
+            this.mainStore.updateVehicleStyle(value);
+        },
     },
-    Models(){
-        return this.$refs["vehicleModelQuestion"];
-    },
-    Styles(){
-        return this.$refs["vehicleStyleQuestion"];
-    }
+    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;
-       },
-       backButtonAction() {
-           this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-       },
-       async forwardButtonAction() {
-         return this.navigateForward();
-     },
+        handleValueChange(thisQuestion, nextQuestion, storeMethod, index)
+        {
+            if(index === 0)
+            {
+                storeMethod(null);
+                nextQuestion.clearValues();
+            }
+            else{
+                storeMethod(thisQuestion.values[index]);
+                nextQuestion.getNewValues();
+            }
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {
+            return this.navigateForward();
+        },
 
-     navigateForward() {
-        this.mainStore.setVehicle().then(() => {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
-            });
-     },    
-     async updateYearValues() {
-        return await useMainStore().getVehicleYears();
-     },
-     async updateMakeValues() {
-        return await this.mainStore.getVehicleMakes();
-     },
-     async updateModelValues() {
-        return await this.mainStore.getVehicleModels();
-     },
-     async updateStyleValues() {
-        return await this.mainStore.getVehicleStyles();
-     },
+        navigateForward() {
+            this.mainStore.setVehicle().then(() => {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD,
+                        this.$route
+                    );
+                });
+        },    
+        async updateYearValues() {
+            return await useMainStore().getVehicleYears();
+        },
+        async updateMakeValues() {
+            return await this.mainStore.getVehicleMakes();
+        },
+        async updateModelValues() {
+            return await this.mainStore.getVehicleModels();
+        },
+        async updateStyleValues() {
+            return await this.mainStore.getVehicleStyles();
+        },
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter,
+        Form,
+        vehicleQuestion
     },
-   components: {
-       siteHeader,
-       siteSubHeader,
-       vehicleBanner,
-       siteFooter,
-       Form,
-       vehicleQuestion
-   },
 };
 </script>