Fix bugs

js/components/BasePicker.js

@@ -14,6 +14,7 @@ class BasePicker
 		this.input_element = null;
 
 		this.basename = basename;
+		this.hasCombobox = false;
 	}
 
 	prefill()
@@ -55,6 +56,7 @@ class BasePicker
 
 	initCombobox(selector)
 	{
+		this.hasCombobox = true;
 		this.$(selector).combobox({
 			appendId: '_text_input',
 			bsVersion: '4',
@@ -78,16 +80,28 @@ class BasePicker
 	}
 
 	SetValue(value)
+	{
+		if (this.input_element != null)
 		{
 			this.input_element.val(value);
 			this.input_element.trigger('change');
 		}
+		else
+		{
+			this.picker.val(value);
+			this.picker.trigger("change");
+		}
+	}
 
 	SetId(value)
 	{
 		this.picker.val(value);
+		if (this.hasCombobox)
 			this.picker.data('combobox').refresh();
+		if (this.input_element != null)
 			this.input_element.trigger('change');
+		else
+			this.picker.trigger("change");
 	}
 
 	Clear()

js/components/locationpicker.js

@@ -7,7 +7,7 @@ class locationpicker extends BasePicker
 		super(Grocy, "#location_id", scopeSelector);
 
 		this.picker = this.$(this.basename);
-		this.inputElement = this.$('#location_id_text_input');
+		this.input_element = this.$(this.basename + '_text_input');
 
 		this.initCombobox('.location-combobox');
 

js/components/numberpicker.js

@@ -10,8 +10,8 @@ class numberpicker
 		this.$ = scopeSelector != null ? (selector) => jScope.find(selector) : $;
 		var self = this;
 
-		this.$(".numberpicker-down-button").unbind('click').on("click", () => self.valueDownHandler(this));
+		this.$(".numberpicker-down-button").unbind('click').on("click", function() { self.valueDownHandler(this) });
-		this.$(".numberpicker-up-button").unbind('click').on("click", () => self.valueUpHandler(this));
+		this.$(".numberpicker-up-button").unbind('click').on("click", function() { self.valueUpHandler(this) });
 
 		this.$(".numberpicker").on("keyup", function()
 		{
@@ -40,17 +40,28 @@ class numberpicker
 			}
 		});
 
-		var observer = new MutationObserver((mutations) => self.handleObservedChange(mutations));
+		this.observer = new MutationObserver((mutations) =>
+		{
+			for (let mutation of mutations)
+			{
+				self.handleObservedChange(mutation)
+			}
+		});
 
 		var elements = this.$(".numberpicker");
 		for (let element of elements)
 		{
-			observer.observe(element, { attributes: true });
+			this.observer.observe(element, { attributes: true });
 		}
 
 		this.$(".numberpicker").attr("data-initialised", "true"); // Dummy change to trigger MutationObserver above once
 	}
 
+	Unload()
+	{
+		this.observer.disconnect();
+	}
+
 	modifyValueHandler(_this, newValue)
 	{
 		var inputElement = this.$(_this).parent().parent().find('input[type="number"]');

js/configs/globalstate.js

@@ -233,37 +233,6 @@ function setInitialGlobalState(Grocy)
 		}
 	})
 
-	$('.table').on('column-sizing.dt', function(e, settings)
-	{
-		var dtScrollWidth = $('.dataTables_scroll').width();
-		var tableWidth = $('.table').width();
-
-		if (dtScrollWidth < tableWidth)
-		{
-			$('.dataTables_scrollBody').addClass("no-force-overflow-visible");
-			$('.dataTables_scrollBody').removeClass("force-overflow-visible");
-		}
-		else
-		{
-			$('.dataTables_scrollBody').removeClass("no-force-overflow-visible");
-			$('.dataTables_scrollBody').addClass("force-overflow-visible");
-		}
-	});
-	$('td .dropdown').on('show.bs.dropdown', function(e)
-	{
-		if ($('.dataTables_scrollBody').hasClass("no-force-overflow-visible"))
-		{
-			$('.dataTables_scrollBody').addClass("force-overflow-visible");
-		}
-	});
-	$("td .dropdown").on('hide.bs.dropdown', function(e)
-	{
-		if ($('.dataTables_scrollBody').hasClass("no-force-overflow-visible"))
-		{
-			$('.dataTables_scrollBody').removeClass("force-overflow-visible");
-		}
-	})
-
 	$(window).on("message", function(e)
 	{
 		var data = e.originalEvent.data;

js/grocy.js

@@ -248,7 +248,7 @@ class GrocyClass
 		if (Object.prototype.hasOwnProperty.call(components, componentName))
 		{
 			// add-then-init to resolve circular dependencies
-			this.initComponents.push(componentName);
+			this.initComponents.push(componentName + scopeName);
 			var component = new components[componentName](this, scope);
 			this.Components[componentName + scopeName] = component;
 			return component;
@@ -377,6 +377,14 @@ class GrocyClass
 						// this occurs before the view is shown.
 						grocyProxy.Initialize(proxy);
 						self.LoadView(data.viewJsName, "#" + scopeId, proxy);
+					},
+					onHide: () =>
+					{
+						grocyProxy.Unload();
+					},
+					onHidden: () =>
+					{
+						self.FrontendHelpers.EndUiBusy();
 					}
 				});
 			},

js/lib/proxy.js

@@ -48,12 +48,25 @@ class GrocyProxy
 
 	Initialize(proxy)
 	{
+		this.proxy = proxy;
 		this.scope = $(this.scopeSelector);
 		var jScope = this.scope;
 		this.$scope = (selector) => jScope.find(selector);
 		this.FrontendHelpers = new GrocyFrontendHelpers(proxy, this.RootGrocy.Api, this.scopeSelector);
 	}
 
+	Unload()
+	{
+		for (let component in this.Components)
+		{
+			var comp = this.Components[component];
+			if (Object.prototype.hasOwnProperty.call(comp, "Unload"))
+			{
+				comp.Unload();
+			}
+		}
+	}
+
 	Use(componentName, scope = null)
 	{
 		let scopeName = scope || this.scopeSelector;
@@ -64,8 +77,8 @@ class GrocyProxy
 		if (Object.prototype.hasOwnProperty.call(components, componentName))
 		{
 			// add-then-init to resolve circular dependencies
-			this.initComponents.push(componentName);
+			this.initComponents.push(componentName + scopeName);
-			var component = new components[componentName](this, scope);
+			var component = new components[componentName](this.proxy, scope);
 			this.Components[componentName + scopeName] = component;
 			return component;
 		}

js/viewjs/about.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	$scope('[data-toggle="collapse-next"]').on("click", function(e)

js/viewjs/barcodescannertesting.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("barcodescanner");

js/viewjs/batteries.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/batteriesjournal.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var batteriesJournalTable = $scope('#batteries-journal-table').DataTable({

js/viewjs/batteriesoverview.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var batterycard = Grocy.Use("batterycard");

js/viewjs/batteriessettings.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");

js/viewjs/batteryform.js

@@ -5,7 +5,7 @@ function batteryformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -85,7 +85,7 @@ function batteryformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('battery-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#battery-form')[0].checkValidity() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/batterytracking.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var batterycard = Grocy.Use("batterycard");
@@ -92,7 +92,7 @@
 		{
 			event.preventDefault();
 
-			if (document.getElementById('batterytracking-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#batterytracking-form')[0].checkValidity() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/calendar.js

@@ -19,7 +19,7 @@ function calendarView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 		$viewport = $(scope);
 	}
 
@@ -63,7 +63,7 @@ function calendarView(Grocy, scope = null)
 		firstDay = parseInt(Grocy.CalendarFirstDayOfWeek);
 	}
 
-	var calendar = new Calendar(document.getElementById("calendar"), calendarOptions);
+	var calendar = new Calendar($scope("#calendar")[0], calendarOptions);
 	calendar.render();
 
 	$scope("#ical-button").on("click", function(e)

js/viewjs/choreform.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -95,7 +95,7 @@
 		{
 			event.preventDefault();
 
-			if (document.getElementById('chore-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#chore-form')[0].checkValidity() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/chores.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var choresTable = $scope('#chores-table').DataTable({

js/viewjs/choresjournal.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var choresJournalTable = $scope('#chores-journal-table').DataTable({

js/viewjs/choresoverview.js

@@ -5,7 +5,7 @@
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var chorecard = Grocy.Use("chorecard");

js/viewjs/choressettings.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");

js/viewjs/choretracking.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var chorecard = Grocy.Use("chorecard");
@@ -110,7 +110,7 @@
 		{
 			event.preventDefault();
 
-			if (document.getElementById('choretracking-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#choretracking-form')[0].checkValidity() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/consume.js

@@ -8,11 +8,13 @@ function consumeView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productamountpicker = Grocy.Use("productamountpicker");
-	var productcard = Grocy.Use("productcard");
+	var productcard = null;
+	if (!Grocy.GetUriParam("embedded"))
+		productcard = Grocy.Use("productcard");
 	var productpicker = Grocy.Use("productpicker");
 	var recipepicker = Grocy.Use("recipepicker");
 
@@ -139,7 +141,7 @@ function consumeView(Grocy, scope = null)
 								$scope("#location_id").find("option").remove().end().append("<option></option>");
 							}
 							productpicker.GetInputElement().focus();
-							productcard.Refresh(jsonForm.product_id);
+							if (productcard != null) productcard.Refresh(jsonForm.product_id);
 							Grocy.FrontendHelpers.ValidateForm('consume-form');
 							$scope("#consume-exact-amount-group").addClass("d-none");
 						}
@@ -298,7 +300,7 @@ function consumeView(Grocy, scope = null)
 						}
 					);
 
-					if (document.getElementById("product_id").getAttribute("barcode") == "null")
+					if ($scope('#product_id').attr("barcode") == "null")
 					{
 						Grocy.ScanModeSubmit();
 					}
@@ -329,7 +331,7 @@ function consumeView(Grocy, scope = null)
 
 		if (productId)
 		{
-			productcard.Refresh(productId);
+			if (productcard != null) productcard.Refresh(productId);
 
 			Grocy.Api.Get('stock/products/' + productId,
 				function(productDetails)
@@ -382,9 +384,9 @@ function consumeView(Grocy, scope = null)
 								}
 							});
 
-							if (document.getElementById("product_id").getAttribute("barcode") != "null")
+							if ($scope('#product_id').attr("barcode") != "null")
 							{
-								Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + document.getElementById("product_id").getAttribute("barcode"),
+								Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + $scope('#product_id').attr("barcode"),
 									function(barcodeResult)
 									{
 										if (barcodeResult != null)
@@ -499,7 +501,7 @@ function consumeView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('consume-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#consume-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/equipment.js

@@ -5,7 +5,7 @@ function equipmentView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var equipmentTable = $scope('#equipment-table').DataTable({

js/viewjs/equipmentform.js

@@ -6,7 +6,7 @@ function equipmentformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -132,7 +132,7 @@ function equipmentformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('equipment-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#equipment-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/inventory.js

@@ -5,7 +5,7 @@ function inventoryView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var dt1 = Grocy.Use("datetimepicker");
@@ -176,7 +176,7 @@ function inventoryView(Grocy, scope = null)
 						$scope("#tare-weight-handling-info").addClass("d-none");
 					}
 
-					$scope('#price').val(parseFloat(productDetails.last_price));
+					$scope('#price').val(parseFloat(productDetails.last_price).toFixed(Grocy.UserSettings.stock_decimal_places_prices));
 					RefreshLocaleNumberInput();
 					if (Grocy.FeatureFlags.GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
 					{
@@ -205,9 +205,9 @@ function inventoryView(Grocy, scope = null)
 						}
 					}
 
-					if (document.getElementById("product_id").getAttribute("barcode") != "null")
+					if ($scope('#product_id').attr("barcode") != "null")
 					{
-						Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + document.getElementById("product_id").getAttribute("barcode"),
+						Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + $scope('#product_id').attr("barcode"),
 							function(barcodeResult)
 							{
 								if (barcodeResult != null)
@@ -295,7 +295,7 @@ function inventoryView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('inventory-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#inventory-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/locationcontentsheet.js

@@ -4,7 +4,7 @@
 	var top = scope != null ? $(scope) : $(document);
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	top.on("click", ".print-all-locations-button", function(e)

js/viewjs/locationform.js

@@ -5,7 +5,7 @@ function locationformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -84,7 +84,7 @@ function locationformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('location-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#location-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/locations.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/login.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	$scope('#username').focus();

js/viewjs/manageapikeys.js

@@ -5,7 +5,7 @@ function manageapikeysView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var apiKeysTable = $scope('#apikeys-table').DataTable({

js/viewjs/mealplan.js

@@ -16,7 +16,7 @@ function mealplanView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -45,7 +45,7 @@ function mealplanView(Grocy, scope = null)
 		firstDay = parseInt(Grocy.MealPlanFirstDayOfWeek);
 	}
 
-	var calendar = new Calendar(document.getElementById("calendar"), {
+	var calendar = new Calendar($scope('#calendar')[0], {
 		plugins: [dayGridPlugin, bootstrapPlugin, momentPlugin],
 		themeSystem: "bootstrap",
 		header: {
@@ -432,7 +432,7 @@ function mealplanView(Grocy, scope = null)
 			return;
 		}
 
-		if (document.getElementById("add-recipe-form").checkValidity() === false) //There is at least one validation error
+		if ($scope('#add-recipe-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			return false;
 		}
@@ -474,7 +474,7 @@ function mealplanView(Grocy, scope = null)
 			return;
 		}
 
-		if (document.getElementById("add-note-form").checkValidity() === false) //There is at least one validation error
+		if ($scope('#add-note-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			return false;
 		}
@@ -520,7 +520,7 @@ function mealplanView(Grocy, scope = null)
 			return;
 		}
 
-		if (document.getElementById("add-product-form").checkValidity() === false) //There is at least one validation error
+		if ($scope('#add-product-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			return false;
 		}
@@ -567,7 +567,7 @@ function mealplanView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById("add-recipe-form").checkValidity() === false) //There is at least one validation error
+			if ($scope('#add-recipe-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}
@@ -584,7 +584,7 @@ function mealplanView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById("add-product-form").checkValidity() === false) //There is at least one validation error
+			if ($scope('#add-product-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}
@@ -601,7 +601,7 @@ function mealplanView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById("add-recipe-form").checkValidity() === false) //There is at least one validation error
+			if ($scope('#add-recipe-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/productbarcodeform.js

@@ -7,7 +7,7 @@ function productbarcodeformView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use('barcodescanner');
@@ -86,7 +86,7 @@ function productbarcodeformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('barcode-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#barcode-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/productform.js

@@ -7,7 +7,7 @@ function productformView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -217,7 +217,7 @@ function productformView(Grocy, scope = null)
 		$scope(".input-group-qu").trigger("change");
 		$scope("#product-form select").trigger("select");
 
-		if (document.getElementById('product-form').checkValidity() === false) //There is at least one validation error
+		if ($scope('#product-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			$scope("#qu-conversion-add-button").addClass("disabled");
 		}
@@ -226,7 +226,7 @@ function productformView(Grocy, scope = null)
 			$scope("#qu-conversion-add-button").removeClass("disabled");
 		}
 
-		if (document.getElementById('product-form').checkValidity() === false) //There is at least one validation error
+		if ($scope('#product-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			$scope("#barcode-add-button").addClass("disabled");
 		}
@@ -243,7 +243,7 @@ function productformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('product-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#product-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/productgroupform.js

@@ -5,7 +5,7 @@ function productgroupformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -70,7 +70,7 @@ function productgroupformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('product-group-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#product-group-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/productgroups.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/products.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productsTable = $scope('#products-table').DataTable({

js/viewjs/purchase.js

@@ -6,7 +6,7 @@ function purchaseView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var datetimepicker = Grocy.Use("datetimepicker");
@@ -17,7 +17,9 @@ function purchaseView(Grocy, scope = null)
 	var locationpicker = Grocy.Use("locationpicker");
 	Grocy.Use("numberpicker");
 	var productamountpicker = Grocy.Use("productamountpicker");
-	var productcard = Grocy.Use("productcard");
+	var productcard = null;
+	if (!Grocy.GetUriParam("embedded"))
+		productcard = Grocy.Use("productcard");
 	var shoppinglocationpicker = Grocy.Use("shoppinglocationpicker");
 	var productpicker = Grocy.Use("productpicker");
 
@@ -123,6 +125,7 @@ function purchaseView(Grocy, scope = null)
 									$scope("#flow-info-InplaceAddBarcodeToExistingProduct").addClass("d-none");
 									$scope('#barcode-lookup-disabled-hint').addClass('d-none');
 									$scope('#barcode-lookup-hint').removeClass('d-none');
+									if (!Grocy.GetUriParam("embedded"))
 										window.history.replaceState({}, document.title, U("/purchase"));
 								},
 								function(xhr)
@@ -207,7 +210,7 @@ function purchaseView(Grocy, scope = null)
 								shoppinglocationpicker.SetValue('');
 							}
 							productpicker.GetInputElement().focus();
-							productcard.Refresh(jsonForm.product_id);
+							if (productcard != null) productcard.Refresh(jsonForm.product_id);
 
 							$scope('#price-hint').text("");
 							var priceTypeUnitPrice = $scope("#price-type-unit-price");
@@ -232,8 +235,6 @@ function purchaseView(Grocy, scope = null)
 		);
 	});
 
-	if (productpicker !== undefined)
-	{
 	productpicker.GetPicker().on('change', function(e)
 	{
 		if (BoolVal(Grocy.UserSettings.scan_mode_purchase_enabled))
@@ -245,7 +246,7 @@ function purchaseView(Grocy, scope = null)
 
 		if (productId)
 		{
-				productcard.Refresh(productId);
+			if (productcard != null) productcard.Refresh(productId);
 
 			Grocy.Api.Get('stock/products/' + productId,
 				function(productDetails)
@@ -288,7 +289,10 @@ function purchaseView(Grocy, scope = null)
 					}
 					else
 					{
-							$scope('#price').val(parseFloat(productDetails.last_price / $scope("#qu_id option:selected").attr("data-qu-factor")));
+						$scope('#price').val(
+							parseFloat(
+								productDetails.last_price / $scope("#qu_id option:selected").attr("data-qu-factor")
+							).toFixed(Grocy.UserSettings.stock_decimal_places_prices));
 					}
 
 					var priceTypeUnitPrice = $scope("#price-type-unit-price");
@@ -347,16 +351,17 @@ function purchaseView(Grocy, scope = null)
 					$scope("#display_amount").focus();
 
 					Grocy.FrontendHelpers.ValidateForm('purchase-form');
-						if (Grocy.GetUriParam("flow") === "shoppinglistitemtostock" && BoolVal(Grocy.UserSettings.shopping_list_to_stock_workflow_auto_submit_when_prefilled) && document.getElementById("purchase-form").checkValidity() === true)
+					var elem = productpicker.GetPicker()[0];
+					if (Grocy.GetUriParam("flow") === "shoppinglistitemtostock" && BoolVal(Grocy.UserSettings.shopping_list_to_stock_workflow_auto_submit_when_prefilled) && elem.checkValidity() === true)
 					{
 						$scope("#save-purchase-button").click();
 					}
 
 					RefreshLocaleNumberInput();
-						var elem = document.getElementById("product_id");
+
-						if (elem.getAttribute("barcode") != "null" && !elem.getAttribute("barcode").startsWith("grcy"))
+					if (elem.getAttribute("barcode") != null && !elem.getAttribute("barcode").startsWith("grcy"))
 					{
-							Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + document.getElementById("product_id").getAttribute("barcode"),
+						Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + elem.getAttribute("barcode"),
 							function(barcodeResult)
 							{
 								if (barcodeResult != null)
@@ -417,15 +422,15 @@ function purchaseView(Grocy, scope = null)
 			);
 		}
 	});
-	}
 
 	$scope('#display_amount').val(parseFloat(Grocy.UserSettings.stock_default_purchase_amount));
 	RefreshLocaleNumberInput();
 	$scope(".input-group-productamountpicker").trigger("change");
+
+	productpicker.GetPicker().trigger("change");
+
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 
-	if (productpicker)
-	{
 	if (productpicker.InAnyFlow() === false && Grocy.GetUriParam("embedded") === undefined)
 	{
 		productpicker.GetInputElement().focus();
@@ -439,7 +444,7 @@ function purchaseView(Grocy, scope = null)
 			productpicker.GetInputElement().focus();
 		}
 	}
-	}
+
 
 	$scope('#display_amount').on('focus', function(e)
 	{
@@ -469,7 +474,7 @@ function purchaseView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('purchase-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('purchase-form')[0].checkValidity() === false) //There is at least one validation error
 			{
 				return false;
 			}
@@ -569,7 +574,7 @@ function purchaseView(Grocy, scope = null)
 
 	$scope("#scan-mode-button").on("click", function(e)
 	{
-		document.activeElement.blur();
+		$(this).trigger('blur');
 		$scope("#scan-mode").click();
 		$scope("#scan-mode-button").toggleClass("btn-success").toggleClass("btn-danger");
 		if ($scope("#scan-mode").prop("checked"))

js/viewjs/quantityunitconversionform.js

@@ -5,7 +5,7 @@ function quantityunitconversionformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -149,7 +149,7 @@ function quantityunitconversionformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('quconversion-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#quconversion-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/quantityunitform.js

@@ -5,7 +5,7 @@ function quantityunitformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");

js/viewjs/quantityunitpluraltesting.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");

js/viewjs/quantityunits.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var quantityUnitsTable = $scope('#quantityunits-table').DataTable({

js/viewjs/recipeform.js

@@ -6,7 +6,7 @@ function recipeformView(Grocy, scope = null)
 	var top = scope != null ? $(scope) : $(document);
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -128,7 +128,7 @@ function recipeformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('recipe-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#recipe-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}
@@ -264,7 +264,7 @@ function recipeformView(Grocy, scope = null)
 			return;
 		}
 
-		if (document.getElementById("recipe-include-form").checkValidity() === false) //There is at least one validation error
+		if ($scope('#recipe-include-form')[0].checkValidity()() === false) //There is at least one validation error
 		{
 			return false;
 		}

js/viewjs/recipeposform.js

@@ -5,7 +5,7 @@ function recipeposformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -145,7 +145,7 @@ function recipeposformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('recipe-pos-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#recipe-pos-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/recipes.js

@@ -5,7 +5,7 @@
 	var top = scope != null ? $(scope) : $(document)
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");

js/viewjs/recipessettings.js

@@ -5,7 +5,7 @@ function recipessettingsView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	if (BoolVal(Grocy.UserSettings.recipe_ingredients_group_by_product_group))

js/viewjs/shoppinglist.js

@@ -12,7 +12,7 @@ function shoppinglistView(Grocy, scope = null)
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/shoppinglistform.js

@@ -5,7 +5,7 @@ function shoppinglistformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -74,7 +74,7 @@ function shoppinglistformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('shopping-list-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#shopping-list-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/shoppinglistitemform.js

@@ -5,7 +5,7 @@ function shoppinglistitemformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productamountpicker = Grocy.Use("productamountpicker");
@@ -226,7 +226,7 @@ function shoppinglistitemformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('shoppinglist-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#shoppinglist-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/shoppinglistsettings.js

@@ -5,7 +5,7 @@ function shoppinglistsettingsView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	if (BoolVal(Grocy.UserSettings.shopping_list_to_stock_workflow_auto_submit_when_prefilled))

js/viewjs/shoppinglocationform.js

@@ -5,7 +5,7 @@ function shoppinglocationformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -84,7 +84,7 @@ function shoppinglocationformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('shoppinglocation-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#shoppinglocation-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/shoppinglocations.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/stockentries.js

@@ -5,7 +5,7 @@
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productcard = Grocy.Use("productcard");

js/viewjs/stockentryform.js

@@ -5,7 +5,7 @@ function stockentryformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var datetimepicker = Grocy.Use("datetimepicker");
@@ -81,7 +81,7 @@ function stockentryformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('stockentry-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#stockentry-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/stockjournal.js

@@ -4,7 +4,7 @@
 	var top = scope != null ? $(scope) : $(document);
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var stockJournalTable = $scope('#stock-journal-table').DataTable({

js/viewjs/stockjournalsummary.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var journalSummaryTable = $scope('#stock-journal-summary-table').DataTable({

js/viewjs/stockoverview.js

@@ -4,7 +4,7 @@
 	var top = scope != null ? $(scope) : $(document);
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productcard = Grocy.Use("productcard");

js/viewjs/stocksettings.js

@@ -5,7 +5,7 @@ function stocksettingsView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 

js/viewjs/taskcategories.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/taskcategoryform.js

@@ -5,7 +5,7 @@ function taskcategoryformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -84,7 +84,7 @@ function taskcategoryformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('task-category-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#task-category-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/taskform.js

@@ -5,7 +5,7 @@ function taskformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var datetimepicker = Grocy.Use("datetimepicker");
@@ -89,7 +89,7 @@ function taskformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('task-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#task-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/tasks.js

@@ -5,7 +5,7 @@
 
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/taskssettings.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");

js/viewjs/transfer.js

@@ -5,7 +5,7 @@ function transferView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var productpicker = Grocy.Use("productpicker");
@@ -192,7 +192,7 @@ function transferView(Grocy, scope = null)
 							{
 								if (productDetails.location.id == stockLocation.location_id)
 								{
-									$scope("#location_id_from").append($scope("<option>", {
+									$scope("#location_id_from").append($("<option>", {
 										value: stockLocation.location_id,
 										text: stockLocation.location_name + " (" + __t("Default location") + ")",
 										"data-is-freezer": stockLocation.location_is_freezer
@@ -203,7 +203,7 @@ function transferView(Grocy, scope = null)
 								}
 								else
 								{
-									$scope("#location_id_from").append($scope("<option>", {
+									$scope("#location_id_from").append($("<option>", {
 										value: stockLocation.location_id,
 										text: stockLocation.location_name,
 										"data-is-freezer": stockLocation.location_is_freezer
@@ -229,9 +229,9 @@ function transferView(Grocy, scope = null)
 						}
 					);
 
-					if (document.getElementById("product_id").getAttribute("barcode") != "null")
+					if ($scope('#product_id').attr("barcode") != "null")
 					{
-						Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + document.getElementById("product_id").getAttribute("barcode"),
+						Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + $scope('#product_id').attr("barcode"),
 							function(barcodeResult)
 							{
 								if (barcodeResult != null)
@@ -404,7 +404,7 @@ function transferView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('transfer-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#transfer-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/userentities.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 	// preload some views.
 	Grocy.PreloadView("userentityform")

js/viewjs/userentityform.js

@@ -5,7 +5,7 @@ function userentityformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	$scope('#save-userentity-button').on('click', function(e)
@@ -82,7 +82,7 @@ function userentityformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('userentity-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#userentity-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/userfieldform.js

@@ -5,7 +5,7 @@ function userfieldformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	Grocy.Use("numberpicker");
@@ -88,7 +88,7 @@ function userfieldformView(Grocy, scope = null)
 		{
 			event.preventDefault();
 
-			if (document.getElementById('userfield-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#userfield-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/userfields.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/userform.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");
@@ -94,7 +94,7 @@
 
 	$scope('#user-form input').keyup(function(event)
 	{
-		var element = document.getElementById("password_confirm");
+		var element = $scope('#password_confirm')[0];
 		if ($scope("#password").val() !== $scope("#password_confirm").val())
 		{
 			element.setCustomValidity("error");
@@ -113,7 +113,7 @@
 		{
 			event.preventDefault();
 
-			if (document.getElementById('user-form').checkValidity() === false) //There is at least one validation error
+			if ($scope('#user-form')[0].checkValidity()() === false) //There is at least one validation error
 			{
 				return false;
 			}

js/viewjs/userobjectform.js

@@ -5,7 +5,7 @@ function userobjectformView(Grocy, scope = null)
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var userfields = Grocy.Use("userfieldsform");

js/viewjs/userobjects.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	// preload some views.

js/viewjs/userpermissions.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	$scope('input.permission-cb').click(

js/viewjs/users.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	var usersTable = $scope('#users-table').DataTable({

js/viewjs/usersettings.js

@@ -3,7 +3,7 @@
 	var $scope = $;
 	if (scope != null)
 	{
-		$scope = (scope) => $(scope).find(scope);
+		$scope = (selector) => $(scope).find(selector);
 	}
 
 	$scope("#locale").val(Grocy.UserSettings.locale);

views/consume.blade.php

@@ -17,8 +17,12 @@
 @endsection
 
 @section('content')
+@php
+$classes = $embedded ? '' : 'col-md-6 col-xl-4';
+@endphp
+
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 {{ $classes }} pb-3">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3 hide-when-embedded"

views/inventory.blade.php

@@ -11,8 +11,12 @@
 @endsection
 
 @section('content')
+@php
+$classes = $embedded ? '' : 'col-md-6 col-xl-4';
+@endphp
+
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 {{ $classes }} pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">

views/layout/json.blade.php

@@ -9,7 +9,7 @@ $content = $__env->yieldContent('content');
 $config = "{\n" . $__env->yieldContent('grocyConfigProps') . '}';
 $config = preg_replace('/(\n[\t ]*)([a-zA-Z0-9]+):/','${1}"${2}":', $config);
 $config = preg_replace('/: *\'(.*?)\',?\n/', ':"${1}",', $config);
-$config = preg_replace('/,}$/', '}', $config);
+$config = preg_replace('/,\n?}$/', '}', $config);
 $grocy_options = json_decode($config, true);
 
 $usersettings = $__env->yieldContent('forceUserSettings');

views/stockentries.blade.php

@@ -3,15 +3,20 @@
 @section('title', $__t('Stock entries'))
 @section('viewJsName', 'stockentries')
 
+@php 
+$collapsed_none = $embedded ? '' : 'd-md-none';
+$collapsed_flex = $embedded ? '' : 'd-md-flex';
+@endphp
+
 @section('content')
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
 		<div class="float-right">
-			<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+			<button class="btn btn-outline-dark {{ $collapsed_none }} mt-2 order-1 order-md-3"
 				type="button"
 				data-toggle="collapse"
-				data-target="#table-filter-row">
+				data-target="#stockentry-table-filter-row">
 				<i class="fas fa-filter"></i>
 			</button>
 		</div>
@@ -20,8 +25,8 @@
 
 <hr class="my-2">
 
-<div class="row collapse d-md-flex"
+<div class="row collapse {{ $collaped_flex }}"
-	id="table-filter-row">
+	id="stockentry-table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		@include('components.productpicker', array(
 		'products' => $products,
@@ -117,7 +122,8 @@
 						<div class="dropdown d-inline-block">
 							<button class="btn btn-sm btn-light text-secondary"
 								type="button"
-								data-toggle="dropdown">
+								data-toggle="dropdown"
+								data-boundary="viewport">
 								<i class="fas fa-ellipsis-v"></i>
 							</button>
 							<div class="dropdown-menu">

views/transfer.blade.php

@@ -11,8 +11,12 @@
 @endsection
 
 @section('content')
+@php
+$classes = $embedded ? '' : 'col-md-6 col-xl-4';
+@endphp
+
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-12 {{ $classes }} pb-3">
 		<h2 class="title">@yield('title')</h2>
 
 		<hr class="my-2">