Make product groups on the shopping list collapsible (closes #604)

changelog/58_UNRELEASED_2020-xx-xx.md

@@ -21,7 +21,8 @@
 - Fixed that undoing "product-opened"-actions was not possible
 - Fixed/improved consuming from the stock overview page for products with enabled tare weight handling ("consume 1" button is now disabled for such products, "consume all" works again)
 
-### Shopping list fixes
+### Shopping list improvements/fixes
+- It's now possible to collapse/expand the product group sections (by clicking on the grey group header)
 - Fixed that the "shopping list to stock workflow"-dialog was not visible in compact view
 - Fixed that when printing the shopping list configured userfields were not included
 

public/viewjs/shoppinglist.js

@@ -1,4 +1,6 @@
-var shoppingListTable = $('#shoppinglist-table').DataTable({
+var collapsedGroups = {};
+
+var shoppingListTable = $('#shoppinglist-table').DataTable({
 	'order': [[1, 'asc']],
 	"orderFixed": [[3, 'asc']],
 	'columnDefs': [
@@ -7,12 +9,34 @@
 		{ 'visible': false, 'targets': 3 }
 	],
 	'rowGroup': {
-		dataSrc: 3
+		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()
 {
 	var value = $(this).val();

views/shoppinglist.blade.php

@@ -13,6 +13,12 @@
 @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')