Created basis edit UI for nested recipes (references #77)

controllers/RecipesController.php

@@ -66,7 +66,9 @@ class RecipesController extends BaseController
 			'products' => $this->Database->products(),
 			'quantityunits' => $this->Database->quantity_units(),
 			'recipesFulfillment' => $this->RecipesService->GetRecipesFulfillment(),
-			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment()
+			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment(),
+			'recipes' =>  $this->Database->recipes(),
+			'recipeNestings' =>  $this->Database->recipes_nestings()->where('recipe_id', $recipeId)
 		]);
 	}
 
@@ -92,4 +94,25 @@ class RecipesController extends BaseController
 			]);
 		}
 	}
+
+	public function RecipeIncludeEditForm(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		if ($args['recipeIncludeId'] == 'new')
+		{
+			return $this->AppContainer->view->render($response, 'recipeincludeform', [
+				'mode' => 'create',
+				'recipe' => $this->Database->recipes($args['recipeId']),
+				'recipes' =>  $this->Database->recipes()->orderBy('name')
+			]);
+		}
+		else
+		{
+			return $this->AppContainer->view->render($response, 'recipeincludeform', [
+				'mode' => 'edit',
+				'recipe' =>  $this->Database->recipes($args['recipeId']),
+				'recipeInclude' => $this->Database->recipes_nestings($args['recipeIncludeId']),
+				'recipes' =>  $this->Database->recipes()->orderBy('name')
+			]);
+		}
+	}
 }

grocy.openapi.json

@@ -1675,6 +1675,7 @@
 					"shopping_list",
 					"recipes",
 					"recipes_pos",
+					"recipes_nestings",
 					"tasks",
 					"task_categories",
 					"product_groups",

public/viewjs/recipeform.js

@@ -35,15 +35,25 @@ var recipesPosTables = $('#recipes-pos-table').DataTable({
 	}
 });
 
-$("#search").on("keyup", function ()
-{
-	var value = $(this).val();
-	if (value === "all")
+var recipesIncludesTables = $('#recipes-includes-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true,
+	'stateSaveParams': function (settings, data)
 	{
-		value = "";
-	}
+		data.search.search = "";
 
-	recipesPosTables.search(value).draw();
+		data.columns.forEach(column =>
+		{
+			column.search.search = "";
+		});
+	}
 });
 
 Grocy.FrontendHelpers.ValidateForm('recipe-form');
@@ -108,6 +118,43 @@ $(document).on('click', '.recipe-pos-delete-button', function(e)
 	});
 });
 
+$(document).on('click', '.recipe-inlcude-delete-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-include-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-include-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to remove included recipe "#1"?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(), function() { }, function() { });
+				Grocy.Api.Get('delete-object/recipes_nestings/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipe/' + Grocy.EditObjectId);
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
 $(document).on('click', '.recipe-pos-order-missing-button', function(e)
 {
 	var productName = $(e.currentTarget).attr('data-product-name');
@@ -156,6 +203,22 @@ $(document).on('click', '.recipe-pos-edit-button', function (e)
 	);
 });
 
+$(document).on('click', '.recipe-include-edit-button', function (e)
+{
+	var id = $(e.currentTarget).attr('data-recipe-include-id');
+
+	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+		function(result)
+		{
+			window.location.href = U('/recipe/' + Grocy.EditObjectId + '/included_recipe/' + id);
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
 $("#recipe-pos-add-button").on("click", function(e)
 {
 	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
@@ -170,6 +233,20 @@ $("#recipe-pos-add-button").on("click", function(e)
 	);
 });
 
+$("#recipe-include-add-button").on("click", function(e)
+{
+	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+		function(result)
+		{
+			window.location.href = U('/recipe/' + Grocy.EditObjectId + '/included_recipe/new');
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
 $('#description').summernote({
 	minHeight: '300px',
 	lang: L('summernote_locale')

public/viewjs/recipeincludeform.js

@@ -0,0 +1,62 @@
+$('#save-recipe-include-button').on('click', function(e)
+{
+	e.preventDefault();
+
+	var jsonData = $('#recipe-include-form').serializeJSON();
+	jsonData.recipe_id = Grocy.EditObjectParentId;
+	if (Grocy.EditMode === 'create')
+	{
+		Grocy.Api.Post('add-object/recipes_nestings', jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+			}
+		);
+	}
+	else
+	{
+		Grocy.Api.Post('edit-object/recipes_nestings/' + Grocy.EditObjectId, jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+			}
+		);
+	}
+});
+
+Grocy.FrontendHelpers.ValidateForm('recipe-include-form');
+
+$('#recipe-include-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-include-form');
+});
+
+$('#recipe-include-form select').change(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-include-form');
+});
+
+$('#recipe-include-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		event.preventDefault();
+		
+		if (document.getElementById('recipe-include-form').checkValidity() === false) //There is at least one validation error
+		{
+			return false;
+		}
+		else
+		{
+			$('#save-include-include-button').click();
+		}
+	}
+});

routes.php

@@ -40,6 +40,7 @@ $app->group('', function()
 	$this->get('/recipes', '\Grocy\Controllers\RecipesController:Overview');
 	$this->get('/recipe/{recipeId}', '\Grocy\Controllers\RecipesController:RecipeEditForm');
 	$this->get('/recipe/{recipeId}/pos/{recipePosId}', '\Grocy\Controllers\RecipesController:RecipePosEditForm');
+	$this->get('/recipe/{recipeId}/included_recipe/{recipeIncludeId}', '\Grocy\Controllers\RecipesController:RecipeIncludeEditForm');
 
 	// Chore routes
 	$this->get('/choresoverview', '\Grocy\Controllers\ChoresController:Overview');

views/recipeform.blade.php

@@ -51,53 +51,95 @@
 	</div>
 
 	<div class="col-xs-12 col-md-5 pb-3">
-		<h2>
-			{{ $L('Ingredients list') }}
-			<a id="recipe-pos-add-button" class="btn btn-outline-dark" href="#">
-				<i class="fas fa-plus"></i> {{ $L('Add') }}
-			</a>
-		</h1>
-		<table id="recipes-pos-table" class="table table-sm table-striped dt-responsive">
-			<thead>
-				<tr>
-					<th>#</th>
-					<th>{{ $L('Product') }}</th>
-					<th>{{ $L('Amount') }}</th>
-					<th>{{ $L('Note') }}</th>
-				</tr>
-			</thead>
-			<tbody>
-				@if($mode == "edit")
-				@foreach($recipePositions as $recipePosition)
-				<tr class="@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) table-success @elseif(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1) table-warning  @else table-danger @endif">
-					<td class="fit-content">
-						<a class="btn btn-sm btn-info recipe-pos-edit-button" href="#" data-recipe-pos-id="{{ $recipePosition->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 }}">
-							<i class="fas fa-trash"></i>
-						</a>
-						<a class="btn btn-sm btn-primary recipe-pos-order-missing-button @if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1){{ disabled }}@endif" href="#" data-toggle="tooltip" data-placement="right" title="{{ $L('Put missing amount on shopping list') }}" data-recipe-name="{{ $recipe->name }}" data-product-id="{{ $recipePosition->product_id }}" data-product-amount="{{ FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->missing_amount }}" data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->name }}">
-							<i class="fas fa-cart-plus"></i>
-						</a>
-					</td>
-					<td>
-						{{ FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->name }}
-					</td>
-					<td>
-						{{ $recipePosition->amount }} {{ Pluralize($recipePosition->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $recipePosition->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $recipePosition->qu_id)->name_plural) }}
-						<span class="timeago-contextual">@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) {{ $L('Enough in stock') }} @else {{ $L('Not enough in stock, #1 missing, #2 already on shopping list', FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->missing_amount, FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->amount_on_shopping_list) }} @endif</span>
-					</td>
-					<td class="fit-content">
-						<a class="btn btn-sm btn-info recipe-pos-show-note-button @if(empty($recipePosition->note)) disabled @endif" href="#" data-toggle="tooltip" data-placement="top" title="{{ $L('Show notes') }}" data-recipe-pos-note="{{ $recipePosition->note }}">
-							<i class="fas fa-eye"></i>
-						</a>
-					</td>
-				</tr>
-				@endforeach
-				@endif
-			</tbody>
-		</table>
+		<div class="row">
+			<div class="col">
+				<h2>
+					{{ $L('Ingredients list') }}
+					<a id="recipe-pos-add-button" class="btn btn-outline-dark" href="#">
+						<i class="fas fa-plus"></i> {{ $L('Add') }}
+					</a>
+				</h2>
+				<table id="recipes-pos-table" class="table table-sm table-striped dt-responsive">
+					<thead>
+						<tr>
+							<th>#</th>
+							<th>{{ $L('Product') }}</th>
+							<th>{{ $L('Amount') }}</th>
+							<th>{{ $L('Note') }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						@if($mode == "edit")
+						@foreach($recipePositions as $recipePosition)
+						<tr class="@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) table-success @elseif(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1) table-warning  @else table-danger @endif">
+							<td class="fit-content">
+								<a class="btn btn-sm btn-info recipe-pos-edit-button" href="#" data-recipe-pos-id="{{ $recipePosition->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 }}">
+									<i class="fas fa-trash"></i>
+								</a>
+								<a class="btn btn-sm btn-primary recipe-pos-order-missing-button @if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1){{ disabled }}@endif" href="#" data-toggle="tooltip" data-placement="right" title="{{ $L('Put missing amount on shopping list') }}" data-recipe-name="{{ $recipe->name }}" data-product-id="{{ $recipePosition->product_id }}" data-product-amount="{{ FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->missing_amount }}" data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->name }}">
+									<i class="fas fa-cart-plus"></i>
+								</a>
+							</td>
+							<td>
+								{{ FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->name }}
+							</td>
+							<td>
+								{{ $recipePosition->amount }} {{ Pluralize($recipePosition->amount, FindObjectInArrayByPropertyValue($quantityunits, 'id', $recipePosition->qu_id)->name, FindObjectInArrayByPropertyValue($quantityunits, 'id', $recipePosition->qu_id)->name_plural) }}
+								<span class="timeago-contextual">@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) {{ $L('Enough in stock') }} @else {{ $L('Not enough in stock, #1 missing, #2 already on shopping list', FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->missing_amount, FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->amount_on_shopping_list) }} @endif</span>
+							</td>
+							<td class="fit-content">
+								<a class="btn btn-sm btn-info recipe-pos-show-note-button @if(empty($recipePosition->note)) disabled @endif" href="#" data-toggle="tooltip" data-placement="top" title="{{ $L('Show notes') }}" data-recipe-pos-note="{{ $recipePosition->note }}">
+									<i class="fas fa-eye"></i>
+								</a>
+							</td>
+						</tr>
+						@endforeach
+						@endif
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<div class="row mt-5">
+			<div class="col">
+				<h2>
+					{{ $L('Included recipes') }}
+					<a id="recipe-include-add-button" class="btn btn-outline-dark" href="#">
+						<i class="fas fa-plus"></i> {{ $L('Add') }}
+					</a>
+				</h2>
+				<table id="recipes-includes-table" class="table table-sm table-striped dt-responsive">
+					<thead>
+						<tr>
+							<th>#</th>
+							<th>{{ $L('Recipe') }}</th>
+						</tr>
+					</thead>
+					<tbody>
+						@if($mode == "edit")
+						@foreach($recipeNestings as $recipeNesting)
+						<tr>
+							<td class="fit-content">
+								<a class="btn btn-sm btn-info recipe-include-edit-button" href="#" data-recipe-include-id="{{ $recipeNesting->id }}">
+									<i class="fas fa-edit"></i>
+								</a>
+								<a class="btn btn-sm btn-danger recipe-inlcude-delete-button" href="#" data-recipe-include-id="{{ $recipeNesting->id }}" data-recipe-include-name="{{ FindObjectInArrayByPropertyValue($recipes, 'id', $recipeNesting->recipe_id)->name }}">
+									<i class="fas fa-trash"></i>
+								</a>
+							</td>
+							<td>
+								{{ FindObjectInArrayByPropertyValue($recipes, 'id', $recipeNesting->recipe_id)->name }}
+							</td>
+						</tr>
+						@endforeach
+						@endif
+					</tbody>
+				</table>
+			</div>
+		</div>
 	</div>
 </div>
 @stop

views/recipeincludeform.blade.php

@@ -0,0 +1,44 @@
+@extends('layout.default')
+
+@if($mode == 'edit')
+	@section('title', $L('Edit included recipe'))
+@else
+	@section('title', $L('Add included recipe'))
+@endif
+
+@section('viewJsName', 'recipeincludeform')
+
+@section('content')
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-5 pb-3">
+		<h1>@yield('title')</h1>
+		<h3 class="text-muted">{{ $L('Recipe') }} <strong>{{ $recipe->name }}</strong></h3>
+
+		<script>
+			Grocy.EditMode = '{{ $mode }}';
+			Grocy.EditObjectParentId = {{ $recipe->id }};
+		</script>
+
+		@if($mode == 'edit')
+			<script>Grocy.EditObjectId = {{ $recipeInclude->id }};</script>
+		@endif
+
+		<form id="recipe-include-form" novalidate>
+
+			<div class="form-group">
+				<label for="includes_recipe_id">{{ $L('Recipe') }}</label>
+				<select required class="form-control" id="includes_recipe_id" name="includes_recipe_id">
+					<option></option>
+					@foreach($recipes as $recipe)
+						<option @if($mode == 'edit' && $recipe->id == $recipeInclude->includes_recipe_id) selected="selected" @endif value="{{ $recipe->id }}">{{ $recipe->name }}</option>
+					@endforeach
+				</select>
+				<div class="invalid-feedback">{{ $L('A recipe is required') }}</div>
+			</div>
+
+			<button id="save-recipe-include-button" class="btn btn-success">{{ $L('Save') }}</button>
+
+		</form>
+	</div>
+</div>
+@stop