Add global 'barcode-scan' button

InvenTree/InvenTree/static/script/inventree/barcode.js

@@ -43,4 +43,127 @@ function associateBarcode(barcode, stockitem, options={}) {
             },
         }
     );
+}
+
+
+function makeBarcodeInput(placeholderText='') {
+    /*
+     * Generate HTML for a barcode input
+     */
+
+    var html = `
+    <form class='js-modal-form' method='post'>
+    <div class='form-group'>
+        <label class='control-label' for='barcode'>Barcode</label>
+        <div class='controls'>
+            <input id='barcode' class='textinput textInput form-control' type='text' name='barcode' placeholder='${placeholderText}'>
+            <div id='hint_barcode_data' class='help-block'>Enter barcode data</div>
+        </div>
+    </div>
+    </form>
+    `;
+
+    return html;
+}
+
+
+function getBarcodeData(modal) {
+
+    return $(modal + ' #barcode').val();
+}
+
+
+function barcodeDialog(title, options={}) {
+    /*
+     * Handle a barcode display dialog.
+     */
+
+    var modal = '#modal-form';
+
+    $(modal).on('shown.bs.modal', function() {
+        $(modal + ' .modal-form-content').scrollTop(0);
+        
+        // Ensure the barcode field has focus
+        $(modal + ' #barcode').focus();
+
+        var form = $(modal).find('.js-modal-form');
+
+        // Override form submission
+        form.submit(function() {
+
+            var barcode = getBarcodeData(modal);
+
+            if (options.submit) {
+                modalEnable(modal, false);
+                options.submit(barcode);
+            }
+
+            return false;
+        });
+
+        modalSubmit(modal, function() {
+
+            var barcode = getBarcodeData(modal);
+
+            if (options.submit) {
+                modalEnable(modal, false);
+                options.submit(barcode);
+            }
+        });
+
+    });
+
+    modalSetTitle(modal, title);
+    modalShowSubmitButton(modal, true);
+
+    var content = '';
+
+    if (options.headerContent) {
+        content += options.headerContent;
+    }
+
+    content += makeBarcodeInput();
+
+    if (options.footerContent) {
+        content += options.footerContent;
+    }
+
+    modalSetContent(modal, content);
+
+    $(modal).modal({
+        backdrop: 'static',
+        keyboard: false,
+    });
+
+    $(modal).modal('show');
+}
+
+
+function barcodeScanDialog() {
+    /*
+     * Perform a barcode scan,
+     * and (potentially) redirect the browser 
+     */
+
+    var modal = '#modal-form';
+    
+    barcodeDialog(
+        "Scan Barcode",
+        {
+            submit: function(barcode) {
+                inventreePut(
+                    '/api/barcode/',
+                    {
+                        barcode: barcode,
+                    },
+                    {
+                        method: 'POST',
+                        success: function(response, status) {
+                            console.log(response);
+                        },
+                    },
+                );
+            }, 
+        },
+    ); 
 }

InvenTree/InvenTree/static/script/inventree/modals.js

@@ -442,7 +442,8 @@ function attachSecondaryModal(modal, options) {
                      */
 
                     var select = '#id_' + options.field;
-                    var option = new Option(response.text, response.pk, true, true)
+                    
+                    var option = new Option(response.text, response.pk, true, true);
                     
                     $(modal).find(select).append(option).trigger('change');
                 }

InvenTree/templates/base.html

@@ -133,6 +133,11 @@ $(document).ready(function () {
     inventreeDocReady();
     
     showCachedAlerts();
+
+    $('#barcode-scan').click(function() {
+        barcodeScanDialog();
+    });
+
 });
 
 </script>

InvenTree/templates/navbar.html

@@ -28,6 +28,11 @@
     </ul>
     <ul class="nav navbar-nav navbar-right">
         {% include "search_form.html" %}
+        <li class ='nav navbar-nav'>
+          <button id='barcode-scan' class='btn btn-default' title='{% trans "Scan Barcode" %}'>
+              <span class='fas fa-qrcode'></span>
+          </button>
+        </li>
         <li class='dropdown'>
           <a class='dropdown-toggle' data-toggle='dropdown' href="#"><span class="fas fa-user"></span> <b>{{ user.get_username }}</b></a>
           <ul class='dropdown-menu'>

InvenTree/templates/search_form.html

@@ -5,5 +5,7 @@
     <div class="form-group">
         <input type="text" name='search' class="form-control" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
     </div>
-    <button type="submit" id='search-submit' class="btn btn-default"><span class='fas fa-search'></span></button>
+    <button type="submit" id='search-submit' class="btn btn-default" title='{% trans "Search" %}'>
+        <span class='fas fa-search'></span>
+    </button>
 </form>