From 025ae14047969d682abf7bbc781a80a9ccda08ba Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 22 Feb 2022 10:11:18 -0500
Subject: [PATCH] Progress checkin for Bryan to look at styling

---
 .../dropdown-question/dropdown-question.vue   |  41 +++++
 .../text-question/text-question.vue           |  26 ++++
 .../address-questions/address-questions.vue   | 140 +++++++++---------
 3 files changed, 134 insertions(+), 73 deletions(-)
 create mode 100644 src/common-components/dropdown-question/dropdown-question.vue
 create mode 100644 src/common-components/text-question/text-question.vue

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
new file mode 100644
index 000000000..3f1f6b047
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -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>
diff --git a/src/common-components/text-question/text-question.vue b/src/common-components/text-question/text-question.vue
new file mode 100644
index 000000000..5a4b48b42
--- /dev/null
+++ b/src/common-components/text-question/text-question.vue
@@ -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>
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 8560e59c4..230551e38 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -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,
     }
 })