Add possibility to have multiple barcodes per product

bower.json

@@ -15,6 +15,7 @@
 		"datatables.net-responsive": "2.1.1",
 		"datatables.net-responsive-bs": "2.1.1",
 		"jquery-timeago": "1.5.4",
-		"toastr": "2.1.3"
+		"toastr": "2.1.3",
+		"tagmanager": "3.0.2"
 	}
 }

views/layout.php

@@ -18,6 +18,7 @@
 	<link href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css?v=<?php echo Grocy::GetInstalledVersion(); ?>" rel="stylesheet" />
 	<link href="/bower_components/datatables.net-responsive-bs/css/responsive.bootstrap.min.css?v=<?php echo Grocy::GetInstalledVersion(); ?>" rel="stylesheet" />
 	<link href="/bower_components/toastr/toastr.min.css?v=<?php echo Grocy::GetInstalledVersion(); ?>" rel="stylesheet" />
+	<link href="/bower_components/tagmanager/tagmanager.css?v=<?php echo Grocy::GetInstalledVersion(); ?>" rel="stylesheet" />
 	<link href="/style.css?v=<?php echo Grocy::GetInstalledVersion(); ?>" rel="stylesheet" />
 
 	<script src="/bower_components/jquery/dist/jquery.min.js?v=<?php echo Grocy::GetInstalledVersion(); ?>"></script>
@@ -122,6 +123,7 @@
 	<script src="/bower_components/datatables.net-responsive-bs/js/responsive.bootstrap.min.js?v=<?php echo Grocy::GetInstalledVersion(); ?>"></script>
 	<script src="/bower_components/jquery-timeago/jquery.timeago.js?v=<?php echo Grocy::GetInstalledVersion(); ?>"></script>
 	<script src="/bower_components/toastr/toastr.min.js?v=<?php echo Grocy::GetInstalledVersion(); ?>"></script>
+	<script src="/bower_components/tagmanager/tagmanager.js?v=<?php echo Grocy::GetInstalledVersion(); ?>"></script>
 
 	<?php if (file_exists(__DIR__ . '/' . str_replace('.php', '.js', $contentPage))) : ?>
 		<script src="/views/<?php echo str_replace('.php', '.js', $contentPage) . '?v=' . Grocy::GetInstalledVersion(); ?>"></script>

views/productform.js

@@ -32,21 +32,37 @@
 
 $(function()
 {
+	$('#barcode-taginput').tagsManager({
+		'hiddenTagListName': 'barcode',
+		'tagsContainer': '#barcode-taginput-container'
+	});
+
+	if (Grocy.EditMode === 'edit')
+	{
+		Grocy.FetchJson('/api/get-object/products/' + Grocy.EditObjectId,
+			function (product)
+			{
+				if (product.barcode.length > 0)
+				{
+					product.barcode.split(',').forEach(function(item)
+					{
+						$('#barcode-taginput').tagsManager('pushTag', item);
+					});
+				}
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+
 	$('#qu_factor_purchase_to_stock').trigger('change');
 	$('#name').focus();
 	$('#product-form').validator();
 	$('#product-form').validator('validate');
 });
 
-$('#barcode').keydown(function(event)
-{
-	if (event.keyCode === 13) //Enter
-	{
-		event.preventDefault();
-		return false;
-	}
-});
-
 $('.input-group-qu').on('change', function(e)
 {
 	var factor = $('#qu_factor_purchase_to_stock').val();

views/productform.php

@@ -13,19 +13,15 @@
 			<input type="text" class="form-control" required id="name" name="name" value="<?php if ($mode == 'edit') echo $product->name; ?>">
 			<div class="help-block with-errors"></div>
 		</div>
-		<div class="form-group">
-			<label for="barcode">Barcode</label>
-			<div class="input-group date">
-				<input type="text" class="form-control" id="barcode" name="barcode" value="<?php if ($mode == 'edit') echo $product->barcode; ?>">
-				<div class="input-group-addon">
-					<i class="fa fa-barcode"></i>
-				</div>
-			</div>
-		</div>
 		<div class="form-group">
 			<label for="description">Description</label>
 			<textarea class="form-control" rows="2" id="description" name="description"><?php if ($mode == 'edit') echo $product->description; ?></textarea>
 		</div>
+		<div class="form-group tm-group">
+			<label for="barcode-taginput">Barcode(s)</label>
+			<input type="text" class="form-control tm-input" id="barcode-taginput" placeholder="Add (scan) a barcode here to add one...">
+			<div id="barcode-taginput-container"></div>
+		</div>
 		<div class="form-group">
 			<label for="location_id">Location</label>
 			<select required class="form-control" id="location_id" name="location_id">