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="siteSubHeader"
                                    justification="left"
                                />

                                <vehicleQuestion
                                    ref="vehicleYearQuestion"
                                    class="mb-2 mt-4"
                                    v-model="selectedYear"
                                    cmsWidgetName="VehicleYearQuestion"
                                    :updateValues="updateYearValues"
                                    validationRules="year-required"
                                    inputId="yearQuestionField"
                                />
                                <vehicleQuestion
                                    ref="vehicleMakeQuestion"
                                    class="mb-2 mt-4"
                                    v-model="selectedMake"
                                    cmsWidgetName="VehicleMakeQuestion"
                                    :updateValues="updateMakeValues"
                                    validationRules="make-required"
                                    inputId="makeQuestionField"
                                />
                                <vehicleQuestion
                                    ref="vehicleModelQuestion"
                                    class="mb-2 mt-4"
                                    v-model="selectedModel"
                                    cmsWidgetName="VehicleModelQuestion"
                                    :updateValues="updateModelValues"
                                    validationRules="model-required"
                                    inputId="modelQuestionField"
                                />
                                <vehicleQuestion
                                    ref="vehicleStyleQuestion"
                                    class="mb-2 mt-4"
                                    v-model="selectedStyle"
                                    cmsWidgetName="VehicleStyleQuestion"
                                    :updateValues="updateStyleValues"
                                    validationRules="style-required"
                                    inputId="styleQuestionField"
                                />

                                <vehicleBanner
                                    cmsWidgetName="VehicleBannerWidget"
                                    :displayGenericVehicleImage="displayGeneric"
                                    class="mt-5 mb-3"
                                    ref="banner"
                                />

                                <siteFooter
                                    class="mt-5"
                                    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 vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue";
import { useMainStore } from '@/store';

// 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, defineRule, useForm } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";

//define validation rules
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));

export default {
   name: "vehicle-selection",
   mixins: [baseFormMixin],
   data() {
       return {
           selectedYear: null,
           selectedMake: null,
           selectedModel: null,
           selectedStyle: null,
       };
   },
    props:{
        cmsWidgetName:String,
        validationRules:String,
    },
    mounted(){
        this.$refs["vehicleYearQuestion"].getNewValues();
    },

    async beforeRouteEnter(to, from, next) {
            // Call APIs
            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

            // Settle promises and get results
            const promiseResultMap = [
                {
                    resultKey: "cmsContent",
                    promise: cmsContentPromise,
                },
            ];

            let resultMap = await settleAllPromises(promiseResultMap);

            // Call the "next" function to complete the transition to this page.
            next((vm) => {
                vm.setCmsContent(resultMap.cmsContent);
        });
    },

    watch: {
        selectedYear(value) {
            this.mainStore.updateVehicleYear(value);
            this.$refs["vehicleMakeQuestion"].clearValues();
            if(value)
            {
                this.$refs["vehicleMakeQuestion"].getNewValues();
            }
        },
        selectedMake(value) {
            this.mainStore.updateVehicleMake(value);
            this.$refs["vehicleModelQuestion"].clearValues();
            if(value)
            {
                this.$refs["vehicleModelQuestion"].getNewValues();
            }
        },
        selectedModel(value) {
            this.mainStore.updateVehicleModel(value);
            this.$refs["vehicleStyleQuestion"].clearValues();
            if(value)
            {
                this.$refs["vehicleStyleQuestion"].getNewValues();
            }

        },
        selectedStyle(value) {
            this.mainStore.updateVehicleStyle(value);
            this.mainStore.setVehicle();
        },
    },
   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 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();
        },
    },
    computed: {
        displayGeneric() {
            return !this.selectedStyle;
        }
    },
    components: {
        siteHeader,
        siteSubHeader,
        vehicleBanner,
        siteFooter,
        Form,
        vehicleQuestion
    },
};
</script>

<style lang="scss">
    .select-car-form {
        margin-left: .75rem;
        margin-right: .75rem;
    }
    .siteSubHeader {
        margin-top: 1.5rem;
    }

    .subheader-secondary {
        margin-top: .5rem;
        padding: 0px;
    }
</style>