From f1ae897c7bb53cb6da22ca58b34a3bf7e8db3d5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Majdand=C5=BEi=C4=87?=
 <david.majdandzic@hotmail.com>
Date: Thu, 13 Jun 2024 15:13:45 +0200
Subject: [PATCH] Update on focusout

---
 src/lib/components/Food/FoodComp.svelte | 34 ++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Food/FoodComp.svelte b/src/lib/components/Food/FoodComp.svelte
index 382de57..98dd9cd 100644
--- a/src/lib/components/Food/FoodComp.svelte
+++ b/src/lib/components/Food/FoodComp.svelte
@@ -25,16 +25,38 @@
 			item.per100 = parseInt(per100)
 
 			const [newItem, err] = await FoodService.Update(item)
-			name = item.food
-			description = item.description ?? ''
-			amount = item.amount.toString()
-			per100 = item.per100?.toString() ?? ''
 
 			if (newItem && !err) {
 				item = newItem
 			}
+			name = item.food
+			description = item.description ?? ''
+			amount = item.amount.toString()
+			per100 = item.per100?.toString() ?? ''
 		}
 	}
+
+	async function focusOutUpdate() {
+		amount = amount.trim()
+		per100 = per100.trim()
+		description = description.trim()
+		name = name.trim()
+
+		item.food = name
+		item.description = description
+		item.amount = parseInt(amount)
+		item.per100 = parseInt(per100)
+
+		const [newItem, err] = await FoodService.Update(item)
+
+		if (newItem && !err) {
+			item = newItem
+		}
+		name = item.food
+		description = item.description ?? ''
+		amount = item.amount.toString()
+		per100 = item.per100?.toString() ?? ''
+	}
 </script>
 
 <template>
@@ -48,21 +70,25 @@
 		    style="color: {nameColor}"
 		    contenteditable="true"
 		    bind:innerText={name}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    bind:innerText={description}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4"
 		    contenteditable="true"
 		    bind:innerText={amount}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    bind:innerText={per100}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4" style="color: {energyColor}">