Skip to content
This repository was archived by the owner on Jul 2, 2024. It is now read-only.

Commit a9afa64

Browse files
TeaByteTeaByte
committed
first commit
1 parent 52c9472 commit a9afa64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+6372
-284
lines changed

‎app/browse.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use client";
2+
3+
import { Columns } from "@/types";
4+
import { SetStateAction } from "react";
5+
import {
6+
Select,
7+
SelectContent,
8+
SelectGroup,
9+
SelectItem,
10+
SelectLabel,
11+
SelectTrigger,
12+
SelectValue,
13+
} from "@/components/ui/select";
14+
import {
15+
Table,
16+
TableBody,
17+
TableCell,
18+
TableHead,
19+
TableHeader,
20+
TableRow,
21+
} from "@/components/ui/table";
22+
23+
interface BrowseProps {
24+
setSelectedTable: (value: SetStateAction<string | null>) => void;
25+
tables: string[];
26+
selectedTable: string | null;
27+
records: Columns;
28+
}
29+
30+
export default function Browse(props: BrowseProps) {
31+
const { setSelectedTable, tables, selectedTable, records } = props;
32+
return (
33+
<div className="w-full">
34+
<div className="px-2">
35+
<Select
36+
// value={tables[0]}
37+
onValueChange={(table: string) => setSelectedTable(table)}
38+
>
39+
<SelectTrigger className="w-[180px]">
40+
<SelectValue placeholder="Select Table" />
41+
</SelectTrigger>
42+
<SelectContent className="h-[150px] overflow-y-auto">
43+
<SelectGroup>
44+
<SelectLabel>Select Table</SelectLabel>
45+
{tables.map((table, index) => (
46+
<SelectItem value={table} key={index}>
47+
{table}
48+
</SelectItem>
49+
))}
50+
</SelectGroup>
51+
</SelectContent>
52+
</Select>
53+
</div>
54+
<div className="mt-3 h-[420px] overflow-auto">
55+
{selectedTable && records[selectedTable] && (
56+
<Table>
57+
<TableHeader>
58+
<TableRow>
59+
{Object.keys(records[selectedTable]).map((column, index) => (
60+
<TableHead key={index}>{column}</TableHead>
61+
))}
62+
</TableRow>
63+
</TableHeader>
64+
<TableBody>
65+
{records[selectedTable][
66+
Object.keys(records[selectedTable])[0]
67+
].map((_, rowIndex) => (
68+
<TableRow key={rowIndex}>
69+
{Object.keys(records[selectedTable]).map(
70+
(column, columnIndex) => (
71+
<TableCell key={columnIndex}>
72+
{records[selectedTable][column][rowIndex]}
73+
</TableCell>
74+
)
75+
)}
76+
</TableRow>
77+
))}
78+
</TableBody>
79+
</Table>
80+
)}
81+
</div>
82+
</div>
83+
);
84+
}

‎app/globals.css

+50-18
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,58 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
5+
@layer base {
126
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
7+
--background: 0 0% 100%;
8+
--foreground: 0 0% 3.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 0 0% 3.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 0 0% 3.9%;
13+
--primary: 0 0% 9%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 0 0% 96.1%;
16+
--secondary-foreground: 0 0% 9%;
17+
--muted: 0 0% 96.1%;
18+
--muted-foreground: 0 0% 45.1%;
19+
--accent: 0 0% 96.1%;
20+
--accent-foreground: 0 0% 9%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 0 0% 89.8%;
24+
--input: 0 0% 89.8%;
25+
--ring: 0 0% 3.9%;
26+
--radius: 0.3rem;
27+
}
28+
29+
.dark {
30+
--background: 0 0% 3.9%;
31+
--foreground: 0 0% 98%;
32+
--card: 0 0% 3.9%;
33+
--card-foreground: 0 0% 98%;
34+
--popover: 0 0% 3.9%;
35+
--popover-foreground: 0 0% 98%;
36+
--primary: 0 0% 98%;
37+
--primary-foreground: 0 0% 9%;
38+
--secondary: 0 0% 14.9%;
39+
--secondary-foreground: 0 0% 98%;
40+
--muted: 0 0% 14.9%;
41+
--muted-foreground: 0 0% 63.9%;
42+
--accent: 0 0% 14.9%;
43+
--accent-foreground: 0 0% 98%;
44+
--destructive: 0 62.8% 30.6%;
45+
--destructive-foreground: 0 0% 98%;
46+
--border: 0 0% 14.9%;
47+
--input: 0 0% 14.9%;
48+
--ring: 0 0% 83.1%;
1649
}
1750
}
1851

19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
52+
@layer base {
53+
* {
54+
@apply border-border;
55+
}
56+
body {
57+
@apply bg-background text-foreground;
58+
}
2759
}

‎app/layout.tsx

+20-10
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
1-
import './globals.css'
2-
import type { Metadata } from 'next'
3-
import { Inter } from 'next/font/google'
1+
import "./globals.css";
2+
import type { Metadata } from "next";
3+
import { Merriweather_Sans } from "next/font/google";
44

5-
const inter = Inter({ subsets: ['latin'] })
5+
import ThemeProvider from "@/components/theme/provider";
66

7+
const font = Merriweather_Sans({ subsets: ["latin"] });
78
export const metadata: Metadata = {
8-
title: 'Create Next App',
9-
description: 'Generated by create next app',
10-
}
9+
title: "Rust SQLite Viewer",
10+
description: "Rust SQLite Viewer",
11+
};
1112

1213
export default function RootLayout({
1314
children,
1415
}: {
15-
children: React.ReactNode
16+
children: React.ReactNode;
1617
}) {
1718
return (
1819
<html lang="en">
19-
<body className={inter.className}>{children}</body>
20+
<body className={font.className}>
21+
<ThemeProvider
22+
attribute="class"
23+
defaultTheme="system"
24+
enableSystem
25+
disableTransitionOnChange
26+
>
27+
{children}
28+
</ThemeProvider>
29+
</body>
2030
</html>
21-
)
31+
);
2232
}

‎app/load.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
"use client";
2+
3+
import { Columns, TableInfos, TableInfo } from "@/types";
4+
import { useState, useEffect } from "react";
5+
6+
import { invoke } from "@tauri-apps/api/tauri";
7+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
8+
import Browse from "./browse";
9+
import Structure from "./structure";
10+
11+
export default function Load({ path }: { path: string }) {
12+
const [records, setRecords] = useState<Columns>({});
13+
const [tables, setTables] = useState<string[]>([]);
14+
const [tablesInfo, setTablesInfo] = useState<TableInfos>({});
15+
const [selectedTable, setSelectedTable] = useState<string | null>(null);
16+
17+
useEffect(() => {
18+
onSelectedDatabase();
19+
}, []);
20+
21+
const onSelectedDatabase = async () => {
22+
await invoke("change_database_path", {
23+
newPath: path,
24+
});
25+
26+
const tableNames = await invoke<string[]>("get_tables");
27+
if (tableNames.length === 0) {
28+
console.log("No tables or wrong database path");
29+
return;
30+
}
31+
32+
const dbTablesInfo: TableInfos = {};
33+
const dbColumns: Columns = {};
34+
35+
for (const table of tableNames) {
36+
const tableInfo = await invoke<TableInfo[]>("get_table_info", {
37+
tableName: table,
38+
});
39+
40+
dbTablesInfo[table] = tableInfo;
41+
42+
dbColumns[table] = {};
43+
for (const tableInfoEntry of tableInfo) {
44+
const columns = await invoke<string[]>("get_column", {
45+
tableName: table,
46+
columnName: tableInfoEntry.name,
47+
});
48+
dbColumns[table][tableInfoEntry.name] = columns;
49+
}
50+
}
51+
52+
setTablesInfo(dbTablesInfo);
53+
setTables(tableNames);
54+
setRecords(dbColumns);
55+
setSelectedTable(tableNames[0]);
56+
console.log(dbColumns);
57+
};
58+
59+
return (
60+
<div className="w-full">
61+
<Tabs defaultValue="structure">
62+
<TabsList className="w-full flex gap-2">
63+
<TabsTrigger value="structure" className="grow">
64+
Structure
65+
</TabsTrigger>
66+
<TabsTrigger value="browse" className="grow">
67+
Browse Data
68+
</TabsTrigger>
69+
<TabsTrigger value="execute" className="grow">
70+
Execute SQL
71+
</TabsTrigger>
72+
</TabsList>
73+
<TabsContent value="structure">
74+
<Structure tablesInfo={tablesInfo} />
75+
</TabsContent>
76+
<TabsContent value="browse">
77+
<Browse
78+
tables={tables}
79+
selectedTable={selectedTable}
80+
records={records}
81+
setSelectedTable={setSelectedTable}
82+
/>
83+
</TabsContent>
84+
<TabsContent value="execute">
85+
<h1>execute</h1>
86+
</TabsContent>
87+
</Tabs>
88+
</div>
89+
);
90+
}

0 commit comments

Comments
 (0)