refactor(proof card): if location missing, show chip with error & too…

…ltip (#657)
openfoodfacts · Jun 24, 2024 · 7e27d62 · 7e27d62
1 parent 932a930
commit 7e27d62
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/components/LocationChip.vue b/src/components/LocationChip.vue
@@ -1,8 +1,13 @@
 <template>
-  <v-chip label size="small" density="comfortable" @click="goToLocation()">
-    <v-icon start icon="mdi-map-marker-outline" />
-    {{ locationTitle }}
+  <v-chip label size="small" prepend-icon="mdi-map-marker-outline" density="comfortable" :color="locationMissingAndShowError ? 'error' : 'default'" @click="goToLocation()">
+    <span v-if="locationId">{{ locationTitle }}</span>
     <span v-if="locationEmoji" style="margin-inline-start:5px">{{ locationEmoji }}</span>
+    <span v-else-if="locationMissingAndShowError">
+      <i class="text-lowercase">{{ $t('Common.Location') }}</i>
+      <v-tooltip activator="parent" open-on-click location="top">
+        {{ $t('Common.LocationMissing') }}
+      </v-tooltip>
+    </span>
   </v-chip>
 </template>
 
@@ -23,6 +28,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showErrorIfLocationMissing: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
     locationTitle() {
@@ -36,11 +45,14 @@ export default {
         return utils.getCountryEmojiFromCode(this.location.osm_address_country_code)
       }
       return null
+    },
+    locationMissingAndShowError() {
+      return !this.locationId && this.showErrorIfLocationMissing
     }
   },
   methods: {
     goToLocation() {
-      if (this.readonly) {
+      if (!this.locationId || this.readonly) {
         return
       }
       this.$router.push({ path: `/locations/${this.locationId}` })

diff --git a/src/components/ProofFooter.vue b/src/components/ProofFooter.vue
@@ -2,7 +2,7 @@
   <v-row>
     <v-col :cols="userIsProofOwner ? '11' : '12'">
       <ProofTypeChip class="mr-1" :proof="proof" />
-      <LocationChip class="mr-1" :location="proof.location" :locationId="proof.location_id" :readonly="readonly" />
+      <LocationChip class="mr-1" :location="proof.location" :locationId="proof.location_id" :readonly="readonly" :showErrorIfLocationMissing="true" />
       <DateChip class="mr-1" :date="proof.date" :showErrorIfDateMissing="true" />
       <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()" />
       <CurrencyChip class="mr-1" :currency="proof.currency" :showErrorIfCurrencyMissing="true" />

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -114,7 +114,9 @@
 		"Currency": "Currency",
 		"CurrencyMissing": "Currency missing",
 		"Language": "Languages",
+		"Location": "Location",
 		"Locations": "Locations",
+		"LocationMissing": "Location missing",
 		"Date": "Date",
 		"DateMissing": "Date missing",
 		"Details": "Details",