qowevisa/fin-check-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI for expense page

Browse Source
This commit is contained in:
qowevisa 2024-11-24 11:35:55 +02:00
parent 253b7ce60b
commit 377c928372
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/expense/+page.svelte
View File

@ -20,7 +20,7 @@
onMount(async () => { onMount(async () => {
await fetchCategories(); await fetchCategories();
await fetchCards(); await fetchCards(true);
await fetchTypes(); await fetchTypes();
}); });
@ -33,8 +33,12 @@
types = await result.json(); types = await result.json();
} }
} }
async function fetchCards() { async function fetchCards(preloadCurrencies = false) {
const result = await fetch("/api/card/all"); const queryParams = new URLSearchParams({
preload_currencies: preloadCurrencies.toString(),
});
const result = await fetch(`/api/card/all?${queryParams}`);
if (!result.ok) { if (!result.ok) {
const obj = await result.json(); const obj = await result.json();
error = obj.message; error = obj.message;
@ -169,7 +173,7 @@
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
> >
{#each cards as card} {#each cards as card}
<option value={card.id}>{card.name}</option> <option value={card.id}>{card.display_name}</option>
{/each} {/each}
</select> </select>
</label> </label>
@ -255,13 +259,10 @@
class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center" class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
> >
<div> <div>
<strong class="block text-lg">{NumberToFPA(expense.value)}</strong> <strong class="block text-lg">{expense.show_value}</strong>
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600">
<span class="font-bold">Card:</span> <span class="font-bold">Card:</span>
{getCardName(expense.card_id)} {expense.card.display_name}
<span class="text-sm"
>{`•${cards.find((card) => card.id == expense.card_id)?.last_digits}`}</span
>
<span class="font-bold">Type:</span> <span class="font-bold">Type:</span>
<span style="color: {getTypeColor(expense.type_id)};" <span style="color: {getTypeColor(expense.type_id)};"
>{getTypeName(expense.type_id)}</span >{getTypeName(expense.type_id)}</span