feat: finish table structure

src-tauri/src/database/engine/mysql/tables.rs

@@ -38,6 +38,8 @@ pub async fn get_columns(
     let mut _conn = pool.get_conn()?;
     let query = format!(
         "SELECT 
+        TABLE_SCHEMA,
+        TABLE_NAME,
         COLUMN_NAME, 
         COLUMN_TYPE, 
         DATA_TYPE, 

src/App.tsx

@@ -3,11 +3,32 @@ import "tabulator-tables/dist/css/tabulator_midnight.min.css";
 import "solid-command-palette/pkg-dist/style.css";
 import { Main } from "components/Screens/Main";
 import { CommandPaletteContext } from "components/CommandPalette/CommandPaletteContext";
+import { Loader } from "components/UI";
+import { createEffect, createSignal, onMount } from "solid-js";
 
 function App() {
+  const [loading, setLoading] = createSignal(true);
+
+  createEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+  });
+
+  onMount(async () => {
+    const theme = localStorage.getItem("theme") || "dark";
+    document.documentElement.dataset.theme = theme;
+  });
+
   return (
     <CommandPaletteContext>
-      <Main />
+      {loading() ? (
+        <div class="flex justify-center items-center h-full bg-base-100 w-full">
+          <Loader />
+        </div>
+      ) : (
+        <Main />
+      )}
     </CommandPaletteContext>
   );
 }

src/components/CommandPalette/actions.ts

@@ -25,7 +25,7 @@ const focusQueryTextArea = defineAction({
   title: t("command_palette.focus_query_text_area"),
   parentActionId: focusOn.id,
   /* Condition for allowing action */
-  //   shortcut: "$mod+e", // $mod = Command on Mac & Control on Windows.
+  shortcut: "$mod+d", // $mod = Command on Mac & Control on Windows.
   run: () => {
     commandPaletteEmitter.emit("focus-query-text-area", true);
   },

src/components/Screens/Console/Content/Content.tsx

@@ -3,7 +3,7 @@ import { useAppSelector } from "services/Context";
 import { AddIcon, CloseIcon } from "components/UI/Icons";
 import { t } from "utils/i18n";
 import { QueryTab } from "./QueryTab/QueryTab";
-import { TableStructureTab } from "./TableStructureTab";
+import { TableStructureTab } from "./TableStructure/TableStructureTab"
 import { ContentComponent, newContentTab} from "services/ConnectionTabs";
 
 export const Content = () => {

src/components/Screens/Console/Content/QueryTab/QueryTab.tsx

@@ -1,4 +1,4 @@
-import { Table } from "./Table";
+import { ResultsTable } from "./ResultesTable";
 import { QueryContentTabData } from "services/ConnectionTabs";
 import { useAppSelector } from "services/Context";
 import { createEffect, createSignal, onCleanup, Show } from "solid-js";
@@ -38,7 +38,7 @@ export const QueryTab = () => {
       </div>
       <div id="results">
         <Show when={data().length}>
-          <Table data={data()} />
+          <ResultsTable data={data()} />
         </Show>
       </div>
     </div>

src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx

@@ -84,6 +84,7 @@ export const QueryTextArea = () => {
     } catch (error) {
       setActiveContentQueryTabMessage("error", error);
     }
+    updateStore()
   };
 
   createEffect(() => {
@@ -93,7 +94,7 @@ export const QueryTextArea = () => {
   const handleKeyDown = async (e: KeyboardEvent) => {
     if (e.key === "f" && e.ctrlKey) {
       onFormat();
-    } else if (e.key === "e" && e.ctrlKey) {
+    } else if ((e.metaKey || e.ctrlKey) && (e.key === 'Enter' || e.key === "e")) {
       await onExecute();
     }
   };

src/components/Screens/Console/Content/QueryTab/Table.tsx → src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx

@@ -1,7 +1,7 @@
 import { createEffect } from "solid-js";
 import { TabulatorFull as Tabulator } from "tabulator-tables";
 
-export const Table = (props: { data: Record<string, any>[] }) => {
+export const ResultsTable = (props: { data: Record<string, any>[] }) => {
   createEffect(() => {
     if (!props.data.length) return;
     const columns = Object.keys(props.data[0]).map((k) => ({

src/components/Screens/Console/Content/TableStructureTab.tsx → src/components/Screens/Console/Content/TableStructure/TableStructureTab.tsx

@@ -1,25 +1,16 @@
 import { useAppSelector } from "services/Context";
-import {
-  createEffect,
-  createSignal,
-  For,
-  Match,
-  onMount,
-  Switch,
-} from "solid-js";
+import { createSignal, For, Match, onMount, Switch } from "solid-js";
 import { invoke } from "@tauri-apps/api";
 import { TableStructureResult } from "interfaces";
 import { t } from "utils/i18n";
 import { Loader } from "components/UI";
 import { createStore } from "solid-js/store";
-import { Table } from "./TableStructure/Tabs/Table";
+import { StructureTable } from "./Tabs/StructureTable";
+import { TableStructureContentTabData } from "services/ConnectionTabs";
 
 export const TableStructureTab = () => {
   const {
-    connectionsService: {
-      getActiveConnection,
-      getActiveContentTab
-    },
+    connectionsService: { getActiveConnection, getActiveContentTab },
     errorService: { addError },
   } = useAppSelector();
   const [loading, setLoading] = createSignal(true);
@@ -31,13 +22,12 @@ export const TableStructureTab = () => {
 
   onMount(async () => {
     const activeConnection = getActiveConnection();
-    const activeTab = getActiveContentTab()
-    console.log(activeTab)
+    const activeTab = getActiveContentTab();
     try {
       const { columns, indices, triggers, constraints } =
         await invoke<TableStructureResult>("get_table_structure", {
           connId: activeConnection.id,
-          tableName: "app",
+          tableName: (activeTab.data as TableStructureContentTabData).table,
         });
       setData({ columns, indices, triggers, constraints });
     } catch (error) {
@@ -73,7 +63,7 @@ export const TableStructureTab = () => {
               <For each={tabs}>
                 {(item, idx) => (
                   <Match when={tabIdx() === idx()}>
-                    <Table data={data[item]} />
+                    <StructureTable data={data[item]} />
                   </Match>
                 )}
               </For>

src/components/Screens/Console/Content/TableStructure/Tabs/Table.tsx → src/components/Screens/Console/Content/TableStructure/Tabs/StructureTable.tsx

@@ -1,6 +1,5 @@
-export const Table = (props: { data: Record<string, any>[] }) => {
-  console.log(props.data);
-  const columns = Object.keys(props.data[0]);
+export const StructureTable = (props: { data: Record<string, any>[] }) => {
+  const columns = props.data.length ? Object.keys(props.data[0]) : [];
   const rows = props.data.map((row) => Object.values(row));
   return (
     <div class="overflow-x-auto">

src/components/Screens/Main.tsx

@@ -10,7 +10,7 @@ export const Main = () => {
   const {
     connectionsService: {
       removeTab,
-      // clearStore,
+      clearStore,
       connectionStore,
       setConnectionStore,
     },
@@ -61,7 +61,8 @@ export const Main = () => {
           </For>
         </div>
         <div>
-          {/*<button onClick={async () => await clearStore()}>Reset store</button> */}
+          {/**/}
+          <button onClick={async () => await clearStore()}>Reset store</button> 
           <ThemeSwitch />
         </div>
       </div>

src/components/UI/Loader.tsx

@@ -1,3 +1,3 @@
 export const Loader = () => {
-  return <span class="loading text-primary loading-bars loading-lg"></span>;
+  return <span class="loading text-primary loading-bars loading-xl"></span>;
 };

src/components/UI/ThemeSwitch.tsx

@@ -1,26 +1,20 @@
 import { For, Show } from "solid-js";
 import { titleCase } from "../../utils/formatters";
 const THEMES = [
-  "light",
   "dark",
   "aqua",
   "synthwave",
   "dracula",
   "night",
   "cupcake",
 ] as const;
-import { onMount } from "solid-js";
 import { t } from "i18next";
 import { useAppSelector } from "services/Context";
 
 export const ThemeSwitch = () => {
   const {
     appService: { appStore },
   } = useAppSelector();
-  onMount(async () => {
-    const theme = localStorage.getItem("theme") || "dark";
-    document.documentElement.dataset.theme = theme;
-  });
 
   const select = (theme: (typeof THEMES)[number]) => {
     document.documentElement.dataset.theme = theme;

src/index.css

@@ -165,3 +165,7 @@ dialog {
 .solid-contextmenu {
   box-shadow: none;
 }
+
+.loading-xl {
+  width: 6rem;
+}

src/services/ConnectionTabs.ts

@@ -141,7 +141,16 @@ export const ConnectionTabsService = () => {
 
   const updateStore = debounce(async () => {
     await store.set(CONNECTIONS_TABS_KEY, JSON.stringify(connectionStore));
-    await store.set(CONTENT_TABS_KEY, JSON.stringify(contentStore));
+    const contentStoreTabs = contentStore.tabs.map((t) => {
+      if (t.key === ContentComponent.QueryTab) {
+        return { ...t, data: { ...t.data, results: [] } };
+      }
+      return t;
+    });
+    await store.set(
+      CONTENT_TABS_KEY,
+      JSON.stringify({ ...contentStore, tabs: contentStoreTabs })
+    );
     await store.save();
   }, 1000);
 
@@ -177,7 +186,9 @@ export const ConnectionTabsService = () => {
     return contentStore.tabs[contentStore.idx];
   };
 
-  const setActiveContentTableStructureTabData = (data: TableStructureContentTabData) => {
+  const setActiveContentTableStructureTabData = (
+    data: TableStructureContentTabData
+  ) => {
     const tab = getActiveContentTab();
     if (!tab) return;
     setContentStore(
@@ -223,7 +234,9 @@ export const ConnectionTabsService = () => {
     setContentStore(
       "tabs",
       contentStore.tabs.map((t, i) =>
-        i === contentStore.idx ? { ...t, error: { type, message: String(message) } } : t
+        i === contentStore.idx
+          ? { ...t, error: { type, message: String(message) } }
+          : t
       )
     );
   };

tailwind.config.js

@@ -11,7 +11,7 @@ export default {
     require("daisyui")
   ],
   daisyui: {
-    themes: ["light", "dark", "aqua", "synthwave", "dracula", "night", "cupcake"], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+    themes: ["dark", "aqua", "synthwave", "dracula", "night", "cupcake"], // true: all themes | false: only + dark | array: specific themes like this ["light", "dark", "cupcake"]
     darkTheme: "dark", // name of one of the included themes for dark mode
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components