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

Reuse the table of contents component for the guests list
All checks were successful
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m13s
Details
Add copyright notice / copyright_notice (pull_request) Successful in 2m28s
Details
Playwright Tests / test (pull_request) Successful in 5m45s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2024-11-10 20:55:03 +01:00
parent 79b4e9ac82
commit 2ea1fd2667
1 changed files with 45 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
import { Guest } from '@/app/lib/definitions'; import { Guest } from '@/app/lib/definitions';
import { getCsrfToken } from '@/app/lib/utils'; import { getCsrfToken } from '@/app/lib/utils';
import {classNames} from '@/app/ui/components/button'; import {classNames} from '@/app/ui/components/button';
import TableOfContents from '../components/table-of-contents';
export default function guestsTable() { export default function guestsTable() {
const [guests, setGuests] = useState<Array<Guest>>([]); const [guests, setGuests] = useState<Array<Guest>>([]);
@ -50,69 +51,48 @@ export default function guestsTable() {
guests.length === 0 && loadGuests(); guests.length === 0 && loadGuests();
return ( return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg"> <TableOfContents
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> headers={['Name', 'Group', 'Status', 'Actions']}
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800"> caption='Guests'
Guests elements={guests}
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400"> rowRender={(guest) => (
There are {guests.length} guests in the list <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">
</p> <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
</caption> {guest.name}
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> </th>
<tr> <td className="px-6 py-4">
<th scope="col" className="px-6 py-3"> {guest.group_name}
Name </td>
</th> <td className="px-6 py-4">
<th scope="col" className="px-6 py-3"> <span className="flex items-center text-sm dark:text-white me-3">
Group <span className={clsx(
</th> 'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
<th scope="col" className="px-6 py-3"> {
Status 'bg-gray-400': guest.status === 'Considered',
</th> 'bg-blue-400': guest.status === 'Invited',
<th>Actions</th> 'bg-green-600': guest.status === 'Confirmed',
</tr> 'bg-red-400': guest.status === 'Declined',
</thead> 'bg-yellow-400': guest.status === 'Tentative',
<tbody> }
{guests.map((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"> </span>
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"> {guest.status}
{guest.name} </span>
</th> </td>
<td className="px-6 py-4"> <td>
{guest.group_name} {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
</td> Invite
<td className="px-6 py-4"> </button>)}
<span className="flex items-center text-sm dark:text-white me-3"> {(guest.status === 'Invited' || guest.status === 'Tentative') && (
<span className={clsx( <>
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0', <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
{ {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
'bg-gray-400': guest.status === 'Considered', <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
'bg-blue-400': guest.status === 'Invited', </>
'bg-green-600': guest.status === 'Confirmed', )}
'bg-red-400': guest.status === 'Declined', </td>
'bg-yellow-400': guest.status === 'Tentative', </tr>
} )}
)}> />
</span> );
{guest.status}
</span>
</td>
<td>
{guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
Invite
</button>)}
{(guest.status === 'Invited' || guest.status === 'Tentative') && (
<>
<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
{guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleTentativeGuest} className={classNames('yellow')}>Tentative</button>}
<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
} }