refactor(location): new LocationOSMTagChip component (#602)

openfoodfacts · May 31, 2024 · b0872ca · b0872ca
1 parent 48e6246
commit b0872ca
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 33 deletions.
diff --git a/src/components/LocationCard.vue b/src/components/LocationCard.vue
@@ -7,9 +7,7 @@
   >
     <v-card-text v-if="location">
       <PriceCountChip :count="location.price_count" :withLabel="true" />
-      <v-chip label size="small" density="comfortable" class="mr-1" title="OpenStreetMap tag">
-        {{ getLocationCategory(location) }}
-      </v-chip>
+      <LocationOSMTagChip :location="location" class="mr-1" />
       <LocationOSMIDChip v-if="showLocationOSMID" :location="location" />
     </v-card-text>
   </v-card>
@@ -24,6 +22,7 @@ import utils from '../utils.js'
 export default {
   components: {
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    LocationOSMTagChip: defineAsyncComponent(() => import('../components/LocationOSMTagChip.vue')),
     LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
   },
   props: {
@@ -53,9 +52,6 @@ export default {
       }
       return this.$route.params.id
     },
-    getLocationCategory(location) {
-      return utils.getLocationCategory(location)
-    },
     goToLocation(location) {
       if (this.readonly) {
         return

diff --git a/src/components/LocationOSMIDChip.vue b/src/components/LocationOSMIDChip.vue
@@ -1,6 +1,6 @@
 <template>
   <v-chip label size="small" density="comfortable" title="OpenStreetMap ID">
-    {{ getLocationOSMID(location) }}
+    {{ getLocationUniqueID(location) }}
   </v-chip>
 </template>
 
@@ -15,8 +15,8 @@ export default {
     }
   },
   methods: {
-    getLocationOSMID(location) {
-      return utils.getLocationOSMID(location)
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
     },
   }
 }

diff --git a/src/components/LocationOSMTagChip.vue b/src/components/LocationOSMTagChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-chip label size="small" density="comfortable" title="OpenStreetMap tag">
+    {{ getLocationTag(location) }}
+  </v-chip>
+</template>
+
+<script>
+import utils from '../utils.js'
+
+export default {
+  props: {
+    location: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    getLocationTag(location) {
+      return utils.getLocationTag(location)
+    },
+  }
+}
+</script>
diff --git 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="getLocationOSMID(location)"
+                :key="getLocationUniqueID(location)"
                 class="mb-2"
                 width="100%"
                 elevation="1"
@@ -54,25 +54,20 @@
                 <v-card-text>
                   <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                   {{ getLocationTitle(location, false, true, true) }}<br>
-                  <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>
+                  <LocationOSMTagChip :location="location" class="mr-1" />
                   <LocationOSMIDChip v-if="showLocationOSMID" :location="location" />
                 </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="getLocationOSMID(location)" :lat-lng="getLocationLatLng(location)">
+                <l-marker v-for="location in results" :key="getLocationUniqueID(location)" :lat-lng="getLocationLatLng(location)">
                   <l-popup>
                     <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
                     {{ getLocationTitle(location, false, true, true) }}<br>
                     <v-chip label size="small" density="comfortable">
-                      {{ getLocationCategory(location) }}
+                      {{ getLocationTag(location) }}
                     </v-chip>
                   </l-popup>
                 </l-marker>
@@ -97,7 +92,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationOSMID(location)"
+            :key="getLocationUniqueID(location)"
             class="mb-2"
             closable
             prepend-icon="mdi-history"
@@ -145,6 +140,7 @@ export default {
     LTileLayer,
     LMarker,
     LPopup,
+    LocationOSMTagChip: defineAsyncComponent(() => import('../components/LocationOSMTagChip.vue')),
     LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
   },
   emits: ['location', 'close'],
@@ -214,11 +210,11 @@ export default {
     getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
     },
-    getLocationOSMID(location) {
-      return utils.getLocationOSMID(location)
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
     },
-    getLocationCategory(location) {
-      return utils.getLocationCategory(location)
+    getLocationTag(location) {
+      return utils.getLocationTag(location)
     },
     getLocationLatLng(location) {
       return utils.getLocationLatLng(location)

diff --git a/src/utils.js b/src/utils.js
@@ -187,12 +187,12 @@ function getLocationType(locationObject) {
   return locationObject.osm_type.toUpperCase()
 }
 
-function getLocationOSMID(locationObject) {
+function getLocationUniqueID(locationObject) {
   // examples: N12345
   return `${getLocationType(locationObject)[0]}${getLocationID(locationObject).toString()}`
 }
 
-function getLocationCategory(locationObject) {
+function getLocationTag(locationObject) {
   // examples: shop:supermarket, shop:convenience, shop:bakery, shop:doityourself
   // Photon
   if (locationObject.properties) {
@@ -249,8 +249,8 @@ export default {
   getLocationTitle,
   getLocationID,
   getLocationType,
-  getLocationOSMID,
-  getLocationCategory,
+  getLocationUniqueID,
+  getLocationTag,
   getLocationLatLng,
   getMapBounds,
   getMapCenter,

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -95,7 +95,7 @@
           </h3>
           <v-chip
             v-for="location in recentLocations"
-            :key="getLocationOSMID(location)"
+            :key="getLocationUniqueID(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)
     },
-    getLocationOSMID(location) {
-      return utils.getLocationOSMID(location)
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -185,7 +185,7 @@
             </h3>
             <v-chip
               v-for="location in recentLocations"
-              :key="getLocationOSMID(location)"
+              :key="getLocationUniqueID(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)
     },
-    getLocationOSMID(location) {
-      return utils.getLocationOSMID(location)
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)