Allow inline editing of guest name

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/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">
-            {guest.name}
-          </th>
+          <td 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) }} />
+          </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"
 }