diff --git a/app/ui/components/form/inlineTextField.tsx b/app/ui/components/form/inlineTextField.tsx
new file mode 100644
index 0000000..fad7f57
--- /dev/null
+++ b/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 = () => setEditing(true)}>{value}
+
+ const onConfirm = () => {
+ onChange(value);
+ setEditing(false);
+ }
+
+ function renderForm() {
+ return (
+
+ setValue(e.target.value)}
+ onBlur={onConfirm}
+ autoFocus
+ />
+
+ )
+ }
+
+ return (
+ editing ? (renderForm()) : (renderText())
+ );
+}
\ No newline at end of file
diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 3504089..6e8d5ad 100644
--- a/app/ui/guests/table.tsx
+++ b/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>([]);
@@ -34,6 +35,19 @@ export default function guestsTable() {
const handleDeclineGuest = (e: React.MouseEvent) => handleGuestChange(e, 'declined');
const handleTentativeGuest = (e: React.MouseEvent) => 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, status:string) => {
fetch("/api/guests/bulk_update.json",
{
@@ -57,9 +71,9 @@ export default function guestsTable() {
elements={guests}
rowRender={(guest) => (
-
- {guest.name}
- |
+
+ { guest.name = newName ; handleGuestUpdate(guest) }} />
+ |
{guest.group_name}
|
diff --git a/package.json b/package.json
index 312b193..8d9b337 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,6 @@
},
"engines": {
"node": ">=23.0.0"
- }
+ },
+ "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
}