Show a little optional checkbox to mark recipe ingredients as done (closes #1606)

changelog/67_UNRELEASED_xxxx-xx-xx.md

@@ -40,6 +40,8 @@
 
 ### Recipes
 
+- Added a new recipes setting (top right corner settings menu) "Show a little checkbox next to each ingredient to mark it as done" (defaults to disabled)
+  - When enabled, next to each ingredient a little checkbox will be shown, when clicked, the ingredient is crossed out (the status is not saved, means reset when the page is reloaded)
 - Fixed that consuming recipes was possible when not all ingredients were in-stock (and this potentially consumed some of the in-stock ingredients; not matching the message "nothing removed")
 - Fixed that the price of the "Produces product"-product, which is added to stock on consuming a recipe, was wrong (was the recipe total costs multiplied by the serving amount instead of only the recipe total costs)
 - Fixed that calories of recipe ingredients were displayed with an indefinite number of decimal places

config-dist.php

@@ -191,6 +191,7 @@ DefaultUserSetting('shopping_list_show_calendar', false); // When enabled, a sma
 // Recipe settings
 DefaultUserSetting('recipe_ingredients_group_by_product_group', false); // Group recipe ingredients by their product group
 DefaultUserSetting('recipes_show_list_side_by_side', true); // If the recipe should be displayed next to recipe list on the recipes page
+DefaultUserSetting('recipes_show_ingredient_checkbox', false); // When enabled, a little checkbox will be shown next to each ingredient to mark it as done
 
 // Chores settings
 DefaultUserSetting('chores_due_soon_days', 5); // The "due soon" days

localization/strings.pot

@@ -2329,3 +2329,9 @@ msgstr ""
 
 msgid "Out of stock items will be shown at the products default location"
 msgstr ""
+
+msgid "Show a little checkbox next to each ingredient to mark it as done"
+msgstr ""
+
+msgid "The ingredient is crossed out when clicked, the status is not saved, means reset when the page is reloaded"
+msgstr ""

public/viewjs/recipes.js

@@ -431,3 +431,14 @@ $(document).on('click', '.recipe-grocycode-label-print', function(e)
 		}
 	});
 });
+
+$(document).on('click', '.ingredient-done-button', function(e)
+{
+	e.preventDefault();
+
+	// Remove the focus from the current button
+	// to prevent that the tooltip stays until clicked anywhere else
+	document.activeElement.blur();
+
+	$(e.currentTarget).parent().toggleClass("text-strike-through");
+});

public/viewjs/recipessettings.js

@@ -7,3 +7,8 @@ if (BoolVal(Grocy.UserSettings.recipes_show_list_side_by_side))
 {
 	$("#recipes_show_list_side_by_side").prop("checked", true);
 }
+
+if (BoolVal(Grocy.UserSettings.recipes_show_ingredient_checkbox))
+{
+	$("#recipes_show_ingredient_checkbox").prop("checked", true);
+}

views/recipes.blade.php

@@ -468,6 +468,15 @@
 										@if($selectedRecipePosition->product_active == 0)
 										<div class="small text-muted font-italic">{{ $__t('Disabled') }}</div>
 										@endif
+										@if($userSettings['recipes_show_ingredient_checkbox'])
+										<a class="btn btn-link btn-xs cursor-pointer ingredient-done-button"
+											href="#"
+											data-toggle="tooltip"
+											data-placement="right"
+											title="{{ $__t('Mark this item as done') }}">
+											<i class="far fa-check-circle"></i>
+										</a>
+										@endif
 										@php
 										$product = FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id);
 										$productQuConversions = FindAllObjectsInArrayByPropertyValue($quantityUnitConversionsResolved, 'product_id', $product->id);

views/recipessettings.blade.php

@@ -28,6 +28,23 @@
 			</div>
 		</div>
 
+		<div class="form-group">
+			<div class="custom-control custom-checkbox">
+				<input type="checkbox"
+					class="form-check-input custom-control-input user-setting-control"
+					id="recipes_show_ingredient_checkbox"
+					data-setting-key="recipes_show_ingredient_checkbox">
+				<label class="form-check-label custom-control-label"
+					for="recipes_show_ingredient_checkbox">
+					{{ $__t('Show a little checkbox next to each ingredient to mark it as done') }}
+					<i class="fas fa-question-circle text-muted"
+						data-toggle="tooltip"
+						data-trigger="hover click"
+						title="{{ $__t('The ingredient is crossed out when clicked, the status is not saved, means reset when the page is reloaded') }}"></i>
+				</label>
+			</div>
+		</div>
+
 		<h4 class="mt-2">{{ $__t('Recipe card') }}</h4>
 		<div class="form-group">
 			<div class="custom-control custom-checkbox">