Implement updating old per100 values

src/lib/components/Food/FoodComp.svelte

@@ -1,7 +1,23 @@
 <script lang="ts">
-	import type { Food } from '$lib/database/food'
+	import { type Food, FoodService } from '$lib/database/food'
 
 	export let item: Food
+	let amount: string = item.amount.toString()
+	let per100: string = item.per100?.toString() ?? ''
+
+	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		if (event.key == 'Enter') {
+			item.amount = parseInt(amount.trim())
+			item.per100 = parseInt(per100.trim())
+			const [newItem, err] = await FoodService.Update(item)
+			amount = amount.trim()
+			per100 = per100.trim()
+
+			if (newItem && !err) {
+				item = newItem
+			}
+		}
+	}
 </script>
 
 <template>
@@ -16,11 +32,15 @@
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
 			{item.description}
 		</td>
-		<td class="px-6 py-4">
-			{item.amount}
+		<td class="px-6 py-4"
+		    contenteditable="true"
+		    bind:innerText={amount}
+		    on:keyup={update}>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
-			{item.per100}
+		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		    contenteditable="true"
+		    bind:innerText={per100}
+		    on:keyup={update}>
 		</td>
 		<td class="px-6 py-4">
 			{item.energy}

src/lib/components/Food/FoodTable.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import EmptyFoodComp from '$components/EmptyFoodComp.svelte'
+	import EmptyFoodComp from '$components/Food/EmptyFoodComp.svelte'
 	import FoodComp from '$components/Food/FoodComp.svelte'
 	import type { Food } from '$lib/database/food'
 
-	export let create: boolean = false
 	export let items: Food[] = []
 </script>
 
@@ -34,9 +33,7 @@
 				</tr>
 				</thead>
 				<tbody>
-				{#if create}
-					<EmptyFoodComp />
-				{/if}
+				<EmptyFoodComp />
 				{#each items as f}
 					<FoodComp item="{f}" />
 				{/each}

src/lib/database/food.ts

@@ -77,6 +77,19 @@ limit 1
 	async GetYearly(): Promise<[AggregatedFood[], Err]> {
 		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from yearly limit 100`)
 		return [rows, null]
+	},
+	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])
+		const res = await db.select<Food[]>(`select ${columns.join(', ')} from food where rowid = $1`, [food.rowid])
+		if (!res) return [food, 'no data found']
+		if (res.length == 0) return [food, 'no data found']
+		if (!res[0]) return [food, 'no data found']
+		return [res[0], null]
 	}
 }
 

src/lib/router/routes/Home.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <template>
-	<FoodTable create="true" items="{$foodStore}" />
+	<FoodTable items="{$foodStore}" />
 </template>