Fix newline flicker and implement name and description update

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()
+			event.preventDefault()
-			item.amount = parseInt(amount.trim())
+			item.food = name
-			item.description = description.trim()
+			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>

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())
+			event.preventDefault()
-			item.per100 = parseInt(per100.trim())
+			item.food = name
+			item.description = description
+			item.amount = parseInt(amount)
+			item.per100 = parseInt(per100)
+
 			const [newItem, err] = await FoodService.Update(item)
-			amount = amount.trim()
+			name = item.food
-			per100 = per100.trim()
+			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">
+		<td class="px-6 py-4"
-			{item.food}
+		    contenteditable="true"
+		    bind:innerText={name}
+		    on:keydown={update}>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
+		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
-			{item.description}
+		    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}

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,
+food = $1,
-per100 = $2
+description = $2,
-where rowid = $3
+amount = $3,
-		`, [food.amount, food.per100, food.rowid])
+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']