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

Additional status changes #63

Merged
bustikiller merged 6 commits from additiona-status-changes into main 2024-10-27 20:23:37 +00:00
Conversation 0 Commits 6 Files Changed 2 +13 -3
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 60ad1d127d - Show all commits

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

@ -26,12 +26,15 @@ export default function guestsTable() {
});
};
const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => {
const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
fetch("/api/guests/bulk_update.json",
{
method: 'POST',
body: JSON.stringify({ properties: { status: "invited" }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': getCsrfToken(),
@ -42,6 +45,7 @@ export default function guestsTable() {
}
guests.length === 0 && loadGuests();
const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@ -97,9 +101,15 @@ export default function guestsTable() {
</span>
</td>
<td>
{guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className="bg-blue-300 hover:bg-blue-500 text-white py-1 px-2 rounded">
{guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
Invite
</button>)}
{guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>
Confirm
</button>)}
{guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>
Decline
</button>)}
</td>
</tr>
))}