Disable address autocomplete where required (nominatim)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/AddressAutoComplete.vue

@@ -7,12 +7,12 @@
                 <span v-else>{{ $t('Getting location') }}</span>
             </template>
             <b-autocomplete
-                    :data="data"
+                    :data="addressData"
                     v-model="queryText"
                     :placeholder="$t('e.g. 10 Rue Jangot')"
                     field="fullName"
                     :loading="isFetching"
-                    @typing="getAsyncData"
+                    @typing="fetchAsyncData"
                     icon="map-marker"
                     expanded
                     @select="updateSelected">
@@ -24,7 +24,7 @@
                 </template>
                 <template slot="empty">
                     <span v-if="isFetching">{{ $t('Searching…') }}</span>
-                    <div v-else class="is-enabled">
+                    <div v-else-if="queryText.length >= 3" class="is-enabled">
                         <span>{{ $t('No results for "{queryText}"') }}</span>
                         <span>{{ $t('You can try another search term or drag and drop the marker on the map', { queryText }) }}</span>
 <!--                        <p class="control" @click="openNewAddressModal">-->
@@ -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}`;

js/src/components/Map.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="map-container">
+    <div class="map-container" v-if="config">
         <l-map
                 :zoom="mergedOptions.zoom"
                 :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
@@ -9,8 +9,8 @@
                 @update:zoom="updateZoom"
         >
             <l-tile-layer
-                    url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
-                    :attribution="$t('© The OpenStreetMap Contributors')"
+                    :url="config.maps.tiles.endpoint"
+                    :attribution="attribution"
             >
 
             </l-tile-layer>
@@ -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');
+  }
 }
 </script>
 <style lang="scss" scoped>

js/src/graphql/config.ts

@@ -11,6 +11,16 @@ query {
       latitude,
       longitude,
       accuracyRadius
+    },
+    maps {
+      tiles {
+        endpoint,
+        attribution
+      }
+    },
+    geocoding {
+      provider,
+      autocomplete
     }
   }
 }

js/src/types/config.model.ts

@@ -9,4 +9,14 @@ export interface IConfig {
     longitude: number;
     accuracyRadius: number;
   };
+  maps: {
+    tiles: {
+      endpoint: string;
+      attribution: string|null;
+    },
+  };
+  geocoding: {
+    provider: string;
+    autocomplete: boolean;
+  };
 }