Allow inline editing of guest name

Reviewed-on: #92

app/dashboard/expenses/page.tsx

@@ -1,7 +1,7 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { lusitana } from '@/app/ui/fonts';
-import ExpenseSummary from '@/app/ui/expenses/summary';
+import ExpensesTable from '@/app/ui/expenses/table';
  
 export default  function Page () {
   return (
@@ -9,7 +9,7 @@ export default  function Page () {
       <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
         <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-        <ExpenseSummary />
+        <ExpensesTable />
       </div>
     </div>
   );

app/dashboard/page.tsx

@@ -1,5 +1,9 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+import GlobalSummary from '@/app/ui/dashboard/global-summary';
+
 export default function Page() {
-  return <p>Dashboard Page</p>;
+  return(
+    <GlobalSummary />
+  );
 }

app/lib/definitions.ts

@@ -26,6 +26,13 @@ export type Guest = {
   status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
+export type Expense = {
+  id: string;
+  name: string;
+  amount: number;
+  pricingType: 'fixed' | 'per person';
+};
+
 export type TableArrangement = {
   id: string;
   number: number;

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/dashboard/global-summary.tsx

@@ -2,7 +2,7 @@
 
 import { MainCard, SecondaryCard } from '../components/dashboard-cards';
 
-export default async function ExpenseSummary() {
+export default async function GlobalSummary() {
     return (
         <div className="my-4">
 

app/ui/expenses/table.tsx

@@ -0,0 +1,51 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client'
+
+import React, { useState } from "react"
+import { Expense } from '@/app/lib/definitions';
+import TableOfContents from "../components/table-of-contents";
+
+export default function ExpensesTable() {
+    const [expenses, setExpenses] = useState<Array<Expense>>([]);
+
+    function loadExpenses() {
+        fetch("/api/expenses")
+            .then((response) => response.json())
+            .then((data) => {
+                setExpenses(data.map((record: any) => {
+                    return ({
+                        id: record.id,
+                        name: record.name,
+                        amount: record.amount,
+                        pricingType: record.pricing_type
+                    });
+                }));
+            }, (error) => {
+                return [];
+            });
+    }
+
+    expenses.length === 0 && loadExpenses();
+
+    return (
+        <TableOfContents
+            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}
+                    </th>
+                    <td className="px-6 py-4">
+                        {expense.amount}€
+                    </td>
+                    <td>
+                        {expense.pricingType}
+                    </td>
+                </tr>
+            )}
+        />
+    );
+}

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

@@ -13,7 +13,7 @@
     "clsx": "^2.1.1",
     "next": "15.0.3",
     "next-auth": "5.0.0-beta.25",
-    "postcss": "8.4.47",
+    "postcss": "8.4.48",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
@@ -32,5 +32,6 @@
   },
   "engines": {
     "node": ">=23.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 0.5.9(tailwindcss@3.4.14)
       autoprefixer:
         specifier: 10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        version: 10.4.20(postcss@8.4.48)
       bcrypt:
         specifier: ^5.1.1
         version: 5.1.1
@@ -30,8 +30,8 @@ importers:
         specifier: 5.0.0-beta.25
         version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       postcss:
-        specifier: 8.4.47
-        version: 8.4.47
+        specifier: 8.4.48
+        version: 8.4.48
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -827,6 +827,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -890,8 +893,8 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+  postcss@8.4.48:
+    resolution: {integrity: sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==}
     engines: {node: ^10 || ^12 || >=14}
 
   preact-render-to-string@5.2.3:
@@ -1415,14 +1418,14 @@ snapshots:
 
   arg@5.0.2: {}
 
-  autoprefixer@10.4.20(postcss@8.4.47):
+  autoprefixer@10.4.20(postcss@8.4.48):
     dependencies:
       browserslist: 4.23.3
       caniuse-lite: 1.0.30001651
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.1
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-value-parser: 4.2.0
 
   balanced-match@1.0.2: {}
@@ -1815,6 +1818,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pify@2.3.0: {}
@@ -1829,28 +1834,28 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  postcss-import@15.1.0(postcss@8.4.47):
+  postcss-import@15.1.0(postcss@8.4.48):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.47):
+  postcss-js@4.0.1(postcss@8.4.48):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.47
+      postcss: 8.4.48
 
-  postcss-load-config@4.0.2(postcss@8.4.47):
+  postcss-load-config@4.0.2(postcss@8.4.48):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
 
-  postcss-nested@6.0.1(postcss@8.4.47):
+  postcss-nested@6.0.1(postcss@8.4.48):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-selector-parser: 6.1.0
 
   postcss-selector-parser@6.1.0:
@@ -1866,10 +1871,10 @@ snapshots:
       picocolors: 1.1.0
       source-map-js: 1.2.1
 
-  postcss@8.4.47:
+  postcss@8.4.48:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   preact-render-to-string@5.2.3(preact@10.11.3):
@@ -2066,11 +2071,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.0
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
-      postcss-nested: 6.0.1(postcss@8.4.47)
+      postcss: 8.4.48
+      postcss-import: 15.1.0(postcss@8.4.48)
+      postcss-js: 4.0.1(postcss@8.4.48)
+      postcss-load-config: 4.0.2(postcss@8.4.48)
+      postcss-nested: 6.0.1(postcss@8.4.48)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -2112,7 +2117,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.3
       escalade: 3.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   use-debounce@10.0.4(react@19.0.0-rc-f38c22b244-20240704):
     dependencies: