refactor: new ProductCountChip component (#716)

openfoodfacts · Aug 17, 2024 · fabdf44 · fabdf44
1 parent cab3da2
commit fabdf44
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/BrandCard.vue b/src/components/BrandCard.vue
@@ -1,10 +1,7 @@
 <template>
   <v-card :title="brand" prepend-icon="mdi-factory" data-name="brand-card">
     <v-card-text>
-      <v-chip label size="small" density="comfortable" class="mr-1">
-        <v-icon start icon="mdi-food-outline" />
-        <span id="product-count">{{ $t('BrandDetail.BrandProductTotal', { count: productCount }) }}</span>
-      </v-chip>
+      <ProductCountChip :count="productCount" :withLabel="true" />
       <BrandActionMenuButton :brand="brand" />
     </v-card-text>
   </v-card>
@@ -15,7 +12,8 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
-    BrandActionMenuButton: defineAsyncComponent(() => import('../components/BrandActionMenuButton.vue')),
+    ProductCountChip: defineAsyncComponent(() => import('../components/ProductCountChip.vue')),
+    BrandActionMenuButton: defineAsyncComponent(() => import('../components/BrandActionMenuButton.vue'))
   },
   props: {
     brand: {

diff --git a/src/components/CategoryCard.vue b/src/components/CategoryCard.vue
@@ -1,10 +1,7 @@
 <template>
   <v-card v-if="category" :title="category.name" prepend-icon="mdi-fruit-watermelon" data-name="category-card">
     <v-card-text>
-      <v-chip v-if="sourceCategory" label size="small" density="comfortable" class="mr-1">
-        <v-icon start icon="mdi-food-outline" />
-        {{ $t('CategoryDetail.CategoryProductTotal', { count: productCount }) }}
-      </v-chip>
+      <ProductCountChip v-if="sourceCategory" :count="productCount" :withLabel="true" />
       <PriceCountChip v-else-if="sourceProduct" :count="priceCount" />
       <CategoryTagChip v-if="showProductCategoryTag" :category="category" />
       <CategoryActionMenuButton :category="category" :source="source" />
@@ -19,6 +16,7 @@ import { useAppStore } from '../store'
 
 export default {
   components: {
+    ProductCountChip: defineAsyncComponent(() => import('../components/ProductCountChip.vue')),
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     CategoryTagChip: defineAsyncComponent(() => import('../components/CategoryTagChip.vue')),
     CategoryActionMenuButton: defineAsyncComponent(() => import('../components/CategoryActionMenuButton.vue')),

diff --git a/src/components/ProductCountChip.vue b/src/components/ProductCountChip.vue
@@ -0,0 +1,22 @@
+<template>
+  <v-chip label size="small" density="comfortable" class="mr-1">
+    <v-icon start icon="mdi-food-outline" />
+    <span v-if="withLabel" id="product-count">{{ $t('Common.ProductCount', { count: count }) }}</span>
+    <span v-else id="product-count">{{ count }}</span>
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      default: null
+    },
+    withLabel: {
+      type: Boolean,
+      default: false
+    },
+  }
+}
+</script>