feat: add data query tab, add help page

invm · Dec 28, 2023 · 4079b46 · 4079b46
1 parent 6dade87
commit 4079b46
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 49 deletions.
diff --git a/src/components/Screens/Console/Content/Content.tsx b/src/components/Screens/Console/Content/Content.tsx
@@ -4,10 +4,11 @@ import { AddIcon, CloseIcon } from 'components/UI/Icons';
 import { QueryTab } from './QueryTab/QueryTab';
 import { TableStructureTab } from './TableStructure/TableStructureTab';
 import { ContentTab } from 'services/Connections';
+import { DataTab } from './DataTab/DataTab';
 
 export const Content = () => {
   const {
-    connections: { contentStore, setContentIdx, addContentTab, removeContentTab },
+    connections: { contentStore, setContentIdx, addContentTab, removeContentTab, getContent },
   } = useAppSelector();
 
   return (
@@ -33,21 +34,18 @@ export const Content = () => {
           </button>
         </div>
       </div>
-      <div class="flex-1">
-        <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 class="h-full w-full">
+        <Switch>
+          <Match when={getContent().key === ContentTab.Query}>
+            <QueryTab />
+          </Match>
+          <Match when={getContent().key === ContentTab.TableStructure}>
+            <TableStructureTab />
+          </Match>
+          <Match when={getContent().key === ContentTab.Data}>
+            <DataTab />
+          </Match>
+        </Switch>
       </div>
     </div>
   );

diff --git a/src/components/Screens/Console/Content/DataTab/DataTab.tsx b/src/components/Screens/Console/Content/DataTab/DataTab.tsx
@@ -0,0 +1,11 @@
+import { ResultsTable } from '../QueryTab/ResultesTable';
+
+const DataTab = () => {
+  return (
+    <div id="results">
+      <ResultsTable />
+    </div>
+  );
+};
+
+export { DataTab };
diff --git a/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx b/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx
@@ -1,15 +1,15 @@
-import { ResultsTable } from "./ResultesTable";
-import { createEffect, onCleanup } from "solid-js";
-import Split from "split.js";
-import { QueryTextArea } from "./QueryTextArea";
+import { ResultsTable } from './ResultesTable';
+import { createEffect, onCleanup } from 'solid-js';
+import Split from 'split.js';
+import { QueryTextArea } from './QueryTextArea';
 
 export const QueryTab = () => {
   createEffect(() => {
-    const q = Split(["#query", "#results"], {
+    const q = Split(['#query', '#results'], {
       sizes: [30, 70],
       minSize: [200, 400],
       maxSize: [500, Infinity],
-      direction: "vertical",
+      direction: 'vertical',
       gutterSize: 4,
     });
 

diff --git a/src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx b/src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx
@@ -143,7 +143,6 @@ export const ResultsTable = () => {
       //   navRight: ["ctrl + shift + l", 39],
       // },
     });
-    console.log('render');
   });
 
   const onNextPage = async () => {

diff --git a/src/components/Screens/Console/Content/QueryTab/components/Pagination.tsx b/src/components/Screens/Console/Content/QueryTab/components/Pagination.tsx
@@ -36,17 +36,17 @@ export const Pagination = (props: PaginationProps) => {
   });
 
   return (
-    <div class="container flex justify-between items-top p-1 my-1 gap-2 bg-base-200">
+    <div class="container flex justify-between items-top p-1 gap-2 bg-base-200">
       <div class="flex gap-2">
         <div class="join">
           <div class="tooltip tooltip-primary tooltip-right" data-tip={t('console.actions.previous_result_set')}>
             <button class="join-item btn btn-sm" onClick={selectPrevQuery}>
               <ChevronLeft />
             </button>
           </div>
-          <button class="join-item btn btn-sm btn-disabled !text-info">
+          <button class="join-item !text-info text-md text-upper">
             <span class="mt-1">
-              {t('console.result_set')} {queryIdx() + 1}
+              {t('console.result_set')} #{queryIdx() + 1}
             </span>
           </button>
           <div class="tooltip tooltip-primary tooltip-right" data-tip={t('console.actions.next_result_set')}>

diff --git a/src/components/Screens/Console/Content/TableStructure/TableStructureTab.tsx b/src/components/Screens/Console/Content/TableStructure/TableStructureTab.tsx
@@ -17,7 +17,7 @@ export const TableStructureTab = () => {
   );
 
   return (
-    <div class="bg-base-100 rounded-tl-md p-2 h-full">
+    <div class="bg-base-100 rounded-tl-md p-2 h-full pb-[100px] overflow-y-scroll">
       <div>
         <div class="flex justify-center">
           <div class="tabs tabs-boxed gap-3">

diff --git a/src/components/Screens/Console/Sidebar/Sidebar.tsx b/src/components/Screens/Console/Sidebar/Sidebar.tsx
@@ -16,7 +16,6 @@ export const Sidebar = () => {
       insertColumnName,
       getConnection,
       updateConnectionTab,
-      connectionStore,
       addContentTab,
       getSchemaEntity,
       fetchSchemaEntities,
@@ -96,7 +95,8 @@ export const Sidebar = () => {
 
   const showTrigger = async (trigger: string) => {
     try {
-      const query = `SELECT * FROM INFORMATION_SCHEMA.TRIGGERS WHERE EVENT_OBJECT_SCHEMA = "${connectionStore.schema}" and TRIGGER_NAME = "${trigger}"`;
+      const schema = getConnection().selectedSchema;
+      const query = `SELECT * FROM INFORMATION_SCHEMA.TRIGGERS WHERE EVENT_OBJECT_SCHEMA = "${schema}" and TRIGGER_NAME = "${trigger}"`;
       const res = await invoke<ResultSet>('execute_query', {
         connId: getConnection().id,
         query,

diff --git a/src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx b/src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx
@@ -38,12 +38,8 @@ export const TableColumnsCollapse = (props: { title: string; children: JSXElemen
     try {
       const activeConnection = getConnection();
       const query = 'SELECT * from ' + table;
-      const data = {
-        query,
-        cursor: 0,
-        result_sets: [],
-      };
-      addContentTab(newContentTab(table, 'Query', data));
+      const data = { result_sets: [] };
+      addContentTab(newContentTab(table, 'Data', data));
       const { result_sets } = await invoke<QueryTaskEnqueueResult>('enqueue_query', {
         connId: activeConnection.id,
         sql: query,

diff --git a/src/components/Screens/Help/Help.tsx b/src/components/Screens/Help/Help.tsx
@@ -0,0 +1,5 @@
+const Help = () => {
+  return <div class="bg-base-300 flex flex-1 items-center justify-center">Help page</div>;
+};
+
+export { Help };
diff --git a/src/components/Screens/Main.tsx b/src/components/Screens/Main.tsx
@@ -1,20 +1,21 @@
 import { Alerts } from 'components/UI';
 import { invoke } from '@tauri-apps/api';
 import { ThemeSwitch } from 'components/UI/ThemeSwitch';
-import { CloseIcon, HomeIcon, QuestionMark } from 'components/UI/Icons';
+import { CloseIcon, HomeIcon, QuestionMark, UserSettings } from 'components/UI/Icons';
 import { useAppSelector } from 'services/Context';
 import { createSignal, For, Match, Show, Switch } from 'solid-js';
 import { Console } from './Console/Console';
 import { Home } from './Home/Home';
 import { Settings } from './Settings/Settings';
 import { t } from 'utils/i18n';
+import { Help } from './Help/Help';
 
 export const Main = () => {
   const {
     connections: { removeConnectionTab, connectionStore, setConnectionStore },
   } = useAppSelector();
 
-  const [showSettings, setShowSettings] = createSignal(false);
+  const [component, setComponent] = createSignal(0);
 
   const handleCloseConnection = async (id: string) => {
     await invoke<string>('disconnect', { id });
@@ -27,7 +28,7 @@ export const Main = () => {
         <div class="tabs tabs-boxed gap-2">
           <button
             onClick={() => {
-              setShowSettings(false);
+              setComponent(0);
               setConnectionStore('idx', 0);
             }}
             class="tab tab-md"
@@ -42,7 +43,7 @@ export const Main = () => {
               <div class="flex items-center">
                 <button
                   onClick={() => {
-                    setShowSettings(false);
+                    setComponent(0);
                     setConnectionStore('idx', idx() + 1);
                   }}
                   class="tab tab-md pt-1"
@@ -63,19 +64,24 @@ export const Main = () => {
         </div>
         <div class="flex items-center">
           <ThemeSwitch />
-          <div class="tooltip tooltip-primary tooltip-left px-3" data-tip={t('settings.settings')}>
-            <button class="btn btn-square btn-ghost btn-sm" onClick={() => setShowSettings((s) => !s)}>
+          <div class="tooltip tooltip-primary tooltip-bottom px-3" data-tip={t('settings.settings')}>
+            <button class="btn btn-square btn-ghost btn-sm" onClick={() => setComponent((s) => (s === 1 ? 0 : 1))}>
+              <UserSettings />
+            </button>
+          </div>
+          <div class="tooltip tooltip-primary tooltip-bottom px-3" data-tip={t('help.help')}>
+            <button class="btn btn-square btn-ghost btn-sm" onClick={() => setComponent((s) => (s === 2 ? 0 : 2))}>
               <QuestionMark />
             </button>
           </div>
         </div>
       </div>
       <div class="flex-1 overflow-hidden flex">
         <Switch>
-          <Match when={showSettings()}>
+          <Match when={component() === 1}>
             <Settings />
           </Match>
-          <Match when={!showSettings()}>
+          <Match when={!component()}>
             <Switch>
               <Match when={connectionStore.idx === 0}>
                 <Home />
@@ -85,6 +91,9 @@ export const Main = () => {
               </Match>
             </Switch>
           </Match>
+          <Match when={component() === 2}>
+            <Help />
+          </Match>
         </Switch>
       </div>
       <Alerts />

diff --git a/src/components/UI/Icons/UserSettings.tsx b/src/components/UI/Icons/UserSettings.tsx
@@ -0,0 +1,12 @@
+export const UserSettings = () => {
+  return (
+    <svg
+      class="w-6 h-6 text-secondary"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 19">
+      <path d="M7.324 9.917A2.479 2.479 0 0 1 7.99 7.7l.71-.71a2.484 2.484 0 0 1 2.222-.688 4.538 4.538 0 1 0-3.6 3.615h.002ZM7.99 18.3a2.5 2.5 0 0 1-.6-2.564A2.5 2.5 0 0 1 6 13.5v-1c.005-.544.19-1.072.526-1.5H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h7.687l-.697-.7ZM19.5 12h-1.12a4.441 4.441 0 0 0-.579-1.387l.8-.795a.5.5 0 0 0 0-.707l-.707-.707a.5.5 0 0 0-.707 0l-.795.8A4.443 4.443 0 0 0 15 8.62V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.12c-.492.113-.96.309-1.387.579l-.795-.795a.5.5 0 0 0-.707 0l-.707.707a.5.5 0 0 0 0 .707l.8.8c-.272.424-.47.891-.584 1.382H8.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1.12c.113.492.309.96.579 1.387l-.795.795a.5.5 0 0 0 0 .707l.707.707a.5.5 0 0 0 .707 0l.8-.8c.424.272.892.47 1.382.584v1.12a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1.12c.492-.113.96-.309 1.387-.579l.795.8a.5.5 0 0 0 .707 0l.707-.707a.5.5 0 0 0 0-.707l-.8-.795c.273-.427.47-.898.584-1.392h1.12a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5ZM14 15.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" />
+    </svg>
+  );
+};
diff --git a/src/components/UI/Icons/index.ts b/src/components/UI/Icons/index.ts
@@ -12,4 +12,5 @@ export * from "./QuestionMark";
 export * from "./Refresh";
 export * from "./Terminal";
 export * from "./ThreeDots";
+export * from "./UserSettings";
 export * from "./Vim";
diff --git a/src/services/Connections.ts b/src/services/Connections.ts
@@ -19,13 +19,15 @@ export const MessageType = {
 export const ContentTab = {
   Query: 'Query',
   TableStructure: 'TableStructure',
+  Data: 'Data',
 } as const;
 
 type ContentComponentKeys = keyof typeof ContentTab;
 
 type ContentTabData = {
   [ContentTab.Query]: QueryContentTabData;
   [ContentTab.TableStructure]: TableStructureContentTabData;
+  [ContentTab.Data]: DataContentTabData;
 };
 
 export const newContentTab = <T extends ContentComponentKeys>(label: string, key: T, data?: ContentTabData[T]) => {
@@ -36,6 +38,12 @@ export const newContentTab = <T extends ContentComponentKeys>(label: string, key
         data: data ?? { query: '', result_sets: [] },
         key,
       };
+    case ContentTab.Data:
+      return {
+        label,
+        data: data ?? { result_sets: [] },
+        key,
+      };
     case ContentTab.TableStructure:
       return {
         label,
@@ -68,7 +76,11 @@ export type TableStructureContentTabData = {
   [TableEntity.constraints]: Row[];
 };
 
-export type ContentTab = {
+export type DataContentTabData = {
+  result_sets: ResultSet[];
+};
+
+export type ContentTabType = {
   label: string;
   error?: string;
 } & (
@@ -80,6 +92,10 @@ export type ContentTab = {
       key: typeof ContentTab.TableStructure;
       data: Partial<TableStructureContentTabData>;
     }
+    | {
+      key: typeof ContentTab.Data;
+      data: Partial<DataContentTabData>;
+    }
   );
 
 type Schema = {
@@ -123,7 +139,7 @@ type ConnectionStore = {
 };
 
 type ContentStore = {
-  tabs: ContentTab[];
+  tabs: ContentTabType[];
   idx: number;
 };
 
@@ -219,7 +235,7 @@ export const ConnectionsService = () => {
     return contentStore.tabs[contentStore.idx].data as ContentTabData[T];
   };
 
-  const addContentTab = (tab?: ContentTab) => {
+  const addContentTab = (tab?: ContentTabType) => {
     setContentStore(
       produce((s) => {
         s.tabs.push(tab ?? newContentTab('Query', ContentTab.Query));
@@ -277,7 +293,7 @@ export const ConnectionsService = () => {
     updateStore();
   };
 
-  const updateContentTab = <T extends keyof ContentTab>(key: T, data: ContentTab[T], idx?: number) => {
+  const updateContentTab = <T extends keyof ContentTabType>(key: T, data: ContentTabType[T], idx?: number) => {
     const tab = getContent();
     if (!tab) return;
     setContentStore('tabs', idx ?? contentStore.idx, key, data);

diff --git a/src/utils/i18n/en.json b/src/utils/i18n/en.json
@@ -48,7 +48,7 @@
         "previous_page": "Previous page"
       },
       "zero_results": "0 rows retuned",
-      "result_set": "Result set: ",
+      "result_set": "Result set ",
       "out_of": " out of "
     },
     "sidebar": {
@@ -66,9 +66,12 @@
       "show_process_list": "Show process list",
       "process_list": "Process list"
     },
-    "settings":{
+    "settings": {
       "settings": "Settings"
     },
+    "help": {
+      "help": "Help"
+    },
     "theme_switch": {
       "theme": "Theme"
     },