bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 14 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 { useEffect, useRef } from "react";
import { useState } 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); 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); const guestToAdd = allGuests.find((guest) => guest.id === guestId);
if (guestToAdd) { if (guestToAdd) {
setGuests((prevGuests) => [...prevGuests, guestToAdd]); setGuests((prevGuests) => [...prevGuests, guestToAdd]);
onGuestAdded(guestToAdd);
} }
} }
}, },
@ -84,11 +85,11 @@ export default function InvitationsBoard({ guests, invitations }: {
const api = new AbstractApi<Invitation>(); const api = new AbstractApi<Invitation>();
const serializer = new InvitationSerializer(); const serializer = new InvitationSerializer();
const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
// Filter out guests that are already in invitations guests.filter(
const availableGuests = guests.filter( (guest) => !invitations.some((invitation) =>
(guest) => !invitations.some((invitation) => invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id) )
) )
); );
@ -109,9 +110,11 @@ 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">{unassignedGuests.length} guests without invitation</h2>
<div> <div>
{availableGuests.map((guest, index) => GuestCard(guest))} {unassignedGuests.map((guest) => (
<GuestCard key={guest.id} {...guest} />
))}
</div> </div>
</div> </div>
@ -128,9 +131,22 @@ export default function InvitationsBoard({ guests, invitations }: {
Create New Invitation Create New Invitation
</button> </button>
<div className="grid grid-cols-4 gap-6"> <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> </div>
</div> </div>
); );