Fix some implementation errors

js/components/BasePicker.js

@@ -10,7 +10,7 @@ class BasePicker
 		this.$ = scopeSelector != null ? $(scopeSelector).find : $;
 
 		this.picker = null;
-		this.input_element;
+		this.input_element = null;
 
 		this.basename = basename;
 	}

js/components/barcodescanner.js

@@ -139,7 +139,7 @@ class barcodescanner
 
 		setTimeout(function()
 		{
-			this.$scope(".barcodescanner-input:visible").each(function()
+			self.$(".barcodescanner-input:visible").each(function()
 			{
 				if ($(this).hasAttr("disabled"))
 				{

js/components/numberpicker.js

@@ -41,9 +41,11 @@ class numberpicker
 
 		var observer = new MutationObserver((mutations) => self.handleObservedChange(mutations));
 
-		this.$(".numberpicker").each(() => observer.observe(this, {
+		var elements = this.$(".numberpicker");
-			attributes: true
+		for (let element of elements)
-		}));
+		{
+			observer.observe(element, { attributes: true });
+		}
 
 		this.$(".numberpicker").attr("data-initialised", "true"); // Dummy change to trigger MutationObserver above once
 	}

js/components/productpicker.js

@@ -10,7 +10,7 @@ class productpicker extends BasePicker
 		this.Grocy.Use('barcodescanner');
 
 		this.picker = this.$('#product_id');
-		this.inputElement = this.$('#product_id_text_input');
+		this.input_element = this.$('#product_id_text_input');
 
 		var self = this;
 
@@ -142,14 +142,14 @@ class productpicker extends BasePicker
 
 	Disable()
 	{
-		this.inputElement.attr("disabled", "");
+		this.input_element.attr("disabled", "");
 		this.$("#barcodescanner-start-button").attr("disabled", "");
 		this.$("#barcodescanner-start-button").addClass("disabled");
 	}
 
 	Enable()
 	{
-		this.inputElement.removeAttr("disabled");
+		this.input_element.removeAttr("disabled");
 		this.$("#barcodescanner-start-button").removeAttr("disabled");
 		this.$("#barcodescanner-start-button").removeClass("disabled");
 	}
@@ -330,16 +330,16 @@ class productpicker extends BasePicker
 		}
 
 		// Don't know why the blur event does not fire immediately ... this works...
-		this.inputElement
+		this.input_element
 			.focusout()
 			.focus()
 			.blur();
 
-		this.inputElement.val(barcode);
+		this.input_element.val(barcode);
 
 		setTimeout(function()
 		{
-			self.inputElement
+			self.input_element
 				.focusout()
 				.focus()
 				.blur();

js/components/shoppinglocationpicker.js

@@ -10,7 +10,7 @@ class shoppinglocationpicker extends BasePicker
 		this.picker = this.$(this.basename);
 		this.input_element = this.$(this.basename + '_text_input');
 
-		this.initCombobox('.recipe-combobox');
+		this.initCombobox('.shopping-location-combobox');
 		this.prefill();
 	}
 }

js/components/userpicker.js

@@ -9,7 +9,7 @@ class userpicker extends BasePicker
 		this.picker = this.$(this.basename);
 		this.input_element = this.$(this.basename + '_text_input');
 
-		this.initCombobox('.recipe-combobox');
+		this.initCombobox('.user-combobox');
 		this.prefill();
 	}
 

js/grocy.js

@@ -221,14 +221,14 @@ class GrocyClass
 		let scopeName = scope || "";
 		// initialize Components only once per scope
 		if (this.initComponents.find(elem => elem == componentName + scopeName))
-			return this.components[componentName + scopeName];
+			return this.Components[componentName + scopeName];
 
 		if (Object.prototype.hasOwnProperty.call(components, componentName))
 		{
 			// add-then-init to resolve circular dependencies
 			this.initComponents.push(componentName);
-			var component = components[componentName](this, scope);
+			var component = new components[componentName](this, scope);
-			this.components[componentName + scopeName] = component;
+			this.Components[componentName + scopeName] = component;
 			return component;
 		}
 		else

js/lib/proxy.js

@@ -85,14 +85,14 @@ class GrocyProxy
 		let scopeName = scope || "";
 		// initialize Components only once per scope
 		if (this.initComponents.find(elem => elem == componentName + scopeName))
-			return this.components[componentName + scopeName];
+			return this.Components[componentName + scopeName];
 
 		if (Object.prototype.hasOwnProperty.call(components, componentName))
 		{
 			// add-then-init to resolve circular dependencies
 			this.initComponents.push(componentName);
-			var component = components[componentName](this, scope);
+			var component = new components[componentName](this, scope);
-			this.components[componentName + scopeName] = component;
+			this.Components[componentName + scopeName] = component;
 			return component;
 		}
 		else

js/viewjs/tasks.js

@@ -8,8 +8,6 @@
 		$scope = $(scope).find;
 	}
 
-	Grocy.Use("userpicker");
-
 	var tasksTable = $scope('#tasks-table').DataTable({
 		'order': [[2, 'asc']],
 		'columnDefs': [

views/layout/default.blade.php

@@ -659,7 +659,7 @@
 	<script>
 		let viewjsname = null;
 		@hasSection('viewJsName')
-			viejsname = "@yield('viewJsName')";
+		viewjsname = "@yield('viewJsName')";
 		@endif
 		GrocyClass.createSingleton(GrocyConfig, viewjsname);
 	</script>

views/productform.blade.php

@@ -585,6 +585,7 @@
 			</div>
 		</div>
 
+		@if($mode == 'edit')
 		<div class="row mt-2">
 			<div class="col clearfix">
 				<div class="title-related-links">
@@ -612,6 +613,7 @@
 				</div>
 			</div>
 		</div>
+		@endif
 
 		<div class="row @if(GROCY_FEATURE_FLAG_STOCK) mt-5 @endif">
 			<div class="col">