feat: add export for whole query result

gui/src/components/export/export-result-button.tsx

@@ -8,17 +8,42 @@ import {
   SelectValue,
 } from "../ui/select";
 import OptimizeTableState from "../table-optimized/OptimizeTableState";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
+import { getFormatHandlers } from "@gui/lib/export-helper";
 
 export default function ExportResultButton({
   data,
 }: {
   data: OptimizeTableState;
 }) {
+  const [format, setFormat] = useState<string | null>(null);
+
   const onExportClicked = useCallback(() => {
-    // do something here
-    // data has all the information you need to do.
-  }, []);
+    if (!format) return;
+
+    let content = "";
+    const headers = data.getHeaders().map((header) => header.name);
+    const records = data
+      .getAllRows()
+      .map((row) => headers.map((header) => row.raw[header]));
+
+    const tableName = ""; //How do i get Table name
+
+    const formatHandlers = getFormatHandlers(records, headers, tableName);
+
+    const handler = formatHandlers[format];
+    if (handler) {
+      content = handler();
+    }
+
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `export.${format}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [format, data]);
 
   return (
     <Popover>
@@ -30,7 +55,7 @@ export default function ExportResultButton({
       <PopoverContent className="p-0">
         <div className="p-4">
           <div className="mb-2 font-bold">Export</div>
-          <Select>
+          <Select onValueChange={setFormat}>
             <SelectTrigger>
               <SelectValue placeholder="Select export format" />
             </SelectTrigger>

gui/src/components/table-optimized/OptimizeTableState.tsx

@@ -335,6 +335,10 @@ export default class OptimizeTableState {
     return !!this.data[index]?.isRemoved;
   }
 
+  getAllRows() {
+    return this.data;
+  }
+
   // ------------------------------------------------
   // Handle focus logic
   // ------------------------------------------------

gui/src/components/tabs/query-tab.tsx

@@ -21,14 +21,6 @@ import { MultipleQueryProgress, multipleQuery } from "@gui/lib/multiple-query";
 import { DatabaseResultStat } from "@gui/driver";
 import ResultStats from "../result-stat";
 import isEmptyResultStats from "@gui/lib/empty-stats";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
 import ExportResultButton from "../export/export-result-button";
 
 export default function QueryWindow() {

gui/src/lib/export-helper.ts

@@ -44,3 +44,38 @@ export function exportRowsToExcel(records: unknown[][]) {
 
   return result.join("\r\n");
 }
+
+export function exportRowsToJson(
+  headers: string[],
+  records: unknown[][]
+): string {
+  const recordsWithBigIntAsString = records.map((record) =>
+    record.map((value) =>
+      typeof value === "bigint" ? value.toString() : value
+    )
+  );
+
+  const recordsAsObjects = recordsWithBigIntAsString.map((record) =>
+    record.reduce<Record<string, unknown>>((obj, value, index) => {
+      const header = headers[index];
+      if (header !== undefined) {
+        obj[header] = value;
+      }
+      return obj;
+    }, {})
+  );
+
+  return JSON.stringify(recordsAsObjects, null, 2);
+}
+
+export function getFormatHandlers(
+  records: unknown[][],
+  headers: string[],
+  tableName: string
+): Record<string, (() => string) | undefined> {
+  return {
+    csv: () => exportRowsToExcel(records),
+    json: () => exportRowsToJson(headers, records),
+    sql: () => exportRowsToSqlInsert(tableName, headers, records),
+  };
+}

studio/src/app/client/layout.tsx

@@ -1,10 +1,10 @@
-import "@libsqlstudio/gui/css";
-import { Fragment } from "react";
-
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <Fragment>{children}</Fragment>;
-}
+import "@libsqlstudio/gui/css";
+import { Fragment } from "react";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Fragment>{children}</Fragment>;
+}