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

WIP

Browse source
This commit is contained in:
Leah Schumann 2024-04-26 06:45:00 -04:00
parent c5d88c7983
commit 53530095dc
3 changed files with 105 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,8 @@
@blur="handleChange"
:maxlength="maxLength ? maxLength : '999'"
@focus="$emit('focus', $event.target.value)"
@keydown="keyDownHandler" />
@keydown="keyDownHandler"
@animationstart="checkAnimation" />
<button
v-if="includeSearchIcon"
type="submit"
@ -130,6 +131,7 @@ export default {
default: false,
isRequired: false,
},
autofilled: Boolean
},
setup(props) {
const uuid = uuidv4();
@ -178,6 +180,26 @@ export default {
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];
@ -222,6 +244,13 @@ export default {
},
mounted() {
this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId);
// const element = document.querySelector(`#${this.inputId}`, null);
// element.addEventListener("change", () => {
// this.$nextTick(() => {
// console.log(window.getComputedStyle(element, ":-internal-autofill"));
// });
// });
},
watch: {
async value(newValue) {
@ -347,5 +376,33 @@ export default {
p {
display: none;
}
:-webkit-autofill {
animation-name: onAutoFillStart;
}
:-webkit-autofill:focus {
animation-name: onAutoFillSelected;
}
:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
@keyframes onAutoFillStart {
from {
}
to {
}
}
@keyframes onAutoFillSelected {
from {
}
to {
}
}
@keyframes onAutoFillCancel {
from {
}
to {
}
}
}
</style>

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

@ -12,7 +12,8 @@
aria-haspopup=""
hasIcon
validationRules="street-address-required"
@keydown.enter.prevent />
@keydown.enter.prevent
/>
</div>
</div>
<transition name="fade" mode="out-in">
@ -25,7 +26,8 @@
customInputId="apartmentNumberOrBusinessName"
cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
v-model="addressModel.apartmentNumberOrBusinessName"
ref="apartmentNumberOrBusinessName" />
ref="apartmentNumberOrBusinessName"
/>
</div>
</div>
</transition>
@ -37,7 +39,8 @@
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
validationRules="city-required" />
validationRules="city-required"
/>
</div>
</div>
</transition>
@ -50,7 +53,8 @@
v-model="addressModel.state"
ref="state"
:options="stateOptions"
validationRules="state-required" />
validationRules="state-required"
/>
</div>
<div class="col">
<textboxQuestion
@ -59,7 +63,8 @@
v-model="addressModel.zipCode"
ref="zipCode"
mask="#####"
validationRules="zip-code-required|zip-code-format" />
validationRules="zip-code-required|zip-code-format"
/>
</div>
</div>
</transition>
@ -119,6 +124,7 @@ export default {
type: Boolean,
default: false,
},
//autofilled: Boolean,
},
data() {
return {
@ -222,6 +228,13 @@ 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, {
@ -436,6 +449,9 @@ export default {
}
},
},
autofilled(value) {
console.log(value)
}
},
components: {
textboxQuestion,

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

@ -7,7 +7,8 @@
v-model="customerModel.firstName"
ref="firstName"
customInputId="firstName"
validationRules="first-name-required" />
validationRules="first-name-required"
@autofilled="setAutofilled"/>
</div>
</div>
<div class="row mb-4">
@ -17,7 +18,8 @@
v-model="customerModel.lastName"
ref="lastName"
customInputId="lastName"
validationRules="last-name-required" />
validationRules="last-name-required"
@autofilled="setAutofilled"/>
</div>
</div>
<div class="row mt-4">
@ -29,7 +31,8 @@
customInputId="emailAddress"
:isRequired="!isEmailOptional"
:validationRules="validationRules"
:addOptionalText="isEmailOptional" />
:addOptionalText="isEmailOptional"
:autofilled="autofilled" />
</div>
</div>
<div class="row mb-0">
@ -83,6 +86,25 @@ 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 () {
@ -92,7 +114,7 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
},
autofilled(value) {} },
components: {
addressQuestions,
textboxQuestion,