74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { AbstractApi } from "@/app/api/abstract-api";
|
|
import { Guest } from "@/app/lib/guest";
|
|
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
|
|
|
export default function InvitationsBoard({ guests, invitations }: {
|
|
guests: Array<Guest>,
|
|
invitations: Array<Invitation>
|
|
}) {
|
|
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)
|
|
)
|
|
);
|
|
|
|
function handleCreateInvitation() {
|
|
api.create(serializer, new Invitation(), () => {
|
|
console.log("Invitation created successfully");
|
|
});
|
|
}
|
|
|
|
return (
|
|
<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</h2>
|
|
<ul>
|
|
{availableGuests.map((guest, index) => (
|
|
<li
|
|
key={index}
|
|
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
|
|
draggable="true"
|
|
>
|
|
<h3 className="text-md font-medium">{guest.name}</h3>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Right Column: Invitations */}
|
|
<div className="w-3/4 h-full overflow-auto p-4">
|
|
<h2 className="text-lg font-semibold mb-4">Invitations</h2>
|
|
|
|
<button
|
|
onClick={handleCreateInvitation}
|
|
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-3 gap-4">
|
|
{invitations.map((invitation, index) => (
|
|
<div
|
|
key={invitation.id}
|
|
className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
|
|
>
|
|
<ul className="text-center text-yellow-500 font-cursive text-lg">
|
|
{invitation.guests.map((guest) => (
|
|
<li key={guest.id}>{guest.name}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|