Recipe form updates (#476)

* recipePosForm - hide when embeded productcard

* recipeposform: remove prefillByName for productPicker

* recipeform add data-product-id

* recipeposform cleanup extra clicks

* recipeform: bootbox the recipe pos edit button

* recipeform: bootbox the recipe pos add button

* recipeposform postMessage back

* recipeform reload if IngredientsChanged

* Fix page reload for new recipes (URL = /recipe/new)

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

public/viewjs/recipeform.js

@@ -194,18 +194,27 @@ $(document).on('click', '.recipe-pos-show-note-button', function(e)
 
 $(document).on('click', '.recipe-pos-edit-button', function(e)
 {
+	e.preventDefault();
+
+	var productId = $(e.currentTarget).attr("data-product-id");
 	var recipePosId = $(e.currentTarget).attr('data-recipe-pos-id');
 	
-	Grocy.Api.Put('objects/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+	bootbox.dialog({
-		function(result)
+		message: '<iframe height="650px" class="embed-responsive" src="' + U("/recipe/") + Grocy.EditObjectId.toString() + '/pos/' + recipePosId.toString()  + '?embedded&product=' + productId.toString() + '"></iframe>',
+		size: 'large',
+		backdrop: true,
+		closeButton: false,
+		buttons: {
+			cancel: {
+				label: __t('Cancel'),
+				className: 'btn-secondary responsive-button',
+				callback: function()
 				{
-			window.location.href = U('/recipe/' + Grocy.EditObjectId + '/pos/' + recipePosId);
+					bootbox.hideAll();
-		},
-		function(xhr)
-		{
-			console.error(xhr);
 				}
-	);
+			}
+		}
+	});
 });
 
 $(document).on('click', '.recipe-include-edit-button', function (e)
@@ -234,16 +243,24 @@ $(document).on('click', '.recipe-include-edit-button', function (e)
 
 $("#recipe-pos-add-button").on("click", function(e)
 {
-	Grocy.Api.Put('objects/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+	e.preventDefault();
-		function(result)
+
+	bootbox.dialog({
+		message: '<iframe height="650px" class="embed-responsive" src="' + U("/recipe/") + Grocy.EditObjectId + '/pos/new?embedded"></iframe>',
+		size: 'large',
+		backdrop: true,
+		closeButton: false,
+		buttons: {
+			cancel: {
+				label: __t('Cancel'),
+				className: 'btn-secondary responsive-button',
+				callback: function()
 				{
-			window.location.href = U('/recipe/' + Grocy.EditObjectId + '/pos/new');
+					bootbox.hideAll();
-		},
-		function(xhr)
-		{
-			console.error(xhr);
 				}
-	);
+			}
+		}
+	});
 });
 
 $("#recipe-include-add-button").on("click", function(e)
@@ -319,3 +336,14 @@ $('#delete-current-recipe-picture-button').on('click', function (e)
 });
 
 Grocy.Components.UserfieldsForm.Load();
+
+$(window).on("message", function(e)
+{
+	var data = e.originalEvent.data;
+
+	if (data.Message === "IngredientsChanged")
+	{
+		window.location.href = U('/recipe/' + Grocy.EditObjectId);
+	}
+
+});

public/viewjs/recipeposform.js

@@ -15,7 +15,8 @@ $('#save-recipe-pos-button').on('click', function (e)
 		Grocy.Api.Post('objects/recipes_pos', jsonData,
 			function(result)
 			{
-				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+				window.parent.postMessage(WindowMessageBag("IngredientsChanged"), Grocy.BaseUrl);
+				window.parent.postMessage(WindowMessageBag("CloseAllModals"), Grocy.BaseUrl);
 			},
 			function(xhr)
 			{
@@ -29,7 +30,8 @@ $('#save-recipe-pos-button').on('click', function (e)
 		Grocy.Api.Put('objects/recipes_pos/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
-				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+				window.parent.postMessage(WindowMessageBag("IngredientsChanged"), Grocy.BaseUrl);
+				window.parent.postMessage(WindowMessageBag("CloseAllModals"), Grocy.BaseUrl);
 			},
 			function(xhr)
 			{
@@ -152,5 +154,5 @@ $("#only_check_single_unit_in_stock").on("click", function()
 });
 
 // Click twice to trigger on-click but not change the actual checked state
-$("#only_check_single_unit_in_stock").click();
+//$("#only_check_single_unit_in_stock").click();
-$("#only_check_single_unit_in_stock").click();
+//$("#only_check_single_unit_in_stock").click();

views/recipeform.blade.php

@@ -98,7 +98,7 @@
 			<div class="col">
 				<h2>
 					{{ $__t('Ingredients list') }}
-					<a id="recipe-pos-add-button" class="btn btn-outline-dark" href="#">
+					<a id="recipe-pos-add-button" class="btn btn-outline-dark recipe-pos-add-button" type="button" href="#">
 						<i class="fas fa-plus"></i> {{ $__t('Add') }}
 					</a>
 				</h2>
@@ -118,7 +118,7 @@
 						@foreach($recipePositions as $recipePosition)
 						<tr>
 							<td class="fit-content border-right">
-								<a class="btn btn-sm btn-info recipe-pos-edit-button" href="#" data-recipe-pos-id="{{ $recipePosition->id }}">
+								<a class="btn btn-sm btn-info recipe-pos-edit-button" type="button" href="#" data-recipe-pos-id="{{ $recipePosition->id }}" data-product-id="{{ $recipePosition->product_id }}">
 									<i class="fas fa-edit"></i>
 								</a>
 								<a class="btn btn-sm btn-danger recipe-pos-delete-button" href="#" data-recipe-pos-id="{{ $recipePosition->id }}" data-recipe-pos-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->name }}">

views/recipeposform.blade.php

@@ -28,11 +28,9 @@
 
 		<form id="recipe-pos-form" novalidate>
 
-			@php $prefillByName = ''; if($mode=='edit') { $prefillByName = FindObjectInArrayByPropertyValue($products, 'id', $recipePos->product_id)->name; } @endphp
 			@include('components.productpicker', array(
 				'products' => $products,
-				'nextInputSelector' => '#amount',
+				'nextInputSelector' => '#amount'
-				'prefillByName' => $prefillByName
 			))
 
 			@php if($mode == 'edit') { $value = $recipePos->amount; } else { $value = 1; } @endphp
@@ -96,7 +94,7 @@
 		</form>
 	</div>
 
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 hide-when-embedded">
 		@include('components.productcard')
 	</div>
 </div>