From 6c1a6c13054fd19f6f2cc9a7c5968059c99b2b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Majdand=C5=BEi=C4=87?=
 <david.majdandzic@hotmail.com>
Date: Wed, 12 Jun 2024 17:47:32 +0200
Subject: [PATCH] Fix newline flicker and implement name and description update

---
 src/lib/components/Food/EmptyFoodComp.svelte | 28 +++++++++------
 src/lib/components/Food/FoodComp.svelte      | 37 ++++++++++++++------
 src/lib/database/food.ts                     | 10 +++---
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/Food/EmptyFoodComp.svelte b/src/lib/components/Food/EmptyFoodComp.svelte
index 9e62785..1b28610 100644
--- a/src/lib/components/Food/EmptyFoodComp.svelte
+++ b/src/lib/components/Food/EmptyFoodComp.svelte
@@ -17,13 +17,19 @@
 	let per100Element: HTMLTableCellElement
 
 	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		name = name.trim()
+		amount = amount.trim()
+		description = description.trim()
+		per100 = per100.trim()
+
 		if (!per100Edited && event.currentTarget === per100Element)
 			per100Edited = true
 
 		if (event.key == 'Enter') {
-			item.food = name.trim()
-			item.amount = parseInt(amount.trim())
-			item.description = description.trim()
+			event.preventDefault()
+			item.food = name
+			item.amount = parseInt(amount)
+			item.description = description
 			const [dbFood, err]: [Food[], Err] = await FoodService.Create(item)
 			name = ''
 			amount = ''
@@ -65,29 +71,29 @@
 		<td bind:innerText={name}
 		    class:border-[3px]={!name}
 		    class:border-red-600={!name}
-		    class="px-6 py-4"
+		    class="px-6 py-4 overflow-hidden"
 		    contenteditable="true"
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td bind:innerText={description}
-		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
 		    contenteditable="true"
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td bind:innerText={amount}
 		    class:border-[3px]={!amount}
 		    class:border-red-600={!amount}
-		    class="px-6 py-4"
+		    class="px-6 py-4 overflow-hidden"
 		    contenteditable="true"
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td bind:this={per100Element}
 		    bind:innerText={per100}
-		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
 		    class:border-[3px]={!per100}
 		    class:border-orange-600={!per100}
 		    contenteditable="true"
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4">
 		</td>
diff --git a/src/lib/components/Food/FoodComp.svelte b/src/lib/components/Food/FoodComp.svelte
index 0992a5f..deab869 100644
--- a/src/lib/components/Food/FoodComp.svelte
+++ b/src/lib/components/Food/FoodComp.svelte
@@ -4,14 +4,27 @@
 	export let item: Food
 	let amount: string = item.amount.toString()
 	let per100: string = item.per100?.toString() ?? ''
+	let description: string = item.description ?? ''
+	let name: string = item.food
 
 	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		amount = amount.trim()
+		per100 = per100.trim()
+		description = description.trim()
+		name = name.trim()
+
 		if (event.key == 'Enter') {
-			item.amount = parseInt(amount.trim())
-			item.per100 = parseInt(per100.trim())
+			event.preventDefault()
+			item.food = name
+			item.description = description
+			item.amount = parseInt(amount)
+			item.per100 = parseInt(per100)
+
 			const [newItem, err] = await FoodService.Update(item)
-			amount = amount.trim()
-			per100 = per100.trim()
+			name = item.food
+			description = item.description ?? ''
+			amount = item.amount.toString()
+			per100 = item.per100?.toString() ?? ''
 
 			if (newItem && !err) {
 				item = newItem
@@ -26,21 +39,25 @@
 		    scope="row">
 			{item.date}
 		</th>
-		<td class="px-6 py-4">
-			{item.food}
+		<td class="px-6 py-4"
+		    contenteditable="true"
+		    bind:innerText={name}
+		    on:keydown={update}>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
-			{item.description}
+		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		    contenteditable="true"
+		    bind:innerText={description}
+		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4"
 		    contenteditable="true"
 		    bind:innerText={amount}
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    bind:innerText={per100}
-		    on:keyup={update}>
+		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4">
 			{item.energy}
diff --git a/src/lib/database/food.ts b/src/lib/database/food.ts
index a7dc71c..edd0774 100644
--- a/src/lib/database/food.ts
+++ b/src/lib/database/food.ts
@@ -81,10 +81,12 @@ limit 1
 	async Update(food: Food): Promise<[Food, Err]> {
 		await db.execute(`
 update food set
-amount = $1,
-per100 = $2
-where rowid = $3
-		`, [food.amount, food.per100, food.rowid])
+food = $1,
+description = $2,
+amount = $3,
+per100 = $4
+where rowid = $5
+		`, [food.food, food.description, food.amount, food.per100, food.rowid])
 		const res = await db.select<Food[]>(`select ${columns.join(', ')} from foodView where rowid = $1`, [food.rowid])
 		if (!res) return [food, 'no data found']
 		if (res.length == 0) return [food, 'no data found']