Add row group customization (#1189)

* Add row group customization

* fix rowGroup state loading

* activate rowGroup for all datatables

* add reset button

* reload page done on success callback

* Review

Co-authored-by: Bernd Bestel <bernd@berrnd.de>

controllers/UsersApiController.php

@@ -219,6 +219,19 @@ class UsersApiController extends BaseApiController
 		}
 	}
 
+	public function DeleteUserSetting(\Psr\Http\Message\ServerRequestInterface $request, \Psr\Http\Message\ResponseInterface $response, array $args)
+	{
+		try
+		{
+			$value = $this->getUsersService()->DeleteUserSetting(GROCY_USER_ID, $args['settingKey']);
+			return $this->EmptyApiResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->GenericErrorResponse($response, $ex->getMessage());
+		}
+	}
+
 	public function __construct(\DI\Container $container)
 	{
 		parent::__construct($container);

grocy.openapi.json

@@ -1299,6 +1299,38 @@
 						}
 					}
 				}
+			},
+			"delete": {
+				"summary": "Deletes the given setting of the currently logged in user",
+				"tags": [
+					"Current user"
+				],
+				"parameters": [
+					{
+						"in": "path",
+						"name": "settingKey",
+						"required": true,
+						"description": "The key of the user setting",
+						"schema": {
+							"type": "string"
+						}
+					}
+				],
+				"responses": {
+					"204": {
+						"description": "The operation was successful"
+					},
+					"400": {
+						"description": "The operation was not successful",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/Error400"
+								}
+							}
+						}
+					}
+				}
 			}
 		},
 		"/stock": {

localization/strings.pot

@@ -1822,7 +1822,7 @@ msgstr ""
 msgid "Price per stock unit"
 msgstr ""
 
-msgid "Hide/view columns"
+msgid "Table options"
 msgstr ""
 
 msgid "This product is currently on a shopping list"
@@ -2008,3 +2008,24 @@ msgstr ""
 
 msgid "Show on stock overview page"
 msgstr ""
+
+msgid "None"
+msgstr ""
+
+msgid "Group by"
+msgstr ""
+
+msgid "Ingredient group"
+msgstr ""
+
+msgid "Reset"
+msgstr ""
+
+msgid "Are you sure to reset the table options?"
+msgstr ""
+
+msgid "Table layout configuration"
+msgstr ""
+
+msgid "Hide/view columns"
+msgstr ""

public/js/grocy.js

@@ -433,6 +433,49 @@ Grocy.FrontendHelpers.ShowGenericError = function(message, exception)
 	console.error(exception);
 }
 
+Grocy.FrontendHelpers.SaveUserSetting = function(settingsKey, value)
+{
+	Grocy.UserSettings[settingsKey] = value;
+
+	jsonData = {};
+	jsonData.value = value;
+	Grocy.Api.Put('user/settings/' + settingsKey, jsonData,
+		function(result)
+		{
+			// Nothing to do...
+		},
+		function(xhr)
+		{
+			if (!xhr.statusText.isEmpty())
+			{
+				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+			}
+		}
+	);
+}
+
+Grocy.FrontendHelpers.DeleteUserSetting = function(settingsKey, reloadPageOnSuccess = false)
+{
+	delete Grocy.UserSettings[settingsKey];
+
+	Grocy.Api.Delete('user/settings/' + settingsKey, {},
+		function(result)
+		{
+			if (reloadPageOnSuccess)
+			{
+				location.reload();
+			}
+		},
+		function(xhr)
+		{
+			if (!xhr.statusText.isEmpty())
+			{
+				Grocy.FrontendHelpers.ShowGenericError('Error while deleting, please retry', xhr.response)
+			}
+		}
+	);
+}
+
 $(document).on("keyup paste change", "input, textarea", function()
 {
 	$(this).closest("form").addClass("is-dirty");
@@ -468,23 +511,7 @@ $(document).on("change", ".user-setting-control", function()
 		var value = element.val();
 	}
 
-	Grocy.UserSettings[settingKey] = value;
+	Grocy.FrontendHelpers.SaveUserSetting(settingKey, value);
-
-	jsonData = {};
-	jsonData.value = value;
-	Grocy.Api.Put('user/settings/' + settingKey, jsonData,
-		function(result)
-		{
-			// Nothing to do...
-		},
-		function(xhr)
-		{
-			if (!xhr.statusText.isEmpty())
-			{
-				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
-			}
-		}
-	);
 });
 
 // Show file name Bootstrap custom file input
@@ -713,25 +740,15 @@ $.extend(true, $.fn.dataTable.defaults, {
 	'stateSaveCallback': function(settings, data)
 	{
 		var settingKey = 'datatables_state_' + settings.sTableId;
-		var stateData = JSON.stringify(data);
+		if ($.isEmptyObject(data))
-
+		{
-		Grocy.UserSettings[settingKey] = stateData;
+			//state.clear was called and unfortunately the table is not refresh, so we are reloading the page
-
+			Grocy.FrontendHelpers.DeleteUserSetting(settingKey, true);
-		jsonData = {};
+		} else
-		jsonData.value = stateData;
+		{
-		Grocy.Api.Put('user/settings/' + settingKey, jsonData,
+			var stateData = JSON.stringify(data);
-			function(result)
+			Grocy.FrontendHelpers.SaveUserSetting(settingKey, stateData);
-			{
+		}
-				// Nothing to do...
-			},
-			function(xhr)
-			{
-				if (!xhr.statusText.isEmpty())
-				{
-					Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
-				}
-			}
-		);
 	},
 	'stateLoadCallback': function(settings, data)
 	{
@@ -746,9 +763,45 @@ $.extend(true, $.fn.dataTable.defaults, {
 			return JSON.parse(Grocy.UserSettings[settingKey]);
 		}
 	},
+	'preDrawCallback': function(settings)
+	{
+		// Currently it is not possible to save the state of rowGroup via saveState events
+		var api = new $.fn.dataTable.Api(settings);
+		if (typeof api.rowGroup === "function")
+		{
+			var settingKey = 'datatables_rowGroup_' + settings.sTableId;
+			if (Grocy.UserSettings[settingKey] !== undefined)
+			{
+				var rowGroup = JSON.parse(Grocy.UserSettings[settingKey]);
+
+				// Check if there way changed. the draw event is called often therefore we have to check if it's really necessary
+				if (rowGroup.enable !== api.rowGroup().enabled()
+					|| ("dataSrc" in rowGroup && rowGroup.dataSrc !== api.rowGroup().dataSrc()))
+				{
+
+					api.rowGroup().enable(rowGroup.enable);
+
+					if ("dataSrc" in rowGroup)
+					{
+						api.rowGroup().dataSrc(rowGroup.dataSrc);
+
+						// Apply fixed order for group column
+						var fixedOrder = {
+							pre: [rowGroup.dataSrc, 'asc']
+						};
+
+						api.order.fixed(fixedOrder);
+					}
+				}
+			}
+		}
+	},
 	'columnDefs': [
 		{ type: 'chinese-string', targets: '_all' }
-	]
+	],
+	'rowGroup': {
+		enable: false
+	}
 });
 
 // serializeJSON defaults
@@ -847,6 +900,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 +939,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,17 +950,82 @@ $(".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"><h5>' + __t('Table options') + '</h5><hr><h5>' + __t('Hide/view columns') + '</h5><div class="text-left form-group">' + columnCheckBoxesHtml + '</div></div>';
+	if (rowGroupDefined)
+	{
+		message += '<div class="text-center mt-1"><h5>' + __t('Group by') + '</h5><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,
+		onEscape: true,
 		buttons: {
-			cancel: {
+			reset: {
+				label: __t('Reset'),
+				className: 'btn-outline-danger float-left responsive-button',
+				callback: function()
+				{
+					bootbox.confirm({
+						swapButtonOrder: true,
+						message: __t("Are you sure to reset the table options?"),
+						buttons: {
+							confirm: {
+								label: 'Yes',
+								className: 'btn-danger'
+							},
+							cancel: {
+								label: 'No',
+								className: 'btn-primary'
+							}
+						},
+						callback: function(result)
+						{
+							if (result)
+							{
+								var dataTable = $(dataTableSelector).DataTable();
+								var tableId = dataTable.settings()[0].sTableId;
+
+								// Delete rowgroup settings
+								Grocy.FrontendHelpers.DeleteUserSetting('datatables_rowGroup_' + tableId);
+
+								// Delete state settings
+								dataTable.state.clear();
+							}
+							bootbox.hideAll();
+						}
+					});
+				}
+			},
+			ok: {
 				label: __t('OK'),
 				className: 'btn-primary responsive-button',
 				callback: function()
@@ -896,6 +1036,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 +1045,45 @@ $(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();
+	var rowGroup;
+
+	if (columnIndex == -1)
+	{
+		rowGroup = {
+			enable: false
+		};
+
+		dataTable.rowGroup().enable(false);
+
+		//remove fixed order
+		dataTable.order.fixed({});
+	}
+	else
+	{
+		rowGroup = {
+			enable: true,
+			dataSrc: columnIndex
+		}
+
+		dataTable.rowGroup().enable(true);
+		dataTable.rowGroup().dataSrc(columnIndex);
+
+		//apply fixed order for group column
+		var fixedOrder = {
+			pre: [columnIndex, 'asc']
+		};
+		dataTable.order.fixed(fixedOrder);
+	}
+
+	var settingKey = 'datatables_rowGroup_' + dataTable.settings()[0].sTableId;
+	Grocy.FrontendHelpers.SaveUserSetting(settingKey, JSON.stringify(rowGroup));
+
+	dataTable.draw();
+});

public/viewjs/productform.js

@@ -275,6 +275,7 @@ var quConversionsTable = $('#qu-conversions-table-products').DataTable({
 		{ 'visible': false, 'targets': 4 }
 	].concat($.fn.dataTable.defaults.columnDefs),
 	'rowGroup': {
+		enable: true,
 		dataSrc: 4
 	}
 });

public/viewjs/recipeform.js

@@ -82,6 +82,7 @@ var recipesPosTables = $('#recipes-pos-table').DataTable({
 		{ 'visible': false, 'targets': 4 }
 	].concat($.fn.dataTable.defaults.columnDefs),
 	'rowGroup': {
+		enable: true,
 		dataSrc: 4
 	}
 });

public/viewjs/shoppinglist.js

@@ -9,6 +9,7 @@ var shoppingListTable = $('#shoppinglist-table').DataTable({
 		{ 'visible': false, 'targets': 3 }
 	].concat($.fn.dataTable.defaults.columnDefs),
 	'rowGroup': {
+		enable: true,
 		dataSrc: 3,
 		startRender: function(rows, group)
 		{

public/viewjs/tasks.js

@@ -6,6 +6,7 @@
 		{ 'visible': false, 'targets': 3 }
 	].concat($.fn.dataTable.defaults.columnDefs),
 	'rowGroup': {
+		enable: true,
 		dataSrc: 3
 	}
 });

routes.php

@@ -175,6 +175,7 @@ $app->group('/api', function (RouteCollectorProxy $group) {
 	$group->get('/user/settings', '\Grocy\Controllers\UsersApiController:GetUserSettings');
 	$group->get('/user/settings/{settingKey}', '\Grocy\Controllers\UsersApiController:GetUserSetting');
 	$group->put('/user/settings/{settingKey}', '\Grocy\Controllers\UsersApiController:SetUserSetting');
+	$group->delete('/user/settings/{settingKey}', '\Grocy\Controllers\UsersApiController:DeleteUserSetting');
 
 	// Stock
 	if (GROCY_FEATURE_FLAG_STOCK)

services/UsersService.php

@@ -114,6 +114,11 @@ class UsersService extends BaseService
 		}
 	}
 
+	public function DeleteUserSetting($userId, $settingKey)
+	{
+		$this->getDatabase()->user_settings()->where('user_id = :1 AND key = :2', $userId, $settingKey)->delete();
+	}
+
 	private function UserExists($userId)
 	{
 		$userRow = $this->getDatabase()->users()->where('id = :1', $userId)->fetch();

views/batteries.blade.php

@@ -72,7 +72,7 @@
 				<tr>
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#batteries-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/batteriesjournal.blade.php

@@ -68,7 +68,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#batteries-journal-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/batteriesoverview.blade.php

@@ -90,7 +90,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#batteries-overview-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/chores.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#chores-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/choresjournal.blade.php

@@ -68,7 +68,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#chores-journal-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/choresoverview.blade.php

@@ -112,7 +112,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#chores-overview-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/equipment.blade.php

@@ -63,7 +63,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#equipment-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/layout/default.blade.php

@@ -65,6 +65,8 @@
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.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">
 	<link href="{{ $U('/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}"
@@ -684,10 +686,12 @@
 	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-colreorder-bs4/js/colReorder.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-select/js/dataTables.select.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-plugins/filtering/type-based/accent-neutralise.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-plugins/sorting/chinese-string.js?v=', true) }}{{ $version }}"></script>
+	<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('/node_modules/datatables.net-select/js/dataTables.select.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/timeago/jquery.timeago.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules', true) }}/timeago/locales/jquery.timeago.{{ $__t('timeago_locale') }}.js?v={{ $version }}"></script>
 	<script src="{{ $U('/node_modules/toastr/build/toastr.min.js?v=', true) }}{{ $version }}"></script>
@@ -746,4 +750,4 @@
 	@endif
 </body>
 
-</html>
+</html>

views/locations.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#locations-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/manageapikeys.blade.php

@@ -78,7 +78,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#apikeys-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/productform.blade.php

@@ -10,15 +10,11 @@
 
 @push('pageScripts')
 <script src="{{ $U('/node_modules/TagManager/tagmanager.js?v=', true) }}{{ $version }}"></script>
-<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>
 @endpush
 
 @push('pageStyles')
 <link href="{{ $U('/node_modules/TagManager/tagmanager.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">
 @endpush
 
 @section('content')
@@ -472,7 +468,7 @@
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#barcode-table"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>
@@ -573,14 +569,14 @@
 						<tr>
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#qu-conversions-table-products"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>
 							<th>{{ $__t('Quantity unit from') }}</th>
 							<th>{{ $__t('Quantity unit to') }}</th>
 							<th>{{ $__t('Factor') }}</th>
-							<th class="d-none">Hidden group</th>
+							<th>{{ $__t('Group')}}</th>
 							<th></th>
 						</tr>
 					</thead>

views/productgroups.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#productgroups-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/products.blade.php

@@ -102,7 +102,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#products-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/quantityunitform.blade.php

@@ -128,7 +128,7 @@
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#qu-conversions-table"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>

views/quantityunits.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#quantityunits-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/recipeform.blade.php

@@ -8,16 +8,6 @@
 
 @section('viewJsName', 'recipeform')
 
-@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>
-@endpush
-
-@push('pageStyles')
-<link href="{{ $U('/node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css?v=', true) }}{{ $version }}"
-	rel="stylesheet">
-@endpush
-
 @section('content')
 <div class="row">
 	<div class="col">
@@ -149,14 +139,14 @@
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#recipes-pos-table"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>
 							<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">
@@ -252,7 +242,7 @@
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#recipes-includes-table"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>

views/recipes.blade.php

@@ -102,7 +102,7 @@
 							<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 									data-toggle="tooltip"
 									data-toggle="tooltip"
-									title="{{ $__t('Hide/view columns') }}"
+									title="{{ $__t('Table options') }}"
 									data-table-selector="#recipes-table"
 									href="#"><i class="fas fa-eye"></i></a>
 							</th>

views/shoppinglist.blade.php

@@ -5,16 +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 {
@@ -178,13 +174,13 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							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>{{ $__t('Product group') }}</th>
 					<th class="d-none">Hidden status</th>
 
 					@include('components.userfields_thead', array(
@@ -251,7 +247,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/shoppinglocations.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#shoppinglocations-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/stockentries.blade.php

@@ -58,7 +58,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#stockentries-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/stockjournal.blade.php

@@ -121,7 +121,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#stock-journal-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/stockjournalsummary.blade.php

@@ -96,7 +96,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#stock-journal-summary-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/stockoverview.blade.php

@@ -152,7 +152,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#stock-overview-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/taskcategories.blade.php

@@ -73,7 +73,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#taskcategories-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/tasks.blade.php

@@ -4,16 +4,9 @@
 @section('activeNav', 'tasks')
 @section('viewJsName', 'tasks')
 
-@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>
-@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">
 @endpush
 
 @section('content')
@@ -108,13 +101,13 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#tasks-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</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 +169,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>

views/userentities.blade.php

@@ -69,7 +69,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#userentities-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/userfields.blade.php

@@ -84,7 +84,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#userfields-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>

views/users.blade.php

@@ -69,7 +69,7 @@
 					<th class="border-right"><a class="text-muted change-table-columns-visibility-button"
 							data-toggle="tooltip"
 							data-toggle="tooltip"
-							title="{{ $__t('Hide/view columns') }}"
+							title="{{ $__t('Table options') }}"
 							data-table-selector="#users-table"
 							href="#"><i class="fas fa-eye"></i></a>
 					</th>