From 2b0fab797efb52357c3307f569831e5826f66a19 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Mon, 9 Dec 2024 20:10:10 +0100
Subject: [PATCH] WIP groups tree table

---
 app/ui/groups/table.tsx | 92 ++++++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 39 deletions(-)

diff --git a/app/ui/groups/table.tsx b/app/ui/groups/table.tsx
index 5e1f0df..d17fdf9 100644
--- a/app/ui/groups/table.tsx
+++ b/app/ui/groups/table.tsx
@@ -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>
+        )}
+      />
+    </>
   )
 }