bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Display empty invitations

Browse Source
This commit is contained in:
Manuel Bustillo 2025-06-01 15:35:02 +02:00
parent 16cd9e6175
commit ecc2550146
1 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/ui/invitations/board.tsx
View File

@ -18,6 +18,13 @@ export default function InvitationsBoard({ guests, invitations }: {
) )
); );
// 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() { function handleCreateInvitation() {
api.create(serializer, new Invitation(), () => { api.create(serializer, new Invitation(), () => {
console.log("Invitation created successfully"); console.log("Invitation created successfully");
@ -28,48 +35,54 @@ export default function InvitationsBoard({ guests, invitations }: {
<div className="flex h-screen"> <div className="flex h-screen">
{/* Left Column: Guests */} {/* Left Column: Guests */}
<div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4"> <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
<h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2> <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
<ul> <ul>
{availableGuests.map((guest, index) => ( {availableGuests.map((guest, index) => (
<li <li
key={index} key={index}
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move" className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
draggable="true" draggable="true"
> >
<h3 className="text-md font-medium">{guest.name}</h3> <h3 className="text-md font-medium">{guest.name}</h3>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{/* Right Column: Invitations */} {/* Right Column: Invitations */}
<div className="w-3/4 h-full overflow-auto p-4"> <div className="w-3/4 h-full overflow-auto p-4">
<h2 className="text-lg font-semibold mb-4"> <h2 className="text-lg font-semibold mb-4">
{invitations.length} invitations {invitations.length} invitations
</h2> </h2>
<button <button
onClick={handleCreateInvitation} onClick={handleCreateInvitation}
className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" 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">
{invitations.map((invitation, index) => (
<div
key={invitation.id}
className="flex items-center justify-center w-full bg-green-800 border border-green-900"
style={{ aspectRatio: "1.618 / 1" }}
> >
<ul className="text-center text-yellow-500 font-cursive text-lg"> Create New Invitation
{invitation.guests.map((guest) => ( </button>
<li key={guest.id}>{guest.name}</li>
<div className="grid grid-cols-4 gap-6">
{sortedInvitations.map((invitation, index) => (
<div
key={invitation.id}
className="flex items-center justify-center w-full bg-green-800 border border-green-900"
style={{ aspectRatio: "1.618 / 1" }}
>
{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">
{invitation.guests.map((guest) => (
<li key={guest.id}>{guest.name}</li>
))}
</ul>
)}
</div>
))} ))}
</ul>
</div> </div>
))}
</div>
</div> </div>
</div> </div>
); );