Merge pull request 'table-component' (#75) from table-component into main

Reviewed-on: #75

app/dashboard/tables/page.tsx

@@ -1,13 +1,18 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { lusitana } from '@/app/ui/fonts';
+'use client';
+
+import Arrangement from '@/app/ui/arrangements/arrangement';
+import React, { useState } from 'react';
+import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
+
+export default function Page() {
+  const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
 
-export default  function Page () {
   return (
-    <div className="w-full">
+    <>
-      <div className="flex w-full items-center justify-between">
+      <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
-        <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
+      {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
-      </div>
+    </>
-    </div>
+  )
-  );
 }

app/lib/definitions.ts

@@ -21,9 +21,24 @@ export type Customer = {
 export type Guest = {
   id: string;
   name: string;
-  email: string;
+  email?: string;
-  group_name: string;
+  group_name?: string;
-  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+  status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+}
+
+export type Banana = {
+  id: string;
+  name: string;
+  email?: string;
+  group_name?: string;
+  status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+}
+
+export type TableArrangement = {
+  id: string;
+  number: number;
+  guests?: Guest[];
+  discomfort?: number
 }
 
 export type Group = {

app/ui/arrangements/arrangement.tsx

@@ -0,0 +1,44 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import React, { useState } from 'react';
+import { TableArrangement, Guest } from '@/app/lib/definitions';
+import { lusitana } from '@/app/ui/fonts';
+import { Table } from '@/app/ui/components/table';
+
+export default function Arrangement({ id }: { id: string }) {
+
+    const [tables, setTables] = useState<Array<TableArrangement>>([]);
+
+    function loadTables() {
+        fetch(`/api/tables_arrangements/${id}`)
+            .then((response) => response.json())
+            .then((data) => {
+                setTables(data.map((record: any) => {
+                    return ({
+                        id: record.number,
+                        guests: record.guests
+                    });
+                }));
+            }, (error) => {
+                return [];
+            });
+    }
+
+    tables.length === 0 && loadTables();
+
+    return (
+        <div className="w-full">
+            <div className="w-full items-center justify-between">
+                <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
+                <div className="flex flex-row flex-wrap justify-around">
+                    {tables.map((table) => (
+                        <Table key={table.number} guests={table.guests || []} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+
+}

app/ui/arrangements/arrangements-table.tsx

@@ -0,0 +1,73 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client'
+
+import React, { useState } from "react"
+import { TableArrangement } from '@/app/lib/definitions';
+import { classNames } from "../components/button";
+
+export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
+    const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
+
+    function loadArrangements() {
+      fetch("/api/tables_arrangements")
+        .then((response) => response.json())
+        .then((data) => {
+          setArrangements(data.map((record: any) => {
+            return ({
+              id: record.id,
+              discomfort: record.discomfort
+            });
+          }));
+        }, (error) => {
+          return [];
+        });
+    }
+
+    function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
+        onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
+    }
+  
+    arrangements.length === 0 && loadArrangements();
+
+    return(
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+            Simulations
+            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+              There are {arrangements.length} simmulations in the list
+            </p>
+          </caption>
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                ID
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Discomfort
+              </th>              
+              <th scope="col" className="px-6 py-3">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {arrangements.map((arrangement) => (
+              <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                  {arrangement.id}
+                </th>
+                <td className="px-6 py-4">
+                  {arrangement.discomfort}
+                </td>
+                <td>
+                    <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+}

app/ui/components/button.tsx

@@ -0,0 +1,14 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import clsx from "clsx";
+
+type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
+
+export function classNames(type: ButtonColor) {
+    return(clsx("text-white py-1 px-2 mx-1 rounded", {
+        'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
+        'bg-green-500 hover:bg-green-600': type === 'green',
+        'bg-red-500 hover:bg-red-600': type === 'red',
+        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow'
+    }))
+}

app/ui/components/table.tsx

@@ -0,0 +1,33 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Guest } from "@/app/lib/definitions";
+
+
+function GuestRow({ guests }: { guests: Guest[] }) {
+    return (<div className="justify-around flex flex-row">
+        {
+            guests.map((guest) => {
+
+                return (
+                    <div className="m-3 w-24 h-24 rounded-full bg-cyan-100 hover:bg-cyan-200 content-center text-center">
+                        {guest.name}
+                    </div>
+                )
+            })
+        }
+
+    </div>)
+}
+
+export function Table({ guests }: { guests: Guest[] }) {
+    const halfwayThrough = Math.floor(guests.length / 2)
+    const arrayFirstHalf = guests.slice(0, halfwayThrough);
+    const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
+
+    return (
+        <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
+            <GuestRow guests={arrayFirstHalf} />
+            <GuestRow guests={arraySecondHalf} />
+        </div>
+    )
+}

app/ui/guests/table.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
+import {classNames} from '@/app/ui/components/button';
 
 export default function guestsTable() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -48,7 +49,6 @@ export default function guestsTable() {
   }
 
   guests.length === 0 && loadGuests();
-  const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -105,14 +105,14 @@ export default function guestsTable() {
                 </span>
               </td>
               <td>
-                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
+                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
                   Invite
                 </button>)}
                 {(guest.status === 'Invited' || guest.status === 'Tentative') && (
                   <>
-                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
+                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
-                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
+                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('yellow')}>Tentative</button>}
-                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
+                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
                   </>
                 )}
               </td>