Compare commits
1 Commits
4cd2fe32bc
...
f06df1050d
Author | SHA1 | Date | |
---|---|---|---|
![]() |
f06df1050d |
@ -14,15 +14,10 @@ import GroupsTable from '@/app/ui/groups/table';
|
|||||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||||
import GuestsTable from '@/app/ui/guests/table';
|
import GuestsTable from '@/app/ui/guests/table';
|
||||||
import { TabPanel, TabView } from 'primereact/tabview';
|
import { TabPanel, TabView } from 'primereact/tabview';
|
||||||
import { Toast } from 'primereact/toast';
|
import { Suspense, useState } from 'react';
|
||||||
import { Suspense, useRef, useState } from 'react';
|
|
||||||
import InvitationsBoard from '@/app/ui/invitations/board';
|
|
||||||
import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
|
|
||||||
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const toast = useRef<Toast>(null);
|
|
||||||
|
|
||||||
function refreshGuests() {
|
function refreshGuests() {
|
||||||
new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
|
new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
|
||||||
setGuests(objects);
|
setGuests(objects);
|
||||||
@ -37,39 +32,14 @@ export default function Page() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshInvitations() {
|
|
||||||
new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
|
|
||||||
setInvitations(objects);
|
|
||||||
setInvitationsLoaded(true);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetAffinities() {
|
function resetAffinities() {
|
||||||
fetch(`/api/${getSlug()}/groups/affinities/reset`, {
|
fetch(`/api/${getSlug()}/groups/affinities/reset`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json',
|
'Accept': 'application/json',
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
|
||||||
if (response.ok) {
|
|
||||||
showAffinitiesResetSuccess();
|
|
||||||
} else {
|
|
||||||
console.error('Failed to reset affinities');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error resetting affinities:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showAffinitiesResetSuccess() {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'success',
|
|
||||||
summary: 'Affinities reset',
|
|
||||||
detail: 'All affinities have been reset to default values.'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const [groupsLoaded, setGroupsLoaded] = useState(false);
|
const [groupsLoaded, setGroupsLoaded] = useState(false);
|
||||||
@ -82,13 +52,8 @@ export default function Page() {
|
|||||||
const [guests, setGuests] = useState<Array<Guest>>([]);
|
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||||
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
||||||
|
|
||||||
const [invitationsLoaded, setInvitationsLoaded] = useState(false);
|
|
||||||
const [invitations, setInvitations] = useState<Array<Invitation>>([]);
|
|
||||||
const [invitationBeingEdited, setInvitationBeingEdited] = useState<Invitation | undefined>(undefined);
|
|
||||||
|
|
||||||
!groupsLoaded && refreshGroups();
|
!groupsLoaded && refreshGroups();
|
||||||
!guestsLoaded && refreshGuests();
|
!guestsLoaded && refreshGuests();
|
||||||
!invitationsLoaded && refreshInvitations();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
@ -117,7 +82,6 @@ export default function Page() {
|
|||||||
<div className="flex flex-col w-full items-center justify-between">
|
<div className="flex flex-col w-full items-center justify-between">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Toast ref={toast} />
|
|
||||||
<button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
|
<button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||||
<button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
|
<button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
|
||||||
</div>
|
</div>
|
||||||
@ -148,9 +112,6 @@ export default function Page() {
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
</ TabPanel>
|
</ TabPanel>
|
||||||
<TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
|
|
||||||
<InvitationsBoard guests={guests} invitations={invitations}/>
|
|
||||||
</TabPanel>
|
|
||||||
</ TabView>
|
</ TabView>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { Entity } from '@/app/lib/definitions';
|
|||||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||||
|
|
||||||
export interface Api<T extends Entity> {
|
export interface Api<T extends Entity> {
|
||||||
getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
|
getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
|
||||||
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
|
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
|
||||||
create(serializable: Serializable<T>, object: T, callback: () => void): void;
|
create(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||||
update(serializable: Serializable<T>, object: T, callback: () => void): void;
|
update(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||||
@ -52,7 +52,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
|
|||||||
.catch((error) => console.error(error));
|
.catch((error) => console.error(error));
|
||||||
}
|
}
|
||||||
|
|
||||||
create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
|
create(serializable: Serializable<T>, object: T, callback: () => void): void {
|
||||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: serializable.toJson(object),
|
body: serializable.toJson(object),
|
||||||
@ -60,11 +60,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
|
|||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'X-CSRF-TOKEN': getCsrfToken(),
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||||||
}
|
}
|
||||||
})
|
}).then(callback)
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
callback(serializable.fromJson(data));
|
|
||||||
})
|
|
||||||
.catch((error) => console.error(error));
|
.catch((error) => console.error(error));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,28 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
import { Entity } from "./definitions";
|
|
||||||
import { Guest } from "./guest";
|
|
||||||
|
|
||||||
export class Invitation implements Entity {
|
|
||||||
id?: string;
|
|
||||||
guests: Array<Guest>;
|
|
||||||
|
|
||||||
constructor(id?: string, guests: Array<Guest> = []) {
|
|
||||||
this.id = id;
|
|
||||||
this.guests = guests;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class InvitationSerializer {
|
|
||||||
fromJson(data: any): Invitation {
|
|
||||||
return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
|
|
||||||
}
|
|
||||||
|
|
||||||
toJson(invitation: Invitation): string {
|
|
||||||
return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
|
|
||||||
}
|
|
||||||
|
|
||||||
apiPath(): string {
|
|
||||||
return 'invitations';
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,187 +0,0 @@
|
|||||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { AbstractApi } from "@/app/api/abstract-api";
|
|
||||||
import { Guest } from "@/app/lib/guest";
|
|
||||||
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
|
||||||
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
||||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
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 ref = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
const api = new AbstractApi<Invitation>();
|
|
||||||
const serializer = new InvitationSerializer();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (ref.current) {
|
|
||||||
return dropTargetForElements({
|
|
||||||
element: ref.current,
|
|
||||||
onDrop: (data) => {
|
|
||||||
const guestId = data.source.element.dataset.guestId;
|
|
||||||
if (guestId) {
|
|
||||||
const guestToAdd = allGuests.find((guest) => guest.id === guestId);
|
|
||||||
if (guestToAdd) {
|
|
||||||
setGuests((prevGuests) => [...prevGuests, guestToAdd]);
|
|
||||||
invitation.guests.push(guestToAdd);
|
|
||||||
|
|
||||||
api.update(serializer, invitation, () => {
|
|
||||||
onGuestAdded(guestToAdd);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={invitation.id}
|
|
||||||
ref={ref}
|
|
||||||
className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
|
|
||||||
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={() => {
|
|
||||||
if (window.confirm("Are you sure you want to delete this invitation?")) {
|
|
||||||
api.destroy(serializer, invitation, () => {
|
|
||||||
onDestroy(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">
|
|
||||||
{guests.map((guest) => (
|
|
||||||
<li key={guest.id}>{guest.name}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function GuestCard(guest: Guest) {
|
|
||||||
const ref = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (ref.current) {
|
|
||||||
return draggable({
|
|
||||||
element: ref.current,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [guest.id]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={guest.id}
|
|
||||||
ref={ref}
|
|
||||||
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
|
|
||||||
draggable="true"
|
|
||||||
data-guest-id={guest.id}>
|
|
||||||
<h3 className="text-md font-medium">{guest.name}</h3>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
|
|
||||||
guests: Array<Guest>,
|
|
||||||
invitations: Array<Invitation>
|
|
||||||
}) {
|
|
||||||
const api = new AbstractApi<Invitation>();
|
|
||||||
const serializer = new InvitationSerializer();
|
|
||||||
|
|
||||||
const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
|
|
||||||
const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
|
|
||||||
guests.filter(
|
|
||||||
(guest) =>
|
|
||||||
guest.status !== 'considered' &&
|
|
||||||
!invitations.some((invitation) =>
|
|
||||||
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
// 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() {
|
|
||||||
api.create(serializer, new Invitation(), (createdInvitation) => {
|
|
||||||
setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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">{unassignedGuests.length} guests without invitation</h2>
|
|
||||||
<div>
|
|
||||||
{unassignedGuests.map((guest) => (
|
|
||||||
<GuestCard key={guest.id} {...guest} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column: Invitations */}
|
|
||||||
<div className="w-3/4 h-full overflow-auto p-4">
|
|
||||||
<h2 className="text-lg font-semibold mb-4">
|
|
||||||
{invitations.length} 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-4 gap-6">
|
|
||||||
|
|
||||||
{sortedInvitations.map((invitation) => (
|
|
||||||
<InvitationCard
|
|
||||||
key={invitation.id}
|
|
||||||
invitation={invitation}
|
|
||||||
allGuests={guests}
|
|
||||||
onGuestAdded={(guestAdded: Guest) => {
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -6,7 +6,6 @@
|
|||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
||||||
"@heroicons/react": "^2.1.4",
|
"@heroicons/react": "^2.1.4",
|
||||||
"@tailwindcss/forms": "^0.5.7",
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
"autoprefixer": "10.4.21",
|
"autoprefixer": "10.4.21",
|
||||||
@ -14,7 +13,7 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"next": "15.3.3",
|
"next": "15.3.3",
|
||||||
"next-auth": "5.0.0-beta.28",
|
"next-auth": "5.0.0-beta.28",
|
||||||
"postcss": "8.5.4",
|
"postcss": "8.5.3",
|
||||||
"primeicons": "^7.0.0",
|
"primeicons": "^7.0.0",
|
||||||
"primereact": "^10.8.2",
|
"primereact": "^10.8.2",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
|
672
pnpm-lock.yaml
generated
672
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user