Added google places autocomplete

src/components/EventForm.vue

 <template lang="pug">
 q-card.full-width
-  //- Create Event Header
+  //- 'Create Event' Header
   q-card-section.bg-blue-grey-1(style='padding: 8px')
     span.text-subtitle1.text-weight-light.text-blue-grey-10.q-ml-sm Create your event
     q-chip.float-right(
@@ -11,12 +11,12 @@ q-card.full-width
       icon='done',
       style='margin-top: -1px'
     ) Submit Event
-  //- Create Event Form
+  //- 'Create Event' Form
   q-card-section
     //- Event name field
     .row.q-pb-md
       q-input.full-width(
-        v-model='name',
+        v-model='eventData.name',
         rounded,
         outlined,
         :dense='true',
@@ -28,9 +28,17 @@ q-card.full-width
     //- Date and Time field
     span.text-subtitle1.text-blue-grey-10.q-pt-sm Date and Time:
     .row.q-pb-md.no-wrap
-      q-input(v-model='date', rounded, outlined, type='date', :dense='true', hint='Date of Event', style='width: 60%')
+      q-input(
+        v-model='eventData.date',
+        rounded,
+        outlined,
+        type='date',
+        :dense='true',
+        hint='Date of Event',
+        style='width: 60%'
+      )
       q-input.q-ml-sm(
-        v-model='time',
+        v-model='eventData.time',
         rounded,
         outlined,
         type='time',
@@ -41,63 +49,155 @@ q-card.full-width
     //- Location of Event field
     .row.q-pb-md
       span.text-subtitle1.text-blue-grey-10 Where?:
-      q-input.full-width(rounded, outlined, v-model='places', label='Search places', :dense='true')
+      q-select.full-width(
+        v-model='location',
+        @input-value='setUserInput',
+        :options='searchResults',
+        :dense='true',
+        label='Search places',
+        rounded,
+        outlined,
+        use-input,
+        input-debounce='0',
+        hide-selected,
+        fill-input
+      )
         template(v-slot:prepend)
           q-icon(name='place')
-        template(v-slot:append)
-          q-icon.cursor-pointer(name='search', @click='searchPlaces()')
     //- Invite friends field
     .row.q-pb-md
       span.text-subtitle1.text-blue-grey-10 Invite your friends:
-      q-input.full-width(rounded, outlined, v-model='friends', label='Search friends', :dense='true')
+      q-select.full-width(
+        v-model='eventData.friends',
+        :dense='true',
+        :options='this.options',
+        label='Select friends',
+        rounded,
+        outlined,
+        multiple,
+        use-chips,
+        emit-value,
+        map-options
+      )
         template(v-slot:prepend)
           q-icon(name='person_add')
-        template(v-slot:append)
-          q-icon.cursor-pointer(name='search', @click='searchFriends()')
-    //- Event icon field
+    //- Event choose icon field
     .text-subtitle1.text-blue-grey-10 Choose an icon for your Event:
     .row.q-pb-md.justify-around
-      img(src='https://img.icons8.com/dusk/50/000000/home.png')
-      img(src='https://img.icons8.com/dusk/50/000000/party-baloons.png')
-      img(src='https://img.icons8.com/dusk/50/000000/dancing-party.png')
-      img(src='https://img.icons8.com/dusk/50/000000/champagne.png')
-      img(src='https://img.icons8.com/dusk/50/000000/dj.png')
-      img(src='https://img.icons8.com/dusk/50/000000/gift.png')
-    //- Event details field
+      img.cursor-pointer.q-pa-xs(
+        v-for='eventType in ["Home", "Baloons", "Dancing", "Champagne", "Dj", "Gift"]',
+        @click='eventData.type = eventType',
+        :src='getEventIcon(eventType)',
+        :style='eventData.type == eventType ? "box-shadow: 0 0 1pt 2pt #03c6fc; border-radius: 30%" : ""'
+      )
+    //- Event insert details field
     .row
       span.text-subtitle1.text-blue-grey-10 Details:
       q-input.full-width(
         rounded,
         outlined,
         autogrow,
-        v-model='details',
+        v-model='eventData.details',
         placeholder='Dress code, specifications, directions etc.',
         :dense='true'
       )
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+
 export default {
   data() {
     return {
-      name: null,
-      date: null,
-      time: null,
-      places: null,
-      friends: null,
-      details: null
+      eventData: {
+        name: '',
+        date: null,
+        time: null,
+        friends: [],
+        type: '',
+        details: ''
+      },
+      location: '',
+      userInput: 'a',
+      service: null,
+      searchResults: []
     }
   },
+
   methods: {
-    searchPlaces() {
-      console.log('searching places')
+    displaySuggestions(predictions, status) {
+      if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
+        this.searchResults = []
+        return
+      }
+      this.searchResults = predictions.map(prediction => prediction.description)
     },
-    searchFriends() {
-      console.log('searching friends')
+
+    setUserInput(val) {
+      this.userInput = val
     },
+
     submitEvent() {
-      console.log('submit event')
+      console.log(this.eventData)
+    },
+
+    getEventIcon(eventType) {
+      switch (eventType) {
+        case 'Home':
+          return 'https://img.icons8.com/dusk/50/000000/home.png'
+        case 'Baloons':
+          return 'https://img.icons8.com/dusk/50/000000/party-baloons.png'
+        case 'Dancing':
+          return 'https://img.icons8.com/dusk/50/000000/dancing-party.png'
+        case 'Champagne':
+          return 'https://img.icons8.com/dusk/50/000000/champagne.png'
+        case 'Dj':
+          return 'https://img.icons8.com/dusk/50/000000/dj.png'
+        case 'Gift':
+          return 'https://img.icons8.com/dusk/50/000000/gift.png'
+      }
+    },
+
+    placesGetPredictions() {
+      this.service.getPlacePredictions(
+        {
+          input: this.userInput,
+          location: new google.maps.LatLng(this.center),
+          radius: 5000
+        },
+        this.displaySuggestions
+      )
+    },
+    ...mapActions('firebase', ['firebaseSubmitEvent'])
+  },
+
+  computed: {
+    options() {
+      var optionsArray = []
+
+      for (const key in this.friends) {
+        let optionObject = {
+          label: this.friends[key].name,
+          value: key
+        }
+        optionsArray.push(optionObject)
+      }
+      return optionsArray
+    },
+    ...mapState('firebase', ['friends', 'center'])
+  },
+
+  watch: {
+    userInput(newValue) {
+      if (newValue) {
+        this.placesGetPredictions()
+      }
     }
+  },
+
+  mounted() {
+    this.service = new window.google.maps.places.AutocompleteService()
+    this.placesGetPredictions() // Default predict with letter 'a' as input
   }
 }
 </script>
\ No newline at end of file