From 01ab0e223f099c5d3254c6924693f076b4f1b94a Mon Sep 17 00:00:00 2001
From: qowevisa <qowevisa@gmail.com>
Date: Wed, 20 Nov 2024 21:01:14 +0200
Subject: [PATCH] Update Card interface to get and send new fields and add
 select for currency to cards

---
 src/lib/entities.ts          |  2 ++
 src/routes/card/+page.svelte | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/lib/entities.ts b/src/lib/entities.ts
index 5c17b3a..ac0a3ce 100644
--- a/src/lib/entities.ts
+++ b/src/lib/entities.ts
@@ -18,6 +18,8 @@ export interface Card {
   have_credit_line: boolean;
   id: number;
   name: string;
+  last_digits: string;
+  currency_id: number;
 }
 
 export interface Category {
diff --git a/src/routes/card/+page.svelte b/src/routes/card/+page.svelte
index 20e4c3a..7560da8 100644
--- a/src/routes/card/+page.svelte
+++ b/src/routes/card/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { type Card } from "$lib/entities";
+  import { type Card, type Currency } from "$lib/entities";
   import { NumberToFPA } from "$lib/util/fpa";
 
   let cards: Card[] = $state([]);
+  let currencies: Currency[] = $state([]);
   let error: string | null = $state(null);
   let editingCard: Card | null = $state(null);
   let newCard: Partial<Card> = $state({
@@ -16,6 +17,7 @@
   // Fetch all cards on page load
   onMount(async () => {
     await fetchCards();
+    await fetchCurrencies();
   });
 
   async function fetchCards() {
@@ -27,6 +29,15 @@
       cards = await result.json();
     }
   }
+  async function fetchCurrencies() {
+    const result = await fetch("/api/currency/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      currencies = await result.json();
+    }
+  }
 
   async function saveCard() {
     const endpoint = editingCard ? `/api/card/update` : "/api/card/create";
@@ -134,6 +145,28 @@
           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"
         />
       </label>
+      <label class="block">
+        <span class="text-gray-700">Currency:</span>
+        <select
+          bind:value={currentCard.currency_id}
+          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 currencies as currency}
+            <option value={currency.id}
+              >{`${currency.symbol} (${currency.iso_name})`}</option
+            >
+          {/each}
+        </select>
+      </label>
+      <label class="block">
+        <span class="text-gray-700">Last 4 digits:</span>
+        <input
+          type="text"
+          bind:value={currentCard.last_digits}
+          required
+          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"
+        />
+      </label>
       <label class="flex items-center">
         <input
           type="checkbox"