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

Added programmatic watch for address model when an address is not found

Browse source
This commit is contained in:
Leah Schumann 2022-12-13 16:27:43 -05:00
parent 0b6eed45ac
commit 2bc14c5a31
1 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -111,8 +111,9 @@ export default {
alertHeadlineNoMatchWarning: "", alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "", alertCopyNoMatchWarning: "",
matchingIndirectly: false, matchingIndirectly: false,
matchFound: false, matchFound: null, // null = no attempted match, true = match was found, false = match was not found
enterPressed: false, enterPressed: false,
unwatchAddress: null // handle to allow us to only deep watch the address model when a match was not found
}; };
}, },
computed: { computed: {
@ -262,7 +263,7 @@ export default {
const clickedAddress = document.querySelector( const clickedAddress = document.querySelector(
".pac-container .pac-item:hover" ".pac-container .pac-item:hover"
); );
// If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
if (clickedAddress === null) { if (clickedAddress === null) {
// Fill-in the address using first item in the list. // Fill-in the address using first item in the list.
@ -284,13 +285,8 @@ export default {
} }
); );
} else { } else {
// If there are no addresses found for the input then display empty address fields and warnings // No addresses found for the input
self.addressModel.city = ""; self.matchFound = false;
self.addressModel.state = "";
self.addressModel.zipCode = "";
self.showAddressFields = true;
self.displayVerificationWarning = false;
self.displayNoMatchWarning = true;
} }
} }
}); });
@ -299,7 +295,7 @@ export default {
if (!place) { if (!place) {
place = autocomplete.getPlace(); place = autocomplete.getPlace();
} }
if (place && place.address_components) { if (place && place.address_components) {
self.matchFound = true; self.matchFound = true;
self.addressModel.streetAddress = ""; self.addressModel.streetAddress = "";
@ -363,9 +359,27 @@ export default {
watch: { watch: {
matchFound: { matchFound: {
handler(newValue) { handler(newValue) {
if (newValue) { if (newValue === null) {
this.displayNoMatchWarning = false; this.displayNoMatchWarning = false;
this.unwatchAddress();
return;
} }
if (!newValue) {
this.displayNoMatchWarning = true;
this.addressModel.city = "";
this.addressModel.state = "";
this.addressModel.zipCode = "";
this.showAddressFields = true;
this.displayVerificationWarning = false;
// Only deep watch the Address Model after a failed match
this.unwatchAddress = this.$watch("addressModel", (newAddress) => {
// When the address model changes reset to "no attempted match"
this.matchFound = null;
}, { deep: true });
}
}, },
}, },
}, },