Allow inline editing of expenses

Reviewed-on: #94

app/ui/components/form/inlineTextField.tsx

@@ -0,0 +1,34 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import React, { useState } from 'react';
+
+export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState(initialValue);
+
+    const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>
+
+    const onConfirm = () => {
+        onChange(value);
+        setEditing(false);
+    }
+
+    function renderForm() {
+        return (
+            <div className="flex flex-row">
+                <input
+                    type="text"
+                    value={value}
+                    className="px-2 py-0 h-5 max-w-48"
+                    onChange={(e) => setValue(e.target.value)}
+                    onBlur={onConfirm}
+                    autoFocus
+                />
+            </div>
+        )
+    }
+
+    return (
+        editing ? (renderForm()) : (renderText())
+    );
+}

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}

app/ui/guests/table.tsx

@@ -8,6 +8,7 @@ import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
 import {classNames} from '@/app/ui/components/button';
 import TableOfContents from '../components/table-of-contents';
+import InlineTextField from '../components/form/inlineTextField';
 
 export default function guestsTable() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -34,6 +35,19 @@ export default function guestsTable() {
   const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
   const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
 
+  const handleGuestUpdate = (guest:Guest) => {
+    fetch(`/api/guests/${guest.id}`,
+    {
+      method: 'PUT',
+      body: JSON.stringify({ guest: { name: guest.name } }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+    .catch((error) => console.error(error));
+  }
+
   const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
     fetch("/api/guests/bulk_update.json",
       {
@@ -57,9 +71,9 @@ export default function guestsTable() {
       elements={guests}
       rowRender={(guest) => (
         <tr key={guest.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">
+          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            {guest.name}
+            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName ; handleGuestUpdate(guest) }} />
-          </th>
+          </td>
           <td className="px-6 py-4">
             {guest.group_name}
           </td>

package.json

@@ -32,5 +32,6 @@
   },
   "engines": {
     "node": ">=23.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }