feat(product): if brand missing, show warning color & tooltip (#422)

openfoodfacts · Mar 9, 2024 · 1b9a30a · 1b9a30a
1 parent 9bc58a5
commit 1b9a30a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 35 deletions.
diff --git a/src/components/PriceCard.vue b/src/components/PriceCard.vue
@@ -10,10 +10,8 @@
           <h3 v-if="!hideProductTitle" @click="goToProduct()">{{ getPriceProductTitle() }}</h3>
 
           <p v-if="!hideProductDetails" class="mb-2">
-            <span v-if="hasProductBrands">
-              <v-chip v-for="brand in getProductBrandsList" label size="small" density="comfortable" class="mr-1" @click="goToBrand(brand)">
-                {{ brand }}
-              </v-chip>
+            <span v-if="hasProductSource">
+              <ProductBrands :productBrands="product.brands" :readonly="readonly"></ProductBrands>
             </span>
             <span v-if="hasProductName">
               <ProductQuantityChip class="mr-1" :productQuantity="product.product_quantity" :productQuantityUnit="product.product_quantity_unit"></ProductQuantityChip>
@@ -48,6 +46,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    'ProductBrands': defineAsyncComponent(() => import('../components/ProductBrands.vue')),
     'ProductQuantityChip': defineAsyncComponent(() => import('../components/ProductQuantityChip.vue')),
     'PricePrice': defineAsyncComponent(() => import('../components/PricePrice.vue')),
     'PriceFooter': defineAsyncComponent(() => import('../components/PriceFooter.vue'))
@@ -90,12 +89,12 @@ export default {
     hasProductName() {
       return this.hasProduct && !!this.product.product_name
     },
+    hasProductSource() {
+      return this.hasProduct && !!this.product.source
+    },
     hasProductQuantity() {
       return this.hasProduct && !!this.product.product_quantity
     },
-    hasProductBrands() {
-      return this.hasProduct && !!this.product.brands
-    },
     hasPriceOrigin() {
       return this.hasPrice && !!this.price.origins_tags && this.price.origins_tags.length
     },
@@ -107,11 +106,6 @@ export default {
         return utils.getCategoryName(this.price.category_tag)
       }
     },
-    getProductBrandsList() {
-      if (this.hasProductBrands) {
-        return this.product.brands.split(',')
-      }
-    },
   },
   methods: {
     initPriceCard() {
@@ -154,12 +148,6 @@ export default {
       }
       this.$router.push({ path: `/products/${this.getPriceProductCode()}` })
     },
-    goToBrand(brand) {
-      if (this.readonly) {
-        return
-      }
-      this.$router.push({ path: `/brands/${brand}` })
-    },
   },
 }
 </script>
diff --git a/src/components/ProductBrands.vue b/src/components/ProductBrands.vue
@@ -0,0 +1,36 @@
+<template>
+    <span v-if="productBrands && productBrands.length">
+        <v-chip v-for="brand in getProductBrandsList" :key="brand" label size="small" density="comfortable" class="mr-1" @click="goToBrand(brand)">
+            {{ brand }}
+        </v-chip>
+    </span>
+    <v-chip v-if="!productBrands" label size="small" density="comfortable" prepend-icon="mdi-help" color="warning" class="mr-1">
+        {{ $t('ProductCard.BrandLower') }}
+        <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.ProductBrandMissing') }}</v-tooltip>
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    productBrands: String,
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getProductBrandsList() {
+      return this.productBrands.split(',')
+    }
+  },
+  methods: {
+    goToBrand(brand) {
+      if (this.readonly) {
+        return
+      }
+      this.$router.push({ path: `/brands/${brand}` })
+    },
+  }
+}
+</script>
diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
@@ -13,12 +13,10 @@
             <span>
               <PriceCountChip :count="product.price_count" @click="goToProduct()"></PriceCountChip>
             </span>
-            <span v-if="hasProductBrands">
-              <v-chip v-for="brand in getProductBrandsList" :key="brand" label size="small" density="comfortable" class="mr-1" @click="goToBrand(brand)">
-                {{ brand }}
-              </v-chip>
+            <span v-if="hasProductSource">
+              <ProductBrands :productBrands="product.brands" :readonly="readonly"></ProductBrands>
             </span>
-            <span v-if="hasProductName">
+            <span v-if="hasProductSource">
               <ProductQuantityChip class="mr-1" :productQuantity="product.product_quantity" :productQuantityUnit="product.product_quantity_unit"></ProductQuantityChip>
             </span>
             <br />
@@ -52,6 +50,7 @@ import { defineAsyncComponent } from 'vue'
 export default {
   components: {
     'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    'ProductBrands': defineAsyncComponent(() => import('../components/ProductBrands.vue')),
     'ProductQuantityChip': defineAsyncComponent(() => import('../components/ProductQuantityChip.vue')),
     'ProductCategoriesChip': defineAsyncComponent(() => import('../components/ProductCategoriesChip.vue')),
     'ProductLabelsChip': defineAsyncComponent(() => import('../components/ProductLabelsChip.vue')),
@@ -83,11 +82,6 @@ export default {
     hasProductQuantity() {
       return !!this.product.product_quantity
     },
-    getProductBrandsList() {
-      if (this.hasProductBrands) {
-        return this.product.brands.split(',')
-      }
-    }
   },
   methods: {
     getProductTitle() {
@@ -99,12 +93,6 @@ export default {
       }
       this.$router.push({ path: `/products/${this.product.code}` })
     },
-    goToBrand(brand) {
-      if (this.readonly) {
-        return
-      }
-      this.$router.push({ path: `/brands/${brand}` })
-    },
   }
 }
 </script>
diff --git a/src/components/ProductQuantityChip.vue b/src/components/ProductQuantityChip.vue
@@ -3,7 +3,7 @@
     {{ productQuantityWithUnitDisplay }}
   </v-chip>
   <v-chip v-else label size="small" density="comfortable" prepend-icon="mdi-help" color="warning">
-    <span>{{ productQuantityUnitDisplay }}</span>
+    {{ productQuantityUnitDisplay }}
     <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.ProductQuantityMissing') }}</v-tooltip>
   </v-chip>
 </template>

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -194,13 +194,15 @@
 		"Title": "Latest prices"
 	},
 	"ProductCard": {
+		"BrandLower": "brand",
 		"Categories": "Categories",
 		"CategoriesLower": "categories",
 		"CategoryTotal": "{count} categories",
 		"Labels": "Labels",
 		"LabelsLower": "labels",
 		"LabelTotal": "{count} labels",
 		"LatestPrice": "Latest price",
+		"ProductBrandMissing": "Product brand missing",
 		"ProductCategoriesMissing": "Product categories missing",
 		"ProductQuantityGram": "{0} g",
 		"ProductQuantityKilogram": "{0} kg",