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

Merge pull request 'Extract a common TableOfContents component' (#91) from extract-table-component into main
Some checks failed
Check usage of free licenses / build-static-assets (push) Successful in 2m34s
Details
Playwright Tests / test (push) Failing after 3m9s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 6m37s
Details

Browse Source 
Reviewed-on: #91
This commit is contained in:
bustikiller 2024-11-10 20:31:25 +00:00
commit 10f7af1963
3 changed files with 92 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/ui/arrangements/arrangements-table.tsx
View File

@ -5,6 +5,7 @@
import React, { useState } from "react"
import { TableArrangement } from '@/app/lib/definitions';
import { classNames } from "../components/button";
import TableOfContents from "../components/table-of-contents";
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
@ -32,43 +33,23 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
arrangements.length === 0 && loadArrangements();
return(
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<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">
Simulations
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
There are {arrangements.length} simmulations in the list
</p>
</caption>
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="px-6 py-3">
Discomfort
</th>
<th scope="col" className="px-6 py-3">
Actions
</th>
</tr>
</thead>
<tbody>
{arrangements.map((arrangement) => (
<tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{arrangement.name}
</th>
<td className="px-6 py-4">
{arrangement.discomfort}
</td>
<td>
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<TableOfContents
headers={['Name', 'Discomfort', 'Actions']}
caption='Simulations'
elements={arrangements}
rowRender={(arrangement) => (
<tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{arrangement.name}
</th>
<td className="px-6 py-4">
{arrangement.discomfort}
</td>
<td>
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
</td>
</tr>
)}
/>
);
}

28
app/ui/components/table-of-contents.tsx Normal file
View File

@ -0,0 +1,28 @@
/* Copyright (C) 2024 Manuel Bustillo*/
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<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}
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
There are {elements.length} elements in the list
</p>
</caption>
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
{headers.map((header) => (
<th scope="col" className="px-6 py-3">
{header}
</th>
))}
</tr>
</thead>
<tbody>
{elements.map((element) => rowRender(element))}
</tbody>
</table>
</div>
)
}

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