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

Commit e08eaac

Browse files
TeaByteTeaByte
committed
Cleaning, Fixing Layout
1 parent feb084c commit e08eaac

File tree

9 files changed

+101
-149
lines changed

9 files changed

+101
-149
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22

33
[ TODO LIST ]
44

5-
- [ ] Make a web version ( if possible )
65
- [ ] Add Linux and MacOS Builds
7-
- [ ] Handle Sqlite with password
6+
- [ ] Handle SQLite with password
87
- [x] Render performance for big sqlite files
98
- [x] Execute SQL command tab
109
- [x] Schema Generator

‎src-tauri/Cargo.toml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ default-run = "app"
99
edition = "2021"
1010
rust-version = "1.60"
1111

12-
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
13-
1412
[build-dependencies]
1513
tauri-build = { version = "1.4.0", features = [] }
1614

‎src/app/browse.tsx‎

Lines changed: 66 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ import {
2222
} from "@/components/ui/table";
2323

2424
interface BrowseProps {
25-
setSelectedTable: (value: SetStateAction<string | null>) => void;
25+
setSelectedTable: (value: SetStateAction<string>) => void;
2626
tables: string[];
27-
selectedTable: string | null;
27+
selectedTable: string;
2828
records: Columns;
2929
}
3030

@@ -38,7 +38,6 @@ export default function Browse(props: BrowseProps) {
3838
const endIndex = startIndex + ROWS_PER_PAGE;
3939

4040
const totalPages = Math.ceil(
41-
// @ts-ignore
4241
records[selectedTable]?.[Object.keys(records[selectedTable])[0]]?.length /
4342
ROWS_PER_PAGE
4443
);
@@ -53,7 +52,10 @@ export default function Browse(props: BrowseProps) {
5352
{selectedTable && (
5453
<Select
5554
value={selectedTable}
56-
onValueChange={(table: string) => setSelectedTable(table)}
55+
onValueChange={(table: string) => {
56+
setCurrentPage(1);
57+
setSelectedTable(table);
58+
}}
5759
>
5860
<SelectTrigger className="w-[180px]">
5961
<SelectValue placeholder="Select Table" />
@@ -77,51 +79,63 @@ export default function Browse(props: BrowseProps) {
7779
0}{" "}
7880
Rows
7981
</span>
82+
<span className="text-sm">
83+
( Page {currentPage} of {totalPages} )
84+
</span>
8085
</div>
81-
<div className="mt-2 h-[420px] overflow-auto">
82-
{selectedTable && records[selectedTable] && (
83-
<>
84-
<Table>
85-
<TableHeader>
86-
<TableRow>
87-
{Object.keys(records[selectedTable]).map((column, index) => (
88-
<TableHead key={index}>{column}</TableHead>
89-
))}
90-
</TableRow>
91-
</TableHeader>
92-
<TableBody>
93-
{records[selectedTable][Object.keys(records[selectedTable])[0]]
94-
.slice(startIndex, endIndex)
95-
.map((_, rowIndex) => (
96-
<TableRow key={rowIndex}>
97-
{Object.keys(records[selectedTable]).map(
98-
(column, columnIndex) => (
99-
<TableCell
100-
key={columnIndex}
101-
className="max-w-[150px] truncate"
102-
>
103-
<span>
104-
{
105-
records[selectedTable][column][
106-
rowIndex + startIndex
107-
]
108-
}
109-
</span>
110-
</TableCell>
111-
)
112-
)}
113-
</TableRow>
114-
))}
115-
</TableBody>
116-
</Table>
117-
</>
86+
<section className="flex flex-col">
87+
<div className="mt-2 overflow-auto mb-[55px]">
88+
{selectedTable && records[selectedTable] && (
89+
<>
90+
<Table>
91+
<TableHeader>
92+
<TableRow>
93+
{Object.keys(records[selectedTable]).map(
94+
(column, index) => (
95+
<TableHead key={index}>{column}</TableHead>
96+
)
97+
)}
98+
</TableRow>
99+
</TableHeader>
100+
<TableBody>
101+
{records[selectedTable][
102+
Object.keys(records[selectedTable])[0]
103+
]
104+
.slice(startIndex, endIndex)
105+
.map((_, rowIndex) => (
106+
<TableRow key={rowIndex}>
107+
{Object.keys(records[selectedTable]).map(
108+
(column, columnIndex) => (
109+
<TableCell
110+
key={columnIndex}
111+
className="max-w-[150px] truncate"
112+
>
113+
<span>
114+
{
115+
records[selectedTable][column][
116+
rowIndex + startIndex
117+
]
118+
}
119+
</span>
120+
</TableCell>
121+
)
122+
)}
123+
</TableRow>
124+
))}
125+
</TableBody>
126+
</Table>
127+
</>
128+
)}
129+
</div>
130+
131+
{totalPages > 1 && (
132+
<Pagination
133+
currentPage={currentPage}
134+
totalPages={totalPages}
135+
onPageChange={handleChangePage}
136+
/>
118137
)}
119-
</div>
120-
<Pagination
121-
currentPage={currentPage}
122-
totalPages={totalPages}
123-
onPageChange={handleChangePage}
124-
/>
138+
</section>
125139
</div>
126140
);
127141
}
@@ -137,11 +151,12 @@ const Pagination: React.FC<PaginationProps> = ({
137151
totalPages,
138152
onPageChange,
139153
}) => {
140-
// @ts-ignore
141-
const pageNumbers = [...Array(totalPages).keys()].map((num) => num + 1);
142-
154+
const pageNumbers = Array.from(
155+
{ length: totalPages },
156+
(_, index) => index + 1
157+
);
143158
return (
144-
<ul className="flex overflow-x-scroll">
159+
<ul className="flex overflow-x-scroll fixed bottom-0 w-full">
145160
{pageNumbers.map((page) => (
146161
<li
147162
key={page}

‎src/app/execute.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,30 @@ export default function ExecuteSQL({ table }: { table: string }) {
5555
</button>
5656
{typeof result === "string" ? (
5757
<p>{result}</p>
58-
) : result instanceof Array ? (
59-
<Table>
60-
<TableHeader>
61-
<TableRow>
62-
{Object.keys(result[0]).map((key) => (
63-
<TableHead key={key}>{key}</TableHead>
64-
))}
65-
</TableRow>
66-
</TableHeader>
67-
<TableBody>
68-
{result.map((row, index) => (
69-
<TableRow key={index}>
70-
{Object.values(row).map((value, index) => (
71-
<TableCell key={index} className="max-w-[150px] truncate">
72-
{value}
73-
</TableCell>
58+
) : (
59+
result instanceof Array && (
60+
<Table>
61+
<TableHeader>
62+
<TableRow>
63+
{Object.keys(result[0]).map((key) => (
64+
<TableHead key={key}>{key}</TableHead>
7465
))}
7566
</TableRow>
76-
))}
77-
</TableBody>
78-
</Table>
79-
) : null}
67+
</TableHeader>
68+
<TableBody>
69+
{result.map((row, index) => (
70+
<TableRow key={index}>
71+
{Object.values(row).map((value, index) => (
72+
<TableCell key={index} className="max-w-[150px] truncate">
73+
{value}
74+
</TableCell>
75+
))}
76+
</TableRow>
77+
))}
78+
</TableBody>
79+
</Table>
80+
)
81+
)}
8082
</form>
8183
</div>
8284
);

‎src/app/layout.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
33
import { Merriweather_Sans } from "next/font/google";
44

55
import ThemeProvider from "@/components/theme/provider";
6-
import Toggle from "@/components/theme/toggle";
76

87
const font = Merriweather_Sans({ subsets: ["latin"] });
98
export const metadata: Metadata = {
@@ -26,14 +25,6 @@ export default function RootLayout({
2625
disableTransitionOnChange
2726
>
2827
{children}
29-
<footer className="p-4 fixed bottom-0 w-full bg-background border-t border-secondary">
30-
<div className="flex justify-between items-center">
31-
<Toggle />
32-
<span className="hover:animate-bounce animate-pulse">
33-
SQLite Viewer V0.4
34-
</span>
35-
</div>
36-
</footer>
3728
</ThemeProvider>
3829
</body>
3930
</html>

‎src/app/load.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"use client";
22

3+
import { ReloadIcon } from "@radix-ui/react-icons";
34
import { Columns, TableInfos, TableInfo } from "@/types";
45
import { useState, useEffect } from "react";
6+
import Toggle from "@/components/theme/toggle";
57

68
import { invoke } from "@tauri-apps/api/tauri";
79
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,7 +16,7 @@ export default function Load({ path }: { path: string }) {
1416
const [records, setRecords] = useState<Columns>({});
1517
const [tables, setTables] = useState<string[]>([]);
1618
const [tablesInfo, setTablesInfo] = useState<TableInfos>({});
17-
const [selectedTable, setSelectedTable] = useState<string | null>(null);
19+
const [selectedTable, setSelectedTable] = useState<string>("");
1820

1921
useEffect(() => {
2022
onSelectedDatabase();
@@ -71,6 +73,7 @@ export default function Load({ path }: { path: string }) {
7173
<TabsTrigger value="execute" className="grow">
7274
Execute SQL
7375
</TabsTrigger>
76+
<Toggle />
7477
</TabsList>
7578
<TabsContent value="structure">
7679
<Structure tablesInfo={tablesInfo} />
@@ -88,7 +91,10 @@ export default function Load({ path }: { path: string }) {
8891
</TabsContent>
8992
</Tabs>
9093
) : (
91-
<h1 className="text-2xl w-full mt-20 text-center">Loading Data..</h1>
94+
<div className="flex gap-2 items-center justify-center mt-20">
95+
<h1 className="text-2xl">Reading Content</h1>
96+
<ReloadIcon className="animate-spin w-8 h-8" />
97+
</div>
9298
)}
9399
</div>
94100
);

‎src/app/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ export default function Home() {
4141
>
4242
Select Database
4343
</button>
44-
<p>SQLite Viewer GUI Program written in Rust using Tauri + NextJS</p>
45-
<p>I dont know what to put in this place!</p>
44+
<p>Leave a Start on GitHub ⭐</p>
4645
</div>
4746
)}
4847
</main>

‎src/components/theme/toggle.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { useTheme } from "next-themes";
44
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
55

6-
import { Button } from "@/components/ui/button";
76
import {
87
DropdownMenu,
98
DropdownMenuContent,
@@ -16,13 +15,13 @@ export default function Toggle() {
1615
return (
1716
<DropdownMenu>
1817
<DropdownMenuTrigger asChild>
19-
<Button variant="outline" size="icon">
18+
<button className="flex items-center px-2 hover:opacity-70">
2019
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
2120
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
2221
<span className="sr-only">Toggle theme</span>
23-
</Button>
22+
</button>
2423
</DropdownMenuTrigger>
25-
<DropdownMenuContent align="start">
24+
<DropdownMenuContent align="end">
2625
<DropdownMenuItem onClick={() => setTheme("light")}>
2726
Light
2827
</DropdownMenuItem>

‎src/components/ui/button.tsx‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)