Merge branch 'main' into use-baked-playwright-image

Reviewed-on: #259

.nvmrc

@@ -1 +1 @@
-23.11.0
+23.11.1

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

@@ -14,10 +14,15 @@ 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 { Suspense, useState } from 'react';
+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';
 
 
 export default function Page() {
+  const toast = useRef<Toast>(null);
+  
   function refreshGuests() {
     new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
       setGuests(objects);
@@ -32,6 +37,13 @@ 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',
@@ -40,6 +52,24 @@ 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);
@@ -52,8 +82,13 @@ 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">
@@ -82,6 +117,7 @@ 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>
@@ -112,6 +148,9 @@ 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/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: () => void): void {
+  create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
       method: 'POST',
       body: serializable.toJson(object),
@@ -60,7 +60,11 @@ export class AbstractApi<T extends Entity> implements Api<T> {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
       }
-    }).then(callback)
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      })
       .catch((error) => console.error(error));
   }
 

app/lib/invitation.tsx

@@ -0,0 +1,28 @@
+/* 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/ui/invitations/board.tsx

@@ -0,0 +1,187 @@
+/* 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,14 +6,15 @@
     "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",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
-    "next": "15.3.1",
+    "next": "15.3.3",
-    "next-auth": "5.0.0-beta.27",
+    "next-auth": "5.0.0-beta.28",
-    "postcss": "8.5.3",
+    "postcss": "8.5.4",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
@@ -27,12 +28,12 @@
   "devDependencies": {
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "22.15.2",
+    "@types/node": "22.15.29",
-    "@types/react": "18.3.20",
+    "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.6"
+    "@types/react-dom": "18.3.7"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@10.9.0+sha512.0486e394640d3c1fb3c9d43d49cf92879ff74f8516959c235308f5a8f62e2e19528a65cdc2a3058f587cde71eba3d5b56327c8c33a97e4c4051ca48a10ca2d5f"
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }