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

Render groups using a tree table #146

Merged
bustikiller merged 2 commits from groups-tree-table into main 2024-12-10 20:00:47 +00:00
Conversation 0 Commits 2 Files Changed 2 +53 -39
1 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2b0fab797e - Show all commits

92
app/ui/groups/table.tsx
View File

@ -6,6 +6,9 @@ import { Group, GroupSerializer } from '@/app/lib/group';
import TableOfContents from '../components/table-of-contents'; import TableOfContents from '../components/table-of-contents';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline'; import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { AbstractApi } from '@/app/api/abstract-api'; import { AbstractApi } from '@/app/api/abstract-api';
import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
import { TreeNode } from 'primereact/treenode';
export default function GroupsTable({ groups, onUpdate, onEdit }: { export default function GroupsTable({ groups, onUpdate, onEdit }: {
groups: Group[], groups: Group[],
@ -16,45 +19,56 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
const api = new AbstractApi<Group>(); const api = new AbstractApi<Group>();
const serializer = new GroupSerializer(); const serializer = new GroupSerializer();
const nodes:TreeNode[] = [];
const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
return ( return (
<TableOfContents <>
headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']} <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
caption='Groups' { headers.map((header, index) => <Column key={index} field={header} header={header}></Column>)}
elements={groups}
rowRender={(group) => ( </TreeTable>
<tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"> <TableOfContents
{group.name} headers={headers}
</td> caption='Groups'
<td className="px-6"> elements={groups}
<div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div> rowRender={(group) => (
</td> <tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<td className="px-6 text-lg"> <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{group.attendance?.confirmed} {group.name}
</td> </td>
<td className="px-6 text-sm"> <td className="px-6">
{group.attendance?.tentative} <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
</td> </td>
<td className="px-6 text-sm"> <td className="px-6 text-lg">
{group.attendance?.invited} {group.attendance?.confirmed}
</td> </td>
<td className="px-6 text-sm"> <td className="px-6 text-sm">
{group.attendance?.declined} {group.attendance?.tentative}
</td> </td>
<td className="px-6 text-sm"> <td className="px-6 text-sm">
{group.attendance?.considered} {group.attendance?.invited}
</td> </td>
<td className="px-6 text-sm"> <td className="px-6 text-sm">
{group.attendance?.total} {group.attendance?.declined}
</td> </td>
<td> <td className="px-6 text-sm">
<div className="flex flex-row items-center"> {group.attendance?.considered}
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} /> </td>
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} /> <td className="px-6 text-sm">
</div> {group.attendance?.total}
</td> </td>
</tr> <td>
)} <div className="flex flex-row items-center">
/> <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
</div>
</td>
</tr>
)}
/>
</>
) )
} }