Allow inline editing of expenses

app/ui/components/form/inlineTextField.tsx

@@ -1,34 +0,0 @@
-/* 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/guests/table.tsx

@@ -8,7 +8,6 @@ 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>>([]);
@@ -35,19 +34,6 @@ 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",
       {
@@ -71,9 +57,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">
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName ; handleGuestUpdate(guest) }} />
+            {guest.name}
-          </td>
+          </th>
           <td className="px-6 py-4">
             {guest.group_name}
           </td>

package.json

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