feat: add command palette and style table

invm · Aug 11, 2023 · 45fb652 · 45fb652
1 parent 690798d
commit 45fb652
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 57 deletions.
diff --git a/src-tauri/src/handlers/queries.rs b/src-tauri/src/handlers/queries.rs
@@ -7,11 +7,8 @@ use serde_json::Value;
 use tauri::{command, AppHandle};
 
 #[command]
-pub async fn execute_query(app_handle: AppHandle, conn_id: String, mut query: String) -> CommandResult<Value> {
+pub async fn execute_query(app_handle: AppHandle, conn_id: String, query: String) -> CommandResult<Value> {
     let connection = app_handle.acquire_connection(conn_id);
-    if !query.to_lowercase().ends_with("limit 1000") {
-        query.push_str(" limit 1000");
-    }
     let result = connection.execute_query(query).await?;
     Ok(result)
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,64 +1,94 @@
-import 'utils/i18n';
-import { useAppSelector } from 'services/Context';
-import { Alerts } from 'components/UI';
-import { For, Match, Show, Switch } from 'solid-js';
-import { CloseIcon } from 'components/UI/Icons';
-import { ThemeSwitch } from 'components/UI/ThemeSwitch';
-import { Console } from 'components/Screens/Console/Console';
-import { Home } from 'components/Screens/Home/Home';
+import "utils/i18n";
+import { useAppSelector } from "services/Context";
+import { Alerts } from "components/UI";
+import { For, Match, Show, Switch } from "solid-js";
+import { CloseIcon } from "components/UI/Icons";
+import { ThemeSwitch } from "components/UI/ThemeSwitch";
+import { Console } from "components/Screens/Console/Console";
+import { Home } from "components/Screens/Home/Home";
 import "tabulator-tables/dist/css/tabulator_midnight.min.css";
+import { Root, CommandPalette } from 'solid-command-palette';
+import { actions } from './actions';
+import 'solid-command-palette/pkg-dist/style.css';
 
 function App() {
-  const { connectionsService: { removeTab, clearStore, connectionStore, setConnectionStore } } = useAppSelector()
+  const {
+    connectionsService: {
+      removeTab,
+      // clearStore,
+      connectionStore,
+      setConnectionStore,
+    },
+  } = useAppSelector();
 
   const closeTab = async (id: string) => {
-    await removeTab(id)
-  }
+    await removeTab(id);
+  };
+
+  const actionsContext = {
+    increment() {
+      console.log("increment count state by 1");
+    },
+  };
 
   return (
-    <div class="w-full h-full flex flex-col">
-      <div class="px-2 pb-2 bg-base-300 tabs tabs-boxed rounded-none gap-2 flex justify-between items-center">
-        <div class="flex items-center">
+    <Root actions={actions} actionsContext={actionsContext}>
+      <CommandPalette />
+      <div class="w-full h-full flex flex-col">
+        <div class="px-2 pb-2 bg-base-300 tabs tabs-boxed rounded-none gap-2 flex justify-between items-center">
           <div class="flex items-center">
-            <div onClick={() => { setConnectionStore('idx', 0) }} 
-              class="tab tab-md"
-              classList={{ 'tab-active': connectionStore.idx === 0, }} >
-              <span class="text-md font-bold">Home</span>
+            <div class="flex items-center">
+              <div
+                onClick={() => {
+                  setConnectionStore("idx", 0);
+                }}
+                class="tab tab-md"
+                classList={{ "tab-active": connectionStore.idx === 0 }}
+              >
+                <span class="text-md font-bold">Home</span>
+              </div>
             </div>
+            <For each={connectionStore.tabs}>
+              {(tab, idx) => (
+                <div class="flex items-center">
+                  <div
+                    onClick={() => {
+                      setConnectionStore("idx", idx() + 1);
+                    }}
+                    class="tab tab-md"
+                    classList={{
+                      "tab-active": connectionStore.idx === idx() + 1,
+                    }}
+                  >
+                    <span class="text-md font-bold">{tab.label}</span>
+                  </div>
+                  <Show when={connectionStore.idx === idx() + 1}>
+                    <button onClick={() => closeTab(tab.id!)} class="pl-2 mb-1">
+                      <CloseIcon />
+                    </button>
+                  </Show>
+                </div>
+              )}
+            </For>
+          </div>
+          <div>
+            {/*<button onClick={async () => await clearStore()}>Reset store</button> */}
+            <ThemeSwitch />
           </div>
-          <For each={connectionStore.tabs}>
-            {(tab, idx) =>
-              <div class="flex items-center">
-                <div onClick={() => { setConnectionStore('idx', idx() + 1) }}
-                  class="tab tab-md"
-                  classList={{ 'tab-active': connectionStore.idx === idx() + 1, }}
-                ><span class="text-md font-bold">{tab.label}</span></div>
-                <Show when={connectionStore.idx === idx() + 1}>
-                  <button onClick={() => closeTab(tab.id!)} class="pl-2 mb-1">
-                    <CloseIcon />
-                  </button>
-                </Show>
-              </div>
-            }
-          </For>
         </div>
-        <div>
-          <button onClick={async () => await clearStore()}>Reset store</button>
-          <ThemeSwitch />
+        <div class="flex-1 overflow-hidden">
+          <Switch>
+            <Match when={connectionStore.idx === 0}>
+              <Home />
+            </Match>
+            <Match when={connectionStore.idx !== 0}>
+              <Console />
+            </Match>
+          </Switch>
         </div>
+        <Alerts />
       </div>
-      <div class="flex-1 overflow-hidden">
-        <Switch>
-          <Match when={connectionStore.idx === 0}>
-            <Home />
-          </Match>
-          <Match when={connectionStore.idx !== 0}>
-            <Console />
-          </Match>
-        </Switch>
-      </div>
-      <Alerts />
-    </div >
+    </Root>
   );
 }
 

diff --git a/src/actions.ts b/src/actions.ts
@@ -0,0 +1,25 @@
+import { defineAction } from 'solid-command-palette';
+
+const minimalAction = defineAction({
+  id: 'minimal',
+  title: 'Minimal Action',
+  run: () => {
+    console.log('ran minimal action');
+  },
+});
+
+const incrementCounterAction = defineAction({
+  id: 'increment-counter',
+  title: 'Increment Counter by 1',
+  subtitle: 'Press CMD + E to trigger this.',
+  shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows.
+  run: ({ rootContext }) => {
+    rootContext.increment();
+  },
+});
+
+export const actions = {
+  [minimalAction.id]: minimalAction,
+  [incrementCounterAction.id]: incrementCounterAction,
+};
+
diff --git a/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx b/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx
@@ -35,7 +35,7 @@ export const QueryTab = () => {
       <div id="query" class="flex">
         <QueryTextArea />
       </div>
-      <div id="results" class="overflow-y-scroll">
+      <div id="results">
         <Show when={data().length}>
           <Table data={data()} />
         </Show>

diff --git a/src/components/Screens/Home/Connections/AddConnectionForm.tsx b/src/components/Screens/Home/Connections/AddConnectionForm.tsx
@@ -96,7 +96,7 @@ const AddConnectionForm = (props: { addConnection: ({ name, scheme, color }: { n
   };
 
   return (
-    <div class="p-3 w-full flex justify-center items-around pt-20">
+    <div class="p-3 w-full flex justify-center items-around pt-20 rounded-tl-lg bg-base-200">
       <form class="flex max-w-lg flex-col gap-1" autocomplete="off" onSubmit={submit}>
         <div>
           <h2 class="text-2xl font-bold">{t('components.add_connection_form.title')}</h2>

diff --git a/src/components/Screens/Home/Home.tsx b/src/components/Screens/Home/Home.tsx
@@ -20,7 +20,7 @@ export const Home = () => {
   });
 
   return (
-    <div class="grid grid-cols-2 h-full">
+    <div class="grid grid-cols-2 h-full bg-base-300">
       <ConnectionsList {...{ connections, setConnections }} />
       <AddConnectionForm {...{ addConnection }} />
     </div>

diff --git a/src/components/UI/Table.tsx b/src/components/UI/Table.tsx
@@ -15,6 +15,7 @@ export const Table = (props: { data: Record<string, any>[] }) => {
       layout: "fitColumns",
       autoResize: true,
       pagination: true,
+      paginationSize: 30,
       height: "100%",
       paginationCounter:"rows",
     });

diff --git a/src/index.css b/src/index.css
@@ -100,7 +100,44 @@ dialog {
   color: inherit;
 }
 
-.gutter:hover{
-  @apply bg-base-100;
+.gutter-vertical:hover{
+  @apply bg-base-200;
   cursor: row-resize;
 }
+
+.gutter-horizontal:hover{
+  @apply bg-base-200;
+  cursor: col-resize;
+}
+
+.tabulator-page {
+  @apply text-base-content !important;
+}
+
+.tabulator-row-odd {
+  @apply bg-base-100 !important;
+}
+
+.tabulator-row-even {
+  @apply bg-base-200 !important;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  @apply bg-base-300 text-base-content !important;
+}
+
+.tabulator-footer {
+  @apply bg-base-300 text-base-content !important;
+}
+
+.tabulator-tableholder .tabulator-table, .tabulator-footer {
+  @apply border-neutral-focus !important;
+}
+
+.tabulator-page-counter {
+  @apply text-base-content !important;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table {
+  @apply text-base-content !important;
+}