refactor(Price add): new Product form input (single button) (#1102)

openfoodfacts · Dec 8, 2024 · 79d4d26 · 79d4d26
1 parent dc5e3ba
commit 79d4d26
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 25 deletions.
diff --git a/src/components/BarcodeScannerDialog.vue b/src/components/BarcodeScannerDialog.vue
@@ -2,18 +2,53 @@
   <v-dialog scrollable max-height="80%" min-width="50%">
     <v-card>
       <v-card-title>
-        {{ $t('Common.BarcodeScan') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
+        {{ $t('Common.ProductFind') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
       </v-card-title>
 
       <v-divider />
 
       <v-card-text>
-        <div id="reader" width="500px" />
+        <v-tabs v-model="currentDisplay">
+          <v-tab v-for="item in displayItems" :key="item.key" :value="item.key">
+            <v-icon start>
+              {{ item.icon }}
+            </v-icon>
+            <span v-if="$vuetify.display.smAndUp">{{ $t('Common.' + item.value) }}</span>
+            <span v-else>
+              <span v-if="item.valueSmallScreen">{{ $t('Common.' + item.valueSmallScreen) }}</span>
+            </span>
+          </v-tab>
+        </v-tabs>
+
+        <v-tabs-window v-model="currentDisplay" disabled>
+          <v-tabs-window-item value="scan">
+            <div id="reader" width="500px" />
+          </v-tabs-window-item>
+
+          <v-tabs-window-item value="type">
+            <v-form @submit.prevent="onSubmit">
+              <v-text-field
+                ref="barcodeInput"
+                v-model="barcodeForm.barcode"
+                :label="$t('BarcodeManualInput.Barcode')"
+                type="number"
+                inputmode="numeric"
+                prepend-inner-icon="mdi-barcode"
+                :hint="barcodeForm.barcode.length.toString()"
+                persistent-hint
+              >
+                <template #append-inner>
+                  <v-icon icon="mdi-plus" :disabled="!formFilled" @click="onSubmit" />
+                </template>
+              </v-text-field>
+            </v-form>
+          </v-tabs-window-item>
+        </v-tabs-window>
       </v-card-text>
 
-      <v-divider />
+      <v-divider v-if="currentDisplay === 'scan'" />
 
-      <v-card-actions class="justify-end">
+      <v-card-actions v-if="currentDisplay === 'scan'" class="justify-end">
         <div>
           <i18n-t keypath="BarcodeScanner.Htlm5-qrcode.Text" tag="span">
             <template #url>
@@ -28,6 +63,7 @@
 
 <script>
 import { Html5Qrcode, Html5QrcodeScanType } from 'html5-qrcode'
+import constants from '../constants'
 
 const config = {
   fps: 10,
@@ -39,16 +75,37 @@ const config = {
 }
 
 export default {
+  props: {
+    preFillValue: {
+      type: String,
+      default: ''
+    }
+  },
   emits: ['barcode', 'close'],
   data() {
     return {
       scanner: null,
+      barcodeForm: {
+        barcode: '',
+      },
+      // config
+      displayItems: constants.PRODUCT_SELECTOR_DISPLAY_LIST,
+      currentDisplay: constants.PRODUCT_SELECTOR_DISPLAY_LIST[0].key,  // scan
       HTML5_QRCODE_URL: 'https://github.com/mebjas/html5-qrcode',
       HTML5_QRCODE_NAME: 'html5-qrcode'
     }
   },
+  computed: {
+    formFilled() {
+      return Object.values(this.barcodeForm).every(x => !!x)
+    }
+  },
   mounted() {
     this.createQrcodeScanner()
+    if (this.preFillValue) {
+      this.barcodeForm.barcode = this.preFillValue
+    }
+    // this.$refs.barcodeInput.focus()
   },
   methods: {
     createQrcodeScanner() {
@@ -62,6 +119,10 @@ export default {
     onScanFailure(error) {  // eslint-disable-line no-unused-vars
       // console.warn(`Code scan error = ${error}`)
     },
+    onSubmit() {
+      this.$emit('barcode', this.barcodeForm.barcode)
+      this.close()
+    },
     close() {
       // https://scanapp.org/html5-qrcode-docs/docs/apis/enums/Html5QrcodeScannerState
       if (this.scanner.getState() > 1) {

diff --git a/src/components/ProductInputRow.vue b/src/components/ProductInputRow.vue
@@ -14,20 +14,15 @@
           </v-item-group>
         </v-col>
       </v-row>
-      <v-row v-if="productForm.type === 'PRODUCT'">
+      <v-row v-if="productForm.type === 'PRODUCT'" class="mt-0">
         <v-col>
-          <v-btn class="mb-2 mr-2" size="small" prepend-icon="mdi-barcode-scan" @click="showBarcodeScannerDialog">
-            <span class="d-sm-none">{{ $t('AddPriceSingle.ProductInfo.ScanBarcodeShort') }}</span>
-            <span class="d-none d-sm-inline-flex">{{ $t('Common.BarcodeScan') }}</span>
-          </v-btn>
-          <v-btn class="mb-2" size="small" prepend-icon="mdi-numeric" @click.prevent="showBarcodeManualInputDialog">
-            <span class="d-sm-none">{{ $t('AddPriceSingle.ProductInfo.TypeBarcodeShort') }}</span>
-            <span class="d-none d-sm-inline-flex">{{ $t('Common.BarcodeType') }}</span>
+          <v-btn class="mb-2" size="small" prepend-icon="mdi-barcode-scan" :class="productForm.product ? 'border-success' : 'border-error'" @click="showBarcodeScannerDialog">
+            {{ $t('Common.ProductFind') }}
           </v-btn>
           <ProductCard v-if="productForm.product" :product="productForm.product" :hideCategoriesAndLabels="true" :hideProductActions="true" :readonly="true" elevation="1" />
         </v-col>
       </v-row>
-      <v-row v-if="productForm.type === 'CATEGORY'">
+      <v-row v-if="productForm.type === 'CATEGORY'" class="mt-0">
         <v-col cols="6">
           <v-autocomplete
             v-model="productForm.category_tag"
@@ -65,15 +60,9 @@
   <BarcodeScannerDialog
     v-if="barcodeScannerDialog"
     v-model="barcodeScannerDialog"
-    @barcode="setProductCode($event)"
-    @close="barcodeScannerDialog = false"
-  />
-  <BarcodeManualInputDialog
-    v-if="barcodeManualInputDialog"
-    v-model="barcodeManualInputDialog"
     :preFillValue="productForm.product_code"
     @barcode="setProductCode($event)"
-    @close="barcodeManualInputDialog = false"
+    @close="barcodeScannerDialog = false"
   />
 </template>
 
@@ -90,7 +79,6 @@ export default {
   components: {
     ProductCard: defineAsyncComponent(() => import('../components/ProductCard.vue')),
     BarcodeScannerDialog: defineAsyncComponent(() => import('../components/BarcodeScannerDialog.vue')),
-    BarcodeManualInputDialog: defineAsyncComponent(() => import('../components/BarcodeManualInputDialog.vue')),
   },
   props: {
     productForm: {
@@ -110,7 +98,6 @@ export default {
       originTags: [],  // list of origins tags for autocomplete  // see initPriceMultipleForm
       labelsTags: LabelsTags,
       barcodeScannerDialog: false,
-      barcodeManualInputDialog: false,
     }
   },
   computed: {
@@ -161,9 +148,6 @@ export default {
     showBarcodeScannerDialog() {
       this.barcodeScannerDialog = true
     },
-    showBarcodeManualInputDialog() {
-      this.barcodeManualInputDialog = true
-    },
     initProductForm() {
       this.productForm.product = null
       this.productForm.product_code = ''

diff --git a/src/constants.js b/src/constants.js
@@ -156,6 +156,11 @@ export default {
     { key: 'osm', value: 'Physical', valueSmallScreen: 'Physical', icon: LOCATION_TYPE_OSM_ICON },
     { key: 'online', value: 'Online', valueSmallScreen: 'Online', icon: LOCATION_TYPE_ONLINE_ICON },
   ],
+  PRODUCT_SELECTOR_DISPLAY_LIST: [
+    // { key: 'recent', value: 'Recent', valueSmallScreen: '', icon: 'mdi-history' },  // Recent
+    { key: 'scan', value: 'BarcodeScan', valueSmallScreen: 'BarcodeScanShort', icon: 'mdi-barcode-scan' },
+    { key: 'type', value: 'BarcodeType', valueSmallScreen: 'BarcodeTypeShort', icon: 'mdi-numeric' },
+  ],
   DATE_FULL_REGEX_MATCH: /(\d{4})-(\d{2})-(\d{2})/,
   DATE_YEAR_MONTH_REGEX_MATCH: /(\d{4})-(\d{2})/,
   DATE_YEAR_REGEX_MATCH: /(\d{4})/,

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -142,7 +142,9 @@
 		"Barcode": "Barcode",
 		"Barcodes": "Barcodes",
 		"BarcodeScan": "Scan a barcode",
+		"BarcodeScanShort": "Scan",
 		"BarcodeType": "Type a barcode",
+		"BarcodeTypeShort": "Type",
 		"BarcodeInvalid": "Invalid barcode",
 		"Brand": "Brand",
 		"Brands": "Brands",
@@ -241,6 +243,7 @@
 		"Private": "Private",
 		"Privacy": "Privacy",
 		"ProductCount": "{count} products | {count} product | {count} products",
+		"ProductFind": "Find the product",
 		"ProofCount": "{count} proofs | {count} proof | {count} proofs",
 		"ProofMissing": "Proof missing",
 		"ProofSelect": "Select a proof",