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

Allow removing a guest #109

Merged
bustikiller merged 1 commits from delete-guests into main 2024-11-17 17:33:59 +00:00
Conversation 0 Commits 1 Files Changed 2 +29 -11
2 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/api/guests.tsx
View File

@ -48,3 +48,17 @@ export function createGuest(name: string, group_id: string, onCreate?: () => voi
}) })
.catch((error) => console.error(error)); .catch((error) => console.error(error));
} }
export function destroyGuest(guest: Guest, onDestroy?: () => void) {
fetch(`/api/guests/${guest.id}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': getCsrfToken(),
}
})
.then((response) => response.json())
.then((data) => {
onDestroy && onDestroy();
})
.catch((error) => console.error(error));
}

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

@ -2,12 +2,13 @@
'use client'; 'use client';
import { updateGuest } from '@/app/api/guests'; import { destroyGuest, updateGuest } from '@/app/api/guests';
import { Guest, GuestStatus } from '@/app/lib/definitions'; import { Guest, GuestStatus } from '@/app/lib/definitions';
import { classNames } from '@/app/ui/components/button'; import { classNames } from '@/app/ui/components/button';
import clsx from 'clsx'; import clsx from 'clsx';
import InlineTextField from '../components/form/inlineTextField'; import InlineTextField from '../components/form/inlineTextField';
import TableOfContents from '../components/table-of-contents'; import TableOfContents from '../components/table-of-contents';
import { TrashIcon } from '@heroicons/react/24/outline';
export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onUpdate: () => void }) { export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onUpdate: () => void }) {
const handleGuestChange = (guest: Guest, status: GuestStatus) => { const handleGuestChange = (guest: Guest, status: GuestStatus) => {
@ -45,16 +46,19 @@ export default function guestsTable({ guests, onUpdate }: { guests: Guest[], onU
</span> </span>
</td> </td>
<td> <td>
{guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}> <div className="flex flex-row items-center">
Invite {guest.status === 'considered' && (<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'invited')} className={classNames('blue')}>
</button>)} Invite
{(guest.status === 'invited' || guest.status === 'tentative') && ( </button>)}
<> {(guest.status === 'invited' || guest.status === 'tentative') && (
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button> <>
{guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>} <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'confirmed')} className={classNames('green')}>Confirm</button>
<button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button> {guest.status != 'tentative' && <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'tentative')} className={classNames('yellow')}>Tentative</button>}
</> <button data-guest-id={guest.id} onClick={() => handleGuestChange(guest, 'declined')} className={classNames('red')}>Decline</button>
)} </>
)}
<TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
</div>
</td> </td>
</tr> </tr>
)} )}