From bfb1dbbf073239a7d274b89370ec491081748997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Sun, 27 Oct 2024 23:13:08 +0100
Subject: [PATCH] refactor(Location search): add search hint, improve map zoom
 for single result (#992)

---
 src/components/LeafletMap.vue             |  8 +------
 src/components/LocationSelectorDialog.vue | 26 ++++++++++++-----------
 src/utils.js                              |  2 +-
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue
index d40e14c817..715a190437 100644
--- a/src/components/LeafletMap.vue
+++ b/src/components/LeafletMap.vue
@@ -45,13 +45,7 @@ export default {
   },
   mounted() {
     if (this.locations.length) {
-      if (this.locations.length > 1) {
-        this.mapBounds = utils.getMapBounds(this.locations)
-      } else {
-        this.mapCenter = utils.getMapCenter(this.locations)
-        // this.mapZoom = 12
-        this.mapBounds = null
-      }
+      this.mapBounds = utils.getMapBounds(this.locations)
     }
     if (this.theme.global.name === "dark") {
       this.tiles = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
index 91ff45def7..9fec19051e 100644
--- a/src/components/LocationSelectorDialog.vue
+++ b/src/components/LocationSelectorDialog.vue
@@ -13,12 +13,13 @@
             ref="locationInput"
             v-model="locationSearchForm.q"
             :label="$t('LocationSelector.SearchByName')"
+            :hint="$t('Common.ExamplesWithColonAndValue', { value: 'Auchan Grenoble ; Carrefour rue la fayette 75010 paris ; N12208020359' })"
             type="text"
             append-inner-icon="mdi-magnify"
             :rules="[fieldRequired]"
-            hide-details="auto"
             :loading="loading"
             required
+            persistent-hint
             @click:append-inner="search"
           />
         </v-form>
@@ -31,17 +32,15 @@
           </i18n-t>
         </p>
 
-        <v-sheet v-if="results && Array.isArray(results)">
-          <v-divider />
-
-          <h3>
+        <v-sheet v-if="results">
+          <h3 class="mt-4 mb-1">
             <i18n-t keypath="LocationSelector.Result" tag="span">
               <template #resultNumber>
-                <small>{{ results.length }}</small>
+                <small>{{ Array.isArray(results) ? results.length : 0 }}</small>
               </template>
             </i18n-t>
           </h3>
-          <v-row>
+          <v-row v-if="Array.isArray(results)">
             <v-col cols="12" sm="6">
               <v-card
                 v-for="location in results"
@@ -63,10 +62,10 @@
               <LeafletMap :locations="results" />
             </v-col>
           </v-row>
-        </v-sheet>
 
-        <v-sheet v-if="results && (typeof results === 'string')">
-          {{ results }}
+          <p v-else-if="typeof results === 'string'">
+            {{ results }}
+          </p>
         </v-sheet>
 
         <v-sheet v-if="recentLocations.length">
@@ -163,8 +162,10 @@ export default {
       this.$refs.locationInput.blur()
       this.results = null
       this.loading = true
-      if (utils.isNumber(this.locationSearchForm.q)) {
-        api.openstreetmapNominatimLookup(this.locationSearchForm.q)
+      // search by id (N12208020359, 12208020359)
+      if (utils.isNumber(this.locationSearchForm.q.substring(1))) {
+        const id = utils.isNumber(this.locationSearchForm.q.substring(0, 1)) ? this.locationSearchForm.q : this.locationSearchForm.q.substring(1) 
+        api.openstreetmapNominatimLookup(id)
         .then((data) => {
           this.loading = false
           if (data.length) {
@@ -173,6 +174,7 @@ export default {
             this.results = this.$t('LocationSelector.NoResult')
           }
         })
+      // search by name
       } else {
         api.openstreetmapSearch(this.locationSearchForm.q, this.searchProvider)
         .then((data) => {
diff --git a/src/utils.js b/src/utils.js
index 412188b770..2322313a3e 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -360,7 +360,7 @@ function getMapCenter(results) {
     // OP
     return [results[0].osm_lat, results[0].osm_lon]
   }
-  results [45, 5]
+  return [45, 5]
 }
 
 // OP location