keep refactoring new map feature

This commit is contained in:
lesion
2022-11-18 14:13:59 +01:00
parent 2a64366c7a
commit 1b74bee945

View File

@@ -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
} }