jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

commit

Browse source
This commit is contained in:
Kulbhushan Kaushik 2022-10-26 09:19:39 -04:00
parent 782a0623e8
commit 0ac2cb9eac
2 changed files with 70 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/layouts/vehicle-year/vehicle-year.vue
View file

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

3
src/layouts/vehicle-year/year-question/year-question.vue
View file

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