Make it possible to filter recipes by stock availability (closes #231)

changelog/47_UNRELEASED_xxxx-xx-xx.md

@@ -20,5 +20,6 @@
   - This involved some string changes which results in a needed (re)translation of about 20 strings (excluding demo data)
   - Also applies to quantity units, n-plural forms can be entered on the quantity unit edit page
   - It's not required to install the PHP gettext extension, on both, server and client, managed implementations of gettext are used ([oscarotero/Gettext](https://github.com/oscarotero/Gettext) & [oscarotero/gettext-translator](https://github.com/oscarotero/gettext-translator))
-- Some other small fixes
+- Some other small fixes and improvements
   - The "Add as barcode to existing product" productpicker workflow failed to add the barcode to the given product
+  - Recipes can now be filter by stock availability

localization/strings.pot

@@ -1206,3 +1206,9 @@ msgstr ""
 
 msgid "The amount cannot be lower than %s or equal %s"
 msgstr ""
+
+msgid "Not enough in stock, but already on the shopping list"
+msgstr ""
+
+msgid "Not enough in stock"
+msgstr ""

public/viewjs/recipes.js

@@ -59,6 +59,21 @@ $("#search").on("keyup", function()
 	$(".recipe-gallery-item-container .card-title:not(:contains_case_insensitive(" + value + "))").parent().parent().parent().parent().addClass("d-none");
 });
 
+$("#status-filter").on("change", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+
+	// Transfer CSS classes of selected element to dropdown element (for background)
+	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
+
+	recipesTables.column(4).search(value).draw();
+});
+
+
 $("#selectedRecipeDeleteButton").on('click', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-recipe-name');

views/recipes.blade.php

@@ -15,8 +15,22 @@
 			</a>
 		</h1>
 
+		<div class="row">
+			<div class="col-6">
 				<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
 				<input type="text" class="form-control" id="search">
+			</div>
+
+			<div class="col-6">
+				<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
+				<select class="form-control" id="status-filter">
+					<option class="bg-white" value="all">{{ $__t('All') }}</option>
+					<option class="bg-success" value="enoughtinstock">{{ $__t('Enough in stock') }}</option>
+					<option class="bg-warning" value="enoughinstockwithshoppinglist">{{ $__t('Not enough in stock, but already on the shopping list') }}</option>
+					<option class="bg-danger" value="notenoughinstock">{{ $__t('Not enough in stock') }}</option>
+				</select>
+			</div>
+		</div>
 
 		<ul class="nav nav-tabs mt-3">
 			<li class="nav-item">
@@ -37,6 +51,7 @@
 							<th>{{ $__t('Servings') }}</th>
 							<th>{{ $__t('Requirements fulfilled') }}</th>
 							<th class="d-none">Hidden status for sorting of "Requirements fulfilled" column</th>
+							<th class="d-none">Hidden status for filtering by status</th>
 
 							@include('components.userfields_thead', array(
 								'userfields' => $userfields
@@ -60,6 +75,9 @@
 							<td class="d-none">
 								{{ FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $recipe->id)->missing_products_count }}
 							</td>
+							<td class="d-none">
+								@if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $recipe->id)->need_fulfilled == 1) enoughtinstock @elseif(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $recipe->id)->need_fulfilled_with_shopping_list == 1) enoughinstockwithshoppinglist @else notenoughinstock @endif
+							</td>
 
 							@include('components.userfields_tbody', array(
 								'userfields' => $userfields,