bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 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 +17 -4
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/lib/definitions.ts
View File

@ -21,7 +21,7 @@ export type Guest = {
name: string;
email: string;
group_name: string;
status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined';
status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
}
export type Group = {

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

@ -26,12 +26,16 @@ 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 handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
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 +46,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">
@ -90,6 +95,7 @@ export default function guestsTable() {
'bg-blue-400': guest.status === 'Invited',
'bg-green-600': guest.status === 'Confirmed',
'bg-red-400': guest.status === 'Declined',
'bg-yellow-400': guest.status === 'Tentative',
}
)}>
</span>
@ -97,9 +103,16 @@ 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' || guest.status === 'Tentative') && (
<>
<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
{guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
</>
)}
</td>
</tr>
))}