68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client';
|
|
|
|
import { destroyGuest, updateGuest } from '@/app/api/guests';
|
|
import { Guest, GuestStatus } from '@/app/lib/definitions';
|
|
import { classNames } from '@/app/ui/components/button';
|
|
import clsx from 'clsx';
|
|
import InlineTextField from '../components/form/inlineTextField';
|
|
import TableOfContents from '../components/table-of-contents';
|
|
import { TrashIcon } from '@heroicons/react/24/outline';
|
|
|
|
export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onUpdate: () => void }) {
|
|
const handleGuestChange = (guest: Guest, status: GuestStatus) => {
|
|
guest.status = status;
|
|
updateGuest(guest).then(() => onUpdate());
|
|
}
|
|
|
|
return (
|
|
<TableOfContents
|
|
headers={['Name', 'Group', 'Status', 'Actions']}
|
|
caption='Guests'
|
|
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">
|
|
<InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; updateGuest(guest) }} />
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{guest.group_name}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="flex items-center text-sm dark:text-white me-3">
|
|
<span className={clsx(
|
|
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
|
|
{
|
|
'bg-gray-400': guest.status === 'considered',
|
|
'bg-blue-400': guest.status === 'invited',
|
|
'bg-green-600': guest.status === 'confirmed',
|
|
'bg-red-400': guest.status === 'declined',
|
|
'bg-yellow-400': guest.status === 'tentative',
|
|
}
|
|
)}>
|
|
</span>
|
|
{guest.status}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-row items-center">
|
|
{guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
|
|
Invite
|
|
</button>)}
|
|
{(guest.status === 'invited' || guest.status === 'tentative') && (
|
|
<>
|
|
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
|
|
{guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
|
|
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
|
|
</>
|
|
)}
|
|
<TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
/>
|
|
);
|
|
}
|