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

<template>
    <div class="page-container-grouped-styles">
      <siteHeader cmsWidgetName="SiteHeaderWidget" />
      <div class="select-car">
        <div class="select-car-form rounded text-center">
          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
          <siteSubHeader
            cmsWidgetName="SiteSubHeaderWidget"
            :hasBackButton="true"
            :backButtonAccessibleText="backButtonAccessibleText"
            @click-event="backButtonAction"
          />
          <div class="fade-on-route-transition">
            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
          </div>
          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
        </div>
      </div>
    </div>
  </template>

  <script>
  // Components
  import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
  import siteHeader from "@/iss-components/site-header/site-header";
  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
  import siteFooter from "@/iss-components/site-footer/site-footer";

  // Supporting files
  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
  import { settleAllPromises } from "@/helpers/layout-helper";

  export default {
    name: "vehicle-model",
    data() {
      return {
        selectedModel: null,
        shouldHideForwardButton: true
      };
    },
    async beforeRouteEnter(to, from, next) {
      // Call APIs
      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
      const modelQuestionInitialDataPromise =
        modelQuestion.methods.loadInitialData();

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

      const resultMap = await settleAllPromises(promiseResultMap);

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

    methods: {
        backButtonAction() {
        // route to move backwards
            this.$router.navigate(
            this.navigationScenarios.CLICKED_BACK,
            this.$route
            );
        },
        arePagePrerequisitesValid()
        {
            if(this.mainStore.order.vehicle.make){
                return true;
            }
            return false;
        },
    },
    computed: {
      backButtonAccessibleText()
      {
        return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
      }
    },
    watch: {
      selectedModel(model) {
        this.mainStore.updateVehicleModel( model );
        this.$router.navigate(
          this.navigationScenarios.SELECTED_MODEL,
          this.$route
        );
      },
    },
    components: {
      modelQuestion,
      siteHeader,
      siteSubHeader,
      vehicleBanner,
      siteFooter
    },
  };
  </script>