WIP define UI for invitations

app/lib/guest.tsx

@@ -14,8 +14,9 @@ export class Guest implements Entity {
   color?: string;
   status?: GuestStatus;
   children?: Guest[];
+  invitationId?: string;
 
-  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[], invitationId?: string) {
     this.id = id;
     this.name = name;
     this.group_name = group_name;
@@ -23,12 +24,13 @@ export class Guest implements Entity {
     this.color = color;
     this.status = status;
     this.children = children;
+    this.invitationId = invitationId;
   }
 }
 
 export class GuestSerializer implements Serializable<Guest> {
   fromJson(data: any): Guest {
-    return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children);
+    return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children, data.invitation_id);
   }
 
   toJson(guest: Guest): string {

app/ui/guests/table.tsx

@@ -3,9 +3,10 @@
 'use client';
 
 import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest , GuestSerializer} from '@/app/lib/guest';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { EnvelopeIcon, FunnelIcon, PencilIcon, TrashIcon, UserPlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
+import { useState } from 'react';
 import TableOfContents from '../components/table-of-contents';
 
 export default function guestsTable({ guests, onUpdate, onEdit }: {
@@ -16,22 +17,40 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
 
   const api = new AbstractApi<Guest>();
   const serializer = new GuestSerializer();
+  const [invitationId, setInvitationId] = useState<string | undefined>(undefined);
+  const [selecting, setSelecting] = useState<boolean>(false);
+
+  function toggleInvitationId(id: string | undefined) {
+    console.log('toggleInvitationId', id, invitationId);
+
+    if (id === invitationId) {
+      setInvitationId(undefined);
+    } else {
+      setInvitationId(id);
+    }
+
+    console.log('invitationId', invitationId);
+  }
 
   return (
     <TableOfContents
-      headers={['Name', 'Group', 'Status', 'Actions']}
+      headers={['Name', 'Group', 'Status', 'Invitation', '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">
+        <tr key={guest.id} className={clsx("bg-white odd:bg-white even:bg-gray-50 border-b", {
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+          "opacity-25": invitationId && !selecting && guest.invitationId !== invitationId,
+          "hover:bg-emerald-100" : selecting && guest.invitationId !== invitationId && guest.status !== 'considered',
+          "opacity-25 hover:cursor-not-allowed" : selecting && (guest.invitationId === invitationId || guest.status === 'considered')
+        })} >
+          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
             {guest.name}
           </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="flex items-center text-sm me-3">
               <span className={clsx(
                 'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
                 {
@@ -46,10 +65,21 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
               {guest.status}
             </span>
           </td>
+          <td>
+            {
+              guest.invitationId &&
+              <div className="flex">
+                {!selecting && <FunnelIcon className='size-6 cursor-pointer' onClick={() => toggleInvitationId(guest?.invitationId)} />}
+                { invitationId === guest.invitationId && !selecting && <UserPlusIcon className='size-6 cursor-pointer' onClick={() => setSelecting(!selecting)}/>}
+                { selecting && invitationId !== guest.invitationId && <UserPlusIcon className='size-6 cursor-pointer' />}
+              </div>
+            }
+          </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate) }} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
+
             </div>
           </td>
         </tr>