Model reset stuff, still need to change address-questions to use normal names
This commit is contained in:
Leah Schumann
parent
d7fa90ee58
commit
c6b59f1421
3 changed files with 101 additions and 99 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
@footer-button-event="setMobileLocation">
|
||||
<addressQuestions
|
||||
ref="addressQuestions"
|
||||
v-model="mobileLocationQuestionsInput.addressQuestions"
|
||||
v-model="internalModel.addressQuestions"
|
||||
captureApartmentNumberOrBusinessName="true" />
|
||||
<vehicleProtectedQuestion
|
||||
ref="vehicleProtectedQuestion"
|
||||
v-model="mobileLocationQuestionsInput.isVehicleProtected"
|
||||
v-model="internalModel.isVehicleProtected"
|
||||
cmsWidgetName="VehicleProtectedQuestionWidget" />
|
||||
<textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
|
||||
</modal>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<serviceZipQuestion
|
||||
ref="serviceZipQuestion"
|
||||
:cmsWidgetName="textboxQuestionWidgetName"
|
||||
v-model="serviceZipCodeInput" />
|
||||
v-model="internalModel.zipCode" />
|
||||
<alert
|
||||
ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
|
|
@ -44,26 +44,24 @@ import { required, regex } from "@/helpers/validation-rules";
|
|||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
// defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
// defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
|
||||
export default {
|
||||
name: "service-zip-modal-question",
|
||||
data() {
|
||||
return {
|
||||
serviceZipCodeInput: null,
|
||||
internalModel: this.copyModel(this.modelValue),
|
||||
displayInvalidZipAlert: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue