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

<template>
   <Form
    ref="theForm"
    v-slot="{ meta }"
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit">
   <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="center"
                                    darkGraySubText />

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

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

                                <siteFooter
                                    ref="siteFooter"
                                    class="mt-5"
                                    cmsWidgetName="SiteFooterWidget"
                                    :isForwardActionDisabled="!meta.valid"
                                    @ForwardClicked="forwardButtonAction"
                                    @backClicked="backButtonAction" />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</Form>
</template>

<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
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 } 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',
    components: {
        siteHeader,
        siteSubHeader,
        vehicleBanner,
        siteFooter,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        vehicleQuestion
    },
    mixins: [baseFormMixin],

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

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

        const resultMap = await settleAllPromises(promiseResultMap);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    props: {
        cmsWidgetName: String,
        validationRules: String
    },
    data() {
        return {
            selectedYear: null,
            selectedMake: null,
            selectedModel: null,
            selectedStyle: null
        };
    },
    computed: {
        displayGeneric() {
            return !this.selectedStyle;
        }
    },

    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();
        }
    },
    mounted() {
        this.$refs.vehicleYearQuestion.getNewValues();
    },
    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 useMainStore().getVehicleYears();
        },
        async updateMakeValues() {
            return this.mainStore.getVehicleMakes();
        },
        async updateModelValues() {
            return this.mainStore.getVehicleModels();
        },
        async updateStyleValues() {
            return this.mainStore.getVehicleStyles();
        }
    }
};
</script>

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

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