Add row group customization

localization/strings.pot

@@ -2008,3 +2008,12 @@ msgstr ""
 
 msgid "Show on stock overview page"
 msgstr ""
+
+msgid "None"
+msgstr ""
+
+msgid "Group by"
+msgstr ""
+
+msgid "Ingredient group"
+msgstr ""

public/js/grocy.js

@@ -709,6 +709,45 @@ $.extend(true, $.fn.dataTable.defaults, {
 		{
 			column.search.search = "";
 		});
+
+		var api = new $.fn.dataTable.Api(settings);
+
+		if (typeof api.rowGroup === "function")
+		{
+			var rowGroup = {
+				enable: api.rowGroup().enabled(),
+			};
+
+			if (api.rowGroup().enabled())
+			{
+				rowGroup.dataSrc = api.rowGroup().dataSrc()
+			}
+
+			data.rowGroup = rowGroup;
+		}
+	},
+	'stateLoadParams': function(settings, data)
+	{
+		var api = new $.fn.dataTable.Api(settings);
+
+		if (typeof api.rowGroup === "function" && "rowGroup" in data)
+		{
+			api.rowGroup().enable(data.rowGroup.enable);
+
+			if ("dataSrc" in data.rowGroup)
+			{
+				api.rowGroup().dataSrc(data.rowGroup.dataSrc);
+
+				//apply fixed order for group column
+				var fixedOrder = {
+					pre: [data.rowGroup.dataSrc, 'asc']
+				};
+
+				api.order.fixed(fixedOrder);
+			}
+
+			delete data.rowGroup;
+		}
 	},
 	'stateSaveCallback': function(settings, data)
 	{
@@ -847,6 +886,28 @@ $(".change-table-columns-visibility-button").on("click", function(e)
 	var dataTable = $(dataTableSelector).DataTable();
 
 	var columnCheckBoxesHtml = "";
+	var rowGroupRadioBoxesHtml = "";
+
+	var rowGroupDefined = typeof dataTable.rowGroup === "function";
+
+	if (rowGroupDefined)
+	{
+		var rowGroupChecked = (dataTable.rowGroup().enabled()) ? "" : "checked";
+		rowGroupRadioBoxesHtml = ' \
+			<div class="custom-control custom-radio custom-control-inline"> \
+				<input ' + rowGroupChecked + ' class="custom-control-input change-table-columns-rowgroup-toggle" \
+					type="radio" \
+					name="column-rowgroup" \
+					id="column-rowgroup-none" \
+					data-table-selector="' + dataTableSelector + '" \
+					data-column-index="-1" \
+				> \
+				<label class="custom-control-label" \
+					for="column-rowgroup-none">' + __t("None") + ' \
+				</label > \
+			</div>';
+	}
+
 	dataTable.columns().every(function()
 	{
 		var index = this.index();
@@ -864,7 +925,7 @@ $(".change-table-columns-visibility-button").on("click", function(e)
 			checked = "";
 		}
 
-		columnCheckBoxesHtml += '<div class="form-group"> \
+		columnCheckBoxesHtml += ' \
 			<div class="custom-control custom-checkbox"> \
 				<input ' + checked + ' class="form-check-input custom-control-input change-table-columns-visibility-toggle" \
 					type="checkbox" \
@@ -875,12 +936,41 @@ $(".change-table-columns-visibility-button").on("click", function(e)
 				<label class="form-check-label custom-control-label" \
 					for="column-' + index.toString() + '">' + title + ' \
 				</label> \
-			</div> \
+			</div>';
-		</div>'
+
+		if (rowGroupDefined)
+		{
+			var rowGroupChecked = "";
+			if (dataTable.rowGroup().enabled() && dataTable.rowGroup().dataSrc() == index)
+			{
+				rowGroupChecked = "checked";
+			}
+
+			rowGroupRadioBoxesHtml += ' \
+			<div class="custom-control custom-radio"> \
+				<input ' + rowGroupChecked + ' class="custom-control-input change-table-columns-rowgroup-toggle" \
+					type="radio" \
+					name="column-rowgroup" \
+					id="column-rowgroup-' + index.toString() + '" \
+					data-table-selector="' + dataTableSelector + '" \
+					data-column-index="' + index.toString() + '" \
+				> \
+				<label class="custom-control-label" \
+					for="column-rowgroup-' + index.toString() + '">' + title + ' \
+				</label > \
+			</div>';
+		}
 	});
 
+	var message = '<div class="text-center"><h4>' + __t('Hide/view columns') + '</h4><div class="text-left form-group">' + columnCheckBoxesHtml + '</div></div>';
+
+	if (rowGroupDefined)
+	{
+		message += '<hr><div class="text-center mt-1"><h4>' + __t('Group by') + '</h4><div class="text-left form-group">' + rowGroupRadioBoxesHtml + '</div></div>';
+	}
+
 	bootbox.dialog({
-		message: '<div class="text-center"><h5>' + __t('Hide/view columns') + '</h5><hr><div class="text-left">' + columnCheckBoxesHtml + '</div></div>',
+		message: message,
 		size: 'small',
 		backdrop: true,
 		closeButton: false,
@@ -896,6 +986,7 @@ $(".change-table-columns-visibility-button").on("click", function(e)
 		}
 	});
 });
+
 $(document).on("click", ".change-table-columns-visibility-toggle", function()
 {
 	var dataTableSelector = $(this).attr("data-table-selector");
@@ -904,3 +995,32 @@ $(document).on("click", ".change-table-columns-visibility-toggle", function()
 
 	dataTable.columns(columnIndex).visible(this.checked);
 });
+
+
+$(document).on("click", ".change-table-columns-rowgroup-toggle", function()
+{
+	var dataTableSelector = $(this).attr("data-table-selector");
+	var columnIndex = $(this).attr("data-column-index");
+	var dataTable = $(dataTableSelector).DataTable();
+
+	if (columnIndex == -1)
+	{
+		dataTable.rowGroup().enable(false);
+
+		//remove fixed order
+		dataTable.order.fixed({});
+	}
+	else
+	{
+		dataTable.rowGroup().enable(true);
+		dataTable.rowGroup().dataSrc(columnIndex);
+
+		//apply fixed order for group column
+		var fixedOrder = {
+			pre: [columnIndex, 'asc']
+		};
+		dataTable.order.fixed(fixedOrder);
+	}
+
+	dataTable.draw();
+});

views/productform.blade.php

@@ -580,7 +580,7 @@
 							<th>{{ $__t('Quantity unit from') }}</th>
 							<th>{{ $__t('Quantity unit to') }}</th>
 							<th>{{ $__t('Factor') }}</th>
-							<th class="d-none">Hidden group</th>
+							<th>{{ $__('Group')}}</th>
 							<th></th>
 						</tr>
 					</thead>

views/recipeform.blade.php

@@ -156,7 +156,7 @@
 							<th>{{ $__t('Product') }}</th>
 							<th>{{ $__t('Amount') }}</th>
 							<th class="fit-content">{{ $__t('Note') }}</th>
-							<th class="d-none">Hidden ingredient group</th>
+							<th>{{ $__t('Ingredient group') }}</th>
 						</tr>
 					</thead>
 					<tbody class="d-none">

views/shoppinglist.blade.php

@@ -20,7 +20,6 @@
 	tr.dtrg-group {
 		cursor: pointer;
 	}
-
 </style>
 @endpush
 
@@ -184,7 +183,7 @@
 					</th>
 					<th>{{ $__t('Product') }} / <em>{{ $__t('Note') }}</em></th>
 					<th>{{ $__t('Amount') }}</th>
-					<th class="d-none">Hidden product group</th>
+					<th>{{ $__t('Product group') }}</th>
 					<th class="d-none">Hidden status</th>
 
 					@include('components.userfields_thead', array(
@@ -251,7 +250,7 @@
 						@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">
+					<td>
 						@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"

views/tasks.blade.php

@@ -114,7 +114,7 @@
 					</th>
 					<th>{{ $__t('Task') }}</th>
 					<th>{{ $__t('Due') }}</th>
-					<th class="d-none">Hidden category</th>
+					<th>{{ $__t('Category') }}</th>
 					<th>{{ $__t('Assigned to') }}</th>
 					<th class="d-none">Hidden status</th>
 
@@ -176,7 +176,7 @@
 						<time class="timeago timeago-contextual"
 							datetime="{{ $task->due_date }}"></time>
 					</td>
-					<td class="d-none">
+					<td>
 						@if($task->category_id != null) <span>{{ FindObjectInArrayByPropertyValue($taskCategories, 'id', $task->category_id)->name }}</span> @else <span class="font-italic font-weight-light">{{ $__t('Uncategorized') }}</span>@endif
 					</td>
 					<td>