Code added to auto-complete the address in desired format

src/layouts/address-poc/address-poc.vue

@@ -7,23 +7,11 @@
         />
       </div>
     </div>
-<!--     <div class="row my-4">
-      <div class="col">
-        <label for="map">Home address</label>
-        <vue-google-autocomplete
-          id="map"
-          classname="form-control"
-          placeholder="Start typing"
-          v-on:placechanged="getAddressData"
-        >
-        </vue-google-autocomplete>
-      </div>
-    </div> -->
     <div class="row my-4">
       <div class="col">
         <label for="autocomplete">Home address</label>
         <input ref="autocomplete" 
-        id="autocomplete"
+            id="autocomplete"
             placeholder="Search" 
             class="form-control search-location"
             onfocus="value = ''" 
@@ -34,11 +22,8 @@
 </template>
 
 <script>
+
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-//import FormField from '../../ux-components/form-field/form-field.vue';
-//import VueGoogleAutocomplete from 'vue-google-autocomplete'
-
-
 export default {
   name: "App",
   components: {
@@ -46,11 +31,6 @@ export default {
     //FormField
     //VueGoogleAutocomplete 
   },
-/*   mounted() {
-      // To demonstrate functionality of exposed component functions
-      // Here we make focus on the user input
-      this.$refs.address.focus();
-  }, */
   mounted() {
     this.autocomplete = new window.google.maps.places.Autocomplete(
       (this.$refs.autocomplete),
@@ -63,18 +43,49 @@ export default {
 
     this.autocomplete.addListener('place_changed', () => {
       let place = this.autocomplete.getPlace();
-      let ac = place.address_components;
-/*       let lat = place.geometry.location.lat();
-      let lon = place.geometry.location.lng(); */
-      let city = ac[0]["short_name"];
-/* 
-      console.log(`The user picked ${city} with the coordinates ${lat}, ${lon}`);
-      console.log(ac); */
-    });
+      let address1 = "";
+      let postcode = "";
+
+      let input = document.getElementById("autocomplete");
+
+      for (const component of place.address_components) {
+        const componentType = component.types[0];
+
+        switch (componentType) {
+          case "street_number": {
+            address1 = `${component.long_name} ${address1}`;
+            break;
+          }
+
+          case "route": {
+            address1 += component.short_name;
+            break;
+          }
+          case "locality":
+            address1 += ', ' + component.long_name;
+            break;
+          case "administrative_area_level_1": {
+            address1 += ', ' +  component.short_name;
+            break;
+          }
+          case "postal_code": {
+            postcode = `${component.long_name}${postcode}`;
+            break;
+          }
+
+          case "postal_code_suffix": {
+            postcode = `${postcode}-${component.long_name}`;
+            break;
+          }
+
+        }
+
+        let addressField1 = document.querySelector("#autocomplete");
+        addressField1.value = address1 + ' ' + postcode;
+      }      
+    }); 
   },
 
 };
 
-
-
 </script>

src/ux-components/form-field/form-field.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="d-flex flex-column w-100">
-    <div class="form-group">
-      <label v-bind:for="formFieldId">{{ labelText }}</label>
-      <input type="text" class="form-control" v-bind:id="formFieldId" v-bind:name="formFieldName" :required="required == 1" />
-      <loader
-        v-if="display"
-        v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        v-bind:class="[this.loaderColor, this.loaderPosition]"
-      />
-    </div>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "formField",
-  props: {
-    formFieldId: String,
-    formFieldName: String,
-    required: Number,
-    labelText: String,
-    errorText: String,
-    loaderColor: String,
-    loaderPosition: String,
-    sizeInRem: [Number, String],
-  },
-  data() {
-    return {
-      display: false,
-      isError: false,
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  },
-};
-</script>