feat(Location card): display Country & City if available

openfoodfacts · Aug 22, 2024 · b099621 · b099621
1 parent 4dbf004
commit b099621
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/src/components/CountryCard.vue b/src/components/CountryCard.vue
@@ -3,7 +3,7 @@
     <v-card-text>
       <LocationCountChip :count="locationCount" :withLabel="true" />
       <v-chip
-        v-if="city"
+        v-if="countryUrl"
         label size="small" density="comfortable" class="mr-1" @click="$router.push(countryUrl)"
       >
         {{ country }}
@@ -38,7 +38,7 @@ export default {
       return this.city ? `${this.city}, ${this.country}` : this.country
     },
     countryUrl() {
-      return `/countries/${this.country}`
+      return this.city ? `/countries/${this.country}` : null
     }
   }
 }

diff --git a/src/components/LocationCard.vue b/src/components/LocationCard.vue
@@ -9,6 +9,18 @@
       <PriceCountChip :count="location.price_count" :withLabel="true" />
       <LocationOSMTagChip :location="location" class="mr-1" />
       <LocationOSMIDChip v-if="showLocationOSMID" :location="location" />
+      <v-chip
+        v-if="!hideCountryCity && locationCountryCityUrl"
+        label size="small" density="comfortable" class="mr-1" :to="locationCountryCityUrl"
+      >
+        {{ location.osm_address_city }}
+      </v-chip>
+      <v-chip
+        v-if="!hideCountryCity && locationCountryUrl"
+        label size="small" density="comfortable" class="mr-1" :to="locationCountryUrl"
+      >
+        {{ location.osm_address_country }}
+      </v-chip>
       <LocationActionMenuButton :location="location" />
     </v-card-text>
   </v-card>
@@ -36,6 +48,10 @@ export default {
       type: Boolean,
       default: false
     },
+    hideCountryCity: {
+      type: Boolean,
+      default: false
+    },
     readonly: {
       type: Boolean,
       default: false
@@ -45,6 +61,12 @@ export default {
     ...mapStores(useAppStore),
     showLocationOSMID() {
       return !this.hideLocationOSMID && this.appStore.user.username && this.appStore.user.location_display_osm_id
+    },
+    locationCountryUrl() {
+      return this.location && this.location.osm_address_country ? `/countries/${this.location.osm_address_country}` : null
+    },
+    locationCountryCityUrl() {
+      return this.locationCountryUrl && this.location.osm_address_city ? `${this.locationCountryUrl}/cities/${this.location.osm_address_city}` : null
     }
   },
   methods: {

diff --git a/src/views/CountryCityDetail.vue b/src/views/CountryCityDetail.vue
@@ -17,7 +17,7 @@
 
   <v-row class="mt-0">
     <v-col v-for="location in countryCityLocationList" :key="location" cols="12" sm="6" md="4">
-      <LocationCard :location="location" :hideLocationOSMID="true" height="100%" />
+      <LocationCard :location="location" :hideLocationOSMID="true" :hideCountryCity="true" height="100%" />
     </v-col>
   </v-row>
 

diff --git a/src/views/CountryDetail.vue b/src/views/CountryDetail.vue
@@ -17,7 +17,7 @@
 
   <v-row class="mt-0">
     <v-col v-for="location in countryLocationList" :key="location" cols="12" sm="6" md="4">
-      <LocationCard :location="location" :hideLocationOSMID="true" height="100%" />
+      <LocationCard :location="location" :hideLocationOSMID="true" :hideCountryCity="true" height="100%" />
     </v-col>
   </v-row>
 

diff --git 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" :hideLocationOSMID="true" height="100%" />
+      <LocationCard :location="location" :hideLocationOSMID="true" :hideCountryCity="true" height="100%" />
     </v-col>
   </v-row>