Post code review related refactoring

This commit is contained in:
Leah Schumann 2022-03-22 13:34:33 -04:00
parent 49cef04e2e
commit 36a98936f2
3 changed files with 98 additions and 86 deletions

View file

@ -1,6 +1,6 @@
<template>
<div class="dropdown-question">
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<select v-model="selectedOption"
class="form-select"
:id="inputId"
@ -60,21 +60,12 @@ export default {
},
data() {
return {
labelText: "",
ariaLabelText: "",
questionText: "",
}
},
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;
this.questionText = cmsContent;
}
},
computed: {
@ -85,7 +76,19 @@ export default {
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
labelText: {
get: function () {
let labelText = this.questionText;
if (this.disableAutoFill) {
const noBreakChar = "&NoBreak;";
const position = 1;
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
}
return labelText;
}
}
},
watch: {
selectedOption(newValue) {

View file

@ -1,6 +1,6 @@
<template>
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<input v-model="value"
v-maska="mask"
:type="type"
@ -76,21 +76,12 @@ export default {
},
data() {
return {
labelText: "",
ariaLabelText: "",
questionText: "",
}
},
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;
this.questionText = cmsContent;
},
},
computed: {
@ -101,7 +92,19 @@ export default {
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
labelText: {
get: function () {
let labelText = this.questionText;
if (this.disableAutoFill) {
var noBreakChar = "&NoBreak;";
var position = 1;
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
}
return labelText;
}
}
},
watch: {
value(newValue) {

View file

@ -85,65 +85,71 @@ export default ({
showAddressFields: false,
displayVerificationWarning: false,
displayNoMatchWarning: false,
stateOptions: {
'AL': 'Alabama',
'AK': 'Alaska',
'AZ': 'Arizona',
'AR': 'Arkansas',
'CA': 'California',
'CO': 'Colorado',
'CT': 'Connecticut',
'DE': 'Delaware',
'DC': 'District Of Columbia',
'FL': 'Florida',
'GA': 'Georgia',
'HI': 'Hawaii',
'ID': 'Idaho',
'IL': 'Illinois',
'IN': 'Indiana',
'IA': 'Iowa',
'KS': 'Kansas',
'KY': 'Kentucky',
'LA': 'Louisiana',
'ME': 'Maine',
'MD': 'Maryland',
'MA': 'Massachusetts',
'MI': 'Michigan',
'MN': 'Minnesota',
'MS': 'Mississippi',
'MO': 'Missouri',
'MT': 'Montana',
'NE': 'Nebraska',
'NV': 'Nevada',
'NH': 'New Hampshire',
'NJ': 'New Jersey',
'NM': 'New Mexico',
'NY': 'New York',
'NC': 'North Carolina',
'ND': 'North Dakota',
'OH': 'Ohio',
'OK': 'Oklahoma',
'OR': 'Oregon',
'PA': 'Pennsylvania',
'RI': 'Rhode Island',
'SC': 'South Carolina',
'SD': 'South Dakota',
'TN': 'Tennessee',
'TX': 'Texas',
'UT': 'Utah',
'VT': 'Vermont',
'VA': 'Virginia',
'WA': 'Washington',
'WV': 'West Virginia',
'WI': 'Wisconsin',
'WY': 'Wyoming',
},
alertHeadlineVerificationWarning: "",
alertCopyVerificationWarning: "",
alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "",
}
},
computed: {
stateOptions: {
get: function () {
return {
'AL': 'Alabama',
'AK': 'Alaska',
'AZ': 'Arizona',
'AR': 'Arkansas',
'CA': 'California',
'CO': 'Colorado',
'CT': 'Connecticut',
'DE': 'Delaware',
'DC': 'District Of Columbia',
'FL': 'Florida',
'GA': 'Georgia',
'HI': 'Hawaii',
'ID': 'Idaho',
'IL': 'Illinois',
'IN': 'Indiana',
'IA': 'Iowa',
'KS': 'Kansas',
'KY': 'Kentucky',
'LA': 'Louisiana',
'ME': 'Maine',
'MD': 'Maryland',
'MA': 'Massachusetts',
'MI': 'Michigan',
'MN': 'Minnesota',
'MS': 'Mississippi',
'MO': 'Missouri',
'MT': 'Montana',
'NE': 'Nebraska',
'NV': 'Nevada',
'NH': 'New Hampshire',
'NJ': 'New Jersey',
'NM': 'New Mexico',
'NY': 'New York',
'NC': 'North Carolina',
'ND': 'North Dakota',
'OH': 'Ohio',
'OK': 'Oklahoma',
'OR': 'Oregon',
'PA': 'Pennsylvania',
'RI': 'Rhode Island',
'SC': 'South Carolina',
'SD': 'South Dakota',
'TN': 'Tennessee',
'TX': 'Texas',
'UT': 'Utah',
'VT': 'Vermont',
'VA': 'Virginia',
'WA': 'Washington',
'WV': 'West Virginia',
'WI': 'Wisconsin',
'WY': 'Wyoming',
}
}
}
},
methods: {
initializeComponent(cmsContent) {
this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
@ -161,10 +167,10 @@ export default ({
},
mounted() {
let addressField1 = document.getElementById("autocomplete");
let self = this;
const addressField1 = document.getElementById("autocomplete");
const self = this;
let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => {
@ -182,14 +188,14 @@ export default ({
autocomplete.addListener('place_changed', fillInAddress);
addressField1.onblur = function() {
var hover = document.querySelector(".pac-container .pac-item:hover");
const hover = document.querySelector(".pac-container .pac-item:hover");
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
if (hover === null) {
var item = document.querySelector(".pac-container .pac-item");
const item = document.querySelector(".pac-container .pac-item");
if (item != null) {
var firstResult = item.textContent;
var geocoder = new window.google.maps.Geocoder();
const firstResult = item.textContent;
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({
address: firstResult
}, function (results, status) {