61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client';
|
|
|
|
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';
|
|
|
|
export default function GroupsTable({ groups, onUpdate, onEdit }: {
|
|
groups: Group[],
|
|
onUpdate: () => void,
|
|
onEdit: (group: Group) => void,
|
|
}) {
|
|
|
|
const api = new AbstractApi<Group>();
|
|
const serializer = new GroupSerializer();
|
|
|
|
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>
|
|
)}
|
|
/>
|
|
)
|
|
}
|