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

Progress checkin for Bryan to look at styling

Browse source
This commit is contained in:
Leah Schumann 2022-02-22 10:11:18 -05:00
parent 651f039be2
commit 025ae14047
3 changed files with 134 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/common-components/dropdown-question/dropdown-question.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<label :for="inputId">{{ labelText }}</label>
<select v-model="selectedOption"
:ref="inputId"
:id="inputId"
class="form-control">
<option v-for="option in options" :value="option" :key="option.value">{{ option }}</option>
</select>
</template>
<script>
import { useField } from "vee-validate";
export default {
name: "dropdownQuestion",
props: {
modelValue: String,
labelText: String,
inputId: String,
options: {
type: Object,
required: true
},
},
data(){
return {
value: String,
}
},
computed: {
selectedOption: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
};
</script>

26
src/common-components/text-question/text-question.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<label :for="inputId">{{ labelText }}</label>
<input type="text"
:ref="inputId"
:id="inputId"
:placeholder="placeholderText"
class="form-control"
autocomplete="off" />
</template>
<script>
import { useField } from "vee-validate";
export default {
name: "textQuestion",
props: {
modelValue: String,
labelText: String,
placeholderText: String,
inputId: String,
},
setup(props) {
},
};
</script>

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

@ -2,87 +2,21 @@
<form> <form>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<label for="autocomplete">Street address</label> <textQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
<input ref="autocomplete"
id="autocomplete"
placeholder="Search"
class="form-control search-location"
type="text"
autocomplete="off" />
</div> </div>
</div> </div>
</form> </form>
<form> <form>
<div v-show="showAddressFields" class="row my-4"> <div v-show="showAddressFields" class="row my-4">
<div class="col"> <div class="col">
<label for="city">City</label> <textQuestion v-model="city" ref="city" inputId="city" labelText="City" />
<input ref="city"
id="city"
class="form-control"
type="text"
autocomplete="off" />
</div> </div>
</div> </div>
</form> </form>
<form> <form>
<div v-show="showAddressFields" class="row my-4"> <div v-show="showAddressFields" class="row my-4">
<div class="col-6"> <div class="col-6">
<label for="state">State</label> <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State" />
<select ref="state"
id="state"
class="form-control">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label for="zip">Zip</label> <label for="zip">Zip</label>
@ -109,6 +43,8 @@
</template> </template>
<script> <script>
import textQuestion from "@/common-components/text-question/text-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
//import store from "@/store"; //import store from "@/store";
@ -118,12 +54,68 @@ export default ({
return { return {
showAddressFields: false, showAddressFields: false,
displayVerificationWarning: false, displayVerificationWarning: false,
displayNoMatchWarning: false displayNoMatchWarning: false,
streetAddress: "",
city: "",
state: "",
zip: "",
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',
}
} }
}, },
props: { props: {
modelValue: Array,
groupName: String,
}, },
methods: { methods: {
initializeComponent(cmsContent, damageOptions){ initializeComponent(cmsContent, damageOptions){
@ -221,7 +213,7 @@ export default ({
break; break;
} }
case "administrative_area_level_1": { case "administrative_area_level_1": {
state.value = component.short_name; self.state = component.short_name;
break; break;
} }
case "postal_code": { case "postal_code": {
@ -248,6 +240,8 @@ export default ({
}); });
}, },
components: { components: {
textQuestion,
dropdownQuestion,
alert, alert,
} }
}) })