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

Added hide/show ability for address2, city, state, zip fields and moved warning messages to be below the fields.

Browse source
This commit is contained in:
Jason Wheeler 2023-01-25 11:07:54 -05:00
parent 361b32a504
commit b0c403c652
1 changed files with 62 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/iss-components/address-questions/address-questions.vue
View file

@ -1,20 +1,5 @@
<template>
<div role="application">
<alert
ref="alertVerificationWarning"
v-if="displayVerificationWarning"
class="mb-4"
cmsWidgetName="AlertVerificationWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<alert
ref="alertNoMatchWarning"
v-if="displayNoMatchWarning"
class="mb-4"
cmsWidgetName="AlertNoMatchWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<div class="row mt-2 mb-4">
<div class="col">
<textboxQuestion
@ -31,55 +16,68 @@
@keydown.enter.prevent />
</div>
</div>
<div class="row mt-2 mb-4" v-if="includeStreetAddress2">
<div class="col">
<textboxQuestion
cmsWidgetName="StreetAddress2QuestionWidget"
v-model="addressModel.streetAddress2"
aria-haspopup=""
inputId="streetAddress2Field"
disableAutoFill
/>
</div>
</div>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<textboxQuestion
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
inputId="cbf28188fdf2436688fd735915f7ee56"
disableAutoFill
validationRules="city-required" />
<div v-if="showAllFields">
<div class="row mt-2 mb-4" v-if="includeStreetAddress2">
<div class="col">
<textboxQuestion
cmsWidgetName="StreetAddress2QuestionWidget"
v-model="addressModel.streetAddress2"
aria-haspopup=""
inputId="streetAddress2Field"
disableAutoFill
/>
</div>
</div>
<div class="row mb-4" aria-live="polite">
<div class="col">
<textboxQuestion
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
inputId="cbf28188fdf2436688fd735915f7ee56"
disableAutoFill
validationRules="city-required" />
</div>
</div>
<div class="row mb-4" aria-live="polite">
<div class="col">
<dropdownQuestion
cmsWidgetName="StateQuestionWidget"
v-model="addressModel.state"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
disableAutoFill
validationRules="state-required" />
</div>
<div class="col">
<textboxQuestion
cmsWidgetName="ZipQuestionWidget"
v-model="addressModel.zipCode"
ref="zipCode"
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
mask="#####"
disableAutoFill
validationRules="zip-code-required|zip-code-format" />
</div>
</div>
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<dropdownQuestion
cmsWidgetName="StateQuestionWidget"
v-model="addressModel.state"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
disableAutoFill
validationRules="state-required" />
</div>
<div class="col">
<textboxQuestion
cmsWidgetName="ZipQuestionWidget"
v-model="addressModel.zipCode"
ref="zipCode"
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
mask="#####"
disableAutoFill
validationRules="zip-code-required|zip-code-format" />
</div>
</div>
</transition>
<alert
ref="alertVerificationWarning"
v-if="displayVerificationWarning"
class="mb-4"
cmsWidgetName="AlertVerificationWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<alert
ref="alertNoMatchWarning"
v-if="displayNoMatchWarning"
class="mb-4"
cmsWidgetName="AlertNoMatchWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false" />
</div>
</template>
@ -130,6 +128,7 @@ export default {
matchFound: null, // null = no attempted match, true = match was found, false = match was not found
enterPressed: false,
isAddressWatchActive: false, // Only deep watch the address model when a match was not found
showAllFields: false,
};
},
computed: {
@ -210,6 +209,8 @@ export default {
// If a match has been previously found then do nothing
// OR
// If the user pressed "Enter" then do nothing
this.showAllFields = true;
if (self.matchFound || self.enterPressed) {
return;
}
@ -307,6 +308,7 @@ export default {
},
mounted() {
this.setupAddressLookup();
this.showAllFields = !!this.addressModel.streetAddress;
},
watch: {
matchFound: {