Merge pull request 'Allow inline editing of expenses' (#95) from inline-editing-expenses into main

Reviewed-on: #95

app/ui/expenses/table.tsx

@@ -5,10 +5,31 @@
 import React, { useState } from "react"
 import { Expense } from '@/app/lib/definitions';
 import TableOfContents from "../components/table-of-contents";
+import InlineTextField from "../components/form/inlineTextField";
+import { getCsrfToken } from '@/app/lib/utils';
 
 export default function ExpensesTable() {
     const [expenses, setExpenses] = useState<Array<Expense>>([]);
 
+    const handleExpenseUpdate = (expense: Expense) => {
+        fetch(`/api/expenses/${expense.id}`,
+            {
+                method: 'PUT',
+                body: JSON.stringify({
+                    expense: {
+                        name: expense.name,
+                        amount: expense.amount,
+                        pricing_type: expense.pricingType,
+                    }
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': getCsrfToken(),
+                }
+            })
+            .catch((error) => console.error(error));
+    }
+
     function loadExpenses() {
         fetch("/api/expenses")
             .then((response) => response.json())
@@ -30,16 +51,16 @@ export default function ExpensesTable() {
 
     return (
         <TableOfContents
-            headers={['Name', 'Amount', 'Pricing Type']}
+            headers={['Name', 'Amount (€)', 'Pricing Type']}
             caption='Expenses'
             elements={expenses}
             rowRender={(expense) => (
                 <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
                     <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                        {expense.name}
+                        <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; handleExpenseUpdate(expense) }} />
                     </th>
                     <td className="px-6 py-4">
-                        {expense.amount}€
+                        <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); handleExpenseUpdate(expense) }} />
                     </td>
                     <td>
                         {expense.pricingType}