commit
This commit is contained in:
Kulbhushan Kaushik
parent
d86126c1e4
commit
dac63255f1
2 changed files with 183 additions and 27 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<h5 class="text-center fw-normal mb-0" :class="headerColor">
|
||||
<h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<p class="text-center small fw-normal mb-0">
|
||||
<p class="text-center small fw-normal mb-0 subheader-secondary">
|
||||
<span>
|
||||
{{ subText }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,89 @@
|
|||
<template>
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition">
|
||||
<siteHeader cmsWidgetName="Header"/>
|
||||
<siteSubHeader cmsWidgetName="SubHeader"/>
|
||||
<div class="row mt-2">
|
||||
<textboxQuestion
|
||||
type="date"
|
||||
cmsWidgetName="dmgDate"
|
||||
v-model="test"
|
||||
inputId="dmgDate"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0,10)"
|
||||
:min="'1972-12-01'"
|
||||
/>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<div class="col">
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
id="damageCauseField"
|
||||
id="policyNumberField"
|
||||
cmsWidgetName="PolicyNumberQuestion"
|
||||
v-model="policyNumber"
|
||||
validationRules="policy-number-required" />
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
id="policyZipField"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
v-model="policyZip"
|
||||
validationRules="policy-zip-required" />
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
type="date"
|
||||
cmsWidgetName="DateOfLossQuestion"
|
||||
v-model="test"
|
||||
inputId="dateOfLossField"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0,10)"
|
||||
:min="'1972-12-01'"
|
||||
validationRules="loss-date-required"
|
||||
/>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
v-model="damageCause"
|
||||
ref="damageCause"
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
validationRules="loss-cause-required"
|
||||
placeholderText="Select an option"
|
||||
includeSelectIcon
|
||||
disableAutoFill
|
||||
validationRules="damage-cause-required" />
|
||||
/>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
id="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
v-model="damageCity"
|
||||
validationRules="loss-city-required" />
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
v-model="state"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
validationRules="loss-state-required"
|
||||
placeholderText="Select an option"
|
||||
/>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
id="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
validationRules="phone-number-required" />
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
id="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
v-model="email"
|
||||
validationRules="email-address-required" />
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<site-footer
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
<buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -42,13 +96,25 @@
|
|||
import { errorMessages } from "@/constants/error-messages";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
|
||||
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||
import siteFooter from "@/common-components/site-footer/site-footer";
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
|
||||
//define validation rules
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
||||
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
||||
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
|
||||
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
|
||||
|
||||
export default {
|
||||
name: "welcome-page",
|
||||
mixins: [BaseFormMixin],
|
||||
emits: ['update:modelValue'], // The component emits an event
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
@ -79,12 +145,102 @@
|
|||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
computed:{
|
||||
DamageCauseOptions() {
|
||||
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
|
||||
const answerArray = [];
|
||||
for (let answer of Object.values(damageCauseAnswers)) {
|
||||
if (answer?.Name) {
|
||||
answerArray.push(answer.Name);
|
||||
}
|
||||
}
|
||||
return answerArray;
|
||||
},
|
||||
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",
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
buttonQuestionModal,
|
||||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
siteFooter
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.subheader-primary
|
||||
{
|
||||
font-weight: 300 !important;
|
||||
font-size: 26px;
|
||||
line-height: 36px !important;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.subheader-secondary
|
||||
{
|
||||
font-weight: 300 !important;
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
color: #000000 !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue