Progress checkin for Bryan to look at styling
This commit is contained in:
Leah Schumann
parent
651f039be2
commit
025ae14047
3 changed files with 134 additions and 73 deletions
|
|
@ -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
26
src/common-components/text-question/text-question.vue
Normal 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>
|
||||
|
|
@ -2,87 +2,21 @@
|
|||
<form>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="autocomplete">Street address</label>
|
||||
<input ref="autocomplete"
|
||||
id="autocomplete"
|
||||
placeholder="Search"
|
||||
class="form-control search-location"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
<textQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div v-show="showAddressFields" class="row my-4">
|
||||
<div class="col">
|
||||
<label for="city">City</label>
|
||||
<input ref="city"
|
||||
id="city"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
<textQuestion v-model="city" ref="city" inputId="city" labelText="City" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div v-show="showAddressFields" class="row my-4">
|
||||
<div class="col-6">
|
||||
<label for="state">State</label>
|
||||
<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>
|
||||
<dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="zip">Zip</label>
|
||||
|
|
@ -109,6 +43,8 @@
|
|||
</template>
|
||||
|
||||
<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 store from "@/store";
|
||||
|
||||
|
|
@ -118,12 +54,68 @@ export default ({
|
|||
return {
|
||||
showAddressFields: 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: {
|
||||
modelValue: Array,
|
||||
groupName: String,
|
||||
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, damageOptions){
|
||||
|
|
@ -221,7 +213,7 @@ export default ({
|
|||
break;
|
||||
}
|
||||
case "administrative_area_level_1": {
|
||||
state.value = component.short_name;
|
||||
self.state = component.short_name;
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
|
|
@ -248,6 +240,8 @@ export default ({
|
|||
});
|
||||
},
|
||||
components: {
|
||||
textQuestion,
|
||||
dropdownQuestion,
|
||||
alert,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue