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

40
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,6 +16,8 @@
@keydown.enter.prevent /> @keydown.enter.prevent />
</div> </div>
</div> </div>
<transition name="fade" mode="out-in">
<div v-if="showAllFields">
<div class="row mt-2 mb-4" v-if="includeStreetAddress2"> <div class="row mt-2 mb-4" v-if="includeStreetAddress2">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
@ -42,7 +29,6 @@
/> />
</div> </div>
</div> </div>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite"> <div class="row mb-4" aria-live="polite">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
@ -54,8 +40,6 @@
validationRules="city-required" /> validationRules="city-required" />
</div> </div>
</div> </div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite"> <div class="row mb-4" aria-live="polite">
<div class="col"> <div class="col">
<dropdownQuestion <dropdownQuestion
@ -78,8 +62,22 @@
validationRules="zip-code-required|zip-code-format" /> validationRules="zip-code-required|zip-code-format" />
</div> </div>
</div> </div>
</div>
</transition> </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> </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: {