Support for Barcode reader (#650)

* Add Barcode Input Component and Integrate Quagga for Scanning

- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.

These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.

* Update Barcode scanner UI

* Barcode decoder as user selection

* improve barcode

client/components/open/forms/OpenFormField.vue

@@ -223,7 +223,8 @@ export default {
         url: 'TextInput',
         email: 'TextInput',
         phone_number: 'TextInput',
-        matrix: 'MatrixInput'
+        matrix: 'MatrixInput',
+        barcode: 'BarcodeInput'
       }[field.type]
     },
     isPublicFormPage() {
@@ -338,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
       }

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 (European Article Number)', value: 'ean_reader' },
+        { name: 'EAN-8 (European Article Number)', value: 'ean_8_reader' },
+        { name: 'UPC-A (Universal Product Code)', value: 'upc_reader' },
+        { name: 'UPC-E (Universal Product Code)', value: 'upc_e_reader' },
+        { name: 'Code 128', value: 'code_128_reader' },
+        { name: 'Code 39', value: 'code_39_reader' },
+      ]
     }
   },
 
@@ -828,6 +857,9 @@ export default {
           selection_data:{
             'Row 1': null
           }
+        },
+        barcode: {
+          decoders: ['ean_reader', 'upc_reader']
         }
       }
       if (this.field.type in defaultFieldValues) {