Barcode decoder as user selection

JhumanJ · Dec 17, 2024 · c45bbeb · c45bbeb
1 parent 551cf80
commit c45bbeb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/client/components/forms/BarcodeInput.vue b/client/components/forms/BarcodeInput.vue
@@ -10,6 +10,7 @@
     >
       <CameraUpload
         :is-barcode-mode="true"
+        :decoders="decoders"
         @stop-webcam="stopScanning"
         @barcode-detected="handleBarcodeDetected"
       />
@@ -109,6 +110,10 @@ export default {
 
   props: {
     ...inputProps,
+    decoders: {
+      type: Array,
+      default: () => []
+    }
   },
 
   setup(props, context) {

diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
@@ -117,6 +117,10 @@ export default {
       type: Boolean,
       default: false
     },
+    decoders: {
+      type: Array,
+      default: () => []
+    }
   },
   emits: ['stopWebcam', 'uploadImage', 'barcodeDetected'],
   data: () => ({
@@ -174,14 +178,7 @@ export default {
             },
           },
           decoder: {
-            readers: [
-              "ean_reader",
-              "ean_8_reader",
-              "code_128_reader",
-              "code_39_reader",
-              "upc_reader",
-              "upc_e_reader"
-            ]
+            readers: this.decoders || []
           },
           locate: true
         }, (err) => {

diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
@@ -339,6 +339,10 @@ export default {
         inputProperties.columns = field.columns
       }
 
+      if (field.type === 'barcode') {
+        inputProperties.decoders = field.decoders
+      }
+
       if (['select','multi_select'].includes(field.type) && !this.isFieldRequired) {
         inputProperties.clearable = true
       }

diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -77,6 +77,27 @@
       />
     </div>
 
+    <!-- Barcode Reader -->
+    <div
+      v-if="field.type === 'barcode'"
+      class="px-4"
+    >
+      <EditorSectionHeader
+        icon="i-material-symbols-barcode-scanner-rounded"
+        title="Barcode Reader"
+      />
+      <select-input
+        name="decoders"
+        class="mt-4"
+        :form="field"
+        :options="barcodeDecodersOptions"
+        label="Decoders"
+        :searchable="true"
+        :multiple="true"
+        help="Select the decoders you want to use"
+      />
+    </div>
+
     <div
       v-if="field.type === 'rating'"
       class="px-4"
@@ -611,7 +632,15 @@ export default {
       editorToolbarCustom: [
         ['bold', 'italic', 'underline', 'link']
       ],
-      allCountries: countryCodes
+      allCountries: countryCodes,
+      barcodeDecodersOptions: [
+        { name: 'EAN-13', value: 'ean_reader' },
+        { name: 'EAN-8', value: 'ean_8_reader' },
+        { name: 'Code 128', value: 'code_128_reader' },
+        { name: 'Code 39', value: 'code_39_reader' },
+        { name: 'UPC-A', value: 'upc_reader' },
+        { name: 'UPC-E', value: 'upc_e_reader' }
+      ]
     }
   },
 
@@ -828,6 +857,9 @@ export default {
           selection_data:{
             'Row 1': null
           }
+        },
+        barcode: {
+          decoders: this.barcodeDecodersOptions.map(decoder => decoder.value)
         }
       }
       if (this.field.type in defaultFieldValues) {