Extract a common TableOfContents component #91
@ -5,6 +5,7 @@
|
|||||||
import React, { useState } from "react"
|
import React, { useState } from "react"
|
||||||
import { TableArrangement } from '@/app/lib/definitions';
|
import { TableArrangement } from '@/app/lib/definitions';
|
||||||
import { classNames } from "../components/button";
|
import { classNames } from "../components/button";
|
||||||
|
import TableOfContents from "../components/table-of-contents";
|
||||||
|
|
||||||
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
|
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
|
||||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||||
@ -32,29 +33,11 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
|
|||||||
arrangements.length === 0 && loadArrangements();
|
arrangements.length === 0 && loadArrangements();
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
<TableOfContents
|
||||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
headers={['Name', 'Discomfort', 'Actions']}
|
||||||
<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">
|
caption='Simulations'
|
||||||
Simulations
|
elements={arrangements}
|
||||||
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
rowRender={(arrangement) => (
|
||||||
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">
|
|
||||||
Name
|
|
||||||
</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">
|
<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">
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
{arrangement.name}
|
{arrangement.name}
|
||||||
@ -66,9 +49,7 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
|
|||||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
)}
|
||||||
</tbody>
|
/>
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
28
app/ui/components/table-of-contents.tsx
Normal file
28
app/ui/components/table-of-contents.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||||
|
|
||||||
|
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
|
||||||
|
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">
|
||||||
|
{caption}
|
||||||
|
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
There are {elements.length} elements 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>
|
||||||
|
{headers.map((header) => (
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
{header}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{elements.map((element) => rowRender(element))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import { Guest } from '@/app/lib/definitions';
|
import { Guest } from '@/app/lib/definitions';
|
||||||
import { getCsrfToken } from '@/app/lib/utils';
|
import { getCsrfToken } from '@/app/lib/utils';
|
||||||
import {classNames} from '@/app/ui/components/button';
|
import {classNames} from '@/app/ui/components/button';
|
||||||
|
import TableOfContents from '../components/table-of-contents';
|
||||||
|
|
||||||
export default function guestsTable() {
|
export default function guestsTable() {
|
||||||
const [guests, setGuests] = useState<Array<Guest>>([]);
|
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||||
@ -50,30 +51,11 @@ export default function guestsTable() {
|
|||||||
guests.length === 0 && loadGuests();
|
guests.length === 0 && loadGuests();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
<TableOfContents
|
||||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
headers={['Name', 'Group', 'Status', 'Actions']}
|
||||||
<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">
|
caption='Guests'
|
||||||
Guests
|
elements={guests}
|
||||||
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
rowRender={(guest) => (
|
||||||
There are {guests.length} guests 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">
|
|
||||||
Name
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3">
|
|
||||||
Group
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3">
|
|
||||||
Status
|
|
||||||
</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{guests.map((guest) => (
|
|
||||||
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
<tr key={guest.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">
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
{guest.name}
|
{guest.name}
|
||||||
@ -110,9 +92,7 @@ export default function guestsTable() {
|
|||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
)}
|
||||||
</tbody>
|
/>
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user