feat(products): display popup with product labels (#396)

src/components/ProductCard.vue

@@ -26,7 +26,7 @@
               <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">
+              <v-chip label size="small" density="comfortable" @click="showProductLabelsDialog">
                 {{ $t('ProductCard.LabelTotal', { count: (product && product.labels_tags) ? product.labels_tags.length : 0 }) }}
               </v-chip>
             </span>
@@ -53,6 +53,12 @@
     v-model="productCategoriesDialog"
     @close="productCategoriesDialog = false"
   ></ProductCategoriesDialog>
+  <ProductLabelsDialog
+    v-if="product && product.labels_tags && productLabelsDialog"
+    :labels="product.labels_tags"
+    v-model="productLabelsDialog"
+    @close="productLabelsDialog = false"
+  ></ProductLabelsDialog>
 </template>
 
 <script>
@@ -65,6 +71,7 @@ export default {
     'PricePrice': defineAsyncComponent(() => import('../components/PricePrice.vue')),
     'PriceFooter': defineAsyncComponent(() => import('../components/PriceFooter.vue')),
     'ProductCategoriesDialog': defineAsyncComponent(() => import('../components/ProductCategoriesDialog.vue')),
+    'ProductLabelsDialog': defineAsyncComponent(() => import('../components/ProductLabelsDialog.vue')),
   },
   props: {
     'product': null,
@@ -75,6 +82,7 @@ export default {
     return {
       productImageDefault: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg',
       productCategoriesDialog: false,
+      productLabelsDialog: false
     }
   },
   mounted() {
@@ -102,6 +110,9 @@ export default {
     showProductCategoriesDialog() {
       this.productCategoriesDialog = true
     },
+    showProductLabelsDialog() {
+      this.productLabelsDialog = true
+    },
     goToProduct() {
       if (this.readonly) {
         return

src/components/ProductLabelsDialog.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-dialog>
+    <v-card>
+      <v-card-title>
+        {{ $t('ProductLabels.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="labels.length">
+        <v-chip v-for="label in labels" :key="label" label class="mr-2 mb-2">
+          {{ label }}
+        </v-chip>
+      </v-card-text>
+      <v-card-text v-if="!labels.length">
+        <span class="text-red">{{ $t('ProductLabels.Empty') }}</span>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    'labels': Array,
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+  }
+}
+</script>

src/i18n/locales/en.json

@@ -202,6 +202,10 @@
 		"LoadMore": "Load more",
 		"ProductNotFound": "Product not found in Open Food Facts... Don't hesitate to add it :)"
 	},
+	"ProductLabels": {
+		"Title": "Labels",
+		"Empty": "No labels have been added to this product yet."
+	},
 	"ProductList": {
 		"HideProductsWithPrices": "Hide products with prices",
 		"LoadMore": "Load more",