diff --git a/src/routes/expense/+page.svelte b/src/routes/expense/+page.svelte index fe47810..46e1f3a 100644 --- a/src/routes/expense/+page.svelte +++ b/src/routes/expense/+page.svelte @@ -2,6 +2,7 @@ import { onMount } from "svelte"; import { type Card, type Expense, type Type } from "$lib/entities"; import { selectedDate } from "$lib/stores/dateStore"; + import { NumberToFPA } from "$lib/util/fpa"; let mutateDate = $state($selectedDate); let selectedTime = $state("00:00:00"); @@ -92,6 +93,9 @@ const parts = expense.date.split("T"); mutateDate = parts[0]; selectedTime = parts[1].split("Z")[0]; + if (valueRef) { + valueRef.value = NumberToFPA(expense.value); + } } async function deleteExpense(id: number) { @@ -125,6 +129,16 @@ return type ? type.name : "Unknown"; } + let valueRef: HTMLInputElement | null = $state(null); + function handleValueInput( + event: Event & { currentTarget: EventTarget & HTMLInputElement }, + ): void { + const target = event.target as HTMLInputElement; + const rawValue = target.value.replace(/[^0-9]/g, ""); + currentExpense.value = parseInt(rawValue || "0"); + target.value = NumberToFPA(currentExpense.value); + } + const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`); const currentExpense = $derived(editingExpense ?? newExpense); const selectedType = $derived( @@ -152,7 +166,8 @@ Value: @@ -230,7 +245,7 @@ class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center" >