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

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >  
   <div class="page-container-grouped-styles position-relative">
       <div class="fade-on-route-transition position-relative">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
           <div class="select-car">
               <div class="container-fluid pb-2">
                   <div class="row">
                       <div class="col">
                           <div class="select-car-form rounded">
                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
                               <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
                               <makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
                               <modelQuestion v-model="selectedModel" :updateValues="updateModelValues"  ref="modelQuestion" class="px-4 mb-2 mt-4"/>
                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
                               <siteFooter
                                 cmsWidgetName="SiteFooterWidget"
                                 @ForwardClicked="forwardButtonAction"
                                 :isForwardActionDisabled="!meta.valid"
                                 @back-clicked="backButtonAction"
                                 ref="siteFooter"
                                 />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</Form>
</template>

<script>
// Components
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 yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";

// Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {Form} from "vee-validate";

export default {
   name: "vehicle-selection",
   mixins: [BaseFormMixin],
   data() {
       return {
           selectedYear: null,
           selectedMake: null,
           selectedModel: null,
           selectedStyle: null,
           years: []
       };
   },

   async beforeRouteEnter(to, from, next) {
       // Call APIs
       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
       const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
       const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
        const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
       const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();

       // Settle promises and get results
       const promiseResultMap = [
           {
               resultKey: "cmsContent",
               promise: cmsContentPromise,
           },
           {
               resultKey: "yearQuestionInitialData",
               promise: yearQuestionInitialDataPromise,
           },
           {
               resultKey: "makeQuestionInitialData",
               promise: makeQuestionInitialDataPromise,
           },
           {
               resultKey: "modelQuestionInitialData",
               promise: modelQuestionInitialDataPromise,
           },
           {
               resultKey: "styleQuestionInitialData",
               promise: styleQuestionInitialDataPromise,
           },

       ];

       let resultMap = await settleAllPromises(promiseResultMap);

       // Call the "next" function to complete the transition to this page.
       next((vm) => {
        vm.years = resultMap.yearQuestionInitialData;
           vm.setCmsContent(resultMap.cmsContent);
           vm.$refs.yearQuestion.initializeComponent(
               resultMap.yearQuestionInitialData
           );
           vm.$refs.makeQuestion.initializeComponent(
               resultMap.makeQuestionInitialData
           );
       
           vm.$refs.modelQuestion.initializeComponent(
               resultMap.modelQuestionInitialData
           );
           vm.$refs.styleQuestion.initializeComponent(
               resultMap.styleQuestionInitialData
               );
    });
      
  },
   watch: {
       selectedYear(yearIndex) {
           const parsedYearIndex = parseInt(yearIndex);
           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );

           this.$refs["makeQuestion"].getNewValues();

       },
       selectedMake(make) {
           this.mainStore.updateVehicleMake( make );
           this.$refs["modelQuestion"].getNewValues();           
       },
       selectedModel(model) {
           this.mainStore.updateVehicleModel( model );
           this.$refs["styleQuestion"].getNewValues(); 
       },
       selectedStyle(style) {
           this.mainStore.updateVehicleStyle( style );
       },
   },

   methods: {
       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 updateMakeValues() {
        return await this.mainStore.getVehicleMakes();
     },
     async updateModelValues() {
        return await this.mainStore.getVehicleModels();
     },
     async updateStyleValues() {
        return await this.mainStore.getVehicleStyles();
     }
   },

   components: {
       yearQuestion,
       makeQuestion,
       modelQuestion,
       siteHeader,
       siteSubHeader,
       vehicleBanner,
       siteFooter,
       Form,
       styleQuestion,
   },
};
</script>