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

Display an icon indicating whether a simulation is still valid

Browse Source
This commit is contained in:
Manuel Bustillo 2025-01-26 13:05:32 +01:00
parent c691359356
commit 1184a529cf
3 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/api/tableSimulations.tsx
View File

@ -12,6 +12,7 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
id: record.id,
name: record.name,
discomfort: record.discomfort,
valid: record.valid,
});
}));
}, (error) => {

3
app/lib/definitions.ts
View File

@ -12,7 +12,8 @@ export type TableArrangement = {
number: number;
name: string;
guests?: Guest[];
discomfort?: number
discomfort?: number;
valid?: boolean;
}
export type User = {

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

@ -7,42 +7,53 @@ import { TableArrangement } from '@/app/lib/definitions';
import { classNames } from "../components/button";
import TableOfContents from "../components/table-of-contents";
import { loadTableSimulations } from "@/app/api/tableSimulations";
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
import { Tooltip } from "primereact/tooltip";
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
function refreshSimulations() {
loadTableSimulations((arrangements) => {
setArrangements(arrangements);
setArrangementsLoaded(true);
});
}
function refreshSimulations() {
loadTableSimulations((arrangements) => {
setArrangements(arrangements);
setArrangementsLoaded(true);
});
}
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
}
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
}
!arrangementsLoaded && refreshSimulations();
!arrangementsLoaded && refreshSimulations();
return(
<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>
)}
/>
);
return (
<TableOfContents
headers={['Name', 'Discomfort', 'Actions', 'Status']}
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>
<td>
<Tooltip target=".tooltip-status" />
{
arrangement.valid ?
<CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
<ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
}
</td>
</tr>
)}
/>
);
}