keep refactoring new map feature
This commit is contained in:
@@ -31,18 +31,19 @@ v-row.mb-4
|
|||||||
//- @change="changeAddress"
|
//- @change="changeAddress"
|
||||||
//- :value="value.address")
|
//- :value="value.address")
|
||||||
v-col(cols=12 md=6)
|
v-col(cols=12 md=6)
|
||||||
v-combobox.mr-4(ref='address'
|
v-combobox(ref='address'
|
||||||
:prepend-icon='mdiMapSearch'
|
:prepend-icon='mdiMapSearch'
|
||||||
:disabled='disableAddress'
|
:disabled='disableAddress'
|
||||||
@input.native='searchCoordinates'
|
@input.native='searchAddress'
|
||||||
:label="$t('event.coordinates_search')"
|
:label="$t('common.address')"
|
||||||
|
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
|
||||||
:value='value.address'
|
:value='value.address'
|
||||||
persistent-hint hide-no-data clearable no-filter
|
persistent-hint hide-no-data clearable no-filter
|
||||||
:loading='loading'
|
:loading='loading'
|
||||||
@change='selectDetails'
|
@change='selectAddress'
|
||||||
@focus='searchCoordinates'
|
@focus='searchAddress'
|
||||||
:items="detailsList"
|
:items="addressList"
|
||||||
:hint="$t('event.coordinates_search_description')")
|
:hint="$t('event.address_description')")
|
||||||
template(v-slot:item="{ item, attrs, on }")
|
template(v-slot:item="{ item, attrs, on }")
|
||||||
v-list-item(v-bind='attrs' v-on='on')
|
v-list-item(v-bind='attrs' v-on='on')
|
||||||
v-list-item-content(two-line v-if='item')
|
v-list-item-content(two-line v-if='item')
|
||||||
@@ -62,8 +63,8 @@ v-row.mb-4
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude } from '@mdi/js'
|
import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude } from '@mdi/js'
|
||||||
import debounce from 'lodash/debounce'
|
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
import get from 'lodash/get'
|
import get from 'lodash/get'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -78,10 +79,7 @@ export default {
|
|||||||
placeName: '',
|
placeName: '',
|
||||||
places: [],
|
places: [],
|
||||||
disableAddress: true,
|
disableAddress: true,
|
||||||
details: { },
|
addressList: [],
|
||||||
detailsView: '',
|
|
||||||
detailsList: [],
|
|
||||||
disableDetails: true,
|
|
||||||
loading: false
|
loading: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -153,12 +151,12 @@ export default {
|
|||||||
}
|
}
|
||||||
this.$emit('input', { ...this.place })
|
this.$emit('input', { ...this.place })
|
||||||
},
|
},
|
||||||
changeAddress (v) {
|
// changeAddress (v) {
|
||||||
this.place.address = v
|
// this.place.address = v
|
||||||
this.$emit('input', { ...this.place })
|
// this.$emit('input', { ...this.place })
|
||||||
this.disableDetails = false
|
// this.disableDetails = false
|
||||||
},
|
// },
|
||||||
selectDetails (v) {
|
selectAddress (v) {
|
||||||
if (!v) { return }
|
if (!v) { return }
|
||||||
if (typeof v === 'object') {
|
if (typeof v === 'object') {
|
||||||
this.place.latitude = v.lat
|
this.place.latitude = v.lat
|
||||||
@@ -171,7 +169,7 @@ export default {
|
|||||||
}
|
}
|
||||||
this.$emit('input', { ...this.place })
|
this.$emit('input', { ...this.place })
|
||||||
},
|
},
|
||||||
searchCoordinates: debounce(async function(ev) {
|
searchAddress: debounce(async function(ev) {
|
||||||
const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
|
const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
|
||||||
// allow pasting coordinates lat/lon and lat,lon
|
// allow pasting coordinates lat/lon and lat,lon
|
||||||
const searchCoordinates = pre_searchCoordinates.replace('/', ',')
|
const searchCoordinates = pre_searchCoordinates.replace('/', ',')
|
||||||
@@ -207,7 +205,7 @@ export default {
|
|||||||
this.loading = true
|
this.loading = true
|
||||||
const ret = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
|
const ret = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
|
||||||
if (ret && ret.length) {
|
if (ret && ret.length) {
|
||||||
this.detailsList = ret.map(v => {
|
this.addressList = ret.map(v => {
|
||||||
const name = get(v.namedetails, 'alt_name', get(v.namedetails, 'name'))
|
const name = get(v.namedetails, 'alt_name', get(v.namedetails, 'name'))
|
||||||
const address = v.display_name ? v.display_name.replace(name, '').replace(/^, ?/, '') : ''
|
const address = v.display_name ? v.display_name.replace(name, '').replace(/^, ?/, '') : ''
|
||||||
return {
|
return {
|
||||||
@@ -218,7 +216,7 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.detailsList = []
|
this.addressList = []
|
||||||
}
|
}
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user