feat(BarcodeManualInputDialog): Smarter dialog, with products suggestions

src/components/BarcodeManualInputDialog.vue

@@ -19,22 +19,48 @@
             :hint="barcodeForm.barcode.length.toString()"
             persistent-hint
           />
-
           <v-btn
+            v-if="barcodeForm.barcode.length !== 13"
             type="submit"
             class="mt-2"
             :disabled="!formFilled"
           >
             {{ $t('BarcodeManualInput.Submit') }}
           </v-btn>
+
+          <h3 v-if="showInvalidBarcodeMessage" class="mb-1">
+            {{ $t('BarcodeManualInput.InvalidBarcode') }}
+          </h3>
+          <v-row class="mt-0">
+            <v-col v-if="!products" cols="12" sm="6" md="4" xl="3">
+              <v-skeleton-loader type="card" />
+            </v-col>
+            <v-col v-for="product in products" :key="product.code" cols="12" sm="6" md="4" xl="3">
+              <ProductCard :product="product" elevation="1" height="100%" :readonly="true" :hideProductActions="true" :hideProductBarcode="false" @click="productSelected(product)" />
+            </v-col>
+          </v-row>
+          <v-btn
+            v-if="showInvalidBarcodeMessage && products && products.length === 0"
+            class="mt-2"
+            @click="onSubmit()"
+          >
+            {{ $t('BarcodeManualInput.NoProductsFoundSubmit') }}
+          </v-btn>
         </v-form>
       </v-card-text>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
+import utils from '../utils.js'
+import api from '../services/api'
+
 export default {
+  components: {
+    ProductCard: defineAsyncComponent(() => import('../components/ProductCard.vue')),
+  },
   props: {
     preFillValue: {
       type: String,
@@ -46,14 +72,32 @@ export default {
     return {
       barcodeForm: {
         barcode: '',
-      }
+      },
+      products : [],
+      showInvalidBarcodeMessage: false
     }
   },
   computed: {
     formFilled() {
       return Object.values(this.barcodeForm).every(x => !!x)
     }
   },
+  watch: {
+    'barcodeForm.barcode'(barcode) {
+      this.showInvalidBarcodeMessage = false
+      this.products = []
+      if (barcode && barcode.length === 13) {
+        this.products = null
+        if (this.isValidBarcode(barcode)) {
+          this.showInvalidBarcodeMessage = false
+          this.getProduct(barcode).then(product => this.products = [product])
+        } else {
+          this.showInvalidBarcodeMessage = true
+          this.getProductsFromAdjacentBarcodes(barcode)
+        }
+      }
+    }
+  },
   mounted() {
     if (this.preFillValue) {
       this.barcodeForm.barcode = this.preFillValue
@@ -68,6 +112,33 @@ export default {
     close() {
       this.$emit('close')
     },
+    isValidBarcode(barcode) {
+      return utils.isValidBarcode(barcode)
+    },
+    getProduct(barcode) {
+      return api.getProductByCode(barcode)
+      .then((data) => {
+        if (data.id) {
+          return data
+        } 
+        return { code: barcode }
+      })
+    },
+    async getProductsFromAdjacentBarcodes(barcode) {
+      const adjacentBarcodes = utils.findAdjacentValidBarcodes(barcode)
+      let products = []
+      for (let i = 0; i < adjacentBarcodes.length; i++) {
+        const product = await this.getProduct(adjacentBarcodes[i])
+        if (product.id) {
+          products.push(product)
+        }
+      }
+      this.products = products
+    },
+    productSelected(product) {
+      this.barcodeForm.barcode = product.code
+      this.onSubmit()
+    },
   }
 }
 </script>

src/i18n/locales/en.json

@@ -130,7 +130,9 @@
 	"BarcodeManualInput": {
 		"Barcode": "Barcode",
 		"Submit": "Submit",
-		"Title": "Type a barcode"
+		"Title": "Type a barcode",
+		"InvalidBarcode": "EAN13 barcode looks invalid, looking for products with similar barcodes...",
+		"NoProductsFoundSubmit": "No products found, use barcode anyway"
 	},
 	"BrandDetail": {
 		"LoadMore": "Load more",

src/utils.js

@@ -42,6 +42,31 @@ function isValidBarcode(value) {
   return ((10 - (result % 10)) % 10) === parseInt(paddedValue.charAt(13), 10);
 }
 
+/**
+ * Finds valid barcodes that are one digit away from input value
+ */
+function findAdjacentValidBarcodes(value) {
+  let barcodes = []
+  const prefix = Array(value.length).fill("")
+  const suffix = Array(value.length).fill("")
+  // Precompute prefix and suffix arrays
+  for (let i = 0; i < value.length; i++) {
+    prefix[i] = value.slice(0, i);
+    suffix[i] = value.slice(i + 1);
+  }
+  for (let i = 0; i < value.length; i++) {
+    for (let j = 0; j < 10; j++) {
+      if (String(j) !== value[i]) {  // Skip identical barcode
+        const barcodeTested = prefix[i] + j + suffix[i]
+        if (isValidBarcode(barcodeTested)) {
+          barcodes.push(barcodeTested)
+        }
+      }
+    }
+  }
+  return barcodes
+}
+
 function addObjectToArray(arr, obj, unshift=false, avoidDuplicates=true) {
   // look for duplicate
   let duplicateItemIndex = arr.findIndex(item => JSON.stringify(item) === JSON.stringify(obj))
@@ -386,6 +411,7 @@ export default {
   getDocumentScrollPercentage,
   isNumber,
   isValidBarcode,
+  findAdjacentValidBarcodes,
   addObjectToArray,
   removeObjectFromArray,
   currentStartOfDay,