Make DataTable row groups collapsible everywhere (references #1189)

public/css/grocy.css

@@ -355,6 +355,10 @@ a:not([href]) {
 	overflow: visible !important;
 }
 
+tr.dtrg-group {
+	cursor: pointer;
+}
+
 /* Third party component customizations - toastr */
 #toast-container > div {
 	opacity: 1;

public/js/grocy.js

@@ -720,6 +720,7 @@ $(document).on("click", ".show-as-dialog-link", function(e)
 });
 
 // Default DataTables initialisation settings
+var collapsedGroups = {};
 $.extend(true, $.fn.dataTable.defaults, {
 	'paginate': false,
 	'deferRender': true,
@@ -800,9 +801,30 @@ $.extend(true, $.fn.dataTable.defaults, {
 		{ type: 'chinese-string', targets: '_all' }
 	],
 	'rowGroup': {
-		enable: false
+		enable: false,
+		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);
+		}
 	}
 });
+$(document).on("click", "tr.dtrg-group", function()
+{
+	var name = $(this).data('name');
+	collapsedGroups[name] = !collapsedGroups[name];
+	$("table").DataTable().draw();
+});
 
 // serializeJSON defaults
 $.serializeJSON.defaultOptions.checkboxUncheckedValue = "0";

public/viewjs/shoppinglist.js

@@ -1,6 +1,4 @@
-var collapsedGroups = {};
-
-var shoppingListTable = $('#shoppinglist-table').DataTable({
+var shoppingListTable = $('#shoppinglist-table').DataTable({
 	'order': [[1, 'asc']],
 	"orderFixed": [[3, 'asc']],
 	'columnDefs': [
@@ -11,34 +9,12 @@ var shoppingListTable = $('#shoppinglist-table').DataTable({
 	].concat($.fn.dataTable.defaults.columnDefs),
 	'rowGroup': {
 		enable: true,
-		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);
-		}
+		dataSrc: 3
 	}
 });
 $('#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

@@ -11,13 +11,6 @@
 @push('pageStyles')
 <link href="{{ $U('/node_modules/animate.css/animate.min.css?v=', true) }}{{ $version }}"
 	rel="stylesheet">
-
-<style>
-	tr.dtrg-group {
-		cursor: pointer;
-	}
-
-</style>
 @endpush
 
 @section('content')