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

Merge pull request 'Additional status changes' (#63) from additiona-status-changes into main
All checks were successful
Check usage of free licenses / build-static-assets (push) Successful in 36s
Details
Playwright Tests / test (push) Successful in 4m45s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 13m34s
Details

Browse Source 
Reviewed-on: #63
This commit is contained in:
bustikiller 2024-10-27 20:23:36 +00:00
commit 8eeab56eae
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; name: string;
email: string; email: string;
group_name: string; group_name: string;
status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined'; status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
} }
export type Group = { 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", fetch("/api/guests/bulk_update.json",
{ {
method: 'POST', 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: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-CSRF-TOKEN': getCsrfToken(), 'X-CSRF-TOKEN': getCsrfToken(),
@ -42,6 +46,7 @@ export default function guestsTable() {
} }
guests.length === 0 && loadGuests(); guests.length === 0 && loadGuests();
const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
return ( return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg"> <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-blue-400': guest.status === 'Invited',
'bg-green-600': guest.status === 'Confirmed', 'bg-green-600': guest.status === 'Confirmed',
'bg-red-400': guest.status === 'Declined', 'bg-red-400': guest.status === 'Declined',
'bg-yellow-400': guest.status === 'Tentative',
} }
)}> )}>
</span> </span>
@ -97,9 +103,16 @@ export default function guestsTable() {
</span> </span>
</td> </td>
<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 Invite
</button>)} </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> </td>
</tr> </tr>
))} ))}