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

CMS related coding changes for textbox-question and dropdown-question

Browse source
This commit is contained in:
Leah Schumann 2022-03-16 11:46:27 -04:00
parent e26e20a7bf
commit bfbe8aa5f0
5 changed files with 98 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="dropdown-question"> <div class="dropdown-question">
<label :for="inputId" :aria-label="ariaLabelText" class="form-label">{{labelText}}</label> <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
<select v-model="selectedOption" <select v-model="selectedOption"
class="form-select" class="form-select"
:id="inputId" :id="inputId"
@ -25,7 +25,6 @@ export default {
name: "dropdown-question", name: "dropdown-question",
props: { props: {
modelValue: String, modelValue: String,
labelText: String,
inputId: String, inputId: String,
options: { options: {
type: Object, type: Object,
@ -33,11 +32,27 @@ export default {
}, },
isDisabled: Boolean, isDisabled: Boolean,
isRequired: Boolean, isRequired: Boolean,
ariaLabelText: String, disableAutoFill: Boolean,
}, },
data() { data() {
return {
labelText: "",
ariaLabelText: "",
}
}, },
methods: {
initializeComponent(cmsContent) {
var labelText = cmsContent;
if (this.disableAutoFill) {
var noBreakChar = "&NoBreak;";
var position = 1;
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
}
this.labelText = labelText;
this.ariaLabelText = cmsContent;
}
},
computed: { computed: {
selectedOption: { selectedOption: {
get: function() { get: function() {

34
src/common-components/textbox-question/textbox-question.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div class="textbox-question" :class="hasError ? 'has-error' : ''"> <div class="textbox-question" :class="hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="ariaLabelText" class="form-label">{{labelText}}</label> <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
<input v-model="value" v-maska="mask" <input v-model="value"
v-maska="mask"
:type="type" :type="type"
class="form-control" class="form-control"
:ref="inputId" :ref="inputId"
@ -28,13 +29,15 @@ export default {
type: String, type: String,
default: 'text', default: 'text',
}, },
placeholderText: {
type: String,
default: '',
},
modelValue: String, modelValue: String,
labelText: String,
ariaLabelText: String,
placeholderText: String,
inputId: String, inputId: String,
isDisabled: Boolean, isDisabled: Boolean,
isRequired: Boolean, isRequired: Boolean,
disableAutoFill: Boolean,
hasIcon: Boolean,// If input has an icon hasIcon: Boolean,// If input has an icon
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
hasError: Boolean, hasError: Boolean,
@ -43,6 +46,25 @@ export default {
default: '', default: '',
}, },
}, },
data() {
return {
labelText: "",
ariaLabelText: "",
}
},
methods: {
initializeComponent(cmsContent){
var labelText = cmsContent;
if (this.disableAutoFill) {
var noBreakChar = "&NoBreak;";
var position = 1;
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
}
this.labelText = labelText;
this.ariaLabelText = cmsContent;
}
},
computed: { computed: {
value: { value: {
get: function() { get: function() {
@ -51,7 +73,7 @@ export default {
set: function(newValue) { set: function(newValue) {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
} }
}, },
}, },
}; };
</script> </script>

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

@ -3,8 +3,10 @@
<funnelHeader ref="funnelHeader" /> <funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" /> <form autocomplete="off">
<funnelFooter ref="funnelFooter" /> <customerQuestions ref="customerQuestions" />
<funnelFooter ref="funnelFooter" />
</form>
</div> </div>
</template> </template>
@ -54,8 +56,16 @@ export default {
resultMap.cmsContent.FunnelFooterWidget resultMap.cmsContent.FunnelFooterWidget
); );
vm.$refs.customerQuestions.initializeComponent([ vm.$refs.customerQuestions.initializeComponent([
resultMap.cmsContent.StreetAddressQuestionWidget,
resultMap.cmsContent.CityQuestionWidget,
resultMap.cmsContent.StateQuestionWidget,
resultMap.cmsContent.ZipQuestionWidget,
resultMap.cmsContent.AlertVerificationWarningWidget, resultMap.cmsContent.AlertVerificationWarningWidget,
resultMap.cmsContent.AlertNoMatchWarningWidget resultMap.cmsContent.AlertNoMatchWarningWidget,
resultMap.cmsContent.FirstNameQuestionWidget,
resultMap.cmsContent.LastNameQuestionWidget,
resultMap.cmsContent.EmailAddressQuestionWidget,
] ]
); );
}); });

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

@ -1,28 +1,26 @@
<template> <template>
<form autocomplete="off"> <div class="row my-4">
<div class="row my-4"> <div class="col">
<div class="col"> <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
<textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="S&NoBreak;treet address" ariaLabelText="Street address" aria-haspopup="" hasIcon />
</div>
</div> </div>
<transition name="fade" mode="out-in"> </div>
<div class="address-fields" v-if="showAddressFields" aria-live="polite"> <transition name="fade" mode="out-in">
<div class="row my-4"> <div class="address-fields" v-show="showAddressFields" aria-live="polite">
<div class="col"> <div class="row my-4">
<textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" labelText="C&NoBreak;ity" ariaLabelText="City" /> <div class="col">
</div> <textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
</div> </div>
<div class="row my-4">
<div class="col-6">
<dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" labelText="S&NoBreak;tate" ariaLabelText="State" />
</div>
<div class="col-6">
<textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" labelText="Z&NoBreak;IP code" ariaLabelText="ZIP code" mask="#####" />
</div>
</div>
</div> </div>
</transition> <div class="row my-4">
</form> <div class="col-6">
<dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
</div>
<div class="col-6">
<textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
</div>
</div>
</div>
</transition>
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning" <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="alertHeadlineVerificationWarning" :alertHeadline="alertHeadlineVerificationWarning"
@ -119,12 +117,17 @@ export default ({
}, },
methods: { methods: {
initializeComponent(cmsContent) { initializeComponent(cmsContent) {
// assign alert texts to this component this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
this.alertHeadlineVerificationWarning = cmsContent[0].HeadlineText; this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
this.alertCopyVerificationWarning = cmsContent[0].BodyText; this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
this.alertHeadlineNoMatchWarning = cmsContent[1].HeadlineText; // assign alert texts to this component
this.alertCopyNoMatchWarning = cmsContent[1].BodyText; this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
this.alertCopyVerificationWarning = cmsContent[4].BodyText;
this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
} }
}, },
computed: { computed: {
@ -136,9 +139,6 @@ export default ({
let self = this; let self = this;
let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY; let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
// Lets keep these here for the moment for easy reference. Actual value comes from env variable.
//"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
//"AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => { .then(() => {

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

@ -2,17 +2,17 @@
<addressQuestions ref="addressQuestions"/> <addressQuestions ref="addressQuestions"/>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" labelText="First name" /> <textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
</div> </div>
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" labelText="Last name" /> <textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
</div> </div>
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" labelText="Email address" /> <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
</div> </div>
</div> </div>
</template> </template>
@ -20,7 +20,6 @@
<script> <script>
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import textboxQuestion from "@/common-components/textbox-question/textbox-question";
//import store from "@/store"; //import store from "@/store";
export default ({ export default ({
@ -34,8 +33,12 @@ export default ({
}, },
methods: { methods: {
initializeComponent(cmsContent){ initializeComponent(cmsContent){
// pass alert texts to addressQuestions component // pass alert texts to addressQuestions component
this.$refs.addressQuestions.initializeComponent(cmsContent); this.$refs.addressQuestions.initializeComponent(cmsContent);
this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
} }
}, },
computed: { computed: {