refactor(Price add): move proof_id & code init to ProductInputRow com…

…ponent. ref #584 & #168
openfoodfacts · Oct 9, 2024 · 8042b82 · 8042b82
1 parent a7a9fb3
commit 8042b82
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/src/components/ProductInputRow.vue b/src/components/ProductInputRow.vue
@@ -2,7 +2,7 @@
   <v-row>
     <v-col>
       <h3 class="mb-2">
-        <v-item-group v-model="productForm.mode" class="d-inline" mandatory>
+        <v-item-group v-model="productForm.mode" class="d-inline" mandatory @update:modelValue="setMode($event)">
           <v-item v-for="pm in productModeList" :key="pm.key" v-slot="{ isSelected, toggle }" :value="pm.key">
             <v-chip class="mr-1" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'" @click="toggle">
               <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'" />
@@ -66,13 +66,13 @@
   <BarcodeScannerDialog
     v-if="barcodeScannerDialog"
     v-model="barcodeScannerDialog"
-    @barcode="productForm.product_code = $event"
+    @barcode="setProductCode($event)"
     @close="barcodeScannerDialog = false"
   />
   <BarcodeManualInputDialog
     v-if="barcodeManualInputDialog"
     v-model="barcodeManualInputDialog"
-    @barcode="productForm.product_code = $event"
+    @barcode="setProductCode($event)"
     @close="barcodeManualInputDialog = false"
   />
 </template>
@@ -126,20 +126,6 @@ export default {
     },
   },
   watch: {
-    'productForm.mode'(newProductMode, oldProductMode) {
-      // reset product_code and category_tag when switching mode
-      if (oldProductMode) {
-        this.initProductForm()
-      }
-    },
-    ['productForm.product_code']: {
-      handler(newProductCode, oldProductCode) {  // eslint-disable-line no-unused-vars
-        if (newProductCode) {
-          this.getProduct(newProductCode)
-        }
-      },
-      immediate: true
-    },
     productFormFilled: {
       handler(newProductFormFilled, oldProductFormFilled) {  // eslint-disable-line no-unused-vars
         this.$emit('filled', newProductFormFilled)
@@ -148,13 +134,26 @@ export default {
     }
   },
   mounted() {
+    if (this.$route.query.code) {
+      if (this.$route.query.code.startsWith('en')) {
+        this.productForm.mode = 'category'
+        this.productForm.category_tag = this.$route.query.code
+      }
+      else {
+        this.productForm.mode = 'barcode'
+        this.productForm.product_code = this.$route.query.code
+      }
+    }
     utils.getLocaleCategoryTags(this.appStore.getUserLanguage).then((module) => {
       this.categoryTags = module.default
     })
     utils.getLocaleOriginTags(this.appStore.getUserLanguage).then((module) => {
       this.originTags = module.default
     })
     this.productForm.mode = this.productForm.mode ? this.productForm.mode : (this.productForm.product_code ? 'barcode' : this.appStore.user.last_product_mode_used)
+    if (this.productForm.product_code) {
+      this.getProduct(this.productForm.product_code)
+    }
   },
   methods: {
     showBarcodeScannerDialog() {
@@ -170,6 +169,14 @@ export default {
       this.productForm.origins_tags = ''
       this.productForm.labels_tags = []
     },
+    setMode(mode) {
+      this.productForm.mode = mode
+      this.initProductForm()
+    },
+    setProductCode(code) {
+      this.productForm.product_code = code
+      this.getProduct(code)
+    },
     getProduct(code) {
       this.productForm.product = null
       api

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -168,14 +168,14 @@ export default {
       // product price data
       proofPriceNewList: [],
       productPriceNew: {
-        mode: '',
+        mode: '',  // see ProductInputRow
         product: null,
         product_code: '',
         category_tag: null,
         origins_tags: '',
         labels_tags: [],
         price: null,
-        price_per: null, // see PriceInputRow
+        price_per: null,
         price_is_discounted: false,
         price_without_discount: null,
         currency: null  // see initNewProductPriceForm
@@ -261,7 +261,7 @@ export default {
     initNewProductPriceForm() {
       this.clearProductPriceForm()
       this.productPriceForm = JSON.parse(JSON.stringify(this.productPriceNew))  // deep copy
-      this.productPriceForm.mode = this.appStore.user.last_product_mode_used
+      this.productPriceForm.mode = this.appStore.user.last_product_mode_used  // can be overriden in ProductInputRow
       this.productPriceForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
       this.productPriceForm.currency = this.addPriceMultipleForm.currency || this.appStore.getUserLastCurrencyUsed  // get currency from proof first
     },

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -159,16 +159,6 @@ export default {
     },
   },
   mounted() {
-    if (this.$route.query.code) {
-      if (this.$route.query.code.startsWith('en')) {
-        this.addPriceSingleForm.mode = 'category'
-        this.addPriceSingleForm.category_tag = this.$route.query.code
-      }
-      else {
-        this.addPriceSingleForm.mode = 'barcode'
-        this.addPriceSingleForm.product_code = this.$route.query.code
-      }
-    }
     this.initPriceSingleForm()
   },
   methods: {