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

Rework columns and CTA in the simulations table

Browse Source
This commit is contained in:
Manuel Bustillo 2025-09-21 19:41:02 +02:00
parent f6cbc88acd
commit 750f6f4271
No known key found for this signature in database
GPG Key ID: A74BD9E346A80DDC
1 changed files with 5 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { TableArrangement } from '@/app/lib/definitions';
import { classNames } from "../components/button"; import { classNames } from "../components/button";
import TableOfContents from "../components/table-of-contents"; import TableOfContents from "../components/table-of-contents";
import { loadTableSimulations } from "@/app/api/tableSimulations"; import { loadTableSimulations } from "@/app/api/tableSimulations";
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline"; import { ArchiveBoxXMarkIcon, ArrowsPointingOutIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
import { Tooltip } from "primereact/tooltip"; import { Tooltip } from "primereact/tooltip";
import clsx from "clsx"; import clsx from "clsx";
import { ProgressBar } from "primereact/progressbar"; import { ProgressBar } from "primereact/progressbar";
@ -32,13 +32,13 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
}); });
} }
function arrangementClicked(e: React.MouseEvent<HTMLElement>) { function arrangementClicked(arrangement: TableArrangement) {
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || ''); onArrangementSelected(arrangement.id);
} }
return ( return (
<TableOfContents <TableOfContents
headers={['Name', 'Discomfort', 'Status', 'Actions']} headers={['Name', 'Discomfort', 'Actions']}
caption='Simulations' caption='Simulations'
elements={arrangements} elements={arrangements}
rowRender={(arrangement) => ( rowRender={(arrangement) => (
@ -52,18 +52,8 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
<td className="px-6 py-4"> <td className="px-6 py-4">
{arrangement.discomfort} {arrangement.discomfort}
</td> </td>
<td className="px-4">
<Tooltip target=".tooltip-status" />
<>
{ arrangement.valid && arrangement.status === 'not_started' && <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar> }
{ arrangement.valid && arrangement.status !== 'not_started' && <ProgressBar value={(100 * arrangement.progress).toFixed(2) }></ProgressBar> }
{ !arrangement.valid && 'The list of potential guests has changed since this simulation.' }
</>
</td>
<td> <td>
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button> <ArrowsPointingOutIcon data-arrangement-id={arrangement.id} onClick={() => arrangementClicked(arrangement)} className='size-6 cursor-pointer' />
</td> </td>
</tr> </tr>
)} )}