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 { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
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 }: {
groups: Group[],
@ -16,45 +19,56 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
const api = new AbstractApi<Group>();
const serializer = new GroupSerializer();
const nodes:TreeNode[] = [];
const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
return (
<TableOfContents
headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
caption='Groups'
elements={groups}
rowRender={(group) => (
<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">
{group.name}
</td>
<td className="px-6">
<div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
</td>
<td className="px-6 text-lg">
{group.attendance?.confirmed}
</td>
<td className="px-6 text-sm">
{group.attendance?.tentative}
</td>
<td className="px-6 text-sm">
{group.attendance?.invited}
</td>
<td className="px-6 text-sm">
{group.attendance?.declined}
</td>
<td className="px-6 text-sm">
{group.attendance?.considered}
</td>
<td className="px-6 text-sm">
{group.attendance?.total}
</td>
<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>
)}
/>
<>
<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
{ headers.map((header, index) => <Column key={index} field={header} header={header}></Column>)}
</TreeTable>
<TableOfContents
headers={headers}
caption='Groups'
elements={groups}
rowRender={(group) => (
<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">
{group.name}
</td>
<td className="px-6">
<div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
</td>
<td className="px-6 text-lg">
{group.attendance?.confirmed}
</td>
<td className="px-6 text-sm">
{group.attendance?.tentative}
</td>
<td className="px-6 text-sm">
{group.attendance?.invited}
</td>
<td className="px-6 text-sm">
{group.attendance?.declined}
</td>
<td className="px-6 text-sm">
{group.attendance?.considered}
</td>
<td className="px-6 text-sm">
{group.attendance?.total}
</td>
<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>
)}
/>
</>
)
}