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

Add a feature to handle invitations #261

Merged
bustikiller merged 15 commits from feat/invitations into main 2025-06-01 18:09:41 +00:00
Conversation 0 Commits 15 Files Changed 6 +47 -34
1 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ecc2550146 - Show all commits

17
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");
@ -56,17 +63,23 @@ export default function InvitationsBoard({ guests, invitations }: {
</button> </button>
<div className="grid grid-cols-4 gap-6"> <div className="grid grid-cols-4 gap-6">
{invitations.map((invitation, index) => ( {sortedInvitations.map((invitation, index) => (
<div <div
key={invitation.id} key={invitation.id}
className="flex items-center justify-center w-full bg-green-800 border border-green-900" className="flex items-center justify-center w-full bg-green-800 border border-green-900"
style={{ aspectRatio: "1.618 / 1" }} style={{ aspectRatio: "1.618 / 1" }}
> >
<ul className="text-center text-yellow-500 font-cursive text-lg"> {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) => ( {invitation.guests.map((guest) => (
<li key={guest.id}>{guest.name}</li> <li key={guest.id}>{guest.name}</li>
))} ))}
</ul> </ul>
)}
</div> </div>
))} ))}
</div> </div>