wedding-planner-frontend/app/ui/guests/table.tsx

/* 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>
      )}
    />
  );
}