allow to modify place coordinates in admin too

components/admin/Places.vue

@@ -19,23 +19,23 @@ v-container
             v-model='place.name'
             :placeholder='$t("common.name")')
 
-          v-text-field(
+          v-combobox(ref='address'
-            :rules="[$validators.required('common.address')]"
+            :prepend-icon='mdiMapSearch'
+            @input.native='searchAddress'
             :label="$t('common.address')"
-            v-model='place.address'
+            :rules="[ v => $validators.required('common.address')(v)]"
-            :placeholder='$t("common.address")')
+            :value='place.address'
-
+            persistent-hint hide-no-data clearable no-filter
-          v-text-field(v-if="settings.allow_geolocation"
+            :loading='loading'
-            :rules="[$validators.required('common.latitude')]"
+            @change='selectAddress'
-            :label="$t('common.latitude')"
+            @focus='searchAddress'
-            v-model='place.latitude'
+            :items="addressList"
-            :placeholder='$t("common.latitude")')
+            :hint="$t('event.address_description')")
-
+            template(v-slot:item="{ item, attrs, on  }")
-          v-text-field(v-if="settings.allow_geolocation"
+              v-list-item(v-bind='attrs' v-on='on')
-            :rules="[$validators.required('common.longitude')]"
+                v-list-item-content(two-line v-if='item')
-            :label="$t('common.longitude')"
+                  v-list-item-title(v-text='item.name')
-            v-model='place.longitude'
+                  v-list-item-subtitle(v-text='`${item.address}`')
-            :placeholder='$t("common.longitude")')
 
 
       v-card-actions
@@ -51,6 +51,8 @@ v-container
       :hide-default-footer='places.length < 5'
       :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
       :search='search')
+      template(v-slot:item.map='{ item }')
+        span {{item.latitude && item.longitude && 'YEP' }}
       template(v-slot:item.actions='{ item }')
         v-btn(@click='editPlace(item)' color='primary' icon)
           v-icon(v-text='mdiPencil')
@@ -59,22 +61,27 @@ v-container
 
 </template>
 <script>
-import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye } from '@mdi/js'
+import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye, mdiMapSearch } from '@mdi/js'
 import { mapState } from 'vuex'
+import debounce from 'lodash/debounce'
+import get from 'lodash/get'
 
 export default {
   data() {
     return {
-      mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye,
+      mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye, mdiMapSearch,
       loading: false,
       dialog: false,
       valid: false,
       places: [],
+      addressList: [],
+      address: '',
       search: '',
       place: { name: '', address: '', id: null },
       headers: [
         { value: 'name', text: 'Name' },
         { value: 'address', text: 'Address' },
+        { value: 'map', text: 'Map' },
         { value: 'actions', text: 'Actions', align: 'right' }
       ]
     }
@@ -103,7 +110,72 @@ export default {
       await this.$fetch()
       this.loading = false
       this.dialog = false
-    }
+    },
+    selectAddress (v) {
+      if (!v) { return }
+      if (typeof v === 'object') {
+          this.place.latitude = v.lat
+          this.place.longitude = v.lon
+          this.place.address = v.address
+        // }
+      } else {
+        this.place.address = v
+        this.place.latitude = this.place.longitude = null
+      }
+      this.$emit('input', { ...this.place })
+    },    
+    searchAddress: debounce(async function(ev) {
+      const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
+      // allow pasting coordinates lat/lon and lat,lon
+      const searchCoordinates = pre_searchCoordinates.replace('/', ',')
+      // const regex_coords_comma = "-?[1-9][0-9]*(\\.[0-9]+)?,\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
+      // const regex_coords_slash = "-?[1-9][0-9]*(\\.[0-9]+)?/\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
+
+      // const setCoords = (v) => {
+      //   const lat = v[0].trim()
+      //   const lon = v[1].trim()
+      //   // check coordinates are valid
+      //   if ((lat < 90 && lat > -90)
+      //   && (lon < 180 && lon > -180)) {
+      //     this.place.latitude = lat
+      //     this.place.longitude = lon
+      //   } else {
+      //     this.$root.$message("Non existent coordinates", { color: 'error' })
+      //     return
+      //   }
+      // }
+
+      // if (pre_searchCoordinates.match(regex_coords_comma)) {
+      //   let v = pre_searchCoordinates.split(",")
+      //   setCoords(v)
+      //   return
+      // }
+      // if (pre_searchCoordinates.match(regex_coords_slash)) {
+      //   let v = pre_searchCoordinates.split("/")
+      //   setCoords(v)
+      //   return
+      // }
+
+      if (searchCoordinates.length) {
+        this.loading = true
+        const ret = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
+        if (ret && ret.length) {
+          this.addressList = ret.map(v => {
+            const name = get(v.namedetails, 'alt_name', get(v.namedetails, 'name'))
+            const address = v.display_name ? v.display_name.replace(name, '').replace(/^, ?/, '') : ''
+            return {
+              lat: v.lat,
+              lon: v.lon,
+              name,
+              address
+            }
+          })
+        } else {
+          this.addressList = []
+        }
+        this.loading = false
+      }
+    }, 300)    
   }
 }
 </script>