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

Fix UI assignment of guests to invitations

Browse Source
This commit is contained in:
Manuel Bustillo 2025-06-01 17:07:47 +02:00
parent fb82695174
commit 790d75d2ff
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
import { useEffect, useRef } from "react";
import { useState } from "react";
function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {
const [guests, setGuests] = useState<Guest[]>(invitation.guests);
@ -24,6 +24,7 @@ function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
const guestToAdd = allGuests.find((guest) => guest.id === guestId);
if (guestToAdd) {
setGuests((prevGuests) => [...prevGuests, guestToAdd]);
onGuestAdded(guestToAdd);
}
}
},
@ -84,11 +85,11 @@ export default function InvitationsBoard({ guests, invitations }: {
const api = new AbstractApi<Invitation>();
const serializer = new InvitationSerializer();
// Filter out guests that are already in invitations
const availableGuests = guests.filter(
(guest) => !invitations.some((invitation) =>
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
guests.filter(
(guest) => !invitations.some((invitation) =>
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
)
)
);
@ -109,9 +110,11 @@ export default function InvitationsBoard({ guests, invitations }: {
<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">{guests.length} guests without invitation</h2>
<h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
<div>
{availableGuests.map((guest, index) => GuestCard(guest))}
{unassignedGuests.map((guest) => (
<GuestCard key={guest.id} {...guest} />
))}
</div>
</div>
@ -128,9 +131,22 @@ export default function InvitationsBoard({ guests, invitations }: {
Create New Invitation
</button>
<div className="grid grid-cols-4 gap-6">
{sortedInvitations.map((invitation, index) => (InvitationCard(invitation, guests)))}
{sortedInvitations.map((invitation) => (
<InvitationCard
key={invitation.id}
invitation={invitation}
allGuests={guests}
onGuestAdded={(guestAdded: Guest) => {
console.log(`Guest added: ${guestAdded.name}`);
setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
}}
/>
))}
</div>
</div>
</div>
);