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

Checkpoint

Browse source
This commit is contained in:
Leah Schumann 2024-05-02 08:53:11 -04:00
parent 53530095dc
commit a34e594832
4 changed files with 59 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/digital-components/textbox-question/textbox-question.vue
View file

@ -45,8 +45,7 @@
@blur="handleChange"
:maxlength="maxLength ? maxLength : '999'"
@focus="$emit('focus', $event.target.value)"
@keydown="keyDownHandler"
@animationstart="checkAnimation" />
@keydown="keyDownHandler" />
<button
v-if="includeSearchIcon"
type="submit"
@ -131,7 +130,6 @@ export default {
default: false,
isRequired: false,
},
autofilled: Boolean
},
setup(props) {
const uuid = uuidv4();
@ -176,30 +174,10 @@ export default {
},
methods: {
focusSearchInput() {
//Focus cursor in input when search icon is clicked
// Focus cursor in input when search icon is clicked
const field = document.querySelector("input");
field.focus();
},
checkAnimation(e) {
// if(e.animationName == "onAutoFillStart")
// {
// console.log("onAutoFillStart")
// //this.autofilled = true;
// }
if(e.animationName == "onAutoFillSelected")
{
//console.log("onAutoFillSelected")
this.$emit("autofilled", { inputId: this.inputId, autofilled: true});
}
else if(e.animationName == "onAutoFillCancel")
{
//console.log("onAutoFillCancel")
this.$emit("autofilled", { inputId: this.inputId, autofilled: false});
}
},
async imageChanged(e) {
let file = e.target.files[0];

41
src/fmg-components/address-questions/address-questions.vue
View file

@ -12,8 +12,7 @@
aria-haspopup=""
hasIcon
validationRules="street-address-required"
@keydown.enter.prevent
/>
@keydown.enter.prevent />
</div>
</div>
<transition name="fade" mode="out-in">
@ -26,8 +25,7 @@
customInputId="apartmentNumberOrBusinessName"
cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
v-model="addressModel.apartmentNumberOrBusinessName"
ref="apartmentNumberOrBusinessName"
/>
ref="apartmentNumberOrBusinessName" />
</div>
</div>
</transition>
@ -39,8 +37,7 @@
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
validationRules="city-required"
/>
validationRules="city-required" />
</div>
</div>
</transition>
@ -53,8 +50,7 @@
v-model="addressModel.state"
ref="state"
:options="stateOptions"
validationRules="state-required"
/>
validationRules="state-required" />
</div>
<div class="col">
<textboxQuestion
@ -63,8 +59,7 @@
v-model="addressModel.zipCode"
ref="zipCode"
mask="#####"
validationRules="zip-code-required|zip-code-format"
/>
validationRules="zip-code-required|zip-code-format" />
</div>
</div>
</transition>
@ -124,7 +119,6 @@ export default {
type: Boolean,
default: false,
},
//autofilled: Boolean,
},
data() {
return {
@ -228,13 +222,6 @@ export default {
this.initializeAutocomplete();
});
},
setAutofilled(value) {
console.log(value)
if (value.autofilled) {
this.showAddressFields = true;
}
this.$emit("autofilled", value);
},
initializeAutocomplete() {
// Initialize the Google Places Autocomplete
this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
@ -264,6 +251,11 @@ export default {
// Unfortunately this is the only place we can set the autocomplete attribute without the
// Google Places object resetting it to "off" which does nothing to prevent browser autofill
//this.addressField1.setAttribute("autocomplete", "do-not-autofill");
});
// When the user starts entering text into Street Address textbox disable autofill
this.addressField1.addEventListener("input", (e) => {
this.addressField1.setAttribute("autocomplete", "do-not-autofill");
});
@ -411,6 +403,15 @@ export default {
if (!this.showAddressFields) {
this.loadGooglePlacesAutocompleteScript();
}
const element = document.getElementsByClassName("address-questions")[0];
element.addEventListener("change", (e) => {
const inputs = element.querySelectorAll("input:-internal-autofill-selected");
this.showAddressFields = inputs.length > 0;
// if (this.showAddressFields) {
// this.unloadAutocomplete();
// }
});
},
unmounted() {
this.unloadAutocomplete();
@ -448,10 +449,8 @@ export default {
);
}
},
deep: true,
},
autofilled(value) {
console.log(value)
}
},
components: {
textboxQuestion,

3
src/layouts/address-lookup/address-lookup.vue
View file

@ -5,7 +5,7 @@
ref="theForm"
v-slot="{ meta }"
autocomplete="off">
<div class="container-fluid page-container-grouped-styles">
<div class="container-fluid page-container-grouped-styles" id="address-lookup">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -25,7 +25,6 @@
v-model="customerQuestions"
:validationRules="EmailValidationRules"
:isEmailOptional="IsEmailOptional" />
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"

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

@ -1,43 +1,42 @@
<template>
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
<div class="row mb-4">
<div class="col">
<textboxQuestion
cmsWidgetName="FirstNameQuestionWidget"
v-model="customerModel.firstName"
ref="firstName"
customInputId="firstName"
validationRules="first-name-required"
@autofilled="setAutofilled"/>
<div class="customer-questions">
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
<div class="row mb-4">
<div class="col">
<textboxQuestion
cmsWidgetName="FirstNameQuestionWidget"
v-model="customerModel.firstName"
ref="firstName"
customInputId="firstName"
validationRules="first-name-required" />
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<textboxQuestion
cmsWidgetName="LastNameQuestionWidget"
v-model="customerModel.lastName"
ref="lastName"
customInputId="lastName"
validationRules="last-name-required"
@autofilled="setAutofilled"/>
<div class="row mb-4">
<div class="col">
<textboxQuestion
cmsWidgetName="LastNameQuestionWidget"
v-model="customerModel.lastName"
ref="lastName"
customInputId="lastName"
validationRules="last-name-required" />
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="customerModel.emailAddress"
ref="emailAddress"
customInputId="emailAddress"
:isRequired="!isEmailOptional"
:validationRules="validationRules"
:addOptionalText="isEmailOptional"
:autofilled="autofilled" />
<div class="row mt-4">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="customerModel.emailAddress"
ref="emailAddress"
customInputId="emailAddress"
:isRequired="!isEmailOptional"
:validationRules="validationRules"
:addOptionalText="isEmailOptional" />
</div>
</div>
</div>
<div class="row mb-0">
<div class="col">
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<div class="row mb-0">
<div class="col">
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
</div>
</div>
</div>
</template>
@ -86,25 +85,6 @@ export default {
validationRules: String,
isEmailOptional: Boolean,
},
data() {
return {
autofilled: false,
}
},
methods: {
setAutofilled(value) {
console.log(value)
if (value.autofilled === true) {
this.autofilled = true;
console.log("autofilled")
}
else {
this.autofilled = false;
console.log("not autofilled")
}
}
},
computed: {
customerModel: {
get: function () {
@ -114,7 +94,7 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
autofilled(value) {} },
},
components: {
addressQuestions,
textboxQuestion,