feat(products): display popup with product categories (#369)

openfoodfacts · Feb 23, 2024 · 69aa514 · 69aa514
1 parent 648b8f2
commit 69aa514
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
@@ -14,7 +14,7 @@
               <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)">
+              <v-chip v-for="brand in getProductBrandsList" :key="brand" label size="small" density="comfortable" class="mr-1" @click="goToBrand(brand)">
                 {{ brand }}
               </v-chip>
             </span>
@@ -23,11 +23,11 @@
             </span>
             <br />
             <span>
-              <v-chip label size="small" density="comfortable" class="mr-1">
-                {{ $t('ProductCard.CategoryTotal', { count: product ? product.categories_tags.length : 0 }) }}
+              <v-chip label size="small" density="comfortable" class="mr-1" @click="showProductCategoriesDialog">
+                {{ $t('ProductCard.CategoryTotal', { count: (product && product.categories_tags) ? product.categories_tags.length : 0 }) }}
               </v-chip>
               <v-chip label size="small" density="comfortable">
-                {{ $t('ProductCard.LabelTotal', { count: product ? product.labels_tags.length : 0 }) }}
+                {{ $t('ProductCard.LabelTotal', { count: (product && product.labels_tags) ? product.labels_tags.length : 0 }) }}
               </v-chip>
             </span>
             <br />
@@ -46,6 +46,13 @@
       </v-sheet>
     </v-container>
   </v-card>
+
+  <ProductCategoriesDialog
+    v-if="product && product.categories_tags && productCategoriesDialog"
+    :categories="product.categories_tags"
+    v-model="productCategoriesDialog"
+    @close="productCategoriesDialog = false"
+  ></ProductCategoriesDialog>
 </template>
 
 <script>
@@ -56,7 +63,8 @@ export default {
     'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     'ProductQuantityChip': defineAsyncComponent(() => import('../components/ProductQuantityChip.vue')),
     'PricePrice': defineAsyncComponent(() => import('../components/PricePrice.vue')),
-    'PriceFooter': defineAsyncComponent(() => import('../components/PriceFooter.vue'))
+    'PriceFooter': defineAsyncComponent(() => import('../components/PriceFooter.vue')),
+    'ProductCategoriesDialog': defineAsyncComponent(() => import('../components/ProductCategoriesDialog.vue')),
   },
   props: {
     'product': null,
@@ -66,6 +74,7 @@ export default {
   data() {
     return {
       productImageDefault: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg',
+      productCategoriesDialog: false,
     }
   },
   mounted() {
@@ -87,6 +96,9 @@ export default {
     getProductTitle() {
       return this.product.product_name || this.$t('ProductCard.UnknownProduct')
     },
+    showProductCategoriesDialog() {
+      this.productCategoriesDialog = true
+    },
     goToProduct() {
       if (this.readonly) {
         return

diff --git a/src/components/ProductCategoriesDialog.vue b/src/components/ProductCategoriesDialog.vue
@@ -0,0 +1,41 @@
+<template>
+  <v-dialog>
+    <v-card>
+      <v-card-title>
+        {{ $t('ProductCategories.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+      </v-card-title>
+
+      <v-divider></v-divider>
+
+      <v-card-text v-if="categories.length">
+        <v-chip v-for="category in categories" :key="category" label class="mr-2 mb-2">
+          {{ category }}
+        </v-chip>
+      </v-card-text>
+      <v-card-text v-if="!categories.length">
+        <span class="text-red">{{ $t('ProductCategories.Empty') }}</span>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    'categories': Array,
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+  }
+}
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -182,6 +182,10 @@
 		"ProductQuantityLitre": "{0} L",
 		"UnknownProduct": "Unknown product name"
 	},
+	"ProductCategories": {
+		"Title": "Categories",
+		"Empty": "No categories have been added to this product yet."
+	},
 	"ProductDetail": {
 		"AddPrice": "Add a price",
 		"CategoryNotFound": "Category not found...",