sql execute + fixing

Author: TeaByte

README.md

@@ -1,19 +1,42 @@
 SQLite Viewer GUI Program written in Rust using Tauri + NextJS
 
-( TODO )
-- [ ] Add linux and macos Builds
+[ TODO LIST ]
+
+- [ ] Make a web version ( if possible )
+- [ ] Add Linux and MacOS Builds
 - [ ] Render performance for big sqlite files
-- [ ] Execute SQL command tab
+- [x] Execute SQL command tab
 - [ ] Schema Generator
+- [ ] Sort by column
 - [ ] Add themes
 
 ##
 
+### Features
+
+**1- Browse All Your SQLite Tables.**
+
+![photo](https://i.ibb.co/SBzVnFX/Browse.png)
+
+**2- Database Structure View.**
+
+![photo](https://i.ibb.co/8zGSBHN/Struct.png)
+
+**3- Execute SQL Commands**
+
+![photo](https://i.ibb.co/SnTXqwy/execute.png)
+
+**4- Errors are easy to recognize**
+
+![photo](https://i.ibb.co/Xtb0pZT/error.png)
+
+##
+
 1. **Clone the Repository**
 
    ```sh
-   git clone https://github.com/TeaByte/sqlite-viewer.git
-   cd sqlite-viewer
+   git clone https://github.com/TeaByte/mt-uploader.git
+   cd mt-uploader
    ```
 
 2. **Install Dependencies**
@@ -30,5 +53,3 @@ SQLite Viewer GUI Program written in Rust using Tauri + NextJS
    ```
 
 ##
-
-![photo](https://imgtr.ee/images/2023/09/28/03a88aef88d52e28852a7ec3db4e0cab.jpeg)

app/execute.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { TableInfos } from "@/types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+import { Textarea } from "@/components/ui/textarea";
+
+import { invoke } from "@tauri-apps/api/tauri";
+import React, { useState } from "react";
+
+type x =
+  | { result: { Ok: Array<{ [key: string]: string }> } }
+  | { result: { Err: string } };
+
+export default function ExecuteSQL({ table }: { table: string }) {
+  const [sql, setSQL] = useState("");
+  const [result, setResult] = useState<string | string[]>();
+
+  async function executeSQLCall(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (sql.length === 0) {
+      setResult("No SQL to execute");
+      return;
+    }
+    const executeResult = await invoke<any>("execute", {
+      sql: sql,
+    });
+
+    console.log(executeResult);
+
+    if (executeResult.result.Err) {
+      setResult(executeResult.result.Err);
+      return;
+    }
+
+    if (executeResult.result.Ok.length === 0) {
+      setResult("SQL Executed successfully with no results");
+      return;
+    }
+
+    setResult(executeResult.result.Ok);
+  }
+
+  return (
+    <div className="flex flex-col">
+      <form onSubmit={executeSQLCall} className="px-4 flex flex-col gap-2">
+        <Textarea
+          placeholder={`SELECT * FROM ${table}`}
+          value={sql}
+          onChange={(e) => setSQL(e.target.value)}
+        />
+        <button className="bg-secondary text-primary p-2 px-10 rounded-md hover:bg-primary hover:text-secondary transition-all">
+          Execute SQL
+        </button>
+        {typeof result === "string" ? (
+          <p>{result}</p>
+        ) : result instanceof Array ? (
+          <table className="table-auto">
+            <thead>
+              <tr>
+                {Object.keys(result[0]).map((key) => (
+                  <th key={key} className="border px-4 py-2">
+                    {key}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {result.map((row, index) => (
+                <tr key={index}>
+                  {Object.values(row).map((value, index) => (
+                    <td key={index} className="border px-4 py-2">
+                      {value}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : null}
+      </form>
+    </div>
+  );
+}

app/load.tsx

@@ -5,8 +5,10 @@ import { useState, useEffect } from "react";
 
 import { invoke } from "@tauri-apps/api/tauri";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import Browse from "./browse";
 import Structure from "./structure";
+import ExecuteSQL from "./execute";
 
 export default function Load({ path }: { path: string }) {
   const [records, setRecords] = useState<Columns>({});
@@ -82,7 +84,7 @@ export default function Load({ path }: { path: string }) {
           />
         </TabsContent>
         <TabsContent value="execute">
-          <h1>Not implemented yet!</h1>
+          <ExecuteSQL table={tables[0]} />
         </TabsContent>
       </Tabs>
     </div>

app/page.tsx

@@ -33,9 +33,17 @@ export default function Home() {
       {selectedDataBase ? (
         <Load path={selectedDataBase} />
       ) : (
-        <button className="p-4 bg-primary text-background" onClick={onClick}>
-          Select Database
-        </button>
+        <div className="flex flex-col mt-20 gap-2 text-center">
+          <h1 className="text-center text-5xl">SQLite Viewer</h1>
+          <button
+            className="p-4 bg-primary text-background w-full hover:opacity-80"
+            onClick={onClick}
+          >
+            Select Database
+          </button>
+          <p>SQLite Viewer GUI Program written in Rust using Tauri + NextJS</p>
+          <p>I dont know what to put in this place!</p>
+        </div>
       )}
     </main>
   );