From 58b02839f2c406953bb3459e3f4d8589020ef4fb Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Fri, 1 Nov 2024 18:25:00 +0100 Subject: [PATCH 1/9] Basic definition of a table component --- app/dashboard/tables/page.tsx | 53 +++++++++++++++++++++++++++++++++-- app/lib/definitions.ts | 6 ++-- app/ui/components/table.tsx | 31 ++++++++++++++++++++ 3 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 app/ui/components/table.tsx diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx index 2aec187..29a1d76 100644 --- a/app/dashboard/tables/page.tsx +++ b/app/dashboard/tables/page.tsx @@ -1,12 +1,59 @@ /* Copyright (C) 2024 Manuel Bustillo*/ +import { Table } from '@/app/ui/components/table'; +import Summary from '@/app/ui/expenses/summary'; import { lusitana } from '@/app/ui/fonts'; - -export default function Page () { + +export default function Page() { return (
-
+

Table distributions

+
+ +
+
+ + ); diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts index 70eacd2..4a9f09e 100644 --- a/app/lib/definitions.ts +++ b/app/lib/definitions.ts @@ -21,9 +21,9 @@ export type Customer = { export type Guest = { id: string; name: string; - email: string; - group_name: string; - status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative'; + email?: string; + group_name?: string; + status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative'; } export type Group = { diff --git a/app/ui/components/table.tsx b/app/ui/components/table.tsx new file mode 100644 index 0000000..841f6c8 --- /dev/null +++ b/app/ui/components/table.tsx @@ -0,0 +1,31 @@ +import { Guest } from "@/app/lib/definitions"; + + +function GuestRow({ guests }: { guests: Guest[] }) { + return (
+ { + guests.map((guest) => { + + return ( +
+ {guest.name} +
+ ) + }) + } + +
) +} + +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 ( +
+ + +
+ ) +} \ No newline at end of file From 357fb617ce782fde3a38b2334ff447e809074dbc Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Fri, 1 Nov 2024 17:27:41 +0000 Subject: [PATCH 2/9] Add copyright notice --- app/ui/components/table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/ui/components/table.tsx b/app/ui/components/table.tsx index 841f6c8..82d77a8 100644 --- a/app/ui/components/table.tsx +++ b/app/ui/components/table.tsx @@ -1,3 +1,5 @@ +/* Copyright (C) 2024 Manuel Bustillo*/ + import { Guest } from "@/app/lib/definitions"; From de96b9d4aebc5651d83e93eccdb3fd4f17d6a7bb Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 10:11:03 +0100 Subject: [PATCH 3/9] Use a different color schema --- app/ui/components/table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/ui/components/table.tsx b/app/ui/components/table.tsx index 82d77a8..a042f4b 100644 --- a/app/ui/components/table.tsx +++ b/app/ui/components/table.tsx @@ -9,7 +9,7 @@ function GuestRow({ guests }: { guests: Guest[] }) { guests.map((guest) => { return ( -
+
{guest.name}
) @@ -25,7 +25,7 @@ export function Table({ guests }: { guests: Guest[] }) { const arraySecondHalf = guests.slice(halfwayThrough, guests.length); return ( -
+
From 094652d47e1fb4527e33febc7b4d2064b8489b75 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 10:12:06 +0100 Subject: [PATCH 4/9] Mock tables of different sizes --- app/dashboard/tables/page.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx index 29a1d76..f378fed 100644 --- a/app/dashboard/tables/page.tsx +++ b/app/dashboard/tables/page.tsx @@ -32,10 +32,6 @@ export default function Page() { { name: "Arthur C. Clarke", id: "4" }, { name: "Philip Roth", id: "5" }, { name: "Kurt Vonnegut", id: "6" }, - { name: "Ray Bradbury", id: "7" }, - { name: "Jorge Luis Borges", id: "8" }, - { name: "Gabriel García Márquez", id: "9" }, - { name: "Julio Cortázar", id: "10" }, ] } />
Date: Sat, 2 Nov 2024 11:24:48 +0100 Subject: [PATCH 5/9] Render list of tables in an arrangement --- app/dashboard/tables/page.tsx | 5 ++++ app/lib/definitions.ts | 14 +++++++++ app/ui/arrangements/arrangement.tsx | 44 +++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 app/ui/arrangements/arrangement.tsx diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx index f378fed..db4f10b 100644 --- a/app/dashboard/tables/page.tsx +++ b/app/dashboard/tables/page.tsx @@ -1,10 +1,15 @@ /* Copyright (C) 2024 Manuel Bustillo*/ import { Table } from '@/app/ui/components/table'; +import Arrangement from '@/app/ui/arrangements/arrangement'; import Summary from '@/app/ui/expenses/summary'; import { lusitana } from '@/app/ui/fonts'; export default function Page() { + + return( + + ) return (
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts index 4a9f09e..c182c95 100644 --- a/app/lib/definitions.ts +++ b/app/lib/definitions.ts @@ -26,6 +26,20 @@ export type Guest = { 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 = { + number: number; + guests: Guest[]; + discomfort?: number +} + export type Group = { id: string; name: string; diff --git a/app/ui/arrangements/arrangement.tsx b/app/ui/arrangements/arrangement.tsx new file mode 100644 index 0000000..5da1c3f --- /dev/null +++ b/app/ui/arrangements/arrangement.tsx @@ -0,0 +1,44 @@ +'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 [guests, setGuests] = useState>([]); + const [tables, setTables] = useState>([]); + + + function loadTables() { + fetch(`/api/tables_arrangements/${id}`) + .then((response) => response.json()) + .then((data) => { + setTables(data.map((record: any) => { + return ({ + id: record.id, + guests: record.guests + }); + })); + }, (error) => { + return []; + }); + } + + tables.length === 0 && loadTables(); + + return ( +
+
+

Table distributions

+
+ {tables.map((table) => ( +
+ ))} + + + + ) + +} \ No newline at end of file From 58f9c35bf29b03b8ccf2c72a9a524979ab01c9c8 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 10:26:40 +0000 Subject: [PATCH 6/9] Add copyright notice --- app/ui/arrangements/arrangement.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/ui/arrangements/arrangement.tsx b/app/ui/arrangements/arrangement.tsx index 5da1c3f..251833d 100644 --- a/app/ui/arrangements/arrangement.tsx +++ b/app/ui/arrangements/arrangement.tsx @@ -1,3 +1,5 @@ +/* Copyright (C) 2024 Manuel Bustillo*/ + 'use client'; import React, { useState } from 'react'; From ca353f02feac0b5970e0583aa0383bc4aa850b5b Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 11:27:44 +0100 Subject: [PATCH 7/9] Code cleanup --- app/dashboard/tables/page.tsx | 46 ----------------------------------- 1 file changed, 46 deletions(-) diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx index db4f10b..2a63d37 100644 --- a/app/dashboard/tables/page.tsx +++ b/app/dashboard/tables/page.tsx @@ -10,50 +10,4 @@ export default function Page() { return( ) - return ( -
-
-

Table distributions

-
-
-
-
- - - - - ); } \ No newline at end of file From 1b71bc9d794a3305f4df4799bc4a2e0a895df4e1 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 12:52:12 +0100 Subject: [PATCH 8/9] Display the table arrangements returned by the API --- app/dashboard/tables/page.tsx | 15 +++-- app/lib/definitions.ts | 3 +- app/ui/arrangements/arrangement.tsx | 8 +-- app/ui/arrangements/arrangements-table.tsx | 71 ++++++++++++++++++++++ app/ui/components/button.tsx | 12 ++++ app/ui/guests/table.tsx | 10 +-- 6 files changed, 103 insertions(+), 16 deletions(-) create mode 100644 app/ui/arrangements/arrangements-table.tsx create mode 100644 app/ui/components/button.tsx diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx index 2a63d37..7f55a77 100644 --- a/app/dashboard/tables/page.tsx +++ b/app/dashboard/tables/page.tsx @@ -1,13 +1,18 @@ /* Copyright (C) 2024 Manuel Bustillo*/ -import { Table } from '@/app/ui/components/table'; +'use client'; + import Arrangement from '@/app/ui/arrangements/arrangement'; -import Summary from '@/app/ui/expenses/summary'; -import { lusitana } from '@/app/ui/fonts'; +import React, { useState } from 'react'; +import ArrangementsTable from '@/app/ui/arrangements/arrangements-table'; export default function Page() { + const [currentArrangement, setCurrentArrangement] = useState(null); - return( - + return ( + <> + + {currentArrangement && } + ) } \ No newline at end of file diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts index c182c95..48a5918 100644 --- a/app/lib/definitions.ts +++ b/app/lib/definitions.ts @@ -35,8 +35,9 @@ export type Banana = { } export type TableArrangement = { + id: string; number: number; - guests: Guest[]; + guests?: Guest[]; discomfort?: number } diff --git a/app/ui/arrangements/arrangement.tsx b/app/ui/arrangements/arrangement.tsx index 251833d..f51baea 100644 --- a/app/ui/arrangements/arrangement.tsx +++ b/app/ui/arrangements/arrangement.tsx @@ -9,17 +9,15 @@ import { Table } from '@/app/ui/components/table'; export default function Arrangement({ id }: { id: string }) { - const [guests, setGuests] = useState>([]); const [tables, setTables] = useState>([]); - function loadTables() { fetch(`/api/tables_arrangements/${id}`) .then((response) => response.json()) .then((data) => { setTables(data.map((record: any) => { return ({ - id: record.id, + id: record.number, guests: record.guests }); })); @@ -33,10 +31,10 @@ export default function Arrangement({ id }: { id: string }) { return (
-

Table distributions

+

Table distributions

{tables.map((table) => ( -
+
))} diff --git a/app/ui/arrangements/arrangements-table.tsx b/app/ui/arrangements/arrangements-table.tsx new file mode 100644 index 0000000..6bacb86 --- /dev/null +++ b/app/ui/arrangements/arrangements-table.tsx @@ -0,0 +1,71 @@ +'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>([]); + + 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) { + onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || ''); + } + + arrangements.length === 0 && loadArrangements(); + + return( +
+
+ + + + + + + + + + {arrangements.map((arrangement) => ( + + + + + + ))} + +
+ Simulations +

+ There are {arrangements.length} simmulations in the list +

+
+ ID + + Discomfort + + Actions +
+ {arrangement.id} + + {arrangement.discomfort} + + +
+
+ ); +} \ No newline at end of file diff --git a/app/ui/components/button.tsx b/app/ui/components/button.tsx new file mode 100644 index 0000000..4de75a8 --- /dev/null +++ b/app/ui/components/button.tsx @@ -0,0 +1,12 @@ +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' + })) +} \ No newline at end of file diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx index af2752b..7590738 100644 --- a/app/ui/guests/table.tsx +++ b/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>([]); @@ -48,7 +49,6 @@ export default function guestsTable() { } guests.length === 0 && loadGuests(); - const ctaClassName = "text-white py-1 px-2 mx-1 rounded"; return (
@@ -105,14 +105,14 @@ export default function guestsTable() { - {guest.status === 'Considered' && ()} {(guest.status === 'Invited' || guest.status === 'Tentative') && ( <> - - {guest.status != 'Tentative' && } - + + {guest.status != 'Tentative' && } + )} From b5dd07c067de7cf414c977411860c34e402c9615 Mon Sep 17 00:00:00 2001 From: Manuel Bustillo Date: Sat, 2 Nov 2024 11:53:56 +0000 Subject: [PATCH 9/9] Add copyright notice --- app/ui/arrangements/arrangements-table.tsx | 2 ++ app/ui/components/button.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/app/ui/arrangements/arrangements-table.tsx b/app/ui/arrangements/arrangements-table.tsx index 6bacb86..12a2712 100644 --- a/app/ui/arrangements/arrangements-table.tsx +++ b/app/ui/arrangements/arrangements-table.tsx @@ -1,3 +1,5 @@ +/* Copyright (C) 2024 Manuel Bustillo*/ + 'use client' import React, { useState } from "react" diff --git a/app/ui/components/button.tsx b/app/ui/components/button.tsx index 4de75a8..76906a2 100644 --- a/app/ui/components/button.tsx +++ b/app/ui/components/button.tsx @@ -1,3 +1,5 @@ +/* Copyright (C) 2024 Manuel Bustillo*/ + import clsx from "clsx"; type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';