refactor(Price add): avoid raising validation error for optional fiel…

…ds. More compact display for receipt-only fields. ref #974
openfoodfacts · Dec 14, 2024 · ca865b1 · ca865b1
1 parent 84eab3e
commit ca865b1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/components/PriceInputRow.vue b/src/components/PriceInputRow.vue
@@ -47,6 +47,7 @@
         :label="$t('Common.QuantityBought')"
         type="text"
         inputmode="numeric"
+        :rules="receiptQuantityRules"
         :prepend-inner-icon="PROOF_TYPE_RECEIPT_ICON"
         hide-details="auto"
       />
@@ -112,6 +113,13 @@ export default {
         value => !value.match(/\.\d{3}/) || this.$t('PriceRules.TwoDecimals'),
       ]
     },
+    receiptQuantityRules() {
+      if (!this.priceForm.receipt_quantity) return [() => true]  // optional field
+      return [
+        value => !isNaN(value) || this.$t('PriceRules.Number'),
+        value => Number(value) >= 1 || this.$t('PriceRules.Positive'),
+      ]
+    },
     priceFormFilled() {
       let keys = ['price', 'currency']
       return Object.keys(this.priceForm).filter(k => keys.includes(k)).every(k => !!this.priceForm[k])

diff --git a/src/components/ProofMetadataInputRow.vue b/src/components/ProofMetadataInputRow.vue
@@ -31,30 +31,27 @@
     </v-col>
   </v-row>
   <v-row v-if="proofIsTypeReceipt">
-    <v-col class="pb-0" cols="12">
-      <h3 class="mb-1">
-        <v-icon size="x-small" :icon="PROOF_TYPE_RECEIPT_ICON" />
-        {{ $t('Common.AdditionalInfo') }}
-      </h3>
-    </v-col>
-  </v-row>
-  <v-row v-if="proofIsTypeReceipt" class="mt-0">
     <v-col cols="6">
       <v-text-field
         v-model="proofMetadataForm.receipt_price_count"
+        density="compact"
         :label="$t('Common.ReceiptPriceCount')"
         type="text"
         inputmode="numeric"
+        :rules="priceCountRules"
+        :prepend-inner-icon="PROOF_TYPE_RECEIPT_ICON"
         hide-details="auto"
       />
     </v-col>
     <v-col cols="6">
       <v-text-field
         v-model="proofMetadataForm.receipt_price_total"
+        density="compact"
         :label="$t('Common.ReceiptPriceTotal')"
         type="text"
         inputmode="decimal"
-        :rules="priceRules"
+        :rules="priceTotalRules"
+        :prepend-inner-icon="PROOF_TYPE_RECEIPT_ICON"
         :suffix="proofMetadataForm.currency"
         hide-details="auto"
         @update:modelValue="newValue => proofMetadataForm.receipt_price_total = fixComma(newValue)"
@@ -103,9 +100,16 @@ export default {
     proofIsTypeReceipt() {
       return this.proofType === constants.PROOF_TYPE_RECEIPT
     },
-    priceRules() {
+    priceCountRules() {
+      if (!this.proofMetadataForm.receipt_price_count) return [() => true]  // optional field
+      return [
+        value => !isNaN(value) || this.$t('PriceRules.Number'),
+        value => Number(value) >= 1 || this.$t('PriceRules.Positive'),
+      ]
+    },
+    priceTotalRules() {
+      if (!this.proofMetadataForm.receipt_price_total) return [() => true]  // optional field
       return [
-        // value => !!value && !!value.trim() || this.$t('PriceRules.AmountRequired'),
         value => !!value && !value.trim().match(/ /) || this.$t('PriceRules.NoSpaces'),
         value => !isNaN(value) || this.$t('PriceRules.Number'),
         value => Number(value) >= 0 || this.$t('PriceRules.Positive'),