New LocationOSMIDChip component

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

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>

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() {