restore geoloc (v2704)

components/Ui/Search/Address.vue

@@ -14,7 +14,9 @@
       :label="$t('where') + ' ?'"
       outlined
       append-icon="mdi-crosshairs-gps"
+      @click="onClick"
       @change="$emit('change', $event ? $event.value : '')"
+      @click:append="geolocalizeUser"
     />
     <v-snackbar :value="errorMsg !== ''">
       {{ errorMsg }}
@@ -92,23 +94,17 @@ export default Vue.extend({
       model: null as Address | null,
       search: null,
       features: [] as Array<Feature>,
+      items: [] as Array<Address>,
       loading: false,
-      errorMsg: ''
-    }
-  },
-  computed: {
-    items (): Array<Address> {
-      return this.features.map((f: Feature) => {
-        return {
-          text: f.properties.name + ' (' + f.properties.postcode + ')',
-          value: { longitude: f.geometry.coordinates[0] as number, latitude: f.geometry.coordinates[1] as number },
-          disabled: false
-        }
-      })
+      errorMsg: '',
+      geolocalized: false
     }
   },
   watch: {
     search (val: string) {
+      if (this.geolocalized) {
+        return
+      }
       if (!val) {
         this.features = []
         return
@@ -129,7 +125,13 @@ export default Vue.extend({
       fetch(encodeURI(apiUrl))
         .then(res => res.json())
         .then(({ features }) => {
-          this.features = features
+          this.items = features.map((f: Feature) => {
+            return {
+              text: f.properties.name + ' (' + f.properties.postcode + ')',
+              value: { longitude: f.geometry.coordinates[0] as number, latitude: f.geometry.coordinates[1] as number },
+              disabled: false
+            }
+          })
         })
         .catch((err) => {
           // eslint-disable-next-line no-console
@@ -144,20 +146,28 @@ export default Vue.extend({
     clear () {
       this.model = null
       this.search = null
-      this.features = []
+      this.items = []
       this.loading = false
       this.errorMsg = ''
+      this.geolocalized = false
+    },
+    onClick () {
+      this.clear()
     },
     geolocalizeUser () {
       if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(
           (position: { coords: { longitude: number, latitude: number }}) => {
             this.clear()
-            this.model = {
+            const loc = {
               text: this.$t('my_position') as string,
               value: { longitude: position.coords.longitude, latitude: position.coords.latitude },
               disabled: false
             }
+            this.geolocalized = true
+            this.items = [loc]
+            this.model = loc
+            this.$emit('change', loc.value)
           },
           () => {
             this.errorMsg = this.$t('geolocation_error') as string

pages/structures/index.vue

@@ -22,7 +22,7 @@
     <v-row>
       <!-- Map Column (hidden in 'list-view' mode)-->
       <v-col
-        v-show="mapview"
+        v-if="mapview"
         cols="12"
         sm="6"
       >
@@ -30,6 +30,7 @@
           <UiMapStructures
             ref="map"
             :structures="filteredStructures"
+            :zoom-at-start="mapZoomAtStart"
             @boundsUpdated="mapBoundsFilterChanged"
           />
         </no-ssr>
@@ -339,7 +340,8 @@ export default Vue.extend({
       federationFilter: null as number | null,
       distanceFilter: null as number | null,
       mapBoundsFilter: null as LatLngBounds | null,
-      mapBoundsFilterStarted: false // map bounds filter is only activated when the map bounds are updated
+      mapBoundsFilterStarted: false, // map bounds filter is only activated when the map bounds are updated
+      mapZoomAtStart: false
     }
   },
   async fetch () {
@@ -361,7 +363,7 @@ export default Vue.extend({
 
         // zoom on map markers (except if the parent structure is the CMF)
         if (this.parent !== CMF_ID) {
-          this.fitMapToResults()
+          this.mapZoomAtStart = true
         }
       })
   },
@@ -399,7 +401,7 @@ export default Vue.extend({
     viewChanged (e: number) {
       this.view = (e === 0) ? 'map' : 'list'
       if (this.mapview) {
-        this.fitMapToResults()
+        this.mapZoomAtStart = true
       }
     },
     textFilterChanged (newVal: string) {
@@ -526,7 +528,9 @@ export default Vue.extend({
      */
     search (): void {
       this.filteredStructures = this.structures.filter((s) => { return this.matchFilters(s) })
-      this.fitMapToResults()
+      if (this.mapview) {
+        this.fitMapToResults()
+      }
     },
     autocompleteSearchNormalize (s: string): string {
       return s