Show barcode as barcode-image on shopping list (closes #1133)

changelog/60_3.0.0_2020-12-22.md

@@ -149,7 +149,7 @@
     - There are also new columns on some pages, hidden by default
       - Stock overview: Value, Product group, Calories, Last purchased, Last price, Min. stock amount
       - Products list: Default store
-      - Shopping list: Last price (Unit), Last price (Total), Default store
+      - Shopping list: Last price (Unit), Last price (Total), Default store, Barcodes (as scannable code-image)
   - Row grouping can be customized to use any available column (thanks @edenhaus)
 - Table states (visible columns, sorting, column order and so on) are now saved server side (in user settings) means that this stays the same when using different browsers
 - Dialogs are now used everywhere where appropriate instead of jumping between pages (for example when adding/editing shopping list items)

package.json

@@ -10,6 +10,7 @@
 		"bootstrap": "^4.5.2",
 		"bootstrap-select": "^1.13.18",
 		"bootstrap-v4-rtl": "^4.5.2-1",
+		"bwip-js": "^2.0.11",
 		"chart.js": "^2.8.0",
 		"datatables.net": "^1.10.22",
 		"datatables.net-bs4": "^1.10.22",

public/viewjs/shoppinglist.js

@@ -8,6 +8,7 @@
 		{ 'visible': false, 'targets': 5 },
 		{ 'visible': false, 'targets': 6 },
 		{ 'visible': false, 'targets': 7 },
+		{ 'visible': false, 'targets': 8 },
 		{ "type": "num", "targets": 2 },
 		{ "type": "html-num-fmt", "targets": 5 },
 		{ "type": "html-num-fmt", "targets": 6 }
@@ -529,3 +530,18 @@ $(window).on("message", function(e)
 		window.location.href = U('/shoppinglist?list=' + data.Payload);
 	}
 });
+
+var dummyCanvas = document.createElement("canvas");
+$("img.barcode").each(function()
+{
+	var img = $(this);
+
+	bwipjs.toCanvas(dummyCanvas, {
+		bcid: "ean8",
+		text: img.attr("data-barcode"),
+		height: 5,
+		includetext: false
+	});
+
+	img.attr("src", dummyCanvas.toDataURL("image/png"));
+});

views/shoppinglist.blade.php

@@ -5,6 +5,7 @@
 @section('viewJsName', 'shoppinglist')
 
 @push('pageScripts')
+<script src="{{ $U('/node_modules/bwip-js/dist/bwip-js-min.js?v=', true) }}{{ $version }}"></script>
 <script src="{{ $U('/viewjs/purchase.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
@@ -165,6 +166,7 @@
 					<th class="@if(!GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING) d-none @endif">{{ $__t('Last price (Unit)') }}</th>
 					<th class="@if(!GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING) d-none @endif">{{ $__t('Last price (Total)') }}</th>
 					<th class="@if(!GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING) d-none @endif">{{ $__t('Default store') }}</th>
+					<th>{{ $__t('Barcodes') }}</th>
 
 					@include('components.userfields_thead', array(
 					'userfields' => $userfields
@@ -247,6 +249,14 @@
 					<td class="@if(!GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING) d-none @endif">
 						{{ $listItem->default_shopping_location_name }}
 					</td>
+					<td>
+						@foreach(explode(',', $listItem->product_barcodes) as $barcode)
+						@if(!empty($barcode))
+						<img class="barcode img-fluid pr-2"
+							data-barcode="{{ $barcode }}">
+						@endif
+						@endforeach
+					</td>
 
 					@include('components.userfields_tbody', array(
 					'userfields' => $userfields,
@@ -399,4 +409,4 @@
 		</div>
 	</div>
 </div>
-@stop
+@stop

yarn.lock

@@ -525,6 +525,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+bwip-js@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/bwip-js/-/bwip-js-2.0.11.tgz#2152224482527c0134e572cadd9787799499b39d"
+  integrity sha512-8hAwUM+5FrGguKRaFi2QxKF9SxQM4fAfTy5TVAkeBODH6Eq3Q8MMEoBN+ymIBxiGKL+wNHB1Z1pv5f9oWGLUKQ==
+
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"