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" }