wedding-planner-frontend/app/ui/groups/table.tsx

/* 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';
import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
import { TreeNode } from 'primereact/treenode';

export default function GroupsTable({ groups, onUpdate, onEdit }: {
  groups: Group[],
  onUpdate: () => void,
  onEdit: (group: Group) => void,
}) {

  const api = new AbstractApi<Group>();
  const serializer = new GroupSerializer();

  const nodes:TreeNode[] = [];

  const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];

  return (
    <>
      <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>
        )}
      />
    </>
  )
}