From b5b52c52c78e4355fed118efb52e1be2049bcc3a Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 31 May 2024 17:15:16 +0200
Subject: [PATCH] New LocationOSMIDChip component

---
 src/components/LocationCard.vue           |  8 ++------
 src/components/LocationOSMIDChip.vue      | 23 +++++++++++++++++++++++
 src/components/LocationSelectorDialog.vue |  3 +++
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 src/components/LocationOSMIDChip.vue

diff --git a/src/components/LocationCard.vue b/src/components/LocationCard.vue
index 80607b3b2cb..17c5d988ad3 100644
--- a/src/components/LocationCard.vue
+++ b/src/components/LocationCard.vue
@@ -10,9 +10,7 @@
       <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>
+      <LocationOSMIDChip v-if="showLocationOSMID" :location="location" />
     </v-card-text>
   </v-card>
 </template>
@@ -26,6 +24,7 @@ import utils from '../utils.js'
 export default {
   components: {
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
   },
   props: {
     location: {
@@ -57,9 +56,6 @@ 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/LocationOSMIDChip.vue b/src/components/LocationOSMIDChip.vue
new file mode 100644
index 00000000000..7b31fddac90
--- /dev/null
+++ b/src/components/LocationOSMIDChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-chip label size="small" density="comfortable" title="OpenStreetMap ID">
+    {{ getLocationOSMID(location) }}
+  </v-chip>
+</template>
+
+<script>
+import utils from '../utils.js'
+
+export default {
+  props: {
+    location: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    getLocationOSMID(location) {
+      return utils.getLocationOSMID(location)
+    },
+  }
+}
+</script>
diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
index 29a39767093..4af511c04c3 100644
--- a/src/components/LocationSelectorDialog.vue
+++ b/src/components/LocationSelectorDialog.vue
@@ -60,6 +60,7 @@
                   <v-chip v-if="showLocationOSMID" label size="small" density="comfortable">
                     {{ getLocationOSMID(location) }}
                   </v-chip>
+                  <LocationOSMIDChip v-if="showLocationOSMID" :location="location" />
                 </v-card-text>
               </v-card>
             </v-col>
@@ -132,6 +133,7 @@
 <script>
 import 'leaflet/dist/leaflet.css'
 import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'
+import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
 import api from '../services/api'
@@ -143,6 +145,7 @@ export default {
     LTileLayer,
     LMarker,
     LPopup,
+    LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
   },
   emits: ['location', 'close'],
   data() {