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

WIP define UI for invitations
All checks were successful
Build Nginx-based docker image / build-static-assets (push) Successful in 3m27s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2025-01-28 09:00:09 +01:00
parent 58962e2f48
commit faf0ee4dbd
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/lib/guest.tsx
View File

@ -14,8 +14,9 @@ export class Guest implements Entity {
color?: string;
status?: GuestStatus;
children?: Guest[];
invitationId?: string;
constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[], invitationId?: string) {
this.id = id;
this.name = name;
this.group_name = group_name;
@ -23,12 +24,13 @@ export class Guest implements Entity {
this.color = color;
this.status = status;
this.children = children;
this.invitationId = invitationId;
}
}
export class GuestSerializer implements Serializable<Guest> {
fromJson(data: any): Guest {
return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children);
return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children, data.invitation_id);
}
toJson(guest: Guest): string {

40
app/ui/guests/table.tsx
View File

@ -4,8 +4,9 @@
import { AbstractApi } from '@/app/api/abstract-api';
import { Guest, GuestSerializer } from '@/app/lib/guest';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { EnvelopeIcon, FunnelIcon, PencilIcon, TrashIcon, UserPlusIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { useState } from 'react';
import TableOfContents from '../components/table-of-contents';
export default function guestsTable({ guests, onUpdate, onEdit }: {
@ -16,22 +17,40 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
const api = new AbstractApi<Guest>();
const serializer = new GuestSerializer();
const [invitationId, setInvitationId] = useState<string | undefined>(undefined);
const [selecting, setSelecting] = useState<boolean>(false);
function toggleInvitationId(id: string | undefined) {
console.log('toggleInvitationId', id, invitationId);
if (id === invitationId) {
setInvitationId(undefined);
} else {
setInvitationId(id);
}
console.log('invitationId', invitationId);
}
return (
<TableOfContents
headers={['Name', 'Group', 'Status', 'Actions']}
headers={['Name', 'Group', 'Status', 'Invitation', 'Actions']}
caption='Guests'
elements={guests}
rowRender={(guest) => (
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<tr key={guest.id} className={clsx("bg-white odd:bg-white even:bg-gray-50 border-b", {
"opacity-25": invitationId && !selecting && guest.invitationId !== invitationId,
"hover:bg-emerald-100" : selecting && guest.invitationId !== invitationId && guest.status !== 'considered',
"opacity-25 hover:cursor-not-allowed" : selecting && (guest.invitationId === invitationId || guest.status === 'considered')
})} >
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
{guest.name}
</td>
<td className="px-6 py-4">
{guest.group_name}
</td>
<td className="px-6 py-4">
<span className="flex items-center text-sm dark:text-white me-3">
<span className="flex items-center text-sm me-3">
<span className={clsx(
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
{
@ -46,10 +65,21 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
{guest.status}
</span>
</td>
<td>
{
guest.invitationId &&
<div className="flex">
{!selecting && <FunnelIcon className='size-6 cursor-pointer' onClick={() => toggleInvitationId(guest?.invitationId)} />}
{ invitationId === guest.invitationId && !selecting && <UserPlusIcon className='size-6 cursor-pointer' onClick={() => setSelecting(!selecting)}/>}
{ selecting && invitationId !== guest.invitationId && <UserPlusIcon className='size-6 cursor-pointer' />}
</div>
}
</td>
<td>
<div className="flex flex-row items-center">
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate) }} />
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
</div>
</td>
</tr>