{{ $t('No results for "{queryText}"') }}
{{ $t('You can try another search term or drag and drop the marker on the map', { queryText }) }}
@@ -92,19 +92,25 @@ import { Address, IAddress } from '@/types/address.model';
import { ADDRESS, REVERSE_GEOCODE } from '@/graphql/address';
import { Modal } from 'buefy/dist/components/dialog';
import { LatLng } from 'leaflet';
+import { debounce } from 'lodash';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
@Component({
components: {
'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
Modal,
},
+ apollo: {
+ config: CONFIG,
+ },
})
export default class AddressAutoComplete extends Vue {
@Prop({ required: true }) value!: IAddress;
- data: IAddress[] = [];
- selected!: IAddress;
+ addressData: IAddress[] = [];
+ selected: IAddress = new Address();
isFetching: boolean = false;
queryText: string = this.value && (new Address(this.value)).fullName || '';
addressModalActive: boolean = false;
@@ -112,25 +118,27 @@ export default class AddressAutoComplete extends Vue {
private location!: Position;
private gettingLocationError: any;
private mapDefaultZoom: number = 15;
+ config!: IConfig;
- @Watch('value')
- updateEditing() {
- this.selected = this.value;
- const address = new Address(this.selected);
- this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
+ // We put this in data because of issues like https://github.com/vuejs/vue-class-component/issues/263
+ data() {
+ return {
+ fetchAsyncData: debounce(this.asyncData, 500),
+ };
}
- async getAsyncData(query) {
+ async asyncData(query: String) {
if (!query.length) {
- this.data = [];
+ this.addressData = [];
this.selected = new Address();
return;
}
if (query.length < 3) {
- this.data = [];
+ this.addressData = [];
return;
}
+
this.isFetching = true;
const result = await this.$apollo.query({
query: ADDRESS,
@@ -141,14 +149,29 @@ export default class AddressAutoComplete extends Vue {
},
});
- this.data = result.data.searchAddress.map(address => new Address(address));
+ this.addressData = result.data.searchAddress.map(address => new Address(address));
this.isFetching = false;
}
+ @Watch('config')
+ watchConfig(config: IConfig) {
+ if (!config.geocoding.autocomplete) {
+ // If autocomplete is disabled, we put a larger debounce value so that we don't request with incomplete address
+ // @ts-ignore
+ this.fetchAsyncData = debounce(this.asyncData, 2000);
+ }
+ }
+
+ @Watch('value')
+ updateEditing() {
+ this.selected = this.value;
+ const address = new Address(this.selected);
+ this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
+ }
+
updateSelected(option) {
if (option == null) return;
this.selected = option;
- console.log('update selected', this.selected);
this.$emit('input', this.selected);
}
@@ -174,8 +197,8 @@ export default class AddressAutoComplete extends Vue {
},
});
- this.data = result.data.reverseGeocode.map(address => new Address(address));
- const defaultAddress = new Address(this.data[0]);
+ this.addressData = result.data.reverseGeocode.map(address => new Address(address));
+ const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress;
this.$emit('input', this.selected);
this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
diff --git a/js/src/components/Map.vue b/js/src/components/Map.vue
index 9721cc763..99f94c89a 100644
--- a/js/src/components/Map.vue
+++ b/js/src/components/Map.vue
@@ -1,5 +1,5 @@
-
+
@@ -30,9 +30,14 @@ import 'leaflet/dist/leaflet.css';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from 'vue2-leaflet';
import Vue2LeafletLocateControl from '@/components/Map/Vue2LeafletLocateControl.vue';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
@Component({
components: { LTileLayer, LMap, LMarker, LPopup, LIcon, 'v-locatecontrol': Vue2LeafletLocateControl },
+ apollo: {
+ config: CONFIG,
+ },
})
export default class Map extends Vue {
@Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean;
@@ -52,6 +57,7 @@ export default class Map extends Vue {
};
zoom = this.defaultOptions.zoom;
+ config!: IConfig;
mounted() {
// this part resolve an issue where the markers would not appear
@@ -90,13 +96,16 @@ export default class Map extends Vue {
}
updateDraggableMarkerPosition(e: LatLng) {
- console.log('updateDraggableMarkerPosition', e);
this.updateDraggableMarkerCallback(e, this.zoom);
}
updateZoom(zoom: Number) {
this.zoom = zoom;
}
+
+ get attribution() {
+ return this.config.maps.tiles.attribution || this.$t('© The OpenStreetMap Contributors');
+ }
}