commit

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,82 +1,74 @@
 <template>
-<div>
-    <div class="fade-on-route-transition">
-        <siteHeader cmsWidgetName="Header"/>
-        <navButton type="button" text="back" :scenario="this.navigationScenarios.CLICKED_BACK"></navButton>
-        <p>Vehicle Year Placeholder</p>
-        <input type="text" v-model="year"/>
-        <span>{{returnVehicleYear}}</span> 
-        <button @click="updateVehicleYear(year)">Add</button>
-        
+    <div class="page-container-grouped-styles">
+      <siteHeader cmsWidgetName="SiteHeaderWidget" />
+      <div class="select-car">
+        <div class="select-car-form rounded text-center">
+          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+          <div class="fade-on-route-transition">
+            <yearQuestion 
+              class="fade-on-route-transition"
+              v-model="selectedYear" 
+              ref="yearQuestion" 
+              cmsWidgetName="VehicleYearQuestion" 
+            />
+          </div>
+        </div>
+      </div>
     </div>
-    <div>
-        <textboxQuestion cmsWidgetName="PolicyZipQuestionWidget" v-model="policyZipCode" inputId="policyZipCode" mask="#####"  validationRules="policy-zip-required|policy-zip-format" />
-    </div>
-</div>
-</template>
-
-<script>
-    import navButton from '@/common-components/nav-button/nav-button';
-    import siteHeader from '@/common-components/site-header/site-header';
-    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { defineRule } from "vee-validate";
-    import { required } from "@/helpers/validation-rules";
-    import { regex } from "@/helpers/validation-rules";
-    import { errorMessages } from "@/constants/error-messages";
-
-    defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
-    defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
-
-    export default {
-        name: 'vehicle-year',
-       
-        async beforeRouteEnter(to, from, next) 
+  </template>
+  
+  <script>
+  // Components
+  import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+  import siteHeader from "@/common-components/site-header/site-header";
+  import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+  
+  // Supporting files
+  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+  import { settleAllPromises } from "@/helpers/layout-helper";
+  
+  export default {
+    name: "vehicle-year",
+    data() {
+      return {
+        selectedYear: null,
+      };
+    },
+    computed: {},
+  
+    async beforeRouteEnter(to, from, next) {
+      // Call APIs
+      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+      const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+  
+      // Settle promises and get results
+      const promiseResultMap = [
         {
-            // Call APIs
-            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-            // Settle promises and get results
-            const promiseResultMap = [
-                {
-                    resultKey: "cmsContent",
-                    promise: cmsContentPromise,
-                },
-            ];
-            
-            //use resultMap to populate layout content.
-            let resultMap = await settleAllPromises(promiseResultMap);
-
-            // Call the "next" function to complete the transition to this page.
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
-            });
+          resultKey: "cmsContent",
+          promise: cmsContentPromise,
         },
-        data()
         {
-            return {
-                policyZipCode: ""
-            }
+          resultKey: "yearQuestionInitialData",
+          promise: yearQuestionInitialDataPromise,
         },
-        methods:
-        {
-            updateVehicleYear(item) 
-            {
-               this.mainStore.updateVehicleYear(item);
-            }
-        },
-        computed:
-        {
-            returnVehicleYear()
-            {
-               return this.mainStore.order.vehicle.year;
-            }
-        },
-        components: { 
-            navButton,
-            textboxQuestion,
-            siteHeader,
-         },
-    }
-</script>
+      ];
+  
+      let resultMap = await settleAllPromises(promiseResultMap);
+  
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
+        vm.$refs.yearQuestion.initializeComponent(
+          resultMap.yearQuestionInitialData
+        );
+      });
+    },
+    
+    components: {
+      yearQuestion,
+      siteHeader,
+      siteSubHeader,
+    },
+  };
+  </script>
+  

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

@@ -14,6 +14,7 @@
   
   <script>
   import buttonQuestion from "@/common-components/button-question/button-question";
+  import { useMainStore } from '@/store';
   
   export default {
     name: "year-question",
@@ -44,7 +45,7 @@
     },
     methods: {
       loadInitialData() {
-        return this.mainStore.getVehicleYears();
+        return useMainStore().getVehicleYears();
       },
       initializeComponent(initialData) {
         this.years = initialData;