refactor(product): if labels missing, don't show dialog (#421)

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

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/src/components/ProductLabelsChip.vue b/src/components/ProductLabelsChip.vue
@@ -1,10 +1,13 @@
 <template>
-  <v-chip label size="small" density="comfortable" class="mr-1" @click="showProductLabelsDialog">
-    {{ $t('ProductCard.LabelTotal', { count: productLabels ? productLabels.length : 0 }) }}
+  <v-chip v-if="productLabels.length" label size="small" density="comfortable" @click="showProductLabelsDialog">
+    {{ $t('ProductCard.LabelTotal', { count: productLabels.length }) }}
+  </v-chip>
+  <v-chip v-else label size="small" density="comfortable"><!-- prepend-icon="mdi-help" color="warning" -->
+    {{ $t('ProductCard.LabelTotal', { count: 0 }) }}
   </v-chip>
 
   <ProductLabelsDialog
-    v-if="productLabels && productLabelsDialog"
+    v-if="productLabels.length && productLabelsDialog"
     :labels="productLabels"
     v-model="productLabelsDialog"
     @close="productLabelsDialog = false"
@@ -19,15 +22,16 @@ export default {
     'ProductLabelsDialog': defineAsyncComponent(() => import('../components/ProductLabelsDialog.vue')),
   },
   props: {
-    productLabels: null,
+    productLabels: {
+      type: Array,
+      default: []
+    }
   },
   data() {
     return {
       productLabelsDialog: false
     }
   },
-  computed: {
-  },
   methods: {
     showProductLabelsDialog() {
       this.productLabelsDialog = true

diff --git a/src/components/ProductLabelsDialog.vue b/src/components/ProductLabelsDialog.vue
@@ -2,35 +2,24 @@
   <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>
+        {{ $t('ProductCard.Labels') }} <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-card-text>
         <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() {
+    labels: Array,
   },
   methods: {
     close() {

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -197,10 +197,11 @@
 		"Categories": "Categories",
 		"CategoriesLower": "categories",
 		"CategoryTotal": "{count} categories",
+		"Labels": "Labels",
+		"LabelsLower": "labels",
 		"LabelTotal": "{count} labels",
 		"LatestPrice": "Latest price",
 		"ProductCategoriesMissing": "Product categories missing",
-		"ProductLabelsMissing": "Product labels missing",
 		"ProductQuantityGram": "{0} g",
 		"ProductQuantityKilogram": "{0} kg",
 		"ProductQuantityLitre": "{0} L",
@@ -215,10 +216,6 @@
 		"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",