147 lines
No EOL
4.2 KiB
Vue
147 lines
No EOL
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="fade-on-route-transition">
|
|
<siteHeader cmsWidgetName="Header"/>
|
|
<siteSubHeader cmsWidgetName="SubHeader"/>
|
|
<p>Welcome Page Placeholder</p>
|
|
<br />
|
|
<div class="col">
|
|
<dropdownQuestion
|
|
cmsWidgetName="LossStateQuestionWidget"
|
|
v-model="addressModel.lossState"
|
|
ref="lossState"
|
|
inputId="LossStateQuestionWidget"
|
|
:options="stateOptions"
|
|
disableAutoFill
|
|
validationRules="loss-state-required"
|
|
/>
|
|
</div>
|
|
<navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
|
|
<navButton text="Google" :scenario="this.navigationScenarios.CLICKED_TEST"></navButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import navButton from "@/common-components/nav-button/nav-button";
|
|
import siteHeader from '@/common-components/site-header/site-header';
|
|
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
|
import { defineRule } from "vee-validate";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
|
|
//define validation rules
|
|
defineRule("loss-state-required", required(errorMessages.STATE_REQUIRED));
|
|
|
|
export default ({
|
|
name: "welcome-page",
|
|
emits: ['update:modelValue'], // The component emits an event
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({
|
|
lossState: "",
|
|
}),
|
|
},
|
|
validationRules: String,
|
|
},
|
|
components: { navButton, siteHeader, dropdownQuestion, siteSubHeader },
|
|
async beforeRouteEnter(to, from, next)
|
|
{
|
|
// 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);
|
|
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
});
|
|
},
|
|
computed:
|
|
{
|
|
stateOptions: {
|
|
get: function () {
|
|
return {
|
|
'AL': 'Alabama',
|
|
'AK': 'Alaska',
|
|
'AZ': 'Arizona',
|
|
'AR': 'Arkansas',
|
|
'CA': 'California',
|
|
'CO': 'Colorado',
|
|
'CT': 'Connecticut',
|
|
'DE': 'Delaware',
|
|
'DC': 'District Of Columbia',
|
|
'FL': 'Florida',
|
|
'GA': 'Georgia',
|
|
'HI': 'Hawaii',
|
|
'ID': 'Idaho',
|
|
'IL': 'Illinois',
|
|
'IN': 'Indiana',
|
|
'IA': 'Iowa',
|
|
'KS': 'Kansas',
|
|
'KY': 'Kentucky',
|
|
'LA': 'Louisiana',
|
|
'ME': 'Maine',
|
|
'MD': 'Maryland',
|
|
'MA': 'Massachusetts',
|
|
'MI': 'Michigan',
|
|
'MN': 'Minnesota',
|
|
'MS': 'Mississippi',
|
|
'MO': 'Missouri',
|
|
'MT': 'Montana',
|
|
'NE': 'Nebraska',
|
|
'NV': 'Nevada',
|
|
'NH': 'New Hampshire',
|
|
'NJ': 'New Jersey',
|
|
'NM': 'New Mexico',
|
|
'NY': 'New York',
|
|
'NC': 'North Carolina',
|
|
'ND': 'North Dakota',
|
|
'OH': 'Ohio',
|
|
'OK': 'Oklahoma',
|
|
'OR': 'Oregon',
|
|
'PA': 'Pennsylvania',
|
|
'RI': 'Rhode Island',
|
|
'SC': 'South Carolina',
|
|
'SD': 'South Dakota',
|
|
'TN': 'Tennessee',
|
|
'TX': 'Texas',
|
|
'UT': 'Utah',
|
|
'VT': 'Vermont',
|
|
'VA': 'Virginia',
|
|
'WA': 'Washington',
|
|
'WV': 'West Virginia',
|
|
'WI': 'Wisconsin',
|
|
'WY': 'Wyoming',
|
|
}
|
|
}
|
|
},
|
|
addressModel:
|
|
{
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
p {
|
|
font-weight: bold;
|
|
color: purple;
|
|
}
|
|
|
|
</style> |