Added a camera-barcode-scanner-button to the barcodes field on the product edit page (closes #723)

changelog/58_UNRELEASED_2020-xx-xx.md

@@ -8,6 +8,7 @@
 ### Stock improvements/fixes
 - When creating a new product, the "QU id stock" is now preset by the "QU id purchase" (because most of the time that's most probably the same) (thanks @Mik-)
 - Clarified the row-button colors and toolips on the stock entries page
+- Added a camera-barcode-scanning-button to the barcode(s) field on the product edit page to be able to also scan barcodes by the device camera there
 - Fixed that the aggregated parent product amount (displayed on the stock overview page and on the product card) did not respect quantity unit conversions when the parent/sub products had different stock quantity units (the unit conversion needs to be globally defined, or as an override on the sub product)
 - Fixed the conversion factor hint to display also decimal places on the purchase page (only displayed when the product has a different purchase/stock quantity unit)
 - Fixed that the stock entries page was broken when there were product userfields defined with enabled "Show as column in tables"

public/viewjs/barcodescannertesting.js

@@ -85,7 +85,12 @@ function OnBarcodeScanned(barcode)
 	}, 200);
 }
 
-$(document).on("Grocy.BarcodeScanned", function(e, barcode)
+$(document).on("Grocy.BarcodeScanned", function(e, barcode, target)
 {
+	if (target !== "#scanned_barcod")
+	{
+		return;
+	}
+	
 	OnBarcodeScanned(barcode);
 });

public/viewjs/components/barcodescanner.js

@@ -149,7 +149,7 @@ Quagga.onDetected(function(result)
 	if (Grocy.Components.BarcodeScanner.DecodedCodesErrorCount / Grocy.Components.BarcodeScanner.DecodedCodesCount < 0.15)
 	{
 		Grocy.Components.BarcodeScanner.StopScanning();
-		$(document).trigger("Grocy.BarcodeScanned", [result.codeResult.code]);
+		$(document).trigger("Grocy.BarcodeScanned", [result.codeResult.code, Grocy.Components.BarcodeScanner.CurrentTarget]);
 	}
 });
 
@@ -195,6 +195,8 @@ $(document).on("click", "#barcodescanner-start-button", function(e)
 		return;
 	}
 
+	Grocy.Components.BarcodeScanner.CurrentTarget = inputElement.attr("data-target");
+	
 	bootbox.dialog({
 		message: '<div id="barcodescanner-container" class="col"><div id="barcodescanner-livestream"></div></div>',
 		title: __t('Scan a barcode'),
@@ -234,11 +236,11 @@ setTimeout(function()
 	{
 		if ($(this).hasAttr("disabled"))
 		{
-			$(this).after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white disabled"><i class="fas fa-camera"></i></a>');
+			$(this).after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white disabled" data-target="' + $(this).attr("data-target") + '"><i class="fas fa-camera"></i></a>');
 		}
 		else
 		{
-			$(this).after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white"><i class="fas fa-camera"></i></a>');
+			$(this).after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white" data-target="' + $(this).attr("data-target") + '"><i class="fas fa-camera"></i></a>');
 		}
 	});
 }, 50);

public/viewjs/components/productpicker.js

@@ -227,8 +227,13 @@ $('#product_id_text_input').on('blur', function(e)
 	}
 });
 
-$(document).on("Grocy.BarcodeScanned", function(e, barcode)
+$(document).on("Grocy.BarcodeScanned", function(e, barcode, target)
 {
+	if (!(target == "@productpicker" || target == "undefined" || target == undefined)) // Default target
+	{
+		return;
+	}
+	
 	// Don't know why the blur event does not fire immediately ... this works...
 
 	Grocy.Components.ProductPicker.GetInputElement().focusout();

public/viewjs/productform.js

@@ -434,3 +434,13 @@ $('#qu_id_purchase').blur(function(e)
 		Grocy.FrontendHelpers.ValidateForm('product-form');
 	}
 });
+
+$(document).on("Grocy.BarcodeScanned", function(e, barcode, target)
+{
+	if (target != "#barcode-taginput")
+	{
+		return;
+	}
+	
+	$("#barcode-taginput").tagsManager("pushTag", barcode);
+});

views/barcodescannertesting.blade.php

@@ -23,7 +23,7 @@
 			<div class="form-group">
 				<label for="scanned_barcode">{{ $__t('Scan field') }}</label>
 				<div class="input-group">
-					<input type="text" class="form-control barcodescanner-input" id="scanned_barcode" name="scanned_barcode" value="" disabled>
+					<input type="text" class="form-control barcodescanner-input" id="scanned_barcode" name="scanned_barcode" value="" disabled data-target="#scanned_barcode">
 				</div>
 			</div>
 

views/components/productpicker.blade.php

@@ -14,7 +14,7 @@
 
 <div class="form-group" data-next-input-selector="{{ $nextInputSelector }}" data-disallow-add-product-workflows="{{ BoolToString($disallowAddProductWorkflows) }}" data-disallow-all-product-workflows="{{ BoolToString($disallowAllProductWorkflows) }}" data-prefill-by-name="{{ $prefillByName }}" data-prefill-by-id="{{ $prefillById }}">
 	<label for="product_id">{{ $__t($label) }} <i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none"> {{ $__t('Barcode lookup is disabled') }}</span>&nbsp;&nbsp;<span class="small text-muted">{{ $hint }}</span></label>
-	<select class="form-control product-combobox barcodescanner-input" id="product_id" name="product_id" @if($isRequired) required @endif @if($disabled) disabled @endif>
+	<select class="form-control product-combobox barcodescanner-input" id="product_id" name="product_id" @if($isRequired) required @endif @if($disabled) disabled @endif data-target="@productpicker">
 		<option value=""></option>
 		@foreach($products as $product)
 			<option data-additional-searchdata="{{ $product->barcode }}@if(!empty($product->barcode)),@endif" value="{{ $product->id }}">{{ $product->name }}</option>

views/productform.blade.php

@@ -69,7 +69,9 @@
 
 			<div class="form-group tm-group">
 				<label for="barcode-taginput">{{ $__t('Barcode(s)') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i></label>
-				<input type="text" class="form-control tm-input" id="barcode-taginput">
+				<div class="input-group">
+					<input type="text" class="form-control tm-input barcodescanner-input" id="barcode-taginput" data-target="#barcode-taginput">
+				</div>
 				<div id="barcode-taginput-container"></div>
 			</div>