create seperate shoppinglist and shoppinglistprint views

controllers/StockController.php

@@ -332,7 +332,14 @@ class StockController extends BaseController
 			$listId = $request->getQueryParams()['list'];
 		}
 
-		return $this->renderPage($response, 'shoppinglist', [
+		$template = 'shoppinglist';
+
+		if (isset($request->getQueryParams()['print']))
+		{
+			$template = 'shoppinglistprint';
+		}
+
+		return $this->renderPage($response, $template, [
 			'listItems' => $this->getDatabase()->shopping_list()->where('shopping_list_id = :1', $listId),
 			'products' => $this->getDatabase()->products()->where('active = 1')->orderBy('name', 'COLLATE NOCASE'),
 			'quantityunits' => $this->getDatabase()->quantity_units()->orderBy('name', 'COLLATE NOCASE'),

localization/strings.pot

@@ -2008,3 +2008,6 @@ msgstr ""
 
 msgid "Show on stock overview page"
 msgstr ""
+
+msgid "Open print preview"
+msgstr ""

public/viewjs/components/shoppinglisttable.js

@@ -0,0 +1,41 @@
+var collapsedGroups = {};
+
+//tableId is desclared in shoppinglisttable.blade.php
+
+var shoppingListTable = $(tableId).DataTable({
+	'order': [[3, 'asc']],
+	"orderFixed": [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 },
+		{ 'searchable': false, "targets": 0 },
+		{ 'visible': false, 'targets': 1 }
+	].concat($.fn.dataTable.defaults.columnDefs),
+	'rowGroup': {
+		dataSrc: 1,
+		startRender: function(rows, group)
+		{
+			var collapsed = !!collapsedGroups[group];
+			var toggleClass = collapsed ? "fa-caret-right" : "fa-caret-down";
+
+			rows.nodes().each(function(row)
+			{
+				row.style.display = collapsed ? "none" : "";
+			});
+
+			return $("<tr/>")
+				.append('<td colspan="' + rows.columns()[0].length + '">' + group + ' <span class="fa fa-fw ' + toggleClass + '"/></td>')
+				.attr("data-name", group)
+				.toggleClass("collapsed", collapsed);
+		}
+	}
+});
+
+$(tableId + ' tbody').removeClass("d-none");
+shoppingListTable.columns.adjust().draw();
+
+$(document).on("click", "tr.dtrg-group", function()
+{
+	var name = $(this).data('name');
+	collapsedGroups[name] = !collapsedGroups[name];
+	shoppingListTable.draw();
+});

public/viewjs/shoppinglist.js

@@ -1,43 +1,4 @@
-var collapsedGroups = {};
-
-var shoppingListTable = $('#shoppinglist-table').DataTable({
-	'order': [[1, 'asc']],
-	"orderFixed": [[3, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 },
-		{ 'searchable': false, "targets": 0 },
-		{ 'visible': false, 'targets': 3 }
-	].concat($.fn.dataTable.defaults.columnDefs),
-	'rowGroup': {
-		dataSrc: 3,
-		startRender: function(rows, group)
-		{
-			var collapsed = !!collapsedGroups[group];
-			var toggleClass = collapsed ? "fa-caret-right" : "fa-caret-down";
-
-			rows.nodes().each(function(row)
-			{
-				row.style.display = collapsed ? "none" : "";
-			});
-
-			return $("<tr/>")
-				.append('<td colspan="' + rows.columns()[0].length + '">' + group + ' <span class="fa fa-fw ' + toggleClass + '"/></td>')
-				.attr("data-name", group)
-				.toggleClass("collapsed", collapsed);
-		}
-	}
-});
-$('#shoppinglist-table tbody').removeClass("d-none");
-shoppingListTable.columns.adjust().draw();
-
-$(document).on("click", "tr.dtrg-group", function()
-{
-	var name = $(this).data('name');
-	collapsedGroups[name] = !collapsedGroups[name];
-	shoppingListTable.draw();
-});
-
-$("#search").on("keyup", Delay(function()
+$("#search").on("keyup", Delay(function()
 {
 	var value = $(this).val();
 	if (value === "all")
@@ -383,13 +344,6 @@ function OnListItemRemoved()
 }
 OnListItemRemoved();
 
-$(document).on("click", "#print-shopping-list-button", function(e)
-{
-	$(".print-timestamp").text(moment().format("l LT"));
-	$("#description-for-print").html($("#description").val());
-	window.print();
-});
-
 $("#description").on("summernote.change", function()
 {
 	$("#save-description-button").removeClass("disabled");

public/viewjs/shoppinglistprint.js

@@ -0,0 +1,15 @@
+$(function()
+{
+	$(".print-timestamp").text(moment().format("l LT"));
+
+	const url = new URL(window.location);
+	//open print dialog only if the parameter "preview" is not set
+	if (!url.searchParams.has("preview"))
+	{
+		window.print();
+
+		//redirect to the shoppinglist
+		url.searchParams.delete("print");
+		window.location.replace(url);
+	}
+});

views/components/shoppinglisttable.blade.php

@@ -0,0 +1,141 @@
+@php if(empty($listItems)) { $listItems = []; } @endphp
+@php if(empty($products)) { $products = []; } @endphp
+@php if(empty($quantityunits)) { $quantityunits = []; } @endphp
+@php if(empty($missingProducts)) { $missingProducts = []; } @endphp
+@php if(empty($productGroups)) { $productGroups = []; } @endphp
+@php if(!isset($selectedShoppingListId)) { $selectedShoppingListId = 1; } @endphp
+@php if(empty($quantityUnitConversionsResolved)) { $quantityUnitConversionsResolved = []; } @endphp
+@php if(empty($productUserfields)) { $productUserfields = []; } @endphp
+@php if(empty($productUserfieldValues)) { $productUserfieldValues = []; } @endphp
+@php if(empty($userfields)) { $userfields = []; } @endphp
+@php if(empty($userfieldValues)) { $userfieldValues = []; } @endphp
+@php if(!isset($isPrint)) { $isPrint = false; } @endphp
+@php $tableId = ($isPrint ? "shoppinglist-table-print" : "shoppinglist-table"); @endphp
+
+@push('componentStyles')
+<link href="{{ $U('/node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css?v=', true) }}{{ $version }}"
+	rel="stylesheet">
+<style>
+	tr.dtrg-group {
+		cursor: pointer;
+	}
+</style>
+@endpush
+
+@push('componentScripts')
+<script src="{{ $U('/node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js?v=', true) }}{{ $version }}"></script>
+<script src="{{ $U('/node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+<script>
+	var tableId = "#"+ "<?php echo $tableId ?>";
+</script>
+<script src="{{ $U('/viewjs/components/shoppinglisttable.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+<table id="{{ $tableId }}"
+	class="table table-sm table-striped nowrap  @if($isPrint) w-75 @else w-100 @endif">
+	<thead>
+		<tr>
+			<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
+					data-toggle="tooltip"
+					data-toggle="tooltip"
+					title="{{ $__t('Hide/view columns') }}"
+					data-table-selector="#{{ $tableId }}"
+					href="#"><i class="fas fa-eye"></i></a>
+			</th>
+			<th class="d-none">Hidden product group</th>
+			<th class="d-none">Hidden status</th>
+			<th>{{ $__t('Product') }} / <em>{{ $__t('Note') }}</em></th>
+			<th>{{ $__t('Amount') }}</th>
+
+			@include('components.userfields_thead', array(
+			'userfields' => $userfields
+			))
+			@include('components.userfields_thead', array(
+			'userfields' => $productUserfields
+			))
+
+		</tr>
+	</thead>
+	<tbody class="d-none">
+		@foreach($listItems as $listItem)
+		<tr id="shoppinglistitem-{{ $listItem->id }}-row"
+			class="@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) table-info @endif @if($listItem->done == 1) text-muted text-strike-through @endif">
+
+			<td class="fit-content border-right">
+				@if(!$isPrint)
+				<a class="btn btn-success btn-sm order-listitem-button"
+					href="#"
+					data-item-id="{{ $listItem->id }}"
+					data-item-done="{{ $listItem->done }}"
+					data-toggle="tooltip"
+					data-placement="right"
+					title="{{ $__t('Mark this item as done') }}">
+					<i class="fas fa-check"></i>
+				</a>
+				<a class="btn btn-sm btn-info show-as-dialog-link"
+					href="{{ $U('/shoppinglistitem/' . $listItem->id . '?embedded&list=' . $selectedShoppingListId ) }}"
+					data-toggle="tooltip"
+					data-placement="right"
+					title="{{ $__t('Edit this item') }}">
+					<i class="fas fa-edit"></i>
+				</a>
+				<a class="btn btn-sm btn-danger shoppinglist-delete-button"
+					href="#"
+					data-shoppinglist-id="{{ $listItem->id }}"
+					data-toggle="tooltip"
+					data-placement="right"
+					title="{{ $__t('Delete this item') }}">
+					<i class="fas fa-trash"></i>
+				</a>
+				<a class="btn btn-sm btn-primary @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif @if(empty($listItem->product_id)) disabled @else shopping-list-stock-add-workflow-list-item-button @endif"
+					href="{{ $U('/purchase?embedded&flow=shoppinglistitemtostock&product=') }}{{ $listItem->product_id }}&amount={{ $listItem->amount }}&listitemid={{ $listItem->id }}&quId={{ $listItem->qu_id }}"
+					@if(!empty($listItem->product_id)) data-toggle="tooltip" title="{{ $__t('Add %1$s of %2$s to stock', $listItem->amount . ' ' . $__n($listItem->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name_plural), FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->name, $listItem->amount) }}" @endif>
+					<i class="fas fa-box"></i>
+				</a>
+				@endif
+			</td>
+
+			<td class="d-none">
+				@if(!empty(FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->product_group_id)) {{ FindObjectInArrayByPropertyValue($productGroups, 'id', FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->product_group_id)->name }} @else <span class="font-italic font-weight-light">{{ $__t('Ungrouped') }}</span> @endif
+			</td>
+			<td id="shoppinglistitem-{{ $listItem->id }}-status-info"
+				class="d-none">
+				@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) belowminstockamount @endif
+				@if($listItem->done != 1) xxUNDONExx @endif
+			</td>
+
+			<td class="product-name-cell cursor-link"
+				data-product-id="{{ $listItem->product_id }}">
+				@if(!empty($listItem->product_id)) {{ FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->name }}<br>@endif<em>{!! nl2br($listItem->note) !!}</em>
+			</td>
+			<td>
+				@if(!empty($listItem->product_id))
+				@php
+				$listItem->amount_origin_qu = $listItem->amount;
+				$product = FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id);
+				$productQuConversions = FindAllObjectsInArrayByPropertyValue($quantityUnitConversionsResolved, 'product_id', $product->id);
+				$productQuConversions = FindAllObjectsInArrayByPropertyValue($productQuConversions, 'from_qu_id', $product->qu_id_stock);
+				$productQuConversion = FindObjectInArrayByPropertyValue($productQuConversions, 'to_qu_id', $listItem->qu_id);
+				if ($productQuConversion)
+				{
+				$listItem->amount = $listItem->amount * $productQuConversion->factor;
+				}
+				@endphp
+				@endif
+				<span class="locale-number locale-number-quantity-amount">{{ $listItem->amount }}</span> @if(!empty($listItem->product_id)){{ $__n($listItem->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name_plural) }}@endif
+			</td>
+
+
+			@include('components.userfields_tbody', array(
+			'userfields' => $userfields,
+			'userfieldValues' => FindAllObjectsInArrayByPropertyValue($userfieldValues, 'object_id', $listItem->id)
+			))
+			@include('components.userfields_tbody', array(
+			'userfields' => $productUserfields,
+			'userfieldValues' => FindAllObjectsInArrayByPropertyValue($userfieldValues, 'object_id', $listItem->product_id)
+			))
+
+		</tr>
+		@endforeach
+	</tbody>
+</table>

views/layout/default.blade.php

@@ -83,6 +83,37 @@
 		rel="stylesheet">
 	@stack('pageStyles')
 
+	@php
+	// @stack('componentStyles') maybe contains the components CSS file reference multiple times
+	// if the component was included more than once in the view
+	//
+	// So this is a ugly hack to keep only unique CSS file references there
+
+	// The property is normally protected, so change that
+	$reflection = new \ReflectionClass($__env);
+	$property = $reflection->getProperty('pushes');
+	$property->setAccessible(true);
+	$env = $property->getValue($__env);
+
+	if (array_key_exists('componentStyles', $env))
+	{
+	// Take every line into a new array, one element per line
+	$filteredStack = array_map(function($value)
+	{
+	return explode("#SEP#", str_replace(array("\n", "\r", "\t"), '#SEP#', trim($value)));
+	}, $env['componentStyles']);
+
+	// Flatten the array into a single one, only keep unique lines, remove empty lines, add a defined new line
+	$filteredStack = preg_filter('/$/', "\n", array_filter(array_unique(array_merge(...$filteredStack))));
+
+	// Write it back
+	$env['componentStyles'] = $filteredStack;
+	$property->setValue($__env, $env);
+	}
+	@endphp
+
+	@stack('componentStyles')
+
 	@if(file_exists(GROCY_DATAPATH . '/custom_css.html'))
 	@php include GROCY_DATAPATH . '/custom_css.html' @endphp
 	@endif
@@ -746,4 +777,4 @@
 	@endif
 </body>
 
-</html>
+</html>

views/shoppinglist.blade.php

@@ -5,23 +5,12 @@
 @section('viewJsName', 'shoppinglist')
 
 @push('pageScripts')
-<script src="{{ $U('/node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js?v=', true) }}{{ $version }}"></script>
-<script src="{{ $U('/node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 <script src="{{ $U('/viewjs/purchase.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"
 	rel="stylesheet">
-<link href="{{ $U('/node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css?v=', true) }}{{ $version }}"
-	rel="stylesheet">
-
-<style>
-	tr.dtrg-group {
-		cursor: pointer;
-	}
-
-</style>
 @endpush
 
 @section('content')
@@ -71,7 +60,7 @@
 				</a>
 				<a id="print-shopping-list-button"
 					class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
-					href="#">
+					href="{{ $U('/shoppinglist?print&list=' . $selectedShoppingListId) }}">
 					{{ $__t('Print') }}
 				</a>
 			</div>
@@ -171,108 +160,20 @@
 			href="#">
 			{{ $__t('Normal view') }}
 		</a>
-		<table id="shoppinglist-table"
-			class="table table-sm table-striped nowrap w-100">
-			<thead>
-				<tr>
-					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
-							data-toggle="tooltip"
-							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
-							data-table-selector="#shoppinglist-table"
-							href="#"><i class="fas fa-eye"></i></a>
-					</th>
-					<th>{{ $__t('Product') }} / <em>{{ $__t('Note') }}</em></th>
-					<th>{{ $__t('Amount') }}</th>
-					<th class="d-none">Hidden product group</th>
-					<th class="d-none">Hidden status</th>
-
-					@include('components.userfields_thead', array(
-					'userfields' => $userfields
-					))
-					@include('components.userfields_thead', array(
-					'userfields' => $productUserfields
-					))
-
-				</tr>
-			</thead>
-			<tbody class="d-none">
-				@foreach($listItems as $listItem)
-				<tr id="shoppinglistitem-{{ $listItem->id }}-row"
-					class="@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) table-info @endif @if($listItem->done == 1) text-muted text-strike-through @endif">
-					<td class="fit-content border-right">
-						<a class="btn btn-success btn-sm order-listitem-button"
-							href="#"
-							data-item-id="{{ $listItem->id }}"
-							data-item-done="{{ $listItem->done }}"
-							data-toggle="tooltip"
-							data-placement="right"
-							title="{{ $__t('Mark this item as done') }}">
-							<i class="fas fa-check"></i>
-						</a>
-						<a class="btn btn-sm btn-info show-as-dialog-link"
-							href="{{ $U('/shoppinglistitem/' . $listItem->id . '?embedded&list=' . $selectedShoppingListId ) }}"
-							data-toggle="tooltip"
-							data-placement="right"
-							title="{{ $__t('Edit this item') }}">
-							<i class="fas fa-edit"></i>
-						</a>
-						<a class="btn btn-sm btn-danger shoppinglist-delete-button"
-							href="#"
-							data-shoppinglist-id="{{ $listItem->id }}"
-							data-toggle="tooltip"
-							data-placement="right"
-							title="{{ $__t('Delete this item') }}">
-							<i class="fas fa-trash"></i>
-						</a>
-						<a class="btn btn-sm btn-primary @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif @if(empty($listItem->product_id)) disabled @else shopping-list-stock-add-workflow-list-item-button @endif"
-							href="{{ $U('/purchase?embedded&flow=shoppinglistitemtostock&product=') }}{{ $listItem->product_id }}&amount={{ $listItem->amount }}&listitemid={{ $listItem->id }}&quId={{ $listItem->qu_id }}"
-							@if(!empty($listItem->product_id)) data-toggle="tooltip" title="{{ $__t('Add %1$s of %2$s to stock', $listItem->amount . ' ' . $__n($listItem->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name_plural), FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->name, $listItem->amount) }}" @endif>
-							<i class="fas fa-box"></i>
-						</a>
-					</td>
-					<td class="product-name-cell cursor-link"
-						data-product-id="{{ $listItem->product_id }}">
-						@if(!empty($listItem->product_id)) {{ FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->name }}<br>@endif<em>{!! nl2br($listItem->note) !!}</em>
-					</td>
-					<td>
-						@if(!empty($listItem->product_id))
-						@php
-						$listItem->amount_origin_qu = $listItem->amount;
-						$product = FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id);
-						$productQuConversions = FindAllObjectsInArrayByPropertyValue($quantityUnitConversionsResolved, 'product_id', $product->id);
-						$productQuConversions = FindAllObjectsInArrayByPropertyValue($productQuConversions, 'from_qu_id', $product->qu_id_stock);
-						$productQuConversion = FindObjectInArrayByPropertyValue($productQuConversions, 'to_qu_id', $listItem->qu_id);
-						if ($productQuConversion)
-						{
-						$listItem->amount = $listItem->amount * $productQuConversion->factor;
-						}
-						@endphp
-						@endif
-						<span class="locale-number locale-number-quantity-amount">{{ $listItem->amount }}</span> @if(!empty($listItem->product_id)){{ $__n($listItem->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name_plural) }}@endif
-					</td>
-					<td class="d-none">
-						@if(!empty(FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->product_group_id)) {{ FindObjectInArrayByPropertyValue($productGroups, 'id', FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->product_group_id)->name }} @else <span class="font-italic font-weight-light">{{ $__t('Ungrouped') }}</span> @endif
-					</td>
-					<td id="shoppinglistitem-{{ $listItem->id }}-status-info"
-						class="d-none">
-						@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) belowminstockamount @endif
-						@if($listItem->done != 1) xxUNDONExx @endif
-					</td>
-
-					@include('components.userfields_tbody', array(
-					'userfields' => $userfields,
-					'userfieldValues' => FindAllObjectsInArrayByPropertyValue($userfieldValues, 'object_id', $listItem->id)
-					))
-					@include('components.userfields_tbody', array(
-					'userfields' => $productUserfields,
-					'userfieldValues' => FindAllObjectsInArrayByPropertyValue($userfieldValues, 'object_id', $listItem->product_id)
-					))
-
-				</tr>
-				@endforeach
-			</tbody>
-		</table>
+		@include('components.shoppinglisttable', array(
+		'listItems' => $listItems,
+		'products' => $products,
+		'quantityunits' => $quantityunits,
+		'missingProducts' => $missingProducts,
+		'productGroups' => $productGroups,
+		'selectedShoppingListId' => $selectedShoppingListId,
+		'quantityUnitConversionsResolved' => $quantityUnitConversionsResolved,
+		'productUserfields' => $productUserfields,
+		'productUserfieldValues' => $productUserfieldValues,
+		'userfields' => $userfields,
+		'userfieldValues' => $userfieldValues,
+		'isPrint' => false
+		))
 	</div>
 
 	@if(boolval($userSettings['shopping_list_show_calendar']))
@@ -322,64 +223,6 @@
 	</div>
 </div>
 
-<div class="d-none d-print-block">
-	<h1 class="text-center">
-		<img src="{{ $U('/img/grocy_logo.svg?v=', true) }}{{ $version }}"
-			height="30"
-			class="d-print-flex mx-auto">
-		{{ $__t("Shopping list") }}
-	</h1>
-	@if (FindObjectInArrayByPropertyValue($shoppingLists, 'id', $selectedShoppingListId)->name != $__t("Shopping list"))
-	<h3 class="text-center">
-		{{ FindObjectInArrayByPropertyValue($shoppingLists, 'id', $selectedShoppingListId)->name }}
-	</h3>
-	@endif
-	<h6 class="text-center mb-4">
-		{{ $__t('Time of printing') }}:
-		<span class="d-inline print-timestamp"></span>
-	</h6>
-	<div class="row w-75">
-		<div class="col">
-			<table class="table">
-				<thead>
-					<tr>
-						<th>{{ $__t('Product') }} / <em>{{ $__t('Note') }}</em></th>
-						<th>{{ $__t('Amount') }}</th>
-
-						@include('components.userfields_thead', array(
-						'userfields' => $userfields
-						))
-
-					</tr>
-				</thead>
-				<tbody>
-					@foreach($listItems as $listItem)
-					<tr>
-						<td>
-							@if(!empty($listItem->product_id)) {{ FindObjectInArrayByPropertyValue($products, 'id', $listItem->product_id)->name }}<br>@endif<em>{!! nl2br($listItem->note) !!}</em>
-						</td>
-						<td>
-							<span class="locale-number locale-number-quantity-amount">{{ $listItem->amount }}</span> @if(!empty($listItem->product_id)){{ $__n($listItem->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $listItem->qu_id)->name_plural) }}@endif
-						</td>
-
-						@include('components.userfields_tbody', array(
-						'userfields' => $userfields,
-						'userfieldValues' => FindAllObjectsInArrayByPropertyValue($userfieldValues, 'object_id', $listItem->product_id)
-						))
-
-					</tr>
-					@endforeach
-				</tbody>
-			</table>
-		</div>
-	</div>
-	<div class="row w-75">
-		<div class="col">
-			<h5>{{ $__t('Notes') }}</h5>
-			<p id="description-for-print"></p>
-		</div>
-	</div>
-</div>
 <div class="modal fade"
 	id="shoppinglist-productcard-modal"
 	tabindex="-1">
@@ -396,4 +239,4 @@
 		</div>
 	</div>
 </div>
-@stop
+@stop

views/shoppinglistprint.blade.php

@@ -0,0 +1,50 @@
+@extends('layout.default')
+
+@section('title', $__t('Shopping list'))
+
+@section('viewJsName', 'shoppinglistprint')
+
+@section('content')
+<div>
+	<h1 class="text-center">
+		<img src="{{ $U('/img/grocy_logo.svg?v=', true) }}{{ $version }}"
+			height="30"
+			class="d-print-flex mx-auto">
+		{{ $__t("Shopping list") }}
+	</h1>
+	@if (FindObjectInArrayByPropertyValue($shoppingLists, 'id', $selectedShoppingListId)->name != $__t("Shopping list"))
+	<h3 class="text-center">
+		{{ FindObjectInArrayByPropertyValue($shoppingLists, 'id', $selectedShoppingListId)->name }}
+	</h3>
+	@endif
+	<h6 class="text-center mb-4">
+		{{ $__t('Time of printing') }}:
+		<span class="d-inline print-timestamp"></span>
+	</h6>
+	<div class="row w-75">
+		<div class="col">
+			@include('components.shoppinglisttable', array(
+			'listItems' => $listItems,
+			'products' => $products,
+			'quantityunits' => $quantityunits,
+			'missingProducts' => $missingProducts,
+			'productGroups' => $productGroups,
+			'selectedShoppingListId' => $selectedShoppingList->id,
+			'quantityUnitConversionsResolved' => $quantityUnitConversionsResolved,
+			'productUserfields' => $productUserfields,
+			'productUserfieldValues' => $productUserfieldValues,
+			'userfields' => $userfields,
+			'userfieldValues' => $userfieldValues,
+			'isPrint' => true
+			))
+		</div>
+	</div>
+	<div class="row w-75">
+		<div class="col">
+			<h5>{{ $__t('Notes') }}</h5>
+			<p>{!! FindObjectInArrayByPropertyValue($shoppingLists, 'id', $selectedShoppingListId)->description !!}</p>
+		</div>
+	</div>
+</div>
+
+@stop

views/shoppinglistsettings.blade.php

@@ -43,8 +43,11 @@
 			</div>
 		</div>
 
+		<a href="{{ $U('/shoppinglist?print=1&preview=1') }}"
+			class="btn btn-secondary">{{ $__t('Open print preview') }}</a>
+
 		<a href="{{ $U('/shoppinglist') }}"
 			class="btn btn-success">{{ $__t('OK') }}</a>
 	</div>
 </div>
-@stop
+@stop