feat: add price_count to ProofCard (create new PriceCountChip compone…

…nt) (#279)
openfoodfacts · Feb 4, 2024 · a6f5276 · a6f5276
1 parent 57cd661
commit a6f5276
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 72 deletions.
diff --git a/src/components/PriceCard.vue b/src/components/PriceCard.vue
@@ -105,17 +105,6 @@ export default {
         return utils.getCategoryName(this.price.category_tag)
       }
     },
-    getProductPriceCountColor() {
-      if (this.product.price_count === 0) {
-        return 'error'
-      }
-      if (this.product.price_count === 1) {
-        return 'warning'
-      }
-      if (this.product.price_count > 1) {
-        return 'success'
-      }
-    },
     getProductBrandsList() {
       if (this.hasProductBrands) {
         return this.product.brands.split(',')

diff --git a/src/components/PriceCountChip.vue b/src/components/PriceCountChip.vue
@@ -0,0 +1,29 @@
+<template>
+  <v-chip label size="small" density="comfortable" :color="getColor()" class="mr-1">
+    <v-icon start icon="mdi-tag-outline"></v-icon>
+    <span v-if="withLabel">{{ $t('PriceCountChip.PriceCount', { count: count }) }}</span>
+    <span v-if="!withLabel">{{ count }}</span>
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    'count': null,
+    'withLabel': false
+  },
+  methods: {
+    getColor() {
+      if (this.count === 0) {
+        return 'error'
+      }
+      if (this.count === 1) {
+        return 'warning'
+      }
+      if (this.count > 1) {
+        return 'success'
+      }
+    },
+  }
+}
+</script>
diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
@@ -11,10 +11,7 @@
 
           <p class="mb-2">
             <span>
-              <v-chip label size="small" density="comfortable" :color="getProductPriceCountColor" class="mr-1" @click="goToProduct()">
-                <v-icon start icon="mdi-tag-outline"></v-icon>
-                {{ product.price_count }}
-              </v-chip>
+              <PriceCountChip :count="product.price_count" @click="goToProduct()"></PriceCountChip>
             </span>
             <span v-if="hasProductBrands">
               <v-chip v-for="brand in getProductBrandsList" label size="small" density="comfortable" class="mr-1" @click="goToBrand(brand)">
@@ -45,11 +42,13 @@
 </template>
 
 <script>
+import PriceCountChip from '../components/PriceCountChip.vue'
 import PricePrice from '../components/PricePrice.vue'
 import PriceFooter from '../components/PriceFooter.vue'
 
 export default {
   components: {
+    PriceCountChip,
     PricePrice,
     PriceFooter,
   },
@@ -72,17 +71,6 @@ export default {
     hasProductQuantity() {
       return !!this.product.product_quantity
     },
-    getProductPriceCountColor() {
-      if (this.product.price_count === 0) {
-        return 'error'
-      }
-      if (this.product.price_count === 1) {
-        return 'warning'
-      }
-      if (this.product.price_count > 1) {
-        return 'success'
-      }
-    },
     getProductBrandsList() {
       if (this.hasProductBrands) {
         return this.product.brands.split(',')

diff --git a/src/components/ProofCard.vue b/src/components/ProofCard.vue
@@ -7,17 +7,20 @@
           <v-icon start icon="mdi-paperclip"></v-icon>
           {{ proof.type }}
         </v-chip>
+        <PriceCountChip :count="proof.price_count" :withLabel="true"></PriceCountChip>
         <RelativeDateTimeChip :dateTime="proof.created"></RelativeDateTimeChip>
       </div>
     </v-card-text>
   </v-card>
 </template>
 
 <script>
+import PriceCountChip from '../components/PriceCountChip.vue'
 import RelativeDateTimeChip from '../components/RelativeDateTimeChip.vue'
 
 export default {
   components: {
+    PriceCountChip,
     RelativeDateTimeChip,
   },
   props: {

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -121,14 +121,12 @@
 	"LocationDetail": {
 		"LatestPrices": "Latest prices",
 		"LoadMore": "Load more",
-		"LocationNotFound": "Location not found in OpenStreetMap... Don't hesitate to add it :)",
-		"LocationPriceTotal": "{count} prices"
+		"LocationNotFound": "Location not found in OpenStreetMap... Don't hesitate to add it :)"
 	},
 	"LocationList": {
 		"Title": "Top locations",
 		"LoadMore": "Load more",
-		"LocationTotal": "{count} locations",
-		"LocationPriceCount": "{count} prices"
+		"LocationTotal": "{count} locations"
 	},
 	"LocationSelector": {
 		"Clear": "Clear",
@@ -156,6 +154,9 @@
 		"FullPrice": "Full price",
 		"UnknownProduct": "Unknown product"
 	},
+	"PriceCountChip": {
+		"PriceCount": "{count} prices"
+	},
 	"PriceList": {
 		"LoadMore": "Load more",
 		"Title": "Latest prices"
@@ -248,14 +249,12 @@
 	},
 	"UserDetail": {
 		"LatestPrices": "Latest prices",
-		"LoadMore": "Load more",
-		"UserPriceTotal": "{count} prices"
+		"LoadMore": "Load more"
 	},
 	"UserList": {
 		"LoadMore": "Load more",
 		"Title": "Top contributors",
-		"UserTotal": "{count} contributors",
-		"UserPriceCount": "{count} prices"
+		"UserTotal": "{count} contributors"
 	},
 	"UserSettings": {
 		"AddingPrices": "Adding prices",

diff --git a/src/views/LocationDetail.vue b/src/views/LocationDetail.vue
@@ -6,10 +6,7 @@
         :subtitle="location ? location.osm_display_name : ''"
         :prepend-icon="location ? 'mdi-map-marker-outline' : 'mdi-map-marker-remove-variant'">
         <v-card-text>
-          <v-chip label size="small" density="comfortable" class="mr-1">
-            <v-icon start icon="mdi-tag-outline"></v-icon>
-            {{ $t('LocationDetail.LocationPriceTotal', { count: locationPriceTotal }) }}
-          </v-chip>
+          <PriceCountChip :count="locationPriceTotal" :withLabel="true"></PriceCountChip>
         </v-card-text>
       </v-card>
     </v-col>
@@ -50,11 +47,13 @@
 <script>
 import api from '../services/api'
 import utils from '../utils.js'
+import PriceCountChip from '../components/PriceCountChip.vue'
 import PriceCard from '../components/PriceCard.vue'
 import ShareButton from '../components/ShareButton.vue'
 
 export default {
   components: {
+    PriceCountChip,
     PriceCard,
     ShareButton,
   },

diff --git a/src/views/LocationList.vue b/src/views/LocationList.vue
@@ -22,10 +22,7 @@
         height="100%"
         @click="goToLocation(location)">
         <v-card-text>
-          <v-chip label size="small" density="comfortable" :color="getLocationPriceCountColor(location)" class="mr-1">
-            <v-icon start icon="mdi-tag-outline"></v-icon>
-            {{ $t('LocationList.LocationPriceCount', { count: location.price_count }) }}
-          </v-chip>
+          <PriceCountChip :count="location.price_count" :withLabel="true"></PriceCountChip>
         </v-card-text>
       </v-card>
     </v-col>
@@ -41,8 +38,12 @@
 <script>
 import api from '../services/api'
 import utils from '../utils.js'
+import PriceCountChip from '../components/PriceCountChip.vue'
 
 export default {
+  components: {
+    PriceCountChip,
+  },
   data() {
     return {
       // data
@@ -75,17 +76,6 @@ export default {
     getLocationTitle(location) {
       return utils.getLocationTitle(location, true, false, true, true)
     },
-    getLocationPriceCountColor(location) {
-      if (location.price_count === 0) {
-        return 'error'
-      }
-      if (location.price_count === 1) {
-        return 'warning'
-      }
-      if (location.price_count > 1) {
-        return 'success'
-      }
-    },
     goToLocation(location) {
       this.$router.push({ path: `/locations/${location.id}` })
     },

diff --git a/src/views/UserDetail.vue b/src/views/UserDetail.vue
@@ -3,10 +3,7 @@
     <v-col cols="12" sm="6">
       <v-card :title="username" prepend-icon="mdi-account">
         <v-card-text>
-          <v-chip label size="small" density="comfortable" class="mr-1">
-            <v-icon start icon="mdi-tag-outline"></v-icon>
-            {{ $t('UserDetail.UserPriceTotal', { count: userPriceTotal }) }}
-          </v-chip>
+          <PriceCountChip :count="userPriceTotal" :withLabel="true"></PriceCountChip>
         </v-card-text>
       </v-card>
     </v-col>
@@ -43,12 +40,14 @@
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
 import api from '../services/api'
+import PriceCountChip from '../components/PriceCountChip.vue'
 import PriceCard from '../components/PriceCard.vue'
 import OpenFoodFactsButton from '../components/OpenFoodFactsButton.vue'
 import ShareButton from '../components/ShareButton.vue'
 
 export default {
   components: {
+    PriceCountChip,
     PriceCard,
     OpenFoodFactsButton,
     ShareButton,

diff --git a/src/views/UserList.vue b/src/views/UserList.vue
@@ -21,10 +21,7 @@
         height="100%"
         @click="goToUser(user)">
         <v-card-text>
-          <v-chip label size="small" density="comfortable" :color="getUserPriceCountColor(user)" class="mr-1">
-            <v-icon start icon="mdi-tag-outline"></v-icon>
-            {{ $t('UserList.UserPriceCount', { count: user.price_count }) }}
-          </v-chip>
+          <PriceCountChip :count="user.price_count" :withLabel="true"></PriceCountChip>
         </v-card-text>
       </v-card>
     </v-col>
@@ -39,8 +36,12 @@
 
 <script>
 import api from '../services/api'
+import PriceCountChip from '../components/PriceCountChip.vue'
 
 export default {
+  components: {
+    PriceCountChip,
+  },
   data() {
     return {
       // data
@@ -70,17 +71,6 @@ export default {
           this.loading = false
         })
     },
-    getUserPriceCountColor(user) {
-      if (user.price_count === 0) {
-        return 'error'
-      }
-      if (user.price_count === 1) {
-        return 'warning'
-      }
-      if (user.price_count > 1) {
-        return 'success'
-      }
-    },
     goToUser(user) {
       this.$router.push({ path: `/users/${user.user_id}` })
     },