From f821b75967d66b3808b847a20067fc27721fb8c6 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Sun, 4 Feb 2024 12:55:15 +0100
Subject: [PATCH] feat(l10n): translate category list in price add form
 depending on user locale (#275)

---
 src/utils.js                   |  6 +++---
 src/views/AddPriceMultiple.vue | 13 ++++++++++---
 src/views/AddPriceSingle.vue   | 13 ++++++++-----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index d9aaa098eb..6fc6154207 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -82,8 +82,8 @@ function prettyRelativeDateTime(dateTimeString, size=null) {
   diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 10 && day_diff + " days ago" || Math.ceil(day_diff / 7) + " weeks ago";
 }
 
-function getCategory(categoryId) {
-  return CategoryTags.find(ct => ct.id === categoryId)
+function getLocaleCategoryTags(locale) {
+  return import(`./data/categories/${locale}.json`)
 }
 
 function getCountryEmojiFromName(countryString) {
@@ -144,7 +144,7 @@ export default {
   prettyDate,
   prettyDateTime,
   prettyRelativeDateTime,
-  getCategory,
+  getLocaleCategoryTags,
   getCountryEmojiFromName,
   getLocationTitle,
 }
diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
index 64f81bcf9b..76c76dbebe 100644
--- a/src/views/AddPriceMultiple.vue
+++ b/src/views/AddPriceMultiple.vue
@@ -374,7 +374,7 @@ export default {
         {key: 'category', value: this.$t('AddPriceSingle.ProductModeList.Category'), icon: 'mdi-basket-outline'}
       ],
       productMode: null,
-      categoryTags: CategoryTags,  // list of category tags for autocomplete
+      categoryTags: null,  // list of category tags for autocomplete  // see initPriceMultipleForm
       originsTags: OriginsTags,  // list of origins tags for autocomplete
       labelsTags: LabelsTags,
       barcodeScanner: false,
@@ -435,10 +435,17 @@ export default {
   },
   mounted() {
     this.initPriceMultipleForm()
-    this.proofType = this.$route.path.endsWith('/receipt') ? 'RECEIPT' : 'PRICE_TAG'
   },
   methods: {
     initPriceMultipleForm() {
+      /**
+       * init form config (product mode, categories, last locations)
+       * (init form done in initNewProductPriceForm)
+       */
+      this.proofType = this.$route.path.endsWith('/receipt') ? 'RECEIPT' : 'PRICE_TAG'
+      utils.getLocaleCategoryTags(this.appStore.user.language.code).then((module) => {
+        this.categoryTags = module.default
+      })
       if (this.recentLocations.length) {
         this.setLocationData(this.recentLocations[0])
       }
@@ -529,10 +536,10 @@ export default {
       this.product = null
     },
     initNewProductPriceForm() {
+      this.productMode = this.appStore.user.last_product_mode_used
       this.clearProductPriceForm()
       this.productPriceForm = JSON.parse(JSON.stringify(this.productPriceNew))
       this.productPriceForm.currency = this.appStore.user.last_currency_used
-      this.productMode = this.appStore.user.last_product_mode_used
       this.productPriceForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
     },
     createPrice() {
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index d9ec8c7ad2..e96f8bb316 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -258,7 +258,6 @@ import ProductCard from '../components/ProductCard.vue'
 import BarcodeScanner from '../components/BarcodeScanner.vue'
 import BarcodeManualInput from '../components/BarcodeManualInput.vue'
 import LocationSelector from '../components/LocationSelector.vue'
-import CategoryTags from '../data/category-tags.json'
 import OriginsTags from '../data/origins-tags.json'
 import LabelsTags from '../data/labels-tags.json'
 
@@ -304,7 +303,7 @@ export default {
         {key: 'category', value: this.$t('AddPriceSingle.ProductModeList.Category'), icon: 'mdi-basket-outline'}
       ],
       productMode: null,  // 'barcode' or 'category'  // see initPriceSingleForm
-      categoryTags: CategoryTags,  // list of category tags for autocomplete
+      categoryTags: null,  // list of category tags for autocomplete  // see initPriceSingleForm
       originsTags: OriginsTags,  // list of origins tags for autocomplete
       labelsTags: LabelsTags,
       barcodeScanner: false,
@@ -374,14 +373,18 @@ export default {
     },
     initPriceSingleForm() {
       /**
-       * init product mode, currency & last location
+       * init form config (product mode, categories, last locations)
+       * init form
        */
       this.productMode = this.addPriceSingleForm.product_code ? 'barcode' : this.appStore.user.last_product_mode_used
-      this.addPriceSingleForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
-      this.addPriceSingleForm.currency = this.appStore.user.last_currency_used
+      utils.getLocaleCategoryTags(this.appStore.user.language.code).then((module) => {
+        this.categoryTags = module.default
+      })
       if (this.recentLocations.length) {
         this.setLocationData(this.recentLocations[0])
       }
+      this.addPriceSingleForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
+      this.addPriceSingleForm.currency = this.appStore.user.last_currency_used
     },
     clearProof() {
       this.proofImage = null