Small different UI improvements

Show the cursor as pointer on stock overview page while hovering the product name cell to highlight that the productcard can be opened
Show a waiting cursor and disable all form inputs while doing background XHR calls to highlight that the user should wait
Place the search field (to search a table) on all pages to the left most place

public/css/grocy.css

@@ -160,6 +160,14 @@ input::-webkit-inner-spin-button {
 	margin-right: 0;
 }
 
+.cursor-link {
+	cursor: pointer;
+}
+
+.cursor-busy {
+	cursor: wait;
+}
+
 /* Third party component customizations - DataTables */
 td {
      vertical-align: middle !important;

public/js/grocy.js

@@ -255,6 +255,26 @@ Grocy.FrontendHelpers.ValidateForm = function(formId)
 	$(form).addClass('was-validated');
 }
 
+Grocy.FrontendHelpers.BeginUiBusy = function(formId = null)
+{
+	$("body").addClass("cursor-busy");
+
+	if (formId !== null)
+	{
+		$("#" + formId + " :input").attr("disabled", true);
+	}
+}
+
+Grocy.FrontendHelpers.EndUiBusy = function(formId = null)
+{
+	$("body").removeClass("cursor-busy");
+
+	if (formId !== null)
+	{
+		$("#" + formId + " :input").attr("disabled", false);
+	}
+}
+
 Grocy.FrontendHelpers.ShowGenericError = function(message, exception)
 {
 	toastr.error(L(message) + '<br><br>' + L('Click to show technical details'), '', {

public/viewjs/batteriesoverview.js

@@ -58,6 +58,8 @@ $(document).on('click', '.track-charge-cycle-button', function(e)
 	// Remove the focus from the current button
 	// to prevent that the tooltip stays until clicked anywhere else
 	document.activeElement.blur();
+
+	Grocy.FrontendHelpers.BeginUiBusy();
 	
 	var batteryId = $(e.currentTarget).attr('data-battery-id');
 	var batteryName = $(e.currentTarget).attr('data-battery-name');
@@ -102,18 +104,21 @@ $(document).on('click', '.track-charge-cycle-button', function(e)
 						$('#battery-' + batteryId + '-next-charge-time-timeago').attr('datetime', result.next_estimated_charge_time);
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy();
 					toastr.success(L('Tracked charge cycle of battery #1 on #2', batteryName, trackedTime));
 					RefreshContextualTimeago();
 					RefreshStatistics();
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy();
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);

public/viewjs/batteryform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#battery-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("battery-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/batteries', $('#battery-form').serializeJSON(),
+		Grocy.Api.Post('add-object/batteries', jsonData,
 			function(result)
 			{
 				window.location.href = U('/batteries');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("battery-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/batteries/' + Grocy.EditObjectId, $('#battery-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/batteries/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/batteries');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("battery-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/batterytracking.js

@@ -3,6 +3,7 @@
 	e.preventDefault();
 
 	var jsonForm = $('#batterytracking-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("batterytracking-form");
 
 	Grocy.Api.Get('batteries/get-battery-details/' + jsonForm.battery_id,
 		function (batteryDetails)
@@ -10,6 +11,7 @@
 			Grocy.Api.Get('batteries/track-charge-cycle/' + jsonForm.battery_id + '?tracked_time=' + $('#tracked_time').find('input').val(),
 				function(result)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("batterytracking-form");
 					toastr.success(L('Tracked charge cycle of battery #1 on #2', batteryDetails.battery.name, $('#tracked_time').find('input').val()) + '<br><a class="btn btn-secondary btn-sm mt-2" href="#" onclick="UndoChargeCycle(' + result.charge_cycle_id + ')"><i class="fas fa-undo"></i> ' + L("Undo") + '</a>');
 
 					$('#battery_id').val('');
@@ -22,12 +24,14 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("batterytracking-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("batterytracking-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/choreform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#chore-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("chore-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/chores', $('#chore-form').serializeJSON(),
+		Grocy.Api.Post('add-object/chores', jsonData,
 			function(result)
 			{
 				window.location.href = U('/chores');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("chore-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/chores/' + Grocy.EditObjectId, $('#chore-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/chores/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/chores');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("chore-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/choresoverview.js

@@ -58,6 +58,8 @@ $(document).on('click', '.track-chore-button', function(e)
 	// Remove the focus from the current button
 	// to prevent that the tooltip stays until clicked anywhere else
 	document.activeElement.blur();
+
+	Grocy.FrontendHelpers.BeginUiBusy();
 	
 	var choreId = $(e.currentTarget).attr('data-chore-id');
 	var choreName = $(e.currentTarget).attr('data-chore-name');
@@ -102,18 +104,21 @@ $(document).on('click', '.track-chore-button', function(e)
 						$('#chore-' + choreId + '-next-execution-time-timeago').attr('datetime', result.next_estimated_execution_time);
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy();
 					toastr.success(L('Tracked execution of chore #1 on #2', choreName, trackedTime));
 					RefreshContextualTimeago();
 					RefreshStatistics();
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy();
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);

public/viewjs/choretracking.js

@@ -3,6 +3,7 @@
 	e.preventDefault();
 
 	var jsonForm = $('#choretracking-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("choretracking-form");
 
 	Grocy.Api.Get('chores/get-chore-details/' + jsonForm.chore_id,
 		function (choreDetails)
@@ -10,6 +11,7 @@
 			Grocy.Api.Get('chores/track-chore-execution/' + jsonForm.chore_id + '?tracked_time=' + Grocy.Components.DateTimePicker.GetValue() + "&done_by=" + Grocy.Components.UserPicker.GetValue(),
 				function(result)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("choretracking-form");
 					toastr.success(L('Tracked execution of chore #1 on #2', choreDetails.chore.name, Grocy.Components.DateTimePicker.GetValue()) + '<br><a class="btn btn-secondary btn-sm mt-2" href="#" onclick="UndoChoreExecution(' + result.chore_execution_id + ')"><i class="fas fa-undo"></i> ' + L("Undo") + '</a>');
 
 					$('#chore_id').val('');
@@ -21,12 +23,14 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("choretracking-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("choretracking-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/consume.js

@@ -3,6 +3,7 @@
 	e.preventDefault();
 
 	var jsonForm = $('#consume-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("consume-form");
 
 	if ($("#use_specific_stock_entry").is(":checked"))
 	{
@@ -34,6 +35,7 @@
 						$("#use_specific_stock_entry").click();
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy("consume-form");
 					toastr.success(L('Removed #1 #2 of #3 from stock', jsonForm.amount, Pluralize(jsonForm.amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural), productDetails.product.name) + '<br><a class="btn btn-secondary btn-sm mt-2" href="#" onclick="UndoStockBooking(' + result.booking_id + ')"><i class="fas fa-undo"></i> ' + L("Undo") + '</a>');
 
 					$('#amount').val(1);
@@ -43,12 +45,14 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("consume-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("consume-form");
 			console.error(xhr);
 		}
 	);
@@ -59,6 +63,7 @@ $('#save-mark-as-open-button').on('click', function(e)
 	e.preventDefault();
 
 	var jsonForm = $('#consume-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("consume-form");
 
 	if ($("#use_specific_stock_entry").is(":checked"))
 	{
@@ -84,6 +89,7 @@ $('#save-mark-as-open-button').on('click', function(e)
 						$("#use_specific_stock_entry").click();
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy("consume-form");
 					toastr.success(L('Marked #1 #2 of #3 as opened', jsonForm.amount, Pluralize(jsonForm.amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural), productDetails.product.name) + '<br><a class="btn btn-secondary btn-sm mt-2" href="#" onclick="UndoStockBooking(' + result.booking_id + ')"><i class="fas fa-undo"></i> ' + L("Undo") + '</a>');
 
 					$('#amount').val(1);
@@ -93,12 +99,14 @@ $('#save-mark-as-open-button').on('click', function(e)
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("consume-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("consume-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/equipmentform.js

@@ -3,6 +3,8 @@
 	e.preventDefault();
 
 	var jsonData = $('#equipment-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("equipment-form");
+
 	if ($("#instruction-manual")[0].files.length > 0)
 	{
 		var someRandomStuff = Math.random().toString(36).substring(2, 100) + Math.random().toString(36).substring(2, 100);
@@ -28,6 +30,7 @@
 						},
 						function(xhr)
 						{
+							Grocy.FrontendHelpers.EndUiBusy("equipment-form");
 							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 						}
 					);
@@ -39,6 +42,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("equipment-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
@@ -54,6 +58,7 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("equipment-form");
 					Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 				}
 			);
@@ -71,6 +76,7 @@
 						},
 						function(xhr)
 						{
+							Grocy.FrontendHelpers.EndUiBusy("equipment-form");
 							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 						}
 					);
@@ -82,6 +88,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("equipment-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/inventory.js

@@ -3,6 +3,7 @@
 	e.preventDefault();
 
 	var jsonForm = $('#inventory-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("inventory-form");
 
 	Grocy.Api.Get('stock/get-product-details/' + jsonForm.product_id,
 		function (productDetails)
@@ -32,6 +33,7 @@
 						);
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy("inventory-form");
 					toastr.success(L('Stock amount of #1 is now #2 #3', productDetails.product.name, jsonForm.new_amount, Pluralize(jsonForm.new_amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural)) + '<br><a class="btn btn-secondary btn-sm mt-2" href="#" onclick="UndoStockBooking(' + result.booking_id + ')"><i class="fas fa-undo"></i> ' + L("Undo") + '</a>');
 
 					if (addBarcode !== undefined)
@@ -50,12 +52,14 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("inventory-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("inventory-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/locationform.js

@@ -2,15 +2,19 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#location-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("location-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/locations', $('#location-form').serializeJSON(),
+		Grocy.Api.Post('add-object/locations', jsonData,
 			function(result)
 			{
 				window.location.href = U('/locations');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("location-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
@@ -24,6 +28,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("location-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/productform.js

@@ -10,6 +10,8 @@
 	}
 
 	var jsonData = $('#product-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("product-form");
+
 	if ($("#product-picture")[0].files.length > 0)
 	{
 		var someRandomStuff = Math.random().toString(36).substring(2, 100) + Math.random().toString(36).substring(2, 100);
@@ -35,6 +37,7 @@
 						},
 						function (xhr)
 						{
+							Grocy.FrontendHelpers.EndUiBusy("product-form");
 							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 						}
 					);
@@ -46,6 +49,7 @@
 			},
 			function (xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("product-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
@@ -61,6 +65,7 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("product-form");
 					Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 				}
 			);
@@ -78,6 +83,7 @@
 						},
 						function(xhr)
 						{
+							Grocy.FrontendHelpers.EndUiBusy("product-form");
 							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 						}
 					);
@@ -89,6 +95,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("product-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/productgroupform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#product-group-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("product-group-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/product_groups', $('#product-group-form').serializeJSON(),
+		Grocy.Api.Post('add-object/product_groups', jsonData,
 			function(result)
 			{
 				window.location.href = U('/productgroups');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("product-group-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/product_groups/' + Grocy.EditObjectId, $('#product-group-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/product_groups/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/productgroups');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("product-group-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/purchase.js

@@ -3,6 +3,7 @@
 	e.preventDefault();
 
 	var jsonForm = $('#purchase-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("purchase-form");
 
 	Grocy.Api.Get('stock/get-product-details/' + jsonForm.product_id,
 		function(productDetails)
@@ -35,6 +36,7 @@
 							function (result) { },
 							function(xhr)
 							{
+								Grocy.FrontendHelpers.EndUiBusy("purchase-form");
 								console.error(xhr);
 							}
 						);
@@ -54,6 +56,7 @@
 					}
 					else
 					{
+						Grocy.FrontendHelpers.EndUiBusy("purchase-form");
 						toastr.success(successMessage);
 						$('#amount').val(0);
 						$('#price').val('');
@@ -65,12 +68,14 @@
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy("purchase-form");
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("purchase-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/quantityunitform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#quantityunit-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("quantityunit-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/quantity_units', $('#quantityunit-form').serializeJSON(),
+		Grocy.Api.Post('add-object/quantity_units', jsonData,
 			function(result)
 			{
 				window.location.href = U('/quantityunits');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("quantityunit-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/quantity_units/' + Grocy.EditObjectId, $('#quantityunit-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/quantity_units/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/quantityunits');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("quantityunit-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/recipeform.js

@@ -2,13 +2,17 @@
 {
 	e.preventDefault();
 
-	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+	var jsonData = $('#recipe-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("recipe-form");
+
+	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, jsonData,
 		function(result)
 		{
 			window.location.href = U('/recipes');
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy("recipe-form");
 			console.error(xhr);
 		}
 	);

public/viewjs/recipeposform.js

@@ -4,6 +4,9 @@
 
 	var jsonData = $('#recipe-pos-form').serializeJSON({ checkboxUncheckedValue: "0" });
 	jsonData.recipe_id = Grocy.EditObjectParentId;
+
+	Grocy.FrontendHelpers.BeginUiBusy("recipe-pos-form");
+
 	if (Grocy.EditMode === 'create')
 	{
 		Grocy.Api.Post('add-object/recipes_pos', jsonData,
@@ -13,6 +16,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("recipe-pos-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
@@ -26,6 +30,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("recipe-pos-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/recipes.js

@@ -95,6 +95,8 @@ $(document).on('click', '.recipe-order-missing-button', function(e)
 		{
 			if (result === true)
 			{
+				Grocy.FrontendHelpers.BeginUiBusy();
+
 				Grocy.Api.Get('recipes/add-not-fulfilled-products-to-shopping-list/' + objectId,
 					function(result)
 					{
@@ -102,6 +104,7 @@ $(document).on('click', '.recipe-order-missing-button', function(e)
 					},
 					function(xhr)
 					{
+						Grocy.FrontendHelpers.EndUiBusy();
 						console.error(xhr);
 					}
 				);
@@ -131,13 +134,17 @@ $("#selectedRecipeConsumeButton").on('click', function(e)
 		{
 			if (result === true)
 			{
+				Grocy.FrontendHelpers.BeginUiBusy();
+
 				Grocy.Api.Get('recipes/consume-recipe/' + objectId,
 					function(result)
 					{
+						Grocy.FrontendHelpers.EndUiBusy();
 						toastr.success(L('Removed all ingredients of recipe "#1" from stock', objectName));
 					},
 					function(xhr)
 					{
+						Grocy.FrontendHelpers.EndUiBusy();
 						console.error(xhr);
 					}
 				);

public/viewjs/shoppinglist.js

@@ -61,18 +61,21 @@ $(document).on('click', '.shoppinglist-delete-button', function (e)
 	e.preventDefault();
 	
 	var shoppingListItemId = $(e.currentTarget).attr('data-shoppinglist-id');
+	Grocy.FrontendHelpers.BeginUiBusy();
 
 	Grocy.Api.Get('delete-object/shopping_list/' + shoppingListItemId,
 		function(result)
 		{
 			$('#shoppinglistitem-' + shoppingListItemId + '-row').fadeOut(500, function()
 			{
+				Grocy.FrontendHelpers.EndUiBusy();
 				$(this).remove();
 				OnListItemRemoved();
 			});
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);
@@ -110,17 +113,21 @@ $(document).on('click', '#clear-shopping-list', function(e)
 		{
 			if (result === true)
 			{
+				Grocy.FrontendHelpers.BeginUiBusy();
+
 				Grocy.Api.Get('stock/clear-shopping-list',
 					function(result)
 					{
 						$('#shoppinglist-table tbody tr').fadeOut(500, function()
 						{
+							Grocy.FrontendHelpers.EndUiBusy();
 							$(this).remove();
 							OnListItemRemoved();
 						});
 					},
 					function(xhr)
 					{
+						Grocy.FrontendHelpers.EndUiBusy();
 						console.error(xhr);
 					}
 				);

public/viewjs/shoppinglistform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#shoppinglist-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("shoppinglist-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/shopping_list', $('#shoppinglist-form').serializeJSON(),
+		Grocy.Api.Post('add-object/shopping_list', jsonData,
 			function(result)
 			{
 				window.location.href = U('/shoppinglist');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("shoppinglist-form");
 				console.error(xhr);
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/shopping_list/' + Grocy.EditObjectId, $('#shoppinglist-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/shopping_list/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/shoppinglist');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("shoppinglist-form");
 				console.error(xhr);
 			}
 		);

public/viewjs/stockoverview.js

@@ -81,6 +81,8 @@ $(document).on('click', '.product-consume-button', function(e)
 	// Remove the focus from the current button
 	// to prevent that the tooltip stays until clicked anywhere else
 	document.activeElement.blur();
+
+	Grocy.FrontendHelpers.BeginUiBusy();
 	
 	var productId = $(e.currentTarget).attr('data-product-id');
 	var productName = $(e.currentTarget).attr('data-product-name');
@@ -135,18 +137,21 @@ $(document).on('click', '.product-consume-button', function(e)
 						$('#product-' + productId + '-next-best-before-date-timeago').attr('datetime', result.next_best_before_date);
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy();
 					toastr.success(L('Removed #1 #2 of #3 from stock', consumeAmount, productQuName, productName));
 					RefreshContextualTimeago();
 					RefreshStatistics();
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy();
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);
@@ -159,6 +164,8 @@ $(document).on('click', '.product-open-button', function(e)
 	// Remove the focus from the current button
 	// to prevent that the tooltip stays until clicked anywhere else
 	document.activeElement.blur();
+
+	Grocy.FrontendHelpers.BeginUiBusy();
 	
 	var productId = $(e.currentTarget).attr('data-product-id');
 	var productName = $(e.currentTarget).attr('data-product-name');
@@ -205,18 +212,21 @@ $(document).on('click', '.product-open-button', function(e)
 						button.addClass("disabled");
 					}
 
+					Grocy.FrontendHelpers.EndUiBusy();
 					toastr.success(L('Marked #1 #2 of #3 as opened', 1, productQuName, productName));
 					RefreshContextualTimeago();
 					RefreshStatistics();
 				},
 				function(xhr)
 				{
+					Grocy.FrontendHelpers.EndUiBusy();
 					console.error(xhr);
 				}
 			);
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);

public/viewjs/taskcategoryform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#task-category-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("task-category-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/task_categories', $('#task-category-form').serializeJSON(),
+		Grocy.Api.Post('add-object/task_categories', jsonData,
 			function(result)
 			{
 				window.location.href = U('/taskcategories');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("task-category-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/task_categories/' + Grocy.EditObjectId, $('#task-category-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/task_categories/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/taskcategories');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("task-category-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/taskform.js

@@ -7,6 +7,8 @@
 	delete jsonData.user_id;
 	jsonData.due_date = Grocy.Components.DateTimePicker.GetValue();
 
+	Grocy.FrontendHelpers.BeginUiBusy("task-form");
+
 	if (Grocy.EditMode === 'create')
 	{
 		Grocy.Api.Post('add-object/tasks', jsonData,
@@ -16,6 +18,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("task-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);
@@ -29,6 +32,7 @@
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("task-form");
 				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 			}
 		);

public/viewjs/tasks.js

@@ -62,6 +62,8 @@ $(document).on('click', '.do-task-button', function(e)
 	// Remove the focus from the current button
 	// to prevent that the tooltip stays until clicked anywhere else
 	document.activeElement.blur();
+
+	Grocy.FrontendHelpers.BeginUiBusy();
 	
 	var taskId = $(e.currentTarget).attr('data-task-id');
 	var taskName = $(e.currentTarget).attr('data-task-name');
@@ -84,12 +86,14 @@ $(document).on('click', '.do-task-button', function(e)
 				$('.do-task-button[data-task-id="' + taskId + '"]').addClass("disabled");
 			}
 
+			Grocy.FrontendHelpers.EndUiBusy();
 			toastr.success(L('Marked task #1 as completed on #2', taskName, doneTime));
 			RefreshContextualTimeago();
 			RefreshStatistics();
 		},
 		function(xhr)
 		{
+			Grocy.FrontendHelpers.EndUiBusy();
 			console.error(xhr);
 		}
 	);

public/viewjs/userform.js

@@ -2,28 +2,33 @@
 {
 	e.preventDefault();
 
+	var jsonData = $('#user-form').serializeJSON();
+	Grocy.FrontendHelpers.BeginUiBusy("user-form");
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('users/create', $('#user-form').serializeJSON(),
+		Grocy.Api.Post('users/create', jsonData,
 			function(result)
 			{
 				window.location.href = U('/users');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("user-form");
 				console.error(xhr);
 			}
 		);
 	}
 	else
 	{
-		Grocy.Api.Post('users/edit/' + Grocy.EditObjectId, $('#user-form').serializeJSON(),
+		Grocy.Api.Post('users/edit/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
 				window.location.href = U('/users');
 			},
 			function(xhr)
 			{
+				Grocy.FrontendHelpers.EndUiBusy("user-form");
 				console.error(xhr);
 			}
 		);

views/batteriesoverview.blade.php

@@ -22,6 +22,10 @@
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<label for="status-filter">{{ $L('Filter by status') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="status-filter">
@@ -30,10 +34,6 @@
 			<option class="bg-danger" value="overdue">{{ $L('Overdue') }}</option>
 		</select>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
-	</div>
 </div>
 
 <div class="row">

views/choresoverview.blade.php

@@ -22,6 +22,10 @@
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<label for="status-filter">{{ $L('Filter by status') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="status-filter">
@@ -30,10 +34,6 @@
 			<option class="bg-danger" value="overdue">{{ $L('Overdue') }}</option>
 		</select>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
-	</div>
 </div>
 
 <div class="row">

views/shoppinglist.blade.php

@@ -38,6 +38,10 @@
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-4">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
 	<div class="col-xs-12 col-md-4">
 		<label for="status-filter">{{ $L('Filter by status') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="status-filter">
@@ -45,10 +49,6 @@
 			<option class="bg-info" value="belowminstockamount">{{ $L('Below min. stock amount') }}</option>
 		</select>
 	</div>
-	<div class="col-xs-12 col-md-4">
-		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
-	</div>
 </div>
 
 <div class="row">

views/stockoverview.blade.php

@@ -32,6 +32,10 @@
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<label for="location-filter">{{ $L('Filter by location') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="location-filter">
@@ -59,10 +63,6 @@
 			<option class="bg-info" value="belowminstockamount">{{ $L('Below min. stock amount') }}</option>
 		</select>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
-	</div>
 </div>
 
 <div class="row">
@@ -107,7 +107,7 @@
 							<i class="fas fa-file-alt"></i>
 						</a>
 					</td>
-					<td class="product-name-cell" data-product-id="{{ $currentStockEntry->product_id }}">
+					<td class="product-name-cell cursor-link" data-product-id="{{ $currentStockEntry->product_id }}">
 						{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }} <i class="fas fa-info text-muted"></i>
 					</td>
 					<td>

views/tasks.blade.php

@@ -29,6 +29,10 @@
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<label for="status-filter">{{ $L('Filter by status') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="status-filter">
@@ -37,10 +41,6 @@
 			<option class="bg-danger" value="overdue">{{ $L('Overdue') }}</option>
 		</select>
 	</div>
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
-	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3 d-flex align-items-end">
 		<div class="form-check">
 			<input class="form-check-input" type="checkbox" id="show-done-tasks">