feat: add dialect to conn config

fix: table structure not being rerendered

src-tauri/src/database/connections.rs

@@ -26,6 +26,23 @@ pub enum Scheme {
     Sqlite(FileConnectionMode),
 }
 
+#[derive(Debug, Serialize, Deserialize, PartialEq, Clone)]
+pub enum Dialect {
+    Mysql,
+    Postgres,
+    Sqlite,
+}
+
+impl Dialect {
+    fn as_str(&self) -> &'static str {
+        match self {
+            Dialect::Mysql => "mysql",
+            Dialect::Postgres => "postgres",
+            Dialect::Sqlite => "sqlite",
+        }
+    }
+}
+
 #[derive(Debug, Serialize, Deserialize, PartialEq, Clone)]
 pub struct SocketCredentials {
     pub username: String,
@@ -47,6 +64,7 @@ pub struct HostCredentials {
 pub struct ConnectionConfig {
     pub id: Uuid,
     pub scheme: Scheme,
+    pub dialect: Dialect,
     pub name: String,
     pub color: String,
 }
@@ -90,6 +108,11 @@ impl ConnectionConfig {
         let id = Uuid::new_v4();
         Ok(ConnectionConfig {
             id,
+            dialect: match scheme {
+                Scheme::Mysql(_) => Dialect::Mysql,
+                Scheme::Postgres(_) => Dialect::Postgres,
+                Scheme::Sqlite(_) => Dialect::Sqlite,
+            },
             scheme,
             name: name.to_string(),
             color: color.to_string(),
@@ -188,7 +211,9 @@ impl ConnectedConnection {
 
     pub async fn get_constraints(&self) -> Result<Value> {
         match &self.pool {
-            ConnectionPool::Mysql(pool) => engine::mysql::tables::get_constraints(self, pool, None).await,
+            ConnectionPool::Mysql(pool) => {
+                engine::mysql::tables::get_constraints(self, pool, None).await
+            }
             // ConnectionPool::Postgres(_pool) => todo!(),
             // ConnectionPool::Sqlite(_pool) => todo!(),
         }
@@ -212,7 +237,9 @@ impl ConnectedConnection {
 
     pub async fn get_triggers(&self) -> Result<Value> {
         match &self.pool {
-            ConnectionPool::Mysql(pool) => engine::mysql::tables::get_triggers(self, pool, None).await,
+            ConnectionPool::Mysql(pool) => {
+                engine::mysql::tables::get_triggers(self, pool, None).await
+            }
             // ConnectionPool::Postgres(_pool) => todo!(),
             // ConnectionPool::Sqlite(_pool) => todo!(),
         }
@@ -232,11 +259,13 @@ pub fn add_connection(db: &Connection, conn: &ConnectionConfig) -> Result<()> {
         "INSERT INTO connections (
             id,
             scheme,
+            dialect, 
             name,
             color
             ) VALUES (
                 :id,
                 :scheme,
+                :dialect,
                 :name,
                 :color
                 )",
@@ -246,6 +275,7 @@ pub fn add_connection(db: &Connection, conn: &ConnectionConfig) -> Result<()> {
         ":id": conn.id,
         ":name": conn.name,
         ":scheme": scheme,
+        ":dialect": conn.dialect.as_str(),
         ":color": conn.color,
     })?;
 
@@ -270,6 +300,11 @@ pub fn get_all_connections(db: &Connection) -> Result<Vec<ConnectionConfig>> {
             id: row.get("id")?,
             name: row.get("name")?,
             color: row.get("color")?,
+            dialect: match scheme {
+                Scheme::Mysql(_) => Dialect::Mysql,
+                Scheme::Postgres(_) => Dialect::Postgres,
+                Scheme::Sqlite(_) => Dialect::Sqlite,
+            },
             scheme,
         });
     }

src-tauri/src/database/database.rs

@@ -48,6 +48,7 @@ pub fn create_app_db(app_path: &str) -> Result<()> {
         "create table `connections` (
           `id`TEXT not null,
           `scheme` TEXT not null,
+          `dialect` varchar(255) not null,
           `name` varchar(255) not null,
           `color` varchar(255) not null
         )",

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

@@ -13,7 +13,6 @@ export const Content = () => {
       setContentIdx,
       addContentTab,
       removeContentTab,
-      getContent,
     },
   } = useAppSelector();
 
@@ -23,11 +22,11 @@ export const Content = () => {
         <For each={contentStore.tabs}>
           {(_tab, idx) => (
             <div
-              class="tab py-2 tab-md tab-lifted"
+              class="tab tab-md tab-lifted !pr-1 !pl-1"
               classList={{ "tab-active": contentStore.idx === idx() }}
             >
               <button
-                class="text-xs p-1 px-2"
+                class="text-xs p-1 px-3"
                 tabindex={0}
                 onClick={() => setContentIdx(idx())}
               >
@@ -36,29 +35,35 @@ export const Content = () => {
               <Show when={idx() > 0}>
                 <button
                   onClick={() => removeContentTab(idx())}
-                  class="ml-2 mb-1"
+                  class="ml-2 mb-1 p-1"
                 >
                   <CloseIcon />
                 </button>
               </Show>
             </div>
           )}
         </For>
-        <div class="tab py-2 tab-sm tab-lifted tab-active">
+        <div class="tab tab-sm tab-lifted tab-active">
           <button onClick={() => addContentTab()}>
             <AddIcon />
           </button>
         </div>
       </div>
       <div class="flex-1">
-        <Switch>
-          <Match when={getContent()?.key === ContentTab.Query}>
-            <QueryTab />
-          </Match>
-          <Match when={getContent().key === ContentTab.TableStructure}>
-            <TableStructureTab />
-          </Match>
-        </Switch>
+        <For each={contentStore.tabs}>
+          {(tab, idx) => (
+            <Show when={contentStore.idx === idx()}>
+              <Switch>
+                <Match when={tab.key === ContentTab.Query}>
+                  <QueryTab />
+                </Match>
+                <Match when={tab.key === ContentTab.TableStructure}>
+                  <TableStructureTab />
+                </Match>
+              </Switch>
+            </Show>
+          )}
+        </For>
       </div>
     </div>
   );

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

@@ -1,28 +1,23 @@
 import { createSignal, For, Match, Switch } from "solid-js";
-import { TableStrucureEntity, TableStrucureEntities } from "interfaces";
+import {
+  TableEntity,
+  TableStrucureEntities,
+  TableStrucureEntityType,
+} from "interfaces";
 import { t } from "utils/i18n";
 import { StructureTable } from "./Tabs/StructureTable";
 import { useAppSelector } from "services/Context";
-import { TableStructureContentTabData } from "services/ConnectionTabs";
 
 export const TableStructureTab = () => {
   const {
-    connectionsService: { getContentData },
+    connectionsService: { getContentData, getConnection },
   } = useAppSelector();
-  const [tab, setTab] = createSignal<
-    keyof Omit<TableStructureContentTabData, "table">
-  >(TableStrucureEntity.Columns);
-  // const [data, setData] = createStore<
-  //   Omit<TableStructureContentTabData, "table">
-  // >({
-  //   columns: [],
-  //   indices: [],
-  //   triggers: [],
-  //   constraints: [],
-  // });
+  const [tab, setTab] = createSignal<TableStrucureEntityType>(
+    TableEntity.columns
+  );
 
   return (
-    <div class="bg-base-200 rounded-tl-md p-2 h-full">
+    <div class="bg-base-100 rounded-tl-md p-2 h-full">
       <div>
         <div class="flex justify-center">
           <div class="tabs tabs-boxed gap-3">
@@ -45,6 +40,8 @@ export const TableStructureTab = () => {
                 <Match when={item === tab()}>
                   <StructureTable
                     data={getContentData("TableStructure")[item]}
+                    type={item}
+                    dialect={getConnection().connection.dialect}
                   />
                 </Match>
               )}

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

@@ -1,8 +1,15 @@
-import { Row } from "interfaces";
+import { DialectType, Row, TableStrucureEntityType } from "interfaces";
+import { sortTableStructure } from "utils/utils";
 
-export const StructureTable = (props: { data: Row[] }) => {
-  const columns = props.data.length ? Object.keys(props.data[0]) : [];
-  const rows = props.data.map((row) => Object.values(row));
+export const StructureTable = (props: {
+  data: Row[];
+  dialect: DialectType;
+  type: TableStrucureEntityType;
+}) => {
+  const columns = props.data.length
+    ? sortTableStructure(Object.keys(props.data[0]), props.dialect, props.type)
+    : [];
+  const rows = props.data.map((row) => columns.map((column) => row[column]));
   return (
     <div class="overflow-x-auto">
       <table class="table">
@@ -19,7 +26,7 @@ export const StructureTable = (props: { data: Row[] }) => {
             <tr>
               <th>{idx + 1}</th>
               {row.map((cell) => (
-                <td>{cell}</td>
+                <td>{String(cell)}</td>
               ))}
             </tr>
           ))}

src/components/Screens/Console/Sidebar/Sidebar.tsx

@@ -77,11 +77,11 @@ export const Sidebar = () => {
                 <For each={table.columns}>
                   {(column) => (
                     <div class="flex w-full justify-between items-center w-full border-b-2 border-base-300">
-                      <span class="text-xs">
+                      <span class="text-xs font-semibold text-warning">
                         <span class="px-1"></span>
                         {column.name}
                       </span>
-                      <span class="text-xs text-neutral-focus font-medium ml-2">
+                      <span class="text-xs font-medium ml-2">
                         {column.props.COLUMN_TYPE}
                       </span>
                     </div>

src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx

@@ -40,7 +40,7 @@ export const TableColumnsCollapse = (props: {
   };
 
   return (
-    <div class="w-full" onContextMenu={(e) => show(e)}>
+    <div class="w-full border-b-[0.5px] border-neutral-800" onContextMenu={(e) => show(e)}>
       <Menu id={menu_id} animation={animation.fade} theme={"dark"}>
         <Item onClick={({ props }) => addTableStructureTab(props.table)}>
           {t("components.sidebar.show_table_structure")}
@@ -82,7 +82,7 @@ export const TableColumnsCollapse = (props: {
             />
           </svg>
         </label>
-        <span class="ml-2">{props.title}</span>
+        <span class="ml-1 font-semibold">{props.title}</span>
       </div>
       {open() && props.children}
     </div>

src/components/Screens/Home/Connections/AddConnectionForm.tsx

@@ -13,13 +13,13 @@ import {
 } from "components/UI";
 import {
   PORTS_MAP,
-  Schemes,
+  Dialect,
   AvailableConnectionModes,
   SocketPathDefaults,
   connectionColors,
   ConnectionMode,
   connectionModes,
-  schemes,
+  dialects,
   HostCredentials,
   SocketCredentials,
   FileCredentials,
@@ -43,7 +43,7 @@ export const ConnectionFormSchema = z.object({
     .string()
     .min(MIN_LENGTH_STR, messages.length)
     .max(MAX_LENGTH_STR, messages.length),
-  scheme: z.enum(schemes),
+  scheme: z.enum(dialects),
   mode: z.enum(connectionModes),
   username: z
     .string()
@@ -114,15 +114,15 @@ export * from "./AddConnectionForm";
 
 const defaultValues = {
   name: "My Connection",
-  scheme: Schemes.Mysql,
+  scheme: Dialect.Mysql,
   port: 3306,
-  color: "orange",
-  mode: AvailableConnectionModes[Schemes.Mysql][0],
+  color: "cyan",
+  mode: AvailableConnectionModes[Dialect.Mysql][0],
   file: "",
   host: "localhost",
   username: "root",
-  password: "noir",
-  dbname: "noir",
+  password: "example",
+  dbname: "world_x",
 };
 
 const AddConnectionForm = (props: {
@@ -178,14 +178,14 @@ const AddConnectionForm = (props: {
         <div class="grid grid-cols-6 gap-3">
           <div
             class={
-              formData().scheme === Schemes.Sqlite ? "col-span-4" : "col-span-2"
+              formData().scheme === Dialect.Sqlite ? "col-span-4" : "col-span-2"
             }
           >
             <Select
               id="scheme"
               name="scheme"
               label={t("components.add_connection_form.labels.scheme")}
-              options={schemes.map((sc) => ({
+              options={dialects.map((sc) => ({
                 value: sc,
                 label: titleCase(sc),
               }))}
@@ -201,7 +201,7 @@ const AddConnectionForm = (props: {
               }}
             />
           </div>
-          <Show when={formData().scheme !== Schemes.Sqlite}>
+          <Show when={formData().scheme !== Dialect.Sqlite}>
             <div class="col-span-2">
               <Select
                 id="mode"
@@ -224,14 +224,14 @@ const AddConnectionForm = (props: {
           </Show>
           <div class="col-span-2">
             <Switch>
-              <Match when={formData().scheme === Schemes.Sqlite}>
+              <Match when={formData().scheme === Dialect.Sqlite}>
                 <FileInput
                   label={t("components.add_connection_form.labels.file")}
                   formHandler={formHandler}
                   name="file"
                 />
               </Match>
-              <Match when={formData().scheme !== Schemes.Sqlite}>
+              <Match when={formData().scheme !== Dialect.Sqlite}>
                 <TextInput
                   label={t("components.add_connection_form.labels.dbname")}
                   min={1}
@@ -244,7 +244,7 @@ const AddConnectionForm = (props: {
             </Switch>
           </div>
         </div>
-        <Show when={formData().scheme !== Schemes.Sqlite}>
+        <Show when={formData().scheme !== Dialect.Sqlite}>
           <div class="grid grid-cols-6 gap-3">
             <Switch>
               <Match when={formData().mode === ConnectionMode.Host}>

src/components/Screens/Home/Connections/ConnectionsList/ConnectionItem/ActionsMenu.tsx

@@ -16,7 +16,7 @@ export const ActionsMenu = (props: { connection: ConnectionConfig }) => {
       const { result } = await invoke<RawQueryResult>("get_columns", {
         connId: config.id,
       });
-      const schema = columnsToSchema(result);
+      const schema = columnsToSchema(result, config.dialect);
       await addConnectionTab({
         id: config.id,
         label: config.name,