CSR-1012 | modal footer button updates
This commit is contained in:
parent
a24be0cc1d
commit
f746401311
2 changed files with 20 additions and 14 deletions
|
|
@ -35,7 +35,7 @@
|
||||||
ref="buttonMain"
|
ref="buttonMain"
|
||||||
suppressLoader
|
suppressLoader
|
||||||
:buttonText="ModalCloseButtonText"
|
:buttonText="ModalCloseButtonText"
|
||||||
@click-event="buttonMainClick" />
|
@click-event="footerButtonClick" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -49,8 +49,11 @@ export default {
|
||||||
name: "modal",
|
name: "modal",
|
||||||
props: {
|
props: {
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
buttonClick: {
|
|
||||||
|
footerButtonCallback: {
|
||||||
type: Function,
|
type: Function,
|
||||||
|
// return true to close modal
|
||||||
|
// if undefined, footer button closes modal
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -73,12 +76,7 @@ export default {
|
||||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||||
},
|
},
|
||||||
showModalBody() {
|
showModalBody() {
|
||||||
return (
|
return this.ModalBodyText;
|
||||||
this.ModalImage ||
|
|
||||||
this.ModalHeadline ||
|
|
||||||
this.ModalSubheadertext ||
|
|
||||||
this.ModalBodyText
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -88,9 +86,11 @@ export default {
|
||||||
closeModal() {
|
closeModal() {
|
||||||
this.$refs.modalXButton.click();
|
this.$refs.modalXButton.click();
|
||||||
},
|
},
|
||||||
buttonMainClick() {
|
async footerButtonClick() {
|
||||||
if (this.buttonClick) {
|
if (this.footerButtonCallback) {
|
||||||
this.buttonClick();
|
if (await this.footerButtonCallback()) {
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.closeModal();
|
this.closeModal();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,10 @@
|
||||||
aria-label="Modal window" />
|
aria-label="Modal window" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<modal ref="zipCodeInputModal" :cmsWidgetName="this.modalWidgetName" :buttonClick="setZip">
|
<modal
|
||||||
|
ref="zipCodeInputModal"
|
||||||
|
:cmsWidgetName="this.modalWidgetName"
|
||||||
|
:footerButtonCallback="setZip">
|
||||||
<div class="ps-4 pe-4 pb-4">
|
<div class="ps-4 pe-4 pb-4">
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="zipInputTextQuestion"
|
ref="zipInputTextQuestion"
|
||||||
|
|
@ -106,7 +109,7 @@ export default {
|
||||||
const zipLength = 5;
|
const zipLength = 5;
|
||||||
if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
|
if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
|
||||||
// prevent reading 1111 as 01111
|
// prevent reading 1111 as 01111
|
||||||
return;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
|
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
|
||||||
|
|
@ -119,8 +122,11 @@ export default {
|
||||||
this.serviceZip = this.serviceZipCodeInput;
|
this.serviceZip = this.serviceZipCodeInput;
|
||||||
this.serviceZipState = zipCodeData.state;
|
this.serviceZipState = zipCodeData.state;
|
||||||
|
|
||||||
this.$refs.zipCodeInputModal.closeModal();
|
// close modal
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue