Norwegian localization (#16)

* Create no.php

* Update no.php

README.md

@@ -22,6 +22,12 @@ If, however, your webserver does not support URL rewriting, set `DISABLE_URL_REW
 ## How to update
 Just overwrite everything with the latest release while keeping the `/data` directory, check `config-dist.php` for new configuration options and add them to your `data/config.php` (the default from values `config-dist.php` will be used for not in `data/config.php` defined settings).
 
+## Localization
+grocy is fully localizable - the default language is English (integrated into code), a German localization is always maintained by me. There is one file per language in the `localization` directory, if you want to create a translation, it's best to copy `localization/de.php` to a new one (e. g. `localization/it.php`) and translating all strings there. (Language can be changed in `data/config.php`, e. g. `Setting('CULTURE', 'it');`)
+
+### Maintaining your own localization
+As the German translation will always be the most complete one, for maintaining your localization it would be easiest when you compare your localization with the German one with a diff tool of your choice.
+
 ## Things worth to know
 
 ### REST API & data model documentation
@@ -50,9 +56,6 @@ Products can be directly added to the database via looking them up against exter
 This is currently only possible through the REST API.
 There is no plugin included for any service, see the reference implementation in `data/plugins/DemoBarcodeLookupPlugin.php`.
 
-### Localization
-grocy is fully localizable - the default language is English (integrated into code), a German localization is always maintained by me. There is one file per language in the `localization` directory, if you want to create a translation, it's best to copy `localization/de.php` to a new one (e. g. `localization/it.php`) and translating all strings there. (Language can be changed in `data/config.php`, e. g. `Setting('CULTURE', 'it');`)
-
 ### Database migrations
 Database schema migration is automatically done when visiting the root (`/`) route (click on the logo in the left upper edge).
 
@@ -60,8 +63,8 @@ Database schema migration is automatically done when visiting the root (`/`) rou
 When the file `data/demo.txt` exists, the application will work in a demo mode which means authentication is disabled and some demo data will be generated during the database schema migration.
 
 ### Adding your own CSS or JS without to have to modify the application itself
-- When the file `data/custom.js` exists, the contents of the file be added just before `</body>` on every page
-- When the file `data/custom.css` exists, the contents of the file be added just before `</head>` on every page
+- When the file `data/custom_js.html` exists, the contents of the file will be added just before `</body>` (end of body) on every page
+- When the file `data/custom_css.html` exists, the contents of the file will be added just before `</head>` (end of head) on every page
 
 ## Screenshots
 #### Dashboard

controllers/BaseController.php

@@ -11,13 +11,15 @@ class BaseController
 	public function __construct(\Slim\Container $container) {
 		$databaseService = new DatabaseService();
 		$this->Database = $databaseService->GetDbConnection();
+		
+		$localizationService = new LocalizationService(CULTURE);
+		$this->LocalizationService = $localizationService;
 
 		$applicationService = new ApplicationService();
 		$versionInfo = $applicationService->GetInstalledVersion();
 		$container->view->set('version', $versionInfo->Version);
 		$container->view->set('releaseDate', $versionInfo->ReleaseDate);
 
-		$localizationService = new LocalizationService(CULTURE);
 		$container->view->set('localizationStrings', $localizationService->GetCurrentCultureLocalizations());
 		$container->view->set('L', function($text, ...$placeholderValues) use($localizationService)
 		{
@@ -33,4 +35,5 @@ class BaseController
 
 	protected $AppContainer;
 	protected $Database;
+	protected $LocalizationService;
 }

controllers/RecipesApiController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\RecipesService;
+
+class RecipesApiController extends BaseApiController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->RecipesService = new RecipesService();
+	}
+
+	protected $RecipesService;
+
+	public function AddNotFulfilledProductsToShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$this->RecipesService->AddNotFulfilledProductsToShoppingList($args['recipeId']);
+		return $this->VoidApiActionResponse($response);
+	}
+}

controllers/RecipesController.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\RecipesService;
+
+class RecipesController extends BaseController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->RecipesService = new RecipesService();
+	}
+
+	protected $RecipesService;
+
+	public function Overview(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$recipes = $this->Database->recipes()->orderBy('name');
+
+		$selectedRecipe = null;
+		$selectedRecipePositions = null;
+		if (isset($request->getQueryParams()['recipe']))
+		{
+			$selectedRecipe = $this->Database->recipes($request->getQueryParams()['recipe']);
+			$selectedRecipePositions = $this->Database->recipes_pos()->where('recipe_id', $request->getQueryParams()['recipe']);
+		}
+		else
+		{
+			foreach ($recipes as $recipe)
+			{
+				$selectedRecipe = $recipe;
+				$selectedRecipePositions = $this->Database->recipes_pos()->where('recipe_id', $recipe->id);
+				break;
+			}
+		}
+
+		return $this->AppContainer->view->render($response, 'recipes', [
+			'recipes' => $recipes,
+			'recipesFulfillment' => $this->RecipesService->GetRecipesFulfillment(),
+			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment(),
+			'selectedRecipe' => $selectedRecipe,
+			'selectedRecipePositions' => $selectedRecipePositions,
+			'products' => $this->Database->products(),
+			'quantityunits' => $this->Database->quantity_units()
+		]);
+	}
+
+	public function RecipeEditForm(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$recipeId = $args['recipeId'];
+		if ($recipeId  == 'new')
+		{
+			$newRecipe = $this->Database->recipes()->createRow(array(
+				'name' => $this->LocalizationService->Localize('New recipe')
+			));
+			$newRecipe->save();
+
+			$recipeId = $this->Database->lastInsertId();
+		}
+		
+		return $this->AppContainer->view->render($response, 'recipeform', [
+			'recipe' =>  $this->Database->recipes($recipeId),
+			'recipePositions' =>  $this->Database->recipes_pos()->where('recipe_id', $recipeId),
+			'mode' => 'edit',
+			'products' => $this->Database->products(),
+			'quantityunits' => $this->Database->quantity_units(),
+			'recipesFulfillment' => $this->RecipesService->GetRecipesFulfillment(),
+			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment()
+		]);
+	}
+
+	public function RecipePosEditForm(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		if ($args['recipePosId'] == 'new')
+		{
+			return $this->AppContainer->view->render($response, 'recipeposform', [
+				'mode' => 'create',
+				'recipe' =>  $this->Database->recipes($args['recipeId']),
+				'products' =>  $this->Database->products()->orderBy('name')
+			]);
+		}
+		else
+		{
+			return $this->AppContainer->view->render($response, 'recipeposform', [
+				'mode' => 'edit',
+				'recipe' =>  $this->Database->recipes($args['recipeId']),
+				'recipePos' =>  $this->Database->recipes_pos($args['recipePosId']),
+				'products' =>  $this->Database->products()->orderBy('name')
+			]);
+		}
+	}
+}

controllers/StockApiController.php

@@ -106,6 +106,12 @@ class StockApiController extends BaseApiController
 		return $this->VoidApiActionResponse($response);
 	}
 
+	public function ClearShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$this->StockService->ClearShoppingList();
+		return $this->VoidApiActionResponse($response);
+	}
+
 	public function ExternalBarcodeLookup(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		try

data/plugins/DemoBarcodeLookupPlugin.php

@@ -9,7 +9,7 @@ class DemoBarcodeLookupPlugin extends BaseBarcodeLookupPlugin
 {
 	/*
 		To use this plugin, configure it in data/config.php like this:
-		define('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+		Setting('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
 	*/
 
 	/*

grocy.openapi.json

@@ -650,6 +650,26 @@
 				}
 			}
 		},
+		"/stock/clear-shopping-list": {
+			"get": {
+				"description": "Removes all items from the shopping list",
+				"tags": [
+					"Stock"
+				],
+				"responses": {
+					"200": {
+						"description": "A VoidApiActionResponse object",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/VoidApiActionResponse"
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/stock/external-barcode-lookup/{barcode}": {
 			"get": {
 				"description": "Executes an external barcode lookoup via the configured plugin with the given barcode",
@@ -701,6 +721,37 @@
 				}
 			}
 		},
+		"/recipes/add-not-fulfilled-products-to-shopping-list/{recipeId}": {
+			"get": {
+				"description": "Adds all missing products for the given recipe to the shopping list",
+				"tags": [
+					"Recipes"
+				],
+				"parameters": [
+					{
+						"in": "path",
+						"name": "recipeId",
+						"required": true,
+						"description": "A valid recipe id",
+						"schema": {
+							"type": "string"
+						}
+					}
+				],
+				"responses": {
+					"200": {
+						"description": "A VoidApiActionResponse object",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/VoidApiActionResponse"
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/habits/track-habit-execution/{habitId}": {
 			"get": {
 				"description": "Tracks an execution of the given habit",
@@ -894,7 +945,9 @@
 					"batteries",
 					"locations",
 					"quantity_units",
-					"shopping_list"
+					"shopping_list",
+					"recipes",
+					"recipes_pos"
 				]
 			},
 			"StockTransactionType": {

helpers/extensions.php

@@ -128,7 +128,7 @@ function BoolToString(bool $bool)
 	return $bool ? 'true' : 'false';
 }
 
-function Setting(string $name, string $value)
+function Setting(string $name, $value)
 {
 	if (!defined($name))
 	{

localization/de.php

@@ -144,6 +144,31 @@ return array(
 	'A best before date is required and must be later than today' => 'Ein Mindesthaltbarkeitsdatum ist erforderlich und muss später als heute sein',
 	'Settings' => 'Einstellungen',
 	'This can only be before now' => 'Dies kann nur vor jetzt sein',
+	'Calendar' => 'Kalender',
+	'Recipes' => 'Rezepte',
+	'Edit recipe' => 'Rezept bearbeiten',
+	'New recipe' => 'Neues Rezept',
+	'Ingredients list' => 'Zutatenliste',
+	'Add recipe ingredient' => 'Rezeptzutat hinzufügen',
+	'Edit recipe ingredient' => 'Rezeptzutat bearbeiten',
+	'Are you sure to delete recipe "#1"?' => 'Rezept "#1" wirklich löschen?',
+	'Are you sure to delete recipe ingredient "#1"?' => 'Rezeptzutat "#1" wirklich löschen?',
+	'Are you sure to empty the shopping list?' => 'Sicher, dass den Einkaufszettel geleert werden soll?',
+	'Clear list' => 'Liste leeren',
+	'Requirements fulfilled' => 'Bedarf im Bestand',
+	'Put missing products on shopping list' => 'Fehlende Produkte auf den Einkaufszettel setzen',
+	'Not enough in stock, #1 ingredients missing' => 'Nicht ausreichend im Bestand, #1 Zutaten fehlen',
+	'Enough in stock' => 'Bestand reicht aus',
+	'Not enough in stock, #1 ingredients missing but already on the shopping list' => 'Bestand nicht ausreichend, #1 Zutaten fehlen, stehen aber bereits auf dem Einkaufszettel',
+	'Expand to fullscreen' => 'Auf ganzen Bildschirm vergrößern',
+	'Ingredients' => 'Zutaten',
+	'Preparation' => 'Zubereitung',
+	'Recipe' => 'Rezept',
+	'Not enough in stock, #1 missing, #2 already on shopping list' => 'Nicht ausreichend im Bestand, #1 fehlen, #2 stehen bereits auf dem Einkaufszettel',
+	'Show notes' => 'Notizen anzeigen',
+	'Put missing amount on shopping list' => 'Fehlende Menge auf den Einkaufszettel setzen',
+	'Are you sure to put all missing ingredients for recipe "#1" on the shopping list?' => 'Sicher alle fehlenden Zutaten für Rezept "#1" auf die Einkaufsliste zu setzen?',
+	'Added for recipe #1' => 'Hinzugefügt für Rezept #1',
 	
 	//Constants
 	'manually' => 'Manuell',
@@ -186,5 +211,20 @@ return array(
 	'Warranty ends' => 'Garantie endet',
 	'TV remote control' => 'TV Fernbedienung',
 	'Alarm clock' => 'Wecker',
-	'Heat remote control' => 'Fernbedienung Heizung'
+	'Heat remote control' => 'Fernbedienung Heizung',
+	'Lawn mowed in the garden' => 'Rasen im Garten gemäht',
+	'Some good snacks' => 'Paar gute Snacks',
+	'Pizza dough' => 'Pizzateig',
+	'Sieved tomatoes' => 'Passierte Tomaten',
+	'Salami' => 'Salami',
+	'Toast' => 'Toast',
+	'Minced meat' => 'Hackfleisch',
+	'Pizza' => 'Pizza',
+	'Spaghetti bolognese' => 'Spaghetti Bolognese',
+	'Sandwiches' => 'Belegte Toasts',
+	'English' => 'Englisch',
+	'German' => 'Deutsch',
+	'Italian' => 'Italienisch',
+	'Demo in different language' => 'Demo in anderer Sprache',
+	'This is the note content of the recipe ingredient' => 'Dies ist der Inhalt der Notiz der Zutat'
 );

localization/it.php

@@ -150,7 +150,6 @@ return array(
 	'timeago_locale' => 'it',
 	'timeago_nan' => 'NaN anni fa',
 	'moment_locale' => 'it',
-	'bootstrap_datepicker_locale' => 'it',
 	'datatables_localization' => '{"sEmptyTable":"Nessun dato disponibile","sInfo":"Mostrando da _START_ a _END_ di _TOTAL_ voci","sInfoEmpty":"Mostrando da 0 a 0 di 0 voci","sInfoFiltered":"(Filtrato da _MAX_ voci totali)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Mostra _MENU_ voci","sLoadingRecords":"Caricando...","sProcessing":"Calcolando...","sSearch":"Cerca:","sZeroRecords":"Nessun risultato trovato","oPaginate":{"sFirst":"Prima","sLast":"Ultima","sNext":"Prossima","sPrevious":"Precedente"},"oAria":{"sSortAscending":": ordine crescente","sSortDescending":": ordine decrescente"}}',
 	
 	//Demo data

localization/no.php

@@ -0,0 +1,230 @@
+<?php
+
+return array(
+	'Stock overview' => 'Husholdning',
+	'#1 products with #2 units in stock' => '#1 Produkter med #2 i husholdningen',
+	'#1 products expiring within the next #2 days' => '#1 Produkter som går ut på dato innen de neste #2 dagene',
+	'#1 products are already expired' => '#1 Produkt som har gått ut på dato',
+	'#1 products are below defined min. stock amount' => '#1 Produkt under minimum husholdningsnivå',
+	'Product' => 'Produkt',
+	'Amount' => 'Antall',
+	'Next best before date' => 'Kommende best før dato',
+	'Logout' => 'Logg Av',
+	'Habits overview' => 'Oversikt Husoppgaver',
+	'Batteries overview' => 'Oversikt Batteri',
+	'Purchase' => 'Innkjøp',
+	'Consume' => 'Forbrukt',
+	'Inventory' => 'Endre Husholdning',
+	'Shopping list' => 'Handleliste',
+	'Habit tracking' => 'Logge Husoppgaver',
+	'Battery tracking' => 'Ladesyklus Batteri',
+	'Products' => 'Produkter',
+	'Locations' => 'Lokasjoner',
+	'Quantity units' => 'Forpakning',
+	'Habits' => 'Husoppgaver',
+	'Batteries' => 'Batterier',
+	'Habit' => 'Husoppgave',
+	'Next estimated tracking' => 'Neste handling',
+	'Last tracked' => 'Sist logget',
+	'Battery' => 'Batteri',
+	'Last charged' => 'Sist ladet',
+	'Next planned charge cycle' => 'Neste planlagte ladesyklus',
+	'Best before' => 'Best før',
+	'OK' => 'OK',
+	'Product overview' => 'Oversikt Produkt',
+	'Stock quantity unit' => 'Forpakning i husholdningen',
+	'Stock amount' => 'Husholdning',
+	'Last purchased' => 'Sist kjøpt',
+	'Last used' => 'Sist brukt',
+	'Spoiled' => 'Produkt har gått ut på dato',
+	'Barcode lookup is disabled' => 'Strekkodesøk deaktivert',
+	'will be added to the list of barcodes for the selected product on submit' => 'Blir lagt til liste over strekkoder når produkt blir lagt inn.',
+	'New amount' => 'Nytt antall',
+	'Note' => 'Info',
+	'Tracked time' => 'Tid logget',
+	'Habit overview' => 'Oversikt Husoppgave',
+	'Tracked count' => 'Logget',
+	'Battery overview' => 'Batteri Oversikt',
+	'Charge cycles count' => 'Antall ladesykluser',
+	'Create shopping list item' => 'Opprett handelisteoppføring',
+	'Edit shopping list item' => 'Endre på handlelistoppføring',
+	'#1 units were automatically added and will apply in addition to the amount entered here' => '#1 enheter ble automatisk lagt til i tillegg til hva som blir skrevet inn her',
+	'Save' => 'Lagre',
+	'Add' => 'Legg til',
+	'Name' => 'Navn',
+	'Location' => 'Lokasjon',
+	'Min. stock amount' => 'Minimums antall for husholdingen',
+	'QU purchase' => 'QU innkjøp',
+	'QU stock' => 'QU husholdning',
+	'QU factor' => 'QU faktor',
+	'Description' => 'Beskrivelse',
+	'Create product' => 'Opprett produkt',
+	'Barcode(s)' => 'Strekkode(r)',
+	'Minimum stock amount' => 'Minimums antall for husholdningen',
+	'Default best before days' => 'Standard antall dager best før',
+	'Quantity unit purchase' => 'Forpakning kjøpt',
+	'Quantity unit stock' => 'Forpakning husholdning',
+	'Factor purchase to stock quantity unit' => 'Innkjøpsfaktor for forpakning',
+	'Create location' => 'Opprett lokasjon',
+	'Create quantity unit' => 'Opprett forpakning',
+	'Period type' => 'Periodetype',
+	'Period days' => 'Dager/ Periode',
+	'Create habit' => 'Opprett husoppgave',
+	'Used in' => 'Brukt',
+	'Create battery' => 'Opprett batteri',
+	'Edit battery' => 'Endre batteri',
+	'Edit habit' => 'Endre husoppgave',
+	'Edit quantity unit' => 'Endre forpakning',
+	'Edit product' => 'Endre produkt',
+	'Edit location' => 'Endre lokasjon',
+	'Record data' => 'Logg handlinger',
+	'Manage master data' => 'Administrer masterdata',
+	'This will apply to added products' => 'Dette vil gjelde for produkt som blir lagt til',
+	'never' => 'aldri',
+	'Add products that are below defined min. stock amount' => 'Legg til produkt som er under definert minimums antall for husholdningen',
+	'For purchases this amount of days will be added to today for the best before date suggestion' => 'For innkjøp vil dette antallet dager legges til bestfør forslaget',
+	'This means 1 #1 purchased will be converted into #2 #3 in stock' => 'Dette betyr at 1 #1 innkjøp vil bli omgjort til #2 #3 husholdning',
+	'Login' => 'Logg inn',
+	'Username' => 'Brukernavn',
+	'Password' => 'Passord',
+	'Invalid credentials, please try again' => 'Feil brukernavn og/eller passord, prøv igjen',
+	'Are you sure to delete battery "#1"?' => 'Er du sikker du ønsker å slette Batteri "#1"?',
+	'Yes' => 'Ja',
+	'No' => 'Nei',
+	'Are you sure to delete habit "#1"?' => 'Er du sikker på du ønsker å slette husoppgave "#1"?',
+	'"#1" could not be resolved to a product, how do you want to proceed?' => '"#1" kunne ikke bli tildelt et produkt, hvordan ønsker du å fortsette?',
+	'Create or assign product' => 'Opprett eller tildel til produkt',
+	'Cancel' => 'Avbryt',
+	'Add as new product' => 'Legg til som nytt produkt',
+	'Add as barcode to existing product' => 'Legg til strekkode til allerede eksiterende produkt',
+	'Add as new product and prefill barcode' => 'Legg til som nytt produkt med forhåndsutfylt strekkode',
+	'Are you sure to delete quantity unit "#1"?' => 'Er du sikker du ønsker å slette forpakning "#1"?',
+	'Are you sure to delete product "#1"?' => 'Er du sikker du ønsker å slette produkt "#1"?',
+	'Are you sure to delete location "#1"?' => 'Er du sikker du ønsker å slette lokasjon "#1"?',
+	'Manage API keys' => 'Administrer API-Keys',
+    'REST API & data model documentation' => 'REST-API & Datamodell Dokumentasjon',
+    'API keys' => 'API-Keys',
+    'Create new API key' => 'Opprett ny API-Key',
+    'API key' => 'API-Key',
+    'Expires' => 'Går ut',
+    'Created' => 'Opprettet',
+	'This product is not in stock' => 'Dette produktet er ikke i husholdningen',
+	'This means #1 will be added to stock' => 'Dette betyr at #1 vil bli lagt til i husholdningen',
+	'This means #1 will be removed from stock' => 'Dette betyr at #1 vil bli fjernet fra husholdningen',
+	'This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked' => 'Dette betyr at det er estimert at den nye utførelsen av denne husoppgaven er logget #1 dag etter den sist var logget',
+	'Removed #1 #2 of #3 from stock' => 'Fjernet #1 #2 av #3 fra husholdningen',
+	'About grocy' => 'Om Grocy',
+	'Close' => 'Lukk',
+	'#1 batteries are due to be charged within the next #2 days' => '#1 Batteri må lades innen de #2 dagene',
+	'#1 batteries are overdue to be charged' => '#1 Batteri har gått over fristen for å bli ladet opp',
+	'#1 habits are due to be done within the next #2 days' => '#1 husoppgaver skal gjøres inne de #2 neste dagene',
+	'#1 habits are overdue to be done' => '#1 husoppgaver har gått over fristen for utførelse',
+	'Released on' => 'Utgitt',
+	'Consume #3 #1 of #2' => 'Forbruk #3 #1 #2',
+	'Added #1 #2 of #3 to stock' => '#1 #2 #3 lagt til i husholdningen',
+	'Stock amount of #1 is now #2 #3' => 'Husholdning antall #1 er nå #2 #3',
+	'Tracked execution of habit #1 on #2' => 'Logget utførelse av husoppgave "#1" den #2',
+	'Tracked charge cylce of battery #1 on #2' => 'Logget ladesyklus for batteri #1 og #2',
+	'Consume all #1 which are currently in stock' => 'Konsumér alle #1 som er i husholdningen',
+	'All' => 'Alle',
+	'Track charge cycle of battery #1' => 'Logg ladesyklus for batteri #1',
+	'Track execution of habit #1' => 'Logg utførelse av husoppgave #1',
+	'Filter by location' => 'Filtrér etter lokasjon',
+	'Search' => 'Søk',
+	'Not logged in' => 'Ikke logget inn',
+	'You have to select a product' => 'Du må velge et produkt',
+	'You have to select a habit' => 'Du mpå velge en husoppgaven',
+	'You have to select a battery' => 'Du må velge et batteri',
+	'A name is required' => 'Et navn kreves',
+	'A location is required' => 'En lokasjon kreves',
+	'The amount cannot be lower than #1' => 'Antallet kan ikke være lavere enn #1',
+	'This cannot be negative' => 'Dette kan ikke være negativt',
+	'A quantity unit is required' => 'Forpakning antall/størrelse kreves',
+	'A period type is required' => 'En periodetype kreves',
+	'A best before date is required and must be later than today' => 'En best før dato kreves, denne må være senere enn i dag',
+	'Settings' => 'Instillinger',
+	'This can only be before now' => 'Dette kan kun være før nå',
+        'Calendar' => 'Kalender',
+	'Recipes' => 'Oppskrifter',
+	'Edit recipe' => 'Endre oppskrift',
+	'New recipe' => 'Ny oppskrift',
+	'Ingredients list' => 'Liste over ingredienser',
+	'Add recipe ingredient' => 'Legg ingrediens til oppskrift',
+	'Edit recipe ingredient' => 'Endre ingrediens i oppskrift',
+	'Are you sure to delete recipe "#1"?' => 'Er du sikker du ønsker å slette oppskrift "#1"?',
+	'Are you sure to delete recipe ingredient "#1"?' => 'Er du sikker du ønsker å slette ingrediens "#1" fra oppskriften?',
+	'Are you sure to empty the shopping list?' => 'Er du sikker du ønsker å slette handlelisten??',
+	'Clear list' => 'Tøm liste',
+	'Requirements fulfilled' => 'Krav oppfylt',
+	'Put missing products on shopping list' => 'Legg manglende produkter til handlelisten',
+	'Not enough in stock, #1 ingredients missing' => 'Ikke nok i husholdningen, #1 ingrediens mangler',
+	'Enough in stock' => 'Nok i husholdningen',
+	'Not enough in stock, #1 ingredients missing but already on the shopping list' => 'Ikke nok i husholdningen, #1 ingrediens mangler, men lagt til i handelisten',
+	'Expand to fullscreen' => 'Full skjerm',
+	'Ingredients' => 'Ingrediens',
+	'Preparation' => 'Forberedelse',
+	'Recipe' => 'Oppskrift',
+	'Not enough in stock, #1 missing, #2 already on shopping list' => 'Ikke nok i husholdningen, #1 mangler, #2 allerede i handlisten',
+	'Show notes' => 'Vis notater',
+	'Put missing amount on shopping list' => 'Legg manglende til handlelisten',
+	'Are you sure to put all missing ingredients for recipe "#1" on the shopping list?' => 'Er du sikker du ønsker å legge alle manglende ingredienser til oppskrift "#1"?',
+	'Added for recipe #1' => 'Lagt til oppskrift #1',
+	
+	//Constants
+	'manually' => 'Manuel',
+	'dynamic-regular' => 'Dynamisk Regulering',
+	
+	//Technical component translations
+	'timeago_locale' => 'no',
+	'timeago_nan' => 'for NaN År',
+	'moment_locale' => 'nb',
+	'datatables_localization' => '{"sEmptyTable":"Det finnes ingen data i tabellen","sInfo":"_START_ fra _END_ til _TOTAL_ skriv","sInfoEmpty":"Ingen data tilgjengelign","sInfoFiltered":"(filtrert fra _MAX_ skriv)","sInfoPostFix":"","sInfoThousands":".","sLengthMenu":"_MENU_ registrer deg","sLoadingRecords":"Laster ..","sProcessing":"Vennligst vent ..","sSearch":"Søk","sZeroRecords":"Ingen oppføringer tilgjengelig","oPaginate":{"sFirst":"Første","sPrevious":"Bakover","sNext":"Neste","sLast":"Siste"},"oAria":{"sSortAscending":": Sortér stigende","sSortDescending":": Sortér synkende"},"select":{"rows":{"0":"klikk på en linje for å velge","1":"1 linje valgt","_":"%d linger valgt"}},"buttons":{"print":"Print","colvis":"Søyle","copy":"Kopi","copyTitle":"Kopier til utklippstavlen","copyKeys":"Trykk <i>ctrl</i> eller <i>⌘</i> + <i>C</i> for å kopiere tabell<br> til utklipptavlen.<br><br>For å avbryte, klikke på meldingen eller trykk på ESC.","copySuccess":{"1":"1 Kolonne kopiert","_":"%d kolonne kopiert"}}}',
+	
+	//Demo data
+	'Cookies' => 'Cookies',
+	'Chocolate' => 'Sjokolade',
+	'Pantry' => 'Spiskammers',
+	'Candy cupboard' => 'Godteriskapet',
+	'Tinned food cupboard' => 'Boksematskapet',
+	'Fridge' => 'Kjøleskapet',
+	'Piece' => 'Ett',
+	'Pack' => 'Pakke',
+	'Glass' => 'Glass',
+	'Tin' => 'Hermetikkboks',
+	'Can' => 'Boks',
+	'Bunch' => 'Klase',
+	'Gummy bears' => 'Vingummibjørner',
+	'Crisps' => 'Chips',
+	'Eggs' => 'Egg',
+	'Noodles' => 'Nuddler',
+	'Pickles' => 'Sur agurk',
+	'Gulash soup' => 'Gulasj suppe',
+	'Yogurt' => 'Yoghurt',
+	'Cheese' => 'Ost',
+	'Cold cuts' => 'Kjøttpålegg',
+	'Paprika' => 'Paprika',
+	'Cucumber' => 'Agurk',
+	'Radish' => 'Reddik',
+	'Tomato' => 'Tomat',
+	'Changed towels in the bathroom' => 'Bytt handler på badet',
+	'Cleaned the kitchen floor' => 'Vasket kjøkkengulvet',
+	'Warranty ends' => 'Garanti utgår',
+	'TV remote control' => 'Fjernkontroll for TV',
+	'Alarm clock' => 'Alarm klokke',
+	'Heat remote control' => 'Fjernkontroll for termostat',
+        'Lawn mowed in the garden' => 'Kuttet gresse i hagen',
+	'Some good snacks' => 'Noen gode snacks',
+	'Pizza dough' => 'Pizzadeig',
+	'Sieved tomatoes' => 'Passierte Tomaten',
+	'Salami' => 'Salami',
+	'Toast' => 'Risted brød',
+	'Minced meat' => 'Kjøttdeig',
+	'Pizza' => 'Pizza',
+	'Spaghetti bolognese' => 'Spaghetti Bolognese',
+	'Sandwiches' => 'Smørbrød',
+	'English' => 'Engelsk',
+	'German' => 'Tysk',
+	'Italian' => 'Italiensk',
+	'Demo in different language' => 'Demo i annet språk',
+	'This is the note content of the recipe ingredient' => 'Dette er notisen for ingrediensen i oppskriften'
+);

migrations/0025.sql

@@ -0,0 +1,50 @@
+CREATE TABLE recipes (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
+	name TEXT NOT NULL,
+	description TEXT,
+	row_created_timestamp DATETIME DEFAULT (datetime('now', 'localtime'))
+);
+
+CREATE TABLE recipes_pos (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
+	recipe_id INTEGER NOT NULL,
+	product_id INTEGER NOT NULL,
+	amount INTEGER NOT NULL DEFAULT 0,
+	note TEXT,
+	row_created_timestamp DATETIME DEFAULT (datetime('now', 'localtime'))
+);
+
+CREATE VIEW recipes_fulfillment
+AS
+SELECT
+	r.id AS recipe_id,
+	rp.id AS recipe_pos_id,
+	rp.product_id AS product_id,
+	rp.amount AS recipe_amount,
+	IFNULL(sc.amount, 0) AS stock_amount,
+	CASE WHEN IFNULL(sc.amount, 0) >= rp.amount THEN 1 ELSE 0 END AS need_fulfilled,
+	CASE WHEN IFNULL(sc.amount, 0) - IFNULL(rp.amount, 0) < 0 THEN ABS(IFNULL(sc.amount, 0) - IFNULL(rp.amount, 0)) ELSE 0 END AS missing_amount,
+	IFNULL(sl.amount, 0) AS amount_on_shopping_list,
+	CASE WHEN IFNULL(sc.amount, 0) + IFNULL(sl.amount, 0) >= rp.amount THEN 1 ELSE 0 END AS need_fulfilled_with_shopping_list
+FROM recipes r
+JOIN recipes_pos rp
+	ON r.id = rp.recipe_id
+LEFT JOIN (
+	SELECT product_id, SUM(amount + amount_autoadded) AS amount
+	FROM shopping_list
+	GROUP BY product_id) sl
+	ON rp.product_id = sl.product_id
+LEFT JOIN stock_current sc
+	ON rp.product_id = sc.product_id;
+
+CREATE VIEW recipes_fulfillment_sum
+AS
+SELECT
+	r.id AS recipe_id,
+	IFNULL(MIN(rf.need_fulfilled), 1) AS need_fulfilled,
+	IFNULL(MIN(rf.need_fulfilled_with_shopping_list), 1) AS need_fulfilled_with_shopping_list,
+	(SELECT COUNT(*) FROM recipes_fulfillment WHERE recipe_id = rf.recipe_id AND need_fulfilled = 0 AND recipe_pos_id IS NOT NULL) AS missing_products_count
+FROM recipes r
+LEFT JOIN recipes_fulfillment rf
+	ON rf.recipe_id = r.id
+GROUP BY r.id;

package.json

@@ -10,8 +10,12 @@
 		"bootstrap-side-navbar": "https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1",
 		"datatables.net": "^1.10.19",
 		"datatables.net-bs4": "^1.10.19",
+		"datatables.net-colreorder": "^1.5.1",
+		"datatables.net-colreorder-bs4": "^1.5.1",
 		"datatables.net-responsive": "^2.2.3",
 		"datatables.net-responsive-bs4": "^2.2.3",
+		"datatables.net-select": "^1.2.7",
+		"datatables.net-select-bs4": "^1.2.7",
 		"jquery": "^3.3.1",
 		"jquery-serializejson": "^2.8.1",
 		"jquery-ui-dist": "^1.12.1",

public/css/grocy.css

@@ -45,10 +45,23 @@ a.discrete-link:focus {
 	background-color: #e5e5e5;
 }
 
+.card-body {
+	flex-grow: 0;
+}
+
 .content-text .invalid-feedback {
 	font-size: 95%;
 }
 
+.fullscreen {
+	z-index: 9999; 
+	width: 100%; 
+	height: 100%; 
+	position: fixed; 
+	top: 0; 
+	left: 0; 
+ }
+
 /* Navigation style customizations */
 #mainNav {
 	background-color: #e5e5e5 !important;
@@ -59,12 +72,12 @@ a.discrete-link:focus {
 .navbar-sidenav {
 	overflow-y: auto;
 	overflow-x: hidden;
+	border-top: 2px solid !important;
 }
 
 .navbar-sidenav,
 .sidenav-second-level {
 	background-color: #e5e5e5 !important;
-	border-top: 2px solid !important;
 	border-right: 2px solid !important;
 	border-color: #d6d6d6 !important;
 }
@@ -156,3 +169,13 @@ td {
 		padding: 0.8em;
 	}
 }
+
+/* Third party component customizations - Tempus Dominus */
+.date-only-datetimepicker .bootstrap-datetimepicker-widget.dropdown-menu {
+	width: auto !important;
+}
+
+/* Third party component customizations - Popper.js */
+.tooltip .arrow {
+	display: none;
+}

public/js/grocy.js

@@ -23,7 +23,40 @@ if (!Grocy.ActiveNav.isEmpty())
 {
 	var menuItem = $('#sidebarResponsive').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
 	menuItem.addClass('active-page');
-}	
+
+	var parentMenuSelector = menuItem.data("sub-menu-of");
+	if (typeof parentMenuSelector !== "undefined")
+	{
+		$(parentMenuSelector).collapse("show");
+		$(parentMenuSelector).prev(".nav-link-collapse").addClass("active-page");
+	}
+}
+
+var observer = new MutationObserver(function(mutations)
+{
+	mutations.forEach(function(mutation)
+	{
+		if (mutation.attributeName === "class")
+		{
+			var attributeValue = $(mutation.target).prop(mutation.attributeName);
+			if (attributeValue.contains("sidenav-toggled"))
+			{
+				window.localStorage.setItem("sidebar_state", "collapsed");
+			}
+			else
+			{
+				window.localStorage.setItem("sidebar_state", "expanded");
+			}
+		}
+	});
+});
+observer.observe(document.body, {
+	attributes: true
+});
+if (window.localStorage.getItem("sidebar_state") === "collapsed")
+{
+	$("#sidenavToggler").click();
+}
 
 $.timeago.settings.allowFuture = true;
 RefreshContextualTimeago = function()

public/viewjs/batteries.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/batteriesoverview.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/components/calendarcard.js

@@ -0,0 +1,40 @@
+$('#calendar').datetimepicker(
+{
+	format: 'L',
+	buttons: {
+		showToday: true,
+		showClose: false
+	},
+	calendarWeeks: true,
+	locale: moment.locale(),
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	keepOpen: true,
+	inline: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
+});
+
+$('#calendar').datetimepicker('show');

public/viewjs/components/productpicker.js

@@ -0,0 +1,160 @@
+Grocy.Components.ProductPicker = { };
+
+Grocy.Components.ProductPicker.GetPicker = function ()
+{
+	return $('#product_id');
+}
+
+Grocy.Components.ProductPicker.GetInputElement = function()
+{
+	return $('#product_id_text_input');
+}
+
+Grocy.Components.ProductPicker.GetValue = function()
+{
+	return $('#product_id').val();
+}
+
+Grocy.Components.ProductPicker.SetValue = function(value)
+{
+	Grocy.Components.ProductPicker.GetInputElement().val(value);
+	Grocy.Components.ProductPicker.GetInputElement().trigger('change');
+}
+
+Grocy.Components.ProductPicker.InProductAddWorkflow = function()
+{
+	return typeof GetUriParam('createdproduct') !== "undefined";
+}
+
+Grocy.Components.ProductPicker.InProductModifyWorkflow = function()
+{
+	return typeof GetUriParam('addbarcodetoselection') !== "undefined";
+}
+
+Grocy.Components.ProductPicker.ShowCustomError = function(text)
+{
+	var element = $("#custom-productpicker-error");
+	element.text(text);
+	element.removeClass("d-none");
+}
+
+Grocy.Components.ProductPicker.HideCustomError = function()
+{
+	$("#custom-productpicker-error").addClass("d-none");
+}
+
+$('.combobox').combobox({
+	appendId: '_text_input',
+	bsVersion: '4'
+});
+
+var prefillProduct = GetUriParam('createdproduct');
+var prefillProduct2 = Grocy.Components.ProductPicker.GetPicker().parent().data('prefill-by-name').toString();
+if (!prefillProduct2.isEmpty())
+{
+	prefillProduct = prefillProduct2;
+}
+if (typeof prefillProduct !== "undefined")
+{
+	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
+	if (possibleOptionElement.length === 0)
+	{
+		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
+	}
+
+	if (possibleOptionElement.length > 0)
+	{
+		$('#product_id').val(possibleOptionElement.val());
+		$('#product_id').data('combobox').refresh();
+		$('#product_id').trigger('change');
+
+		var nextInputElement = $(Grocy.Components.ProductPicker.GetPicker().parent().data('next-input-selector').toString());
+		nextInputElement.focus();
+	}
+}
+
+var addBarcode = GetUriParam('addbarcodetoselection');
+if (addBarcode !== undefined)
+{
+	$('#addbarcodetoselection').text(addBarcode);
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
+}
+
+$('#product_id_text_input').on('change', function(e)
+{
+	var input = $('#product_id_text_input').val().toString();
+	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
+	
+	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
+	{
+		$('#product_id').val(possibleOptionElement.val());
+		$('#product_id').data('combobox').refresh();
+		$('#product_id').trigger('change');
+	}
+	else
+	{
+		var optionElement = $("#product_id option:contains('" + input + "')").first();
+		if (input.length > 0 && optionElement.length === 0 && typeof GetUriParam('addbarcodetoselection') === "undefined")
+		{
+			var addProductWorkflowsAdditionalCssClasses = "";
+			if (Grocy.Components.ProductPicker.GetPicker().parent().data('disallow-add-product-workflows').toString() === "true")
+			{
+				addProductWorkflowsAdditionalCssClasses = "d-none";
+			}
+
+			bootbox.dialog({
+				message: L('"#1" could not be resolved to a product, how do you want to proceed?', input),
+				title: L('Create or assign product'),
+				onEscape: function() { },
+				size: 'large',
+				backdrop: true,
+				buttons: {
+					cancel: {
+						label: 'Cancel',
+						className: 'btn-default responsive-button',
+						callback: function() { }
+					},
+					addnewproduct: {
+						label: '<strong>P</strong> ' + L('Add as new product'),
+						className: 'btn-success add-new-product-dialog-button responsive-button ' + addProductWorkflowsAdditionalCssClasses,
+						callback: function()
+						{
+							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+						}
+					},
+					addbarcode: {
+						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
+						className: 'btn-info add-new-barcode-dialog-button responsive-button',
+						callback: function()
+						{
+							window.location.href = U(window.location.pathname + '?addbarcodetoselection=' + encodeURIComponent(input));
+						}
+					},
+					addnewproductwithbarcode: {
+						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
+						className: 'btn-warning add-new-product-with-barcode-dialog-button responsive-button ' + addProductWorkflowsAdditionalCssClasses,
+						callback: function()
+						{
+							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+						}
+					}
+				}
+			}).on('keypress', function(e)
+			{
+				if (e.key === 'B' || e.key === 'b')
+				{
+					$('.add-new-barcode-dialog-button').not(".d-none").click();
+				}
+				if (e.key === 'p' || e.key === 'P')
+				{
+					$('.add-new-product-dialog-button').not(".d-none").click();
+				}
+				if (e.key === 'a' || e.key === 'A')
+				{
+					$('.add-new-product-with-barcode-dialog-button').not(".d-none").click();
+				}
+			});
+		}
+	}
+});

public/viewjs/consume.js

@@ -19,10 +19,8 @@
 					toastr.success(L('Removed #1 #2 of #3 from stock', jsonForm.amount, productDetails.quantity_unit_stock.name, productDetails.product.name));
 
 					$('#amount').val(1);
-					$('#product_id').val('');
-					$('#product_id_text_input').focus();
-					$('#product_id_text_input').val('');
-					$('#product_id_text_input').trigger('change');
+					Grocy.Components.ProductPicker.SetValue('');
+					Grocy.Components.ProductPicker.GetInputElement().focus();
 					Grocy.FrontendHelpers.ValidateForm('consume-form');
 				},
 				function(xhr)
@@ -38,7 +36,7 @@
 	);
 });
 
-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();
 
@@ -54,14 +52,14 @@ $('#product_id').on('change', function(e)
 
 				if ((productDetails.stock_amount || 0) === 0)
 				{
-					$('#product_id').val('');
-					$('#product_id_text_input').val('');
+					Grocy.Components.ProductPicker.SetValue('');
 					Grocy.FrontendHelpers.ValidateForm('consume-form');
-					$('#product-error').text(L('This product is not in stock'));
-					$('#product_id_text_input').focus();
+					Grocy.Components.ProductPicker.ShowCustomError(L('This product is not in stock'));
+					Grocy.Components.ProductPicker.GetInputElement().focus();
 				}
 				else
 				{
+					Grocy.Components.ProductPicker.HideCustomError();
 					Grocy.FrontendHelpers.ValidateForm('consume-form');
 					$('#amount').focus();
 				}
@@ -74,28 +72,8 @@ $('#product_id').on('change', function(e)
 	}
 });
 
-$('.combobox').combobox({
-	appendId: '_text_input'
-});
-
-$('#product_id_text_input').on('change', function(e)
-{
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-	}
-});
-
 $('#amount').val(1);
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
+Grocy.Components.ProductPicker.GetInputElement().focus();
 Grocy.FrontendHelpers.ValidateForm('consume-form');
 
 $('#amount').on('focus', function(e)

public/viewjs/habits.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/habitsoverview.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/inventory.js

@@ -43,10 +43,8 @@
 						$('#inventory-change-info').addClass('d-none');
 						$('#new_amount').val('');
 						Grocy.Components.DateTimePicker.SetValue('');
-						$('#product_id').val('');
-						$('#product_id_text_input').focus();
-						$('#product_id_text_input').val('');
-						$('#product_id_text_input').trigger('change');
+						Grocy.Components.ProductPicker.SetValue('');
+						Grocy.Components.ProductPicker.GetInputElement().focus();
 						Grocy.FrontendHelpers.ValidateForm('inventory-form');
 					}
 				},
@@ -63,7 +61,7 @@
 	);
 });
 
-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();
 
@@ -87,94 +85,23 @@ $('#product_id').on('change', function(e)
 	}
 });
 
-$('.combobox').combobox({
-	appendId: '_text_input'
-});
-
-$('#product_id_text_input').on('change', function(e)
-{
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-	}
-	else
-	{
-		var optionElement = $("#product_id option:contains('" + input + "')").first();
-		if (input.length > 0 && optionElement.length === 0 && GetUriParam('addbarcodetoselection') === undefined	)
-		{
-			bootbox.dialog({
-				message: L('#1 could not be resolved to a product, how do you want to proceed?', input),
-				title: L('Create or assign product'),
-				onEscape: function() { },
-				size: 'large',
-				backdrop: true,
-				buttons: {
-					cancel: {
-						label: L('Cancel'),
-						className: 'btn-default',
-						callback: function() { }
-					},
-					addnewproduct: {
-						label: '<strong>P</strong> ' + L('Add as new product'),
-						className: 'btn-success add-new-product-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					},
-					addbarcode: {
-						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
-						className: 'btn-info add-new-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/inventory?addbarcodetoselection=' + encodeURIComponent(input));
-						}
-					},
-					addnewproductwithbarcode: {
-						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
-						className: 'btn-warning add-new-product-with-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					}
-				}
-			}).on('keypress', function(e)
-			{
-				if (e.key === 'B' || e.key === 'b')
-				{
-					$('.add-new-barcode-dialog-button').click();
-				}
-				if (e.key === 'p' || e.key === 'P')
-				{
-					$('.add-new-product-dialog-button').click();
-				}
-				if (e.key === 'a' || e.key === 'A')
-				{
-					$('.add-new-product-with-barcode-dialog-button').click();
-				}
-			});
-		}
-	}
-});
-
 $('#new_amount').val('');
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
 Grocy.FrontendHelpers.ValidateForm('inventory-form');
 
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
+{
+	Grocy.Components.ProductPicker.GetInputElement().focus();
+}
+else
+{
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
+}
+
 $('#new_amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
 	else
 	{
@@ -203,32 +130,6 @@ $('#inventory-form input').keydown(function(event)
 	}
 });
 
-var prefillProduct = GetUriParam('createdproduct');
-if (prefillProduct !== undefined)
-{
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
-	if (possibleOptionElement.length === 0)
-	{
-		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
-	}
-
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-		$('#new_amount').focus();
-	}
-}
-
-var addBarcode = GetUriParam('addbarcodetoselection');
-if (addBarcode !== undefined)
-{
-	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('d-none');
-	$('#barcode-lookup-disabled-hint').removeClass('d-none');
-}
-
 $('#new_amount').on('keypress', function(e)
 {
 	$('#new_amount').trigger('change');
@@ -246,7 +147,7 @@ Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 
 $('#new_amount').on('keyup', function(e)
 {
-	var productId = $('#product_id').val();
+	var productId = Grocy.Components.ProductPicker.GetValue();
 	var newAmount = parseInt($('#new_amount').val());
 	
 	if (productId)

public/viewjs/locations.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/manageapikeys.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');

public/viewjs/products.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/purchase.js

@@ -44,10 +44,8 @@
 					{
 						$('#amount').val(0);
 						Grocy.Components.DateTimePicker.SetValue('');
-						$('#product_id').val('');
-						$('#product_id_text_input').focus();
-						$('#product_id_text_input').val('');
-						$('#product_id_text_input').trigger('change');
+						Grocy.Components.ProductPicker.SetValue('');
+						Grocy.Components.ProductPicker.GetInputElement().focus();
 						Grocy.FrontendHelpers.ValidateForm('purchase-form');
 					}
 				},
@@ -64,7 +62,7 @@
 	);
 });
 
-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();
 
@@ -95,95 +93,23 @@ $('#product_id').on('change', function(e)
 	}
 });
 
-$('.combobox').combobox({
-	appendId: '_text_input',
-	bsVersion: '4'
-});
-
-$('#product_id_text_input').on('change', function(e)
-{
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-	}
-	else
-	{
-		var optionElement = $("#product_id option:contains('" + input + "')").first();
-		if (input.length > 0 && optionElement.length === 0 && GetUriParam('addbarcodetoselection') === undefined	)
-		{
-			bootbox.dialog({
-				message: L('"#1" could not be resolved to a product, how do you want to proceed?', input),
-				title: L('Create or assign product'),
-				onEscape: function() { },
-				size: 'large',
-				backdrop: true,
-				buttons: {
-					cancel: {
-						label: 'Cancel',
-						className: 'btn-default',
-						callback: function() { }
-					},
-					addnewproduct: {
-						label: '<strong>P</strong> ' + L('Add as new product'),
-						className: 'btn-success add-new-product-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					},
-					addbarcode: {
-						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
-						className: 'btn-info add-new-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/purchase?addbarcodetoselection=' + encodeURIComponent(input));
-						}
-					},
-					addnewproductwithbarcode: {
-						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
-						className: 'btn-warning add-new-product-with-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					}
-				}
-			}).on('keypress', function(e)
-			{
-				if (e.key === 'B' || e.key === 'b')
-				{
-					$('.add-new-barcode-dialog-button').click();
-				}
-				if (e.key === 'p' || e.key === 'P')
-				{
-					$('.add-new-product-dialog-button').click();
-				}
-				if (e.key === 'a' || e.key === 'A')
-				{
-					$('.add-new-product-with-barcode-dialog-button').click();
-				}
-			});
-		}
-	}
-});
-
 $('#amount').val(0);
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
 Grocy.FrontendHelpers.ValidateForm('purchase-form');
 
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
+{
+	Grocy.Components.ProductPicker.GetInputElement().focus();
+}
+else
+{
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
+}
+
 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
 	else
 	{
@@ -212,32 +138,6 @@ $('#purchase-form input').keydown(function(event)
 	}
 });
 
-var prefillProduct = GetUriParam('createdproduct');
-if (prefillProduct !== undefined)
-{
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
-	if (possibleOptionElement.length === 0)
-	{
-		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
-	}
-
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-		Grocy.Components.DateTimePicker.GetInputElement().focus();
-	}
-}
-
-var addBarcode = GetUriParam('addbarcodetoselection');
-if (addBarcode !== undefined)
-{
-	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('d-none');
-	$('#barcode-lookup-disabled-hint').removeClass('d-none');
-}
-
 Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');

public/viewjs/quantityunits.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()

public/viewjs/recipeform.js

@@ -0,0 +1,129 @@
+$('#save-recipe-button').on('click', function(e)
+{
+	e.preventDefault();
+
+	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+		function(result)
+		{
+			window.location.href = U('/recipes');
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
+var recipesPosTables = $('#recipes-pos-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function ()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+
+	recipesPosTables.search(value).draw();
+});
+
+Grocy.FrontendHelpers.ValidateForm('recipe-form');
+$("#name").focus();
+
+$('#recipe-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-form');
+});
+
+$('#recipe-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('recipe-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-recipe-button').click();
+		}
+	}
+});
+
+$(document).on('click', '.recipe-pos-delete-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-pos-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-pos-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to delete recipe ingredient "#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.Get('delete-object/recipes_pos/' + 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');
+	var productId = $(e.currentTarget).attr('data-product-id');
+	var productAmount = $(e.currentTarget).attr('data-product-amount');
+	var recipeName = $(e.currentTarget).attr('data-recipe-name');
+
+	var jsonData = {};
+	jsonData.product_id = productId;
+	jsonData.amount = productAmount;
+	jsonData.note = L('Added for recipe #1', recipeName);
+
+	Grocy.Api.Post('add-object/shopping_list', jsonData,
+		function(result)
+		{
+			window.location.href = U('/recipe/' + Grocy.EditObjectId);
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
+$(document).on('click', '.recipe-pos-show-note-button', function(e)
+{
+	var note = $(e.currentTarget).attr('data-recipe-pos-note');
+
+	bootbox.alert(note);
+});

public/viewjs/recipeposform.js

@@ -0,0 +1,98 @@
+$('#save-recipe-pos-button').on('click', function(e)
+{
+	e.preventDefault();
+
+	var jsonData = $('#recipe-pos-form').serializeJSON();
+	jsonData.recipe_id = Grocy.EditObjectParentId;
+	console.log(jsonData);
+	if (Grocy.EditMode === 'create')
+	{
+		Grocy.Api.Post('add-object/recipes_pos', jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+	else
+	{
+		Grocy.Api.Post('edit-object/recipes_pos/' + Grocy.EditObjectId, jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+});
+
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
+{
+	var productId = $(e.target).val();
+
+	if (productId)
+	{
+		Grocy.Components.ProductCard.Refresh(productId);
+		
+		Grocy.Api.Get('stock/get-product-details/' + productId,
+			function (productDetails)
+			{
+				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
+				$('#amount').focus();
+				Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+});
+
+Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
+{
+	Grocy.Components.ProductPicker.GetInputElement().focus();
+}
+Grocy.Components.ProductPicker.GetPicker().trigger('change');
+
+$('#amount').on('focus', function(e)
+{
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
+	{
+		Grocy.Components.ProductPicker.GetInputElement().focus();
+	}
+	else
+	{
+		$(this).select();
+	}
+});
+
+$('#recipe-pos-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+});
+
+$('#recipe-pos-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('recipe-pos-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-recipe-pos-button').click();
+		}
+	}
+});

public/viewjs/recipes.js

@@ -0,0 +1,119 @@
+var recipesTables = $('#recipes-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true,
+	'select': 'single',
+	'initComplete': function()
+	{
+		this.api().row({ order: 'current' }, 0).select();
+	}
+});
+
+var rowSelect = GetUriParam("row");
+if (typeof rowSelect !== "undefined")
+{
+	recipesTables.row(rowSelect).select();
+}
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	recipesTables.search(value).draw();
+});
+
+$(document).on('click', '.recipe-delete-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to delete 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.Get('delete-object/recipes/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipes');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
+$(document).on('click', '.recipe-order-missing-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to put all missing ingredients for recipe "#1" on the shopping list?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('recipes/add-not-fulfilled-products-to-shopping-list/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipes');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
+recipesTables.on('select', function(e, dt, type, indexes)
+{
+	if (type === 'row')
+	{
+		var selectedRecipeId = $(recipesTables.row(indexes[0]).node()).data("recipe-id");
+		window.location.href = U('/recipes?recipe=' + selectedRecipeId.toString() + "&row=" + indexes[0].toString());
+	}
+});
+
+$("#selectedRecipeToggleFullscreenButton").on('click', function(e)
+{
+	$("#selectedRecipeCard").toggleClass("fullscreen");
+});

public/viewjs/shoppinglist.js

@@ -5,7 +5,9 @@
 		{ 'orderable': false, 'targets': 0 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#search").on("keyup", function()
@@ -46,3 +48,36 @@ $(document).on('click', '#add-products-below-min-stock-amount', function(e)
 		}
 	);
 });
+
+$(document).on('click', '#clear-shopping-list', function(e)
+{
+	bootbox.confirm({
+		message: L('Are you sure to empty the shopping list?'),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('stock/clear-shopping-list',
+					function(result)
+					{
+						window.location.href = U('/shoppinglist');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});

public/viewjs/shoppinglistform.js

@@ -30,7 +30,7 @@
 	}
 });
 
-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();
 
@@ -43,6 +43,7 @@ $('#product_id').on('change', function(e)
 			{
 				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
 				$('#amount').focus();
+				Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
 			},
 			function(xhr)
 			{
@@ -52,39 +53,22 @@ $('#product_id').on('change', function(e)
 	}
 });
 
-$('.combobox').combobox({
-	appendId: '_text_input'
-});
-
-$('#product_id_text_input').on('change', function(e)
-{
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-
-	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-	}
-});
-
-$('#product_id_text_input').focus();
-$('#product_id_text_input').trigger('change');
-
-if (Grocy.EditMode === 'edit')
-{
-	$('#product_id').addClass('suppress-next-custom-validate-event');
-	$('#product_id').trigger('change');
-}
-
 Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
 
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
+{
+	Grocy.Components.ProductPicker.GetInputElement().focus();
+}
+else
+{
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
+}
+
 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
 	else
 	{

public/viewjs/stockoverview.js

@@ -6,7 +6,9 @@
 		{ 'visible': false, 'targets': 4 }
 	],
 	'language': JSON.parse(L('datatables_localization')),
-	'scrollY': false
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
 });
 
 $("#location-filter").on("change", function()

routes.php

@@ -34,6 +34,11 @@ $app->group('', function()
 	$this->get('/shoppinglist', 'Grocy\Controllers\StockController:ShoppingList');
 	$this->get('/shoppinglistitem/{itemId}', 'Grocy\Controllers\StockController:ShoppingListItemEditForm');
 
+	// Recipe routes
+	$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');
+
 	// Habit routes
 	$this->get('/habitsoverview', 'Grocy\Controllers\HabitsController:Overview');
 	$this->get('/habittracking', 'Grocy\Controllers\HabitsController:TrackHabitExecution');
@@ -41,7 +46,7 @@ $app->group('', function()
 	$this->get('/habits', 'Grocy\Controllers\HabitsController:HabitsList');
 	$this->get('/habit/{habitId}', 'Grocy\Controllers\HabitsController:HabitEditForm');
 
-	// Batterry routes
+	// Battery routes
 	$this->get('/batteriesoverview', 'Grocy\Controllers\BatteriesController:Overview');
 	$this->get('/batterytracking', 'Grocy\Controllers\BatteriesController:TrackChargeCycle');
 
@@ -70,8 +75,11 @@ $app->group('/api', function()
 	$this->get('/stock/get-product-details/{productId}', 'Grocy\Controllers\StockApiController:ProductDetails');
 	$this->get('/stock/get-current-stock', 'Grocy\Controllers\StockApiController:CurrentStock');
 	$this->get('/stock/add-missing-products-to-shoppinglist', 'Grocy\Controllers\StockApiController:AddMissingProductsToShoppingList');
+	$this->get('/stock/clear-shopping-list', 'Grocy\Controllers\StockApiController:ClearShoppingList');
 	$this->get('/stock/external-barcode-lookup/{barcode}', 'Grocy\Controllers\StockApiController:ExternalBarcodeLookup');
 
+	$this->get('/recipes/add-not-fulfilled-products-to-shopping-list/{recipeId}', 'Grocy\Controllers\RecipesApiController:AddNotFulfilledProductsToShoppingList');
+
 	$this->get('/habits/track-habit-execution/{habitId}', 'Grocy\Controllers\HabitsApiController:TrackHabitExecution');
 	$this->get('/habits/get-habit-details/{habitId}', 'Grocy\Controllers\HabitsApiController:HabitDetails');
 	

services/BaseService.php

@@ -3,14 +3,19 @@
 namespace Grocy\Services;
 
 use \Grocy\Services\DatabaseService;
+use \Grocy\Services\LocalizationService;
 
 class BaseService
 {
 	public function __construct() {
 		$this->DatabaseService = new DatabaseService();
 		$this->Database = $this->DatabaseService->GetDbConnection();
+
+		$localizationService = new LocalizationService(CULTURE);
+		$this->LocalizationService = $localizationService;
 	}
 
 	protected $DatabaseService;
 	protected $Database;
+	protected $LocalizationService;
 }

services/DemoDataGeneratorService.php

@@ -13,6 +13,8 @@ class DemoDataGeneratorService extends BaseService
 		$rowCount = $this->DatabaseService->ExecuteDbQuery('SELECT COUNT(*) FROM migrations WHERE migration = -1')->fetchColumn();
 		if (intval($rowCount) === 0)
 		{
+			$loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
 			$sql = "
 				INSERT INTO locations (name) VALUES ('{$localizationService->Localize('Pantry')}'); --2
 				INSERT INTO locations (name) VALUES ('{$localizationService->Localize('Candy cupboard')}'); --3
@@ -26,6 +28,7 @@ class DemoDataGeneratorService extends BaseService
 				INSERT INTO quantity_units (name) VALUES ('{$localizationService->Localize('Can')}'); --6
 				INSERT INTO quantity_units (name) VALUES ('{$localizationService->Localize('Bunch')}'); --7
 
+				DELETE FROM sqlite_sequence WHERE name = 'products'; --Just to keep IDs in order as mentioned here...
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Cookies')}', 3, 3, 3, 1, 8); --1
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Chocolate')}', 3, 3, 3, 1, 8); --2
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Gummy bears')}', 3, 3, 3, 1, 8); --3
@@ -41,13 +44,39 @@ class DemoDataGeneratorService extends BaseService
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Cucumber')}', 5, 2, 2, 1); --13
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Radish')}', 5, 7, 7, 1); --14
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Tomato')}', 5, 2, 2, 1); --15
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Pizza dough')}', 3, 3, 3, 1); --16
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Sieved tomatoes')}', 4, 5, 5, 1); --17
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Salami')}', 5, 3, 3, 1); --18
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Toast')}', 4, 5, 5, 1); --19
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Minced meat')}', 5, 3, 3, 1); --20
+
+				INSERT INTO shopping_list (note, amount) VALUES ('{$localizationService->Localize('Some good snacks')}', 1);
+				INSERT INTO shopping_list (product_id, amount) VALUES (20, 1);
+				INSERT INTO shopping_list (product_id, amount) VALUES (17, 1);
+
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Pizza')}', '{$loremIpsum}'); --1
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Spaghetti bolognese')}', '{$loremIpsum}'); --2
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Sandwiches')}', '{$loremIpsum}'); --3
+
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 16, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 17, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount, note) VALUES (1, 18, 1, '{$localizationService->Localize('This is the note content of the recipe ingredient')}');
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 6, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount, note) VALUES (2, 17, 1, '{$localizationService->Localize('This is the note content of the recipe ingredient')}');
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 20, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (3, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (3, 11, 1);
 
 				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Changed towels in the bathroom')}', 'manually', 5); --1
 				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Cleaned the kitchen floor')}', 'dynamic-regular', 7); --2
+				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Lawn mowed in the garden')}', 'dynamic-regular', 21); --3
 
 				INSERT INTO batteries (name, description, used_in) VALUES ('{$localizationService->Localize('Battery')}1', '{$localizationService->Localize('Warranty ends')} 2023', '{$localizationService->Localize('TV remote control')}'); --1
 				INSERT INTO batteries (name, description, used_in) VALUES ('{$localizationService->Localize('Battery')}2', '{$localizationService->Localize('Warranty ends')} 2022', '{$localizationService->Localize('Alarm clock')}'); --2
 				INSERT INTO batteries (name, description, used_in, charge_interval_days) VALUES ('{$localizationService->Localize('Battery')}3', '{$localizationService->Localize('Warranty ends')} 2022', '{$localizationService->Localize('Heat remote control')}', 60); --3
+				INSERT INTO batteries (name, description, used_in, charge_interval_days) VALUES ('{$localizationService->Localize('Battery')}4', '{$localizationService->Localize('Warranty ends')} 2028', '{$localizationService->Localize('Heat remote control')}', 60); --4
 
 				INSERT INTO migrations (migration) VALUES (-1);
 			";
@@ -76,6 +105,7 @@ class DemoDataGeneratorService extends BaseService
 			$habitsService->TrackHabit(1, date('Y-m-d H:i:s', strtotime('-15 days')));
 			$habitsService->TrackHabit(2, date('Y-m-d H:i:s', strtotime('-10 days')));
 			$habitsService->TrackHabit(2, date('Y-m-d H:i:s', strtotime('-20 days')));
+			$habitsService->TrackHabit(3, date('Y-m-d H:i:s', strtotime('-17 days')));
 
 			$batteriesService = new BatteriesService();
 			$batteriesService->TrackChargeCycle(1, date('Y-m-d H:i:s', strtotime('-200 days')));
@@ -87,6 +117,7 @@ class DemoDataGeneratorService extends BaseService
 			$batteriesService->TrackChargeCycle(2, date('Y-m-d H:i:s', strtotime('-100 days')));
 			$batteriesService->TrackChargeCycle(2, date('Y-m-d H:i:s', strtotime('-50 days')));
 			$batteriesService->TrackChargeCycle(3, date('Y-m-d H:i:s', strtotime('-65 days')));
+			$batteriesService->TrackChargeCycle(4, date('Y-m-d H:i:s', strtotime('-56 days')));
 		}
 	}
 

services/LocalizationService.php

@@ -2,14 +2,12 @@
 
 namespace Grocy\Services;
 
-class LocalizationService extends BaseService
+class LocalizationService
 {
 	const DEFAULT_CULTURE = 'en';
 
 	public function __construct(string $culture)
 	{
-		parent::__construct();
-
 		$this->Culture = $culture;
 
 		$this->StringsDefaultCulture = $this->LoadLocalizationFile(self::DEFAULT_CULTURE);

services/RecipesService.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Grocy\Services;
+
+class RecipesService extends BaseService
+{
+	public function GetRecipesFulfillment()
+	{
+		$sql = 'SELECT * from recipes_fulfillment';
+		return $this->DatabaseService->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ);
+	}
+
+	public function GetRecipesSumFulfillment()
+	{
+		$sql = 'SELECT * from recipes_fulfillment_sum';
+		return $this->DatabaseService->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ);
+	}
+
+	public function AddNotFulfilledProductsToShoppingList($recipeId)
+	{
+		$recipe = $this->Database->recipes($recipeId);
+
+		$recipePositions = $this->GetRecipesFulfillment();
+		foreach ($recipePositions as $recipePosition)
+		{
+			if($recipePosition->recipe_id == $recipeId)
+			{
+				$toOrderAmount = $recipePosition->missing_amount - $recipePosition->amount_on_shopping_list;
+				if($toOrderAmount > 0)
+				{
+					$shoppinglistRow = $this->Database->shopping_list()->createRow(array(
+						'product_id' => $recipePosition->product_id,
+						'amount' => $toOrderAmount,
+						'note' => $this->LocalizationService->Localize('Added for recipe #1', $recipe->name)
+					));
+					$shoppinglistRow->save();
+				}
+			}
+		}
+	}
+}

services/StockService.php

@@ -203,6 +203,11 @@ class StockService extends BaseService
 		}
 	}
 
+	public function ClearShoppingList()
+	{
+		$this->Database->shopping_list()->delete();
+	}
+
 	private function ProductExists($productId)
 	{
 		$productRow = $this->Database->products()->where('id = :1', $productId)->fetch();

version.json

@@ -1,4 +1,4 @@
 {
-	"Version": "1.13.1",
-	"ReleaseDate": "2018-07-12"
+	"Version": "1.14.0",
+	"ReleaseDate": "2018-07-15"
 }

views/batteries.blade.php

@@ -18,7 +18,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/components/calendarcard.blade.php

@@ -0,0 +1,12 @@
+@push('componentScripts')
+	<script src="{{ $U('/viewjs/components/calendarcard.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+<div class="card">
+	<div class="card-header">
+		<i class="fas fa-calendar"></i> {{ $L('Calendar') }}
+	</div>
+	<div class="card-body">
+		<div id="calendar" data-target-input="nearest"></div>
+	</div>
+</div>

views/components/datetimepicker.blade.php

@@ -3,8 +3,8 @@
 @endpush
 
 <div class="form-group">
-	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datetimepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
-	<div class="input-group date datetimepicker" id="{{ $id }}" data-target-input="nearest">
+	<label for="{{ $id }}">{{ $L($label) }}  <span class="small text-muted"><time id="datetimepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
+	<div class="input-group date datetimepicker @if(!empty($additionalCssClasses)){{ $additionalCssClasses }}@endif" id="{{ $id }}" data-target-input="nearest">
 		<input type="text" required class="form-control datetimepicker-input"
 			data-target="#{{ $id }}" data-format="{{ $format }}"
 			data-init-with-now="{{ BoolToString($initWithNow) }}"

views/components/productpicker.blade.php

@@ -0,0 +1,19 @@
+@push('componentScripts')
+	<script src="{{ $U('/viewjs/components/productpicker.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+@php if(empty($disallowAddProductWorkflows)) { $disallowAddProductWorkflows = false; } @endphp
+@php if(empty($prefillByName)) { $prefillByName = ''; } @endphp
+
+<div class="form-group" data-next-input-selector="{{ $nextInputSelector }}" data-disallow-add-product-workflows="{{ BoolToString($disallowAddProductWorkflows) }}" data-prefill-by-name="{{ $prefillByName }}">
+	<label for="product_id">{{ $L('Product') }} <i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none"> Barcode lookup is disabled</span></label>
+	<select class="form-control combobox" id="product_id" name="product_id" required>
+		<option value=""></option>
+		@foreach($products as $product)
+			<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
+		@endforeach
+	</select>
+	<div class="invalid-feedback">{{ $L('You have to select a product') }}</div>
+	<div id="custom-productpicker-error" class="form-text text-danger d-none"></div>
+	<div id="flow-info-addbarcodetoselection" class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
+</div>

views/consume.blade.php

@@ -11,16 +11,11 @@
 
 		<form id="consume-form" novalidate>
 
-			<div class="form-group">
-				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i></label>
-				<select class="form-control combobox" id="product_id" name="product_id" required>
-					<option value=""></option>
-					@foreach($products as $product)
-						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-					@endforeach
-				</select>
-				<div id="product-error" class="invalid-feedback">{{ $L('You have to select a product') }}</div>
-			</div>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#amount',
+				'disallowAddProductWorkflows' => true
+			))
 
 			<div class="form-group">
 				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>

views/habits.blade.php

@@ -18,7 +18,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/inventory.blade.php

@@ -11,17 +11,10 @@
 
 		<form id="inventory-form" novalidate>
 
-			<div class="form-group">
-				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none">&nbsp;&nbsp;{{ $L('Barcode lookup is disabled') }}</span></label>
-				<select class="form-control combobox" id="product_id" name="product_id" required>
-					<option value=""></option>
-					@foreach($products as $product)
-						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-					@endforeach
-				</select>
-				<div class="invalid-feedback">{{ $L('You have to select a product') }}</div>
-				<div id="flow-info-addbarcodetoselection" class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
-			</div>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#new_amount'
+			))
 
 			<div class="form-group">
 				<label for="new_amount">{{ $L('New amount') }}&nbsp;&nbsp;<span id="new_amount_qu_unit" class="small text-muted"></span></label>
@@ -39,7 +32,8 @@
 				'limitEndToNow' => false,
 				'limitStartToNow' => true,
 				'invalidFeedback' => $L('A best before date is required and must be later than today'),
-				'nextInputSelector' => '#best_before_date'
+				'nextInputSelector' => '#best_before_date',
+				'additionalCssClasses' => 'date-only-datetimepicker'
 			))
 
 			<button id="save-inventory-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>

views/layout/default.blade.php

@@ -17,8 +17,10 @@
 	<link href="{{ $U('/node_modules/startbootstrap-sb-admin/css/sb-admin.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@fortawesome/fontawesome-free/css/all.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/tagmanager/tagmanager.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
@@ -26,8 +28,8 @@
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	@stack('pageStyles')
 
-	@if(file_exists(__DIR__ . '/../../data/custom.css'))
-		@php include __DIR__ . '/../../data/custom.css' @endphp
+	@if(file_exists(__DIR__ . '/../../data/custom_css.html'))
+		@php include __DIR__ . '/../../data/custom_css.html' @endphp
 	@endif
 
 	<script>
@@ -36,6 +38,7 @@
 		Grocy.BaseUrl = '{{ $U('/') }}';
 		Grocy.LocalizationStrings = {!! json_encode($localizationStrings) !!};
 		Grocy.ActiveNav = '@yield('activeNav', '')';
+		Grocy.Culture = '{{ CULTURE }}';
 	</script>
 </head>
 
@@ -68,6 +71,18 @@
 						<span class="nav-link-text">{{ $L('Batteries overview') }}</span>
 					</a>
 				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Shopping list') }}" data-nav-for-page="shoppinglist">
+					<a class="nav-link discrete-link" href="{{ $U('/shoppinglist') }}">
+						<i class="fas fa-shopping-cart"></i>
+						<span class="nav-link-text">{{ $L('Shopping list') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Recipes') }}" data-nav-for-page="recipes">
+					<a class="nav-link discrete-link" href="{{ $U('/recipes') }}">
+						<i class="fas fa-cocktail"></i>
+						<span class="nav-link-text">{{ $L('Recipes') }}</span>
+					</a>
+				</li>
 
 				<li class="nav-item mt-4" data-toggle="tooltip" data-placement="right" title="{{ $L('Purchase') }}" data-nav-for-page="purchase">
 					<a class="nav-link discrete-link" href="{{ $U('/purchase') }}">
@@ -81,12 +96,6 @@
 						<span class="nav-link-text">{{ $L('Consume') }}</span>
 					</a>
 				</li>
-				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Shopping list') }}" data-nav-for-page="shoppinglist">
-					<a class="nav-link discrete-link" href="{{ $U('/shoppinglist') }}">
-						<i class="fas fa-shopping-bag"></i>
-						<span class="nav-link-text">{{ $L('Shopping list') }}</span>
-					</a>
-				</li>
 				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Inventory') }}" data-nav-for-page="inventory">
 					<a class="nav-link discrete-link" href="{{ $U('/inventory') }}">
 						<i class="fas fa-list"></i>
@@ -112,31 +121,31 @@
 						<span class="nav-link-text">{{ $L('Manage master data') }}</span>
 					</a>
 					<ul id="top-nav-manager-master-data" class="sidenav-second-level collapse">
-						<li data-nav-for-page="products">
+						<li data-nav-for-page="products" data-sub-menu-of="#top-nav-manager-master-data">
 							<a class="nav-link discrete-link" href="{{ $U('/products') }}">
 								<i class="fab fa-product-hunt"></i>
 								<span class="nav-link-text">{{ $L('Products') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="locations">
+						<li data-nav-for-page="locations" data-sub-menu-of="#top-nav-manager-master-data">
 							<a class="nav-link discrete-link" href="{{ $U('/locations') }}">
 								<i class="fas fa-map-marker-alt"></i>
 								<span class="nav-link-text">{{ $L('Locations') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="quantityunits">
+						<li data-nav-for-page="quantityunits" data-sub-menu-of="#top-nav-manager-master-data">
 							<a class="nav-link discrete-link" href="{{ $U('/quantityunits') }}">
 								<i class="fas fa-balance-scale"></i>
 								<span class="nav-link-text">{{ $L('Quantity units') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="habits">
+						<li data-nav-for-page="habits" data-sub-menu-of="#top-nav-manager-master-data">
 							<a class="nav-link discrete-link" href="{{ $U('/habits') }}">
 								<i class="fas fa-sync-alt"></i>
 								<span class="nav-link-text">{{ $L('Habits') }}</span>
 							</a>
 						</li>
-						<li data-nav-for-page="batteries">
+						<li data-nav-for-page="batteries" data-sub-menu-of="#top-nav-manager-master-data">
 							<a class="nav-link discrete-link" href="{{ $U('/batteries') }}">
 								<i class="fas fa-battery-three-quarters"></i>
 								<span class="nav-link-text">{{ $L('Batteries') }}</span>
@@ -183,7 +192,7 @@
 
 	<div class="content-wrapper">
 		<div class="container-fluid">
-			<div class="row">
+			<div class="row mb-3">
 				<div class="col content-text">
 					@yield('content')
 				</div>
@@ -208,7 +217,7 @@
 					<br>
 					Life runs on code<br>
 					<a href="https://github.com/berrnd/grocy" class="discrete-link" target="_blank">
-						<i class="fas fa-github"></i>
+						<i class="fab fa-github"></i>
 					</a>
 				</div>
 			</div>
@@ -227,6 +236,10 @@
 	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-colreorder-bs4/js/colReorder.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-select/js/dataTables.select.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/timeago/jquery.timeago.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules', true) }}/timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
 	<script src="{{ $U('/node_modules/toastr/build/toastr.min.js?v=', true) }}{{ $version }}"></script>
@@ -239,8 +252,8 @@
 	@stack('componentScripts')
 	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>
 
-	@if(file_exists(__DIR__ . '/../../data/custom.js'))
-		@php include __DIR__ . '/../../data/custom.js' @endphp
+	@if(file_exists(__DIR__ . '/../../data/custom_js.html'))
+		@php include __DIR__ . '/../../data/custom_js.html' @endphp
 	@endif
 </body>
 

views/locations.blade.php

@@ -18,7 +18,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/manageapikeys.blade.php

@@ -22,7 +22,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/products.blade.php

@@ -18,7 +18,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/purchase.blade.php

@@ -11,17 +11,10 @@
 
 		<form id="purchase-form" novalidate>
 
-			<div class="form-group">
-				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none">&nbsp;&nbsp;Barcode lookup is disabled</span></label>
-				<select class="form-control combobox" id="product_id" name="product_id" required>
-					<option value=""></option>
-					@foreach($products as $product)
-						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-					@endforeach
-				</select>
-				<div class="invalid-feedback">{{ $L('You have to select a product') }}</div>
-				<div id="flow-info-addbarcodetoselection" class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
-			</div>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#best_before_date .datetimepicker-input'
+			))
 
 			@include('components.datetimepicker', array(
 				'id' => 'best_before_date',
@@ -31,7 +24,8 @@
 				'limitEndToNow' => false,
 				'limitStartToNow' => true,
 				'invalidFeedback' => $L('A best before date is required and must be later than today'),
-				'nextInputSelector' => '#amount'
+				'nextInputSelector' => '#amount',
+				'additionalCssClasses' => 'date-only-datetimepicker'
 			))
 
 			<div class="form-group">

views/quantityunits.blade.php

@@ -18,7 +18,7 @@
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>

views/recipeform.blade.php

@@ -0,0 +1,94 @@
+@extends('layout.default')
+
+@if($mode == 'edit')
+	@section('title', $L('Edit recipe'))
+@else
+	@section('title', $L('Create recipe'))
+@endif
+
+@section('viewJsName', 'recipeform')
+
+@section('content')
+<div class="row">
+	<div class="col">
+		<h1>@yield('title')</h1>
+
+		<script>Grocy.EditMode = '{{ $mode }}';</script>
+
+		@if($mode == 'edit')
+			<script>Grocy.EditObjectId = {{ $recipe->id }};</script>
+		@endif
+	</div>
+</div>
+
+<div class="row">
+	<div class="col-xs-12 col-md-7 pb-3">
+		<form id="recipe-form" novalidate>
+
+			<div class="form-group">
+				<label for="name">{{ $L('Name') }}</label>
+				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $recipe->name }}@endif">
+				<div class="invalid-feedback">{{ $L('A name is required') }}</div>
+			</div>
+
+			<div class="form-group">
+				<label for="description">{{ $L('Preparation') }}</label>
+				<textarea id="description" class="form-control" name="description" rows="25">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
+			</div>
+
+			<button id="save-recipe-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
+
+		</form>
+	</div>
+
+	<div class="col-xs-12 col-md-5 pb-3">
+		<h2>
+			{{ $L('Ingredients list') }}
+			<a class="btn btn-outline-dark" href="{{ $U('/recipe/' . $recipe->id . '/pos/new') }}">
+				<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" href="{{ $U('/recipe/' . $recipe->id . '/pos/' . $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="#" 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 }} {{ FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $recipePosition->product_id)->qu_id_stock)->name }}
+						<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="#" 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>
+@stop

views/recipeposform.blade.php

@@ -0,0 +1,55 @@
+@extends('layout.default')
+
+@if($mode == 'edit')
+	@section('title', $L('Edit recipe ingredient'))
+@else
+	@section('title', $L('Add recipe ingredient'))
+@endif
+
+@section('viewJsName', 'recipeposform')
+
+@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 = {{ $recipePos->id }};</script>
+		@endif
+
+		<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',
+				'prefillByName' => $prefillByName
+			))
+
+			<div class="form-group">
+				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>
+				<input type="number" class="form-control" id="amount" name="amount" value="@if($mode == 'edit'){{ $recipePos->amount }}@else{{1}}@endif" min="0" required>
+				<div class="invalid-feedback">{{ $L('This cannot be negative') }}</div>
+			</div>
+
+			<div class="form-group">
+				<label for="note">{{ $L('Note') }}</label>
+				<textarea class="form-control" rows="2" id="note" name="note">@if($mode == 'edit'){{ $recipePos->note }}@endif</textarea>
+			</div>
+
+			<button id="save-recipe-pos-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
+
+		</form>
+	</div>
+
+	<div class="col-xs-12 col-md-6 col-xl-4">
+		@include('components.productcard')
+	</div>
+</div>
+@stop

views/recipes.blade.php

@@ -0,0 +1,91 @@
+@extends('layout.default')
+
+@section('title', $L('Recipes'))
+@section('activeNav', 'recipes')
+@section('viewJsName', 'recipes')
+
+@section('content')
+<div class="row">
+	<div class="col">
+		<h1>
+			@yield('title')
+			<a class="btn btn-outline-dark" href="{{ $U('/recipe/new') }}">
+				<i class="fas fa-plus"></i> {{ $L('Add') }}
+			</a>
+		</h1>
+	</div>
+</div>
+
+<div class="row">
+	<div class="col-xs-12 col-md-6 pb-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+
+		<table id="recipes-table" class="table table-sm table-striped dt-responsive">
+			<thead>
+				<tr>
+					<th>#</th>
+					<th>{{ $L('Name') }}</th>
+					<th>{{ $L('Requirements fulfilled') }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				@foreach($recipes as $recipe)
+				<tr data-recipe-id="{{ $recipe->id }}">
+					<td class="fit-content">
+						<a class="btn btn-sm btn-info" href="{{ $U('/recipe/') }}{{ $recipe->id }}">
+							<i class="fas fa-edit"></i>
+						</a>
+						<a class="btn btn-sm btn-danger recipe-delete-button" href="#" data-recipe-id="{{ $recipe->id }}" data-recipe-name="{{ $recipe->name }}">
+							<i class="fas fa-trash"></i>
+						</a>
+						<a class="btn btn-sm btn-primary recipe-order-missing-button @if(FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->need_fulfilled_with_shopping_list == 1){{ disabled }}@endif" href="#" title="{{ $L('Put missing products on shopping list') }}" data-recipe-id="{{ $recipe->id }}" data-recipe-name="{{ $recipe->name }}">
+							<i class="fas fa-cart-plus"></i>
+						</a>
+					</td>
+					<td>
+						{{ $recipe->name }}
+					</td>
+					<td>
+						@if(FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->need_fulfilled == 1)<i class="fas fa-check text-success"></i>@elseif(FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->need_fulfilled_with_shopping_list == 1)<i class="fas fa-exclamation text-warning"></i>@else<i class="fas fa-times text-danger"></i>@endif
+						<span class="timeago-contextual">@if(FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->need_fulfilled == 1){{ $L('Enough in stock') }}@elseif(FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->need_fulfilled_with_shopping_list == 1){{ $L('Not enough in stock, #1 ingredients missing but already on the shopping list', FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->missing_products_count) }}@else{{ $L('Not enough in stock, #1 ingredients missing', FindObjectInArrayByPropertyValue($recipesSumFulfillment, 'recipe_id', $recipe->id)->missing_products_count) }}@endif</span>
+					</td>
+				</tr>
+				@endforeach
+			</tbody>
+		</table>
+	</div>
+
+	@if($selectedRecipe !== null)
+	<div class="col-xs-12 col-md-6">
+		<div id="selectedRecipeCard" class="card">
+			<div class="card-header">
+				<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}
+				<a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 float-right" href="#" title="{{ $L('Expand to fullscreen') }}">
+					<i class="fas fa-expand-arrows-alt"></i>
+				</a>
+			</div>
+			<div class="card-body">
+				<h5 class="mb-0">{{ $L('Ingredients') }}</h5>
+			</div>
+			<ul class="list-group list-group-flush">
+				@foreach($selectedRecipePositions as $selectedRecipePosition)
+				<li class="list-group-item">
+					{{ $selectedRecipePosition->amount }} {{ FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id)->qu_id_stock)->name }} {{ FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id)->name }}
+					<span class="timeago-contextual">@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $selectedRecipePosition->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', $selectedRecipePosition->id)->missing_amount, FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $selectedRecipePosition->id)->amount_on_shopping_list) }} @endif</span>
+
+					@if(!empty($selectedRecipePosition->note))
+					<div class="text-muted">{{ $selectedRecipePosition->note }} </div>
+					@endif
+				</li>
+				@endforeach
+			</ul>
+			<div class="card-body">
+				<h5>{{ $L('Preparation') }}</h5>
+				{!! nl2br(htmlentities($selectedRecipe->description)) !!}
+			</div>
+		</div>
+	</div>
+	@endif
+</div>
+@stop

views/shoppinglist.blade.php

@@ -9,25 +9,24 @@
 	<div class="col">
 		<h1>
 			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/shoppinglistitem/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
+			<a class="btn btn-outline-dark responsive-button" href="{{ $U('/shoppinglistitem/new') }}">
+				<i class="fas fa-plus"></i> {{ $L('Add') }}
 			</a>
-			<a id="add-products-below-min-stock-amount" class="btn btn-info" href="#">
-				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add products that are below defined min. stock amount') }}
+			<a id="clear-shopping-list" class="btn btn-outline-danger responsive-button @if($listItems->count() == 0) disabled @endif" href="#">
+				<i class="fas fa-trash"></i> {{ $L('Clear list') }}
+			</a>
+			<a id="add-products-below-min-stock-amount" class="btn btn-outline-primary responsive-button" href="#">
+				<i class="fas fa-cart-plus"></i> {{ $L('Add products that are below defined min. stock amount') }}
 			</a>
 		</h1>
 	</div>
 </div>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
-		<input type="text" class="form-control" id="search">
-	</div>
-</div>
-
 <div class="row">
-	<div class="col">
+	<div class="col-xs-12 col-md-8 pb-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+
 		<table id="shoppinglist-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
@@ -58,5 +57,9 @@
 			</tbody>
 		</table>
 	</div>
+
+	<div class="col-xs-12 col-md-4">
+		@include('components.calendarcard')
+	</div>
 </div>
 @stop

views/shoppinglistform.blade.php

@@ -21,15 +21,10 @@
 
 		<form id="shoppinglist-form" novalidate>
 
-			<div class="form-group">
-				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i></label>
-				<select class="form-control combobox" id="product_id" name="product_id" value="@if($mode == 'edit') {{ $listItem->product_id }} @endif">
-					<option value=""></option>
-					@foreach($products as $product)
-						<option @if($mode == 'edit' && $product->id == $listItem->product_id) selected="selected" @endif data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-					@endforeach
-				</select>
-			</div>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#amount'
+			))
 
 			<div class="form-group">
 				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span><br><span class="small text-muted">@if($mode == 'edit' && $listItem->amount_autoadded > 0){{ $L('#1 units were automatically added and will apply in addition to the amount entered here', $listItem->amount_autoadded) }}@endif</span></label>

yarn.lock

@@ -10,7 +10,7 @@
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.1.0.tgz#f35f5ba91366b7a58b0b6a4f22ff0907fe002219"
 
-"TagManager@https://github.com/max-favilli/tagmanager.git#3.0.2", "tagmanager@https://github.com/max-favilli/tagmanager.git#3.0.2":
+"TagManager@https://github.com/max-favilli/tagmanager.git#3.0.2":
   version "3.0.1"
   resolved "https://github.com/max-favilli/tagmanager.git#df9eb9935c8585a392dfc00602f890caf233fa94"
   dependencies:
@@ -29,8 +29,8 @@ bootstrap@4.0.0:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
 bootstrap@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.2.tgz#aee2a93472e61c471fc79fb475531dcbc87de326"
 
 chart.js@2.7.1:
   version "2.7.1"
@@ -74,6 +74,21 @@ datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
     datatables.net "1.10.19"
     jquery ">=1.7"
 
+datatables.net-colreorder-bs4@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/datatables.net-colreorder-bs4/-/datatables.net-colreorder-bs4-1.5.1.tgz#7ded353a68296b85f0dbfb234b8cb5d8fc2bee3c"
+  dependencies:
+    datatables.net-bs4 "^1.10.15"
+    datatables.net-colreorder "1.5.1"
+    jquery ">=1.7"
+
+datatables.net-colreorder@1.5.1, datatables.net-colreorder@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/datatables.net-colreorder/-/datatables.net-colreorder-1.5.1.tgz#ee5eacd7178b5fd9396aab44d4907aae35086f8c"
+  dependencies:
+    datatables.net "^1.10.15"
+    jquery ">=1.7"
+
 datatables.net-responsive-bs4@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/datatables.net-responsive-bs4/-/datatables.net-responsive-bs4-2.2.3.tgz#639de17c1d31210ebf2b3c25f1c774c13f729e94"
@@ -89,6 +104,21 @@ datatables.net-responsive@2.2.3, datatables.net-responsive@^2.2.3:
     datatables.net "^1.10.15"
     jquery ">=1.7"
 
+datatables.net-select-bs4@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/datatables.net-select-bs4/-/datatables.net-select-bs4-1.2.7.tgz#5e4ddd8feb412e974b54a15e81b2bb29840ba55b"
+  dependencies:
+    datatables.net-bs4 "^1.10.15"
+    datatables.net-select "1.2.7"
+    jquery ">=1.7"
+
+datatables.net-select@1.2.7, datatables.net-select@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/datatables.net-select/-/datatables.net-select-1.2.7.tgz#7d5badfca49c438f8b51df04483d8d77857e917c"
+  dependencies:
+    datatables.net "^1.10.15"
+    jquery ">=1.7"
+
 datatables.net@1.10.16:
   version "1.10.16"
   resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.16.tgz#4b052d1082824261b68eed9d22741b711d3d2469"
@@ -155,8 +185,8 @@ startbootstrap-sb-admin@^4.0.0:
     jquery.easing "^1.4.1"
 
 swagger-ui-dist@^3.17.3:
-  version "3.17.3"
-  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.17.3.tgz#dfb96408ccc46775155f7369190c5d4b2016fe5c"
+  version "3.17.4"
+  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.17.4.tgz#7b4d3842b052cbadebec784265b2e17fdda6a232"
 
 tempusdominus-bootstrap-4@^5.0.1:
   version "5.0.1"