From c6b59f1421774750ff63ee3de8b3ba28934d880c Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Feb 2023 08:37:49 -0500 Subject: [PATCH] Model reset stuff, still need to change address-questions to use normal names --- src/digital-components/modal/modal.vue | 3 +- .../mobile-location-modal-questions.vue | 119 ++++++++---------- .../service-zip-modal-question.vue | 78 +++++++----- 3 files changed, 101 insertions(+), 99 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 0586b9f1a..0034b5155 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -75,7 +75,8 @@ export default { }, methods: { async validateAndEmit() { - if (!this.isFooterButtonDisabled) { + const validationResult = await this.form.validate(); + if (validationResult.valid) { this.$emit("footer-button-event"); } this.resetButtonStyle(); diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 60f698ef4..aeb7a9607 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -25,11 +25,11 @@ @footer-button-event="setMobileLocation"> @@ -43,25 +43,15 @@ import alert from "@/ux-components/alert/alert"; import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question"; import textBlock from "@/digital-components/text-block/text-block"; +import { useForm } from "vee-validate"; export default { name: "mobile-location-modal-questions", emits: ["update:modelValue"], // The component emits an event data() { return { - mobileLocationQuestionsInput: { - addressQuestions: { - streetAddress: "", - apartmentNumberOrBusinessName: "", - city: "", - state: "", - zipCode: "", - }, - isVehicleProtected: null, - isZipServiceableMobile: null, - isZipServiceableInShop: null, - }, - }; + internalModel: this.copyModel(this.modelValue), + } }, props: { modelValue: { @@ -74,9 +64,9 @@ export default { state: "", zipCode: "", }, - isVehicleProtected: Boolean, - isZipServiceableMobile: Boolean, - isZipServiceableInShop: Boolean, + isVehicleProtected: null, + isZipServiceableMobile: null, + isZipServiceableInShop: null, }), }, serviceZipCode: String, @@ -88,9 +78,6 @@ export default { alertInvalidZipWidgetName: String, }, computed: { - getModalId() { - return "#" + this.modalWidgetName; - }, mobileLocationLinkPromptText() { return this.getCmsContent(this.linkWidgetName, "HeaderText"); }, @@ -114,73 +101,77 @@ export default { modalName() { return this.modalWidgetName; }, - mobileLocationQuestionsModel: { - get: function () { - return this.modelValue; - }, - set: function (newValue) { - this.$emit("update:modelValue", newValue); - }, - }, addressModel: { get: function () { - return this.mobileLocationQuestionsModel.addressQuestions; - }, - }, - addressModelInput: { - get: function () { - return this.mobileLocationQuestionsInput.addressQuestions; + return this.modelValue.addressQuestions; }, }, }, methods: { + copyModel(modelToCopy) { + return { + addressQuestions: { + streetAddress: modelToCopy.addressQuestions.streetAddress, + apartmentNumberOrBusinessName: modelToCopy.addressQuestions.apartmentNumberOrBusinessName, + city: modelToCopy.addressQuestions.city, + state: modelToCopy.addressQuestions.state, + zipCode: modelToCopy.addressQuestions.zipCode, + }, + isVehicleProtected: modelToCopy.isVehicleProtected, + isZipServiceableMobile: modelToCopy.isZipServiceableMobile, + isZipServiceableInShop: modelToCopy.isZipServiceableInShop, + } + }, + openModal() { this.$refs[this.modalName].openModal(); }, - onModalOpened() { - this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel; - }, + closeModal() { this.$refs[this.modalName].closeModal(); }, - onModalClosed() { - this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel; - }, + resetComponent() { - // Address - this.addressModelInput.streetAddress = ""; - this.addressModelInput.apartmentNumberOrBusinessName = ""; - this.addressModelInput.city = ""; - this.addressModelInput.state = ""; - this.addressModelInput.zipCode = ""; - - // Is Vehicle Protected - this.mobileLocationQuestionsInput.isVehicleProtected = null; + this.resetModel(); - this.$refs[this.modalName].form.resetForm(); + // Reset the validation form + this.$refs[this.modalName].form.resetForm({ + values: { + "8fdf9dc2e13e430eb57529499dceb3eb": "OH" + } + + + }); + // Reinitialize the Address Auto Complete this.$refs.addressQuestions.setupAddressLookup(); }, + + resetModel() { + // Address + this.internalModel.addressQuestions.streetAddress = ""; + this.internalModel.addressQuestions.apartmentNumberOrBusinessName = ""; + this.internalModel.addressQuestions.city = ""; + this.internalModel.addressQuestions.state = ""; + this.internalModel.addressQuestions.zipCode = ""; + + // Is Vehicle Protected + this.internalModel.isVehicleProtected = null; + }, + async setMobileLocation() { // TODO: Any lookups or actions to be taken before assigning the Mobile Location - this.mobileLocationQuestionsModel = { - addressQuestions: { - streetAddress: this.addressModelInput.streetAddress, - apartmentNumberOrBusinessName: - this.addressModelInput.apartmentNumberOrBusinessName, - city: this.addressModelInput.city, - state: this.addressModelInput.state, - zipCode: this.addressModelInput.zipCode, - }, - isVehicleProtected: this.mobileLocationQuestionsInput.isVehicleProtected, - isZipServiceableMobile: this.mobileLocationQuestionsInput.isZipServiceableMobile, - isZipServiceableInShop: this.mobileLocationQuestionsInput.isZipServiceableInShop, - }; + this.$emit("update:modelValue", this.internalModel); this.closeModal(); }, }, + watch: { + modelValue(newValue) { + this.internalModel = this.copyModel(newValue); + } + }, components: { textLink, modal, diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 27321d111..735dd6328 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -20,7 +20,7 @@ + v-model="internalModel.zipCode" /> ({ - serviceZipQuestion: { - state: "", - zipCode: "", - isServiceable: null, - }, + state: "", + zipCode: "", + isServiceable: null, }), }, linkWidgetName: String, @@ -87,14 +85,14 @@ export default { modalName() { return this.modalWidgetName; }, - serviceZipModel: { - get: function () { - return this.modelValue; - }, - set: function (newValue) { - this.$emit("update:modelValue", newValue); - }, - }, + // serviceZipModel: { + // get: function () { + // return this.modelValue; + // }, + // set: function (newValue) { + // this.$emit("update:modelValue", newValue); + // }, + // }, }, methods: { resetAlerts() { @@ -111,6 +109,14 @@ export default { input.focus(); }, + copyModel(modelToCopy) { + return { + state: modelToCopy.state, + zipCode: modelToCopy.zipCode, + isServiceable: modelToCopy.isServiceable, + } + }, + openModal() { this.$refs[this.modalName].openModal(); }, @@ -119,35 +125,36 @@ export default { this.$refs[this.modalName].closeModal(); }, - onModalOpened() { - this.serviceZipCodeInput = this.serviceZipModel.zipCode; - this.focusOnZipInput(); - }, + // onModalOpened() { + // this.serviceZipCodeInput = this.serviceZipModel.zipCode; + // this.focusOnZipInput(); + // }, - onModalClosed() { - this.serviceZipCodeInput = this.serviceZipModel.zipCode; - this.resetsOnZipInput(); - }, + // onModalClosed() { + // this.serviceZipCodeInput = this.serviceZipModel.zipCode; + // this.resetsOnZipInput(); + // }, async setZipCode() { this.resetAlerts(); - const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput); + const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode); if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; this.focusOnZipInput(); } else { - // if the service zip code changes we need to clear the Mobile Location Model - if (this.serviceZipModel.zipCode !== "" && this.serviceZipCodeInput !== this.serviceZipModel.zipCode ) { + this.internalModel.state = zipCodeData.state; + this.internalModel.isServiceable = zipCodeData.isServiceable; + + // if the service zip code is changing we need to clear the Mobile Location Model + if (this.modelValue.zipCode !== "" && this.internalModel.zipCode !== this.modelValue.zipCode ) { this.$emit("service-zip-updated"); } - this.serviceZipModel = { - state: zipCodeData.state, - zipCode: this.serviceZipCodeInput, - isServiceable: zipCodeData.isServiceable, - }; + this.$emit("update:modelValue", this.internalModel); + + this.closeModal(); } @@ -157,6 +164,9 @@ export default { serviceZipCodeInput() { this.resetsOnZipInput(); }, + modelValue(newValue) { + this.internalModel = this.copyModel(newValue); + } }, components: { textLink,