From 3374aa6e9922b2dca41c77381a9be2aba090eaa6 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 31 May 2024 17:00:27 +0200
Subject: [PATCH] Show Location OSM ID chip in LocationCard & Location search

---
 src/components/LocationCard.vue           | 15 +++++++++++++++
 src/components/LocationSelectorDialog.vue | 18 ++++++++++++------
 src/utils.js                              |  4 ++--
 src/views/AddPriceMultiple.vue            |  6 +++---
 src/views/AddPriceSingle.vue              |  6 +++---
 src/views/LocationList.vue                |  2 +-
 src/views/UserSettings.vue                |  2 +-
 7 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/components/LocationCard.vue b/src/components/LocationCard.vue
index 1eee4559178..aeaa5901432 100644
--- a/src/components/LocationCard.vue
+++ b/src/components/LocationCard.vue
@@ -10,6 +10,9 @@
       <v-chip label size="small" density="comfortable" class="mr-1" title="OpenStreetMap tag">
         {{ getLocationCategory(location) }}
       </v-chip>
+      <v-chip v-if="showLocationOSMID" label size="small" density="comfortable" class="mr-1" title="OpenStreetMap ID">
+        {{ getLocationOSMID(location) }}
+      </v-chip>
     </v-card-text>
   </v-card>
 </template>
@@ -27,11 +30,20 @@ export default {
       type: [Object, null],
       required: true
     },
+    hideLocationOSMID: {
+      type: Boolean,
+      default: false
+    },
     readonly: {
       type: Boolean,
       default: false
     }
   },
+  computed: {
+    showLocationOSMID() {
+      return !this.hideLocationOSMID && this.appStore.user.username && this.appStore.user.location_display_osm_id
+    }
+  },
   methods: {
     getLocationTitle(location) {
       if (location) {
@@ -42,6 +54,9 @@ export default {
     getLocationCategory(location) {
       return utils.getLocationCategory(location)
     },
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
+    },
     goToLocation(location) {
       if (this.readonly) {
         return
diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
index 8f7790e289b..29a39767093 100644
--- a/src/components/LocationSelectorDialog.vue
+++ b/src/components/LocationSelectorDialog.vue
@@ -45,7 +45,7 @@
             <v-col cols="12" sm="6">
               <v-card
                 v-for="location in results"
-                :key="getLocationUniqueID(location)"
+                :key="getLocationOSMID(location)"
                 class="mb-2"
                 width="100%"
                 elevation="1"
@@ -54,16 +54,19 @@
                 <v-card-text>
                   <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                   {{ getLocationTitle(location, false, true, true) }}<br>
-                  <v-chip label size="small" density="comfortable">
+                  <v-chip label size="small" density="comfortable" class="mr-1">
                     {{ getLocationCategory(location) }}
                   </v-chip>
+                  <v-chip v-if="showLocationOSMID" label size="small" density="comfortable">
+                    {{ getLocationOSMID(location) }}
+                  </v-chip>
                 </v-card-text>
               </v-card>
             </v-col>
             <v-col cols="12" sm="6" style="min-height:200px">
               <l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
                 <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
-                <l-marker v-for="location in results" :key="getLocationUniqueID(location)" :lat-lng="getLocationLatLng(location)">
+                <l-marker v-for="location in results" :key="getLocationOSMID(location)" :lat-lng="getLocationLatLng(location)">
                   <l-popup>
                     <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                     {{ getLocationTitle(location, false, true, true) }}<br>
@@ -93,7 +96,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationUniqueID(location)"
+            :key="getLocationOSMID(location)"
             class="mb-2"
             closable
             prepend-icon="mdi-history"
@@ -167,6 +170,9 @@ export default {
     recentLocations() {
       return this.appStore.getRecentLocations()
     },
+    showLocationOSMID() {
+      return this.appStore.user.username && this.appStore.user.location_display_osm_id
+    }
   },
   mounted() {
     this.$refs.locationInput.focus()
@@ -205,8 +211,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     getLocationCategory(location) {
       return utils.getLocationCategory(location)
diff --git a/src/utils.js b/src/utils.js
index c91a407288b..f21a974d4a5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -187,7 +187,7 @@ function getLocationType(locationObject) {
   return locationObject.osm_type.toUpperCase()
 }
 
-function getLocationUniqueID(locationObject) {
+function getLocationOSMID(locationObject) {
   // examples: N12345
   return `${getLocationType(locationObject)[0]}${getLocationID(locationObject).toString()}`
 }
@@ -249,7 +249,7 @@ export default {
   getLocationTitle,
   getLocationID,
   getLocationType,
-  getLocationUniqueID,
+  getLocationOSMID,
   getLocationCategory,
   getLocationLatLng,
   getMapBounds,
diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
index 10846436996..d28ea5f250f 100644
--- a/src/views/AddPriceMultiple.vue
+++ b/src/views/AddPriceMultiple.vue
@@ -95,7 +95,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationUniqueID(location)"
+            :key="getLocationOSMID(location)"
             class="mb-2"
             :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
             @click="setLocationData(location)"
@@ -590,8 +590,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index 48c84bd7f6f..d9c5fac5d70 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -185,7 +185,7 @@
             </h3>
             <v-chip
               v-for="location in recentLocations"
-              :key="getLocationUniqueID(location)"
+              :key="getLocationOSMID(location)"
               class="mb-2"
               :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
               @click="setLocationData(location)"
@@ -539,8 +539,8 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)
diff --git a/src/views/LocationList.vue b/src/views/LocationList.vue
index 4df13897ac9..038c3164ec0 100644
--- a/src/views/LocationList.vue
+++ b/src/views/LocationList.vue
@@ -14,7 +14,7 @@
 
   <v-row class="mt-0">
     <v-col v-for="location in locationList" :key="location" cols="12" sm="6" md="4">
-      <LocationCard :location="location" height="100%" />
+      <LocationCard :location="location" :hideLocationOSMID="true" height="100%" />
     </v-col>
   </v-row>
 
diff --git a/src/views/UserSettings.vue b/src/views/UserSettings.vue
index ce532878b6b..4949b4a325d 100644
--- a/src/views/UserSettings.vue
+++ b/src/views/UserSettings.vue
@@ -48,8 +48,8 @@
             <h3 class="mt-4 mb-1">
               {{ $t('Common.Products') }}
             </h3>
-            <!-- Locations -->
             <v-checkbox v-model="appStore.user.product_display_barcode" :label="$t('UserSettings.ProductDisplayBarcode')" hide-details="auto" />
+            <!-- Locations -->
             <h3 class="mt-4 mb-1">
               {{ $t('Common.Locations') }}
             </h3>