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