Skip to content

Commit

Permalink
feat: Bind the data to the table #1841 (#1993)
Browse files Browse the repository at this point in the history
### What problem does this PR solve?

feat: Bind the data to the table #1841
feat: Add database page with dynamic routes #1841

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
  • Loading branch information
cike8899 authored Oct 8, 2024
1 parent ee7cfda commit db7d7f2
Show file tree
Hide file tree
Showing 11 changed files with 106 additions and 373 deletions.
3 changes: 3 additions & 0 deletions gui/app/(dashboard)/database/[dabataseId]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default async function DatabasePage() {
return <div>DatabasePage id</div>;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default async function DatabasePage() {
return <div>table id</div>;
}
3 changes: 3 additions & 0 deletions gui/app/(dashboard)/database/[dabataseId]/table/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default async function TablePage() {
return <div>table</div>;
}
33 changes: 0 additions & 33 deletions gui/app/(dashboard)/database/context-menu.tsx

This file was deleted.

87 changes: 87 additions & 0 deletions gui/app/(dashboard)/database/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import SideMenu, { MenuItem } from '@/components/ui/side-menu';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '@/components/ui/table';
import { listDatabase, listTable } from '../actions';
import { InfinityContextMenuContent } from '../tables/context-menu';

async function InfinityTable() {
const tables = await listTable('default_db');
return (
<Table>
<TableHeader>
<TableRow>
<TableHead className="text-center">Name</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{tables.tables.map((table: string) => (
<TableRow key={table}>
<TableCell className="font-medium">{table}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}

export default async function DatabaseLayout({
searchParams,
children
}: {
searchParams: { q: string; offset: string };
children: React.ReactNode;
}) {
const search = searchParams?.q ?? '';
const offset = searchParams?.offset ?? 0;

const items: MenuItem[] = [
{
key: 'sub1',
label: 'Navigation',
children: [
{
key: 'g1',
label: 'Item 1'
},
{
key: 'g2',
label: 'Item 2'
}
]
}
];

const ret = await listDatabase();
if (ret.databases.length > 1) {
const latestDatabase = ret.databases.at(-1);
const tables = await listTable(latestDatabase);
console.log('🚀 ~ ret:', tables);
items.push({
key: latestDatabase,
label: latestDatabase,
children: tables.tables
});
}

return (
<div className="flex divide-x ">
<section className="w-40">
<SideMenu
items={items}
contextMenuContent={(key: string) => (
<InfinityContextMenuContent
databaseName={key}
></InfinityContextMenuContent>
)}
></SideMenu>
</section>
<section className="flex-1 text-center">{children}</section>
</div>
);
}
136 changes: 2 additions & 134 deletions gui/app/(dashboard)/database/page.tsx
Original file line number Diff line number Diff line change
@@ -1,135 +1,3 @@
import SideMenu, { MenuItem } from '@/components/ui/side-menu';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '@/components/ui/table';
import { listDatabase, listTable } from '../actions';
import { InfinityContextMenuContent } from './context-menu';

const invoices = [
{
invoice: 'INV001',
paymentStatus: 'Paid',
totalAmount: '$250.00',
paymentMethod: 'Credit Card'
},
{
invoice: 'INV002',
paymentStatus: 'Pending',
totalAmount: '$150.00',
paymentMethod: 'PayPal'
},
{
invoice: 'INV003',
paymentStatus: 'Unpaid',
totalAmount: '$350.00',
paymentMethod: 'Bank Transfer'
},
{
invoice: 'INV004',
paymentStatus: 'Paid',
totalAmount: '$450.00',
paymentMethod: 'Credit Card'
},
{
invoice: 'INV005',
paymentStatus: 'Paid',
totalAmount: '$550.00',
paymentMethod: 'PayPal'
},
{
invoice: 'INV006',
paymentStatus: 'Pending',
totalAmount: '$200.00',
paymentMethod: 'Bank Transfer'
},
{
invoice: 'INV007',
paymentStatus: 'Unpaid',
totalAmount: '$300.00',
paymentMethod: 'Credit Card'
}
];

function InfinityTable() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Name</TableHead>
<TableHead>Type</TableHead>
<TableHead>Default</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invoices.map((invoice) => (
<TableRow key={invoice.invoice}>
<TableCell className="font-medium">{invoice.invoice}</TableCell>
<TableCell>{invoice.paymentStatus}</TableCell>
<TableCell>{invoice.paymentMethod}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}

export default async function DatabasePage({
searchParams
}: {
searchParams: { q: string; offset: string };
}) {
const search = searchParams.q ?? '';
const offset = searchParams.offset ?? 0;

const items: MenuItem[] = [
{
key: 'sub1',
label: 'Navigation',
children: [
{
key: 'g1',
label: 'Item 1'
},
{
key: 'g2',
label: 'Item 2'
}
]
}
];

const ret = await listDatabase();
if (ret.databases.length > 1) {
const latestDatabase = ret.databases.at(-1);
const tables = await listTable(latestDatabase);
console.log('🚀 ~ ret:', tables);
items.push({
key: latestDatabase,
label: latestDatabase,
children: tables.tables
});
}

return (
<div className="flex divide-x ">
<section className="w-40">
<SideMenu
items={items}
contextMenuContent={(key: string) => (
<InfinityContextMenuContent
databaseName={key}
></InfinityContextMenuContent>
)}
></SideMenu>
</section>
<section className="flex-1 text-center">
<InfinityTable></InfinityTable>
</section>
</div>
);
export default async function DatabasePage() {
return <div>DatabasePage</div>;
}
40 changes: 0 additions & 40 deletions gui/app/(dashboard)/database/table-creating-dialog.tsx

This file was deleted.

Loading

0 comments on commit db7d7f2

Please sign in to comment.