WIP define UI for invitations

.nvmrc

@@ -1 +1 @@
-23.11.1
+23.6.1

app/[slug]/dashboard/guests/page.tsx

@@ -14,15 +14,10 @@ import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
-import { Toast } from 'primereact/toast';
-import { Suspense, useRef, useState } from 'react';
-import InvitationsBoard from '@/app/ui/invitations/board';
-import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
+import { Suspense, useState } from 'react';
 
 
 export default function Page() {
-  const toast = useRef<Toast>(null);
-  
   function refreshGuests() {
     new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
       setGuests(objects);
@@ -37,13 +32,6 @@ export default function Page() {
     });
   }
 
-  function refreshInvitations() {
-    new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
-      setInvitations(objects);
-      setInvitationsLoaded(true);
-    });
-  }
-
   function resetAffinities() {
     fetch(`/api/${getSlug()}/groups/affinities/reset`, {
       method: 'POST',
@@ -52,24 +40,6 @@ export default function Page() {
         'X-CSRF-TOKEN': getCsrfToken(),
       }
     })
-    .then(response => {
-      if (response.ok) {
-      showAffinitiesResetSuccess();
-      } else {
-      console.error('Failed to reset affinities');
-      }
-    })
-    .catch(error => {
-      console.error('Error resetting affinities:', error);
-    });
-  }
-
-  function showAffinitiesResetSuccess() {
-    toast.current?.show({
-      severity: 'success',
-      summary: 'Affinities reset',
-      detail: 'All affinities have been reset to default values.'
-    });
   }
 
   const [groupsLoaded, setGroupsLoaded] = useState(false);
@@ -82,13 +52,8 @@ export default function Page() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
   const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
 
-  const [invitationsLoaded, setInvitationsLoaded] = useState(false);
-  const [invitations, setInvitations] = useState<Array<Invitation>>([]);
-  const [invitationBeingEdited, setInvitationBeingEdited] = useState<Invitation | undefined>(undefined);
-
   !groupsLoaded && refreshGroups();
   !guestsLoaded && refreshGuests();
-  !invitationsLoaded && refreshInvitations();
 
   return (
     <div className="w-full">
@@ -117,7 +82,6 @@ export default function Page() {
           <div className="flex flex-col w-full items-center justify-between">
 
             <div>
-              <Toast ref={toast} />
               <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
               <button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
             </div>
@@ -148,9 +112,6 @@ export default function Page() {
             </Suspense>
           </div>
         </ TabPanel>
-        <TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
-          <InvitationsBoard guests={guests} invitations={invitations}/>
-        </TabPanel>
       </ TabView>
     </div>
 

app/[slug]/dashboard/tables/page.tsx

@@ -2,41 +2,15 @@
 
 'use client';
 
-import { AbstractApi } from '@/app/api/abstract-api';
-import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
 import Arrangement from '@/app/ui/arrangements/arrangement';
+import React, { useState } from 'react';
 import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
-import { classNames } from '@/app/ui/components/button';
-import { Toast } from 'primereact/toast';
-import React, { useRef, useState } from 'react';
 
 export default function Page() {
-  const toast = useRef<Toast>(null);
-
-  const show = () => {
-    toast.current?.show({
-      severity: 'success',
-      summary: 'Simulation created',
-      detail: 'Table distributions will be calculated shortly, please come back in some minutes'
-    });
-  };
-
   const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
 
-  function createSimulation() {
-    const api = new AbstractApi<TableSimulation>();
-    const serializer = new TableSimulationSerializer();
-    api.create(serializer, new TableSimulation(), show);
-  }
-
   return (
     <>
-
-      <div className="flex flex-col w-full items-center justify-between">
-        <Toast ref={toast} />
-        <button onClick={createSimulation} className={classNames('primary')}>Add new</button>
-      </div>
-
       <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
       {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
     </>

app/api/abstract-api.tsx

@@ -4,7 +4,7 @@ import { Entity } from '@/app/lib/definitions';
 import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export interface Api<T extends Entity> {
-  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
+  getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
   get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
   create(serializable: Serializable<T>, object: T, callback: () => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
@@ -52,7 +52,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       .catch((error) => console.error(error));
   }
 
-  create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
+  create(serializable: Serializable<T>, object: T, callback: () => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
       method: 'POST',
       body: serializable.toJson(object),
@@ -60,11 +60,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
       }
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        callback(serializable.fromJson(data));
-      })
+    }).then(callback)
       .catch((error) => console.error(error));
   }
 

app/api/tableSimulations.tsx

@@ -12,7 +12,6 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
           id: record.id,
           name: record.name,
           discomfort: record.discomfort,
-          valid: record.valid,
         });
       }));
     }, (error) => {

app/lib/definitions.ts

@@ -12,8 +12,7 @@ export type TableArrangement = {
   number: number;
   name: string;
   guests?: Guest[];
-  discomfort?: number;
-  valid?: boolean;
+  discomfort?: number
 }
 
 export type User = {

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/lib/invitation.tsx

@@ -1,28 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import { Entity } from "./definitions";
-import { Guest } from "./guest";
-
-export class Invitation implements Entity {
-  id?: string;
-  guests: Array<Guest>;
-
-  constructor(id?: string, guests: Array<Guest> = []) {
-    this.id = id;
-    this.guests = guests;
-  }
-}
-
-export class InvitationSerializer {
-  fromJson(data: any): Invitation {
-    return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
-  }
-
-  toJson(invitation: Invitation): string {
-    return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
-  }
-
-  apiPath(): string {
-    return 'invitations';
-  }
-}

app/lib/tableSimulation.tsx

@@ -19,12 +19,12 @@ export type Table = {
 }
 
 export class TableSimulation implements Entity {
-  id?: string;
+  id: string;
   tables: Table[];
 
-  constructor(id?: string, tables?: Table[]) {
+  constructor(id: string, tables: Table[]) {
     this.id = id;
-    this.tables = tables || [];
+    this.tables = tables;
   }
 }
 

app/ui/arrangements/arrangements-table.tsx

@@ -7,11 +7,8 @@ import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
 import TableOfContents from "../components/table-of-contents";
 import { loadTableSimulations } from "@/app/api/tableSimulations";
-import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
-import { Tooltip } from "primereact/tooltip";
-import clsx from "clsx";
 
-export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
+export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
     const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
     const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
 
@@ -28,17 +25,14 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
   
     !arrangementsLoaded && refreshSimulations();
 
-  return (
+    return(
       <TableOfContents
-      headers={['Name', 'Discomfort', 'Actions', 'Status']}
+        headers={['Name', 'Discomfort', 'Actions']}
         caption='Simulations'
         elements={arrangements}
         rowRender={(arrangement) => (
-        <tr key={arrangement.id} className={clsx("border-b", {
-          "bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
-          "bg-red-50 odd:bg-red-50 even:bg-red-100": !arrangement.valid
-        })}>
-          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+          <tr key={arrangement.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">
               {arrangement.name}
             </th>
             <td className="px-6 py-4">
@@ -47,15 +41,6 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
             <td>
                 <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
             </td>
-          <td>
-            <Tooltip target=".tooltip-status" />
-
-            {
-              arrangement.valid ?
-                <CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
-                <ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
-            }
-          </td>
           </tr>
         )}
       />

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 { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
+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">
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        <tr key={guest.id} className={clsx("bg-white odd:bg-white even:bg-gray-50 border-b", {
+          "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>

app/ui/invitations/board.tsx

@@ -1,187 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { AbstractApi } from "@/app/api/abstract-api";
-import { Guest } from "@/app/lib/guest";
-import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { useEffect, useRef } from "react";
-import { useState } from "react";
-
-function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
-  invitation: Invitation,
-  allGuests: Guest[],
-  onGuestAdded: (guest: Guest) => void,
-  onDestroy: (invitation: Invitation) => void
-}
-) {
-  const [guests, setGuests] = useState<Guest[]>(invitation.guests);
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const api = new AbstractApi<Invitation>();
-  const serializer = new InvitationSerializer();
-
-  useEffect(() => {
-    if (ref.current) {
-      return dropTargetForElements({
-        element: ref.current,
-        onDrop: (data) => {
-          const guestId = data.source.element.dataset.guestId;
-          if (guestId) {
-            const guestToAdd = allGuests.find((guest) => guest.id === guestId);
-            if (guestToAdd) {
-              setGuests((prevGuests) => [...prevGuests, guestToAdd]);
-              invitation.guests.push(guestToAdd);
-
-              api.update(serializer, invitation, () => {
-                onGuestAdded(guestToAdd);
-              });
-            }
-          }
-        },
-      });
-    }
-  }, []);
-
-  return (
-    <div
-      key={invitation.id}
-      ref={ref}
-      className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
-      style={{ aspectRatio: "1.618 / 1" }}
-    >
-      <TrashIcon
-        className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
-        onClick={() => {
-          if (window.confirm("Are you sure you want to delete this invitation?")) {
-            api.destroy(serializer, invitation, () => {
-              onDestroy(invitation);
-            });
-          }
-        }}
-      />
-
-      {guests.length === 0 ? (
-        <p className="text-center text-yellow-500 text-lg italic">
-          (empty invitation)
-        </p>
-      ) : (
-        <ul className="text-center text-yellow-500 text-lg">
-          {guests.map((guest) => (
-            <li key={guest.id}>{guest.name}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-function GuestCard(guest: Guest) {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      return draggable({
-        element: ref.current,
-      });
-    }
-  }, [guest.id]);
-
-  return (
-    <div
-      key={guest.id}
-      ref={ref}
-      className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-      draggable="true"
-      data-guest-id={guest.id}>
-      <h3 className="text-md font-medium">{guest.name}</h3>
-    </div>
-  )
-}
-
-export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
-  guests: Array<Guest>,
-  invitations: Array<Invitation>
-}) {
-  const api = new AbstractApi<Invitation>();
-  const serializer = new InvitationSerializer();
-
-  const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
-  const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
-    guests.filter(
-      (guest) =>
-        guest.status !== 'considered' &&
-        !invitations.some((invitation) =>
-          invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
-        )
-    )
-  );
-
-
-  // Sort invitations to display those without guests at the top
-  const sortedInvitations = [...invitations].sort((a, b) => {
-    if (a.guests.length === 0 && b.guests.length > 0) return -1;
-    if (a.guests.length > 0 && b.guests.length === 0) return 1;
-    return 0;
-  });
-
-  function handleCreateInvitation() {
-    api.create(serializer, new Invitation(), (createdInvitation) => {
-      setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
-    });
-  }
-
-  return (
-    <div className="flex h-screen">
-      {/* Left Column: Guests */}
-      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
-        <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
-        <div>
-          {unassignedGuests.map((guest) => (
-            <GuestCard key={guest.id} {...guest} />
-          ))}
-        </div>
-      </div>
-
-      {/* Right Column: Invitations */}
-      <div className="w-3/4 h-full overflow-auto p-4">
-        <h2 className="text-lg font-semibold mb-4">
-          {invitations.length} invitations
-        </h2>
-
-        <button
-          onClick={handleCreateInvitation}
-          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-        >
-          Create New Invitation
-        </button>
-
-
-        <div className="grid grid-cols-4 gap-6">
-
-          {sortedInvitations.map((invitation) => (
-            <InvitationCard
-              key={invitation.id}
-              invitation={invitation}
-              allGuests={guests}
-              onGuestAdded={(guestAdded: Guest) => {
-                setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
-              }}
-              onDestroy={(invitationToDestroy: Invitation) => {
-                setInvitations((prevInvitations) => prevInvitations.filter(i => i.id !== invitationToDestroy.id));
-                setUnassignedGuests((prevUnassignedGuests) => [
-                  ...prevUnassignedGuests,
-                  ...invitationToDestroy.guests
-                ]);
-              }}
-            />
-          ))}
-        </div>
-
-      </div>
-    </div>
-  );
-}

package.json

@@ -6,34 +6,33 @@
     "start": "next start"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
-    "autoprefixer": "10.4.21",
+    "autoprefixer": "10.4.20",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
-    "next": "15.3.3",
-    "next-auth": "5.0.0-beta.28",
-    "postcss": "8.5.4",
+    "next": "15.1.6",
+    "next-auth": "5.0.0-beta.25",
+    "postcss": "8.5.1",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
     "tailwindcss": "3.4.17",
-    "typescript": "5.8.3",
+    "typescript": "5.7.3",
     "use-debounce": "^10.0.1",
-    "uuid": "11.1.0",
+    "uuid": "11.0.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "22.15.29",
-    "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.7"
+    "@types/node": "22.10.10",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }