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

Allow deleting an invitation

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

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

@ -4,11 +4,17 @@ import { AbstractApi } from "@/app/api/abstract-api";
import { Guest } from "@/app/lib/guest"; import { Guest } from "@/app/lib/guest";
import { Invitation, InvitationSerializer } from "@/app/lib/invitation"; import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { TrashIcon } from "@heroicons/react/24/outline";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useState } from "react"; import { useState } from "react";
function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) { 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 [guests, setGuests] = useState<Guest[]>(invitation.guests);
const ref = useRef<HTMLDivElement | null>(null); const ref = useRef<HTMLDivElement | null>(null);
@ -42,9 +48,18 @@ function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: I
<div <div
key={invitation.id} key={invitation.id}
ref={ref} ref={ref}
className="flex items-center justify-center w-full bg-green-800 border border-green-900" className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
style={{ aspectRatio: "1.618 / 1" }} 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={() => {
api.destroy(serializer, invitation, () => {
onDestroy(invitation);
});
}}
/>
{guests.length === 0 ? ( {guests.length === 0 ? (
<p className="text-center text-yellow-500 text-lg italic"> <p className="text-center text-yellow-500 text-lg italic">
(empty invitation) (empty invitation)
@ -149,6 +164,13 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
onGuestAdded={(guestAdded: Guest) => { onGuestAdded={(guestAdded: Guest) => {
setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id)); 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>