diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index c080e4f91..3a818e256 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -37,17 +37,17 @@ @focus="$emit('focus', $event.target.value)" /> - @@ -93,12 +93,12 @@ export default { cornerStyle: String, // Rounded or square. Square is default. includeSearchIcon: Boolean, includeCameraIcon: Boolean, + isImageLoading: Boolean, }, setup(props) { const propsClone = Object.assign({}, props); const modelValue = propsClone.modelValue; let initialValue; - let isLoading = ref(false); switch (typeof modelValue) { case "number": @@ -128,29 +128,11 @@ export default { validate, meta, errors, - isLoading, }; }, methods: { - async submitImage(e) { - this.isLoading = true; - await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e.target.files[0]) - .then(async (response) => { - if (response.data.length > 0) { - this.value = response.data[0]; - - // Wait for DOM to update before firing change event to handle validation. - await this.$nextTick(); - - document.getElementById(this.inputId).dispatchEvent(new Event("change")); - } else { - this.$emit("imageLookupError"); - } - }) - .catch((error) => { - this.$emit("imageLookupError"); - }); - this.isLoading = false; + imageChanged(e) { + this.$emit("fileChanged", e.target.files[0]); e.target.value = null; }, }, diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 69dafd555..ea011bb93 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -20,9 +20,11 @@ :isDisabled="vinPopulatedOnPageLoad" maxLength="17" includeCameraIcon + @file-changed="submitImage" :mask="vinMask" - @image-lookup-error="displayVinScanAlert" - data-test="vin-lookup-field" /> + :isImageLoading="isVinLoading" + data-test="vin-lookup-field" + ref="vinLookupQuestion" />