feat: change results to result sets, show info message

invm · Sep 16, 2023 · f4da449 · f4da449
1 parent 33eb122
commit f4da449
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 71 deletions.
diff --git a/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx b/src/components/Screens/Console/Content/QueryTab/QueryTab.tsx
@@ -1,18 +1,18 @@
 import { ResultsTable } from "./ResultesTable";
 import { QueryContentTabData } from "services/ConnectionTabs";
 import { useAppSelector } from "services/Context";
-import { createEffect, Match, onCleanup, Switch } from "solid-js";
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
 import Split from "split.js";
 import { QueryTextArea } from "./QueryTextArea";
-import { t } from "i18next";
 
 export const QueryTab = () => {
   const {
     connectionsService: { getActiveContentTab },
   } = useAppSelector();
+  const [idx, setIdx] = createSignal(0);
   createEffect(() => {
     const q = Split(["#query", "#results"], {
-      sizes: [40, 60],
+      sizes: [30, 80],
       minSize: [100, 400],
       maxSize: [500, Infinity],
       direction: "vertical",
@@ -26,34 +26,23 @@ export const QueryTab = () => {
 
   return (
     <div class="flex flex-col h-full overflow-hidden">
-      <div id="query" class="flex">
-        <QueryTextArea />
+      <div id="query" class="flex flex-col">
+        <QueryTextArea idx={idx} setIdx={setIdx} />
       </div>
       <div id="results">
-        <Switch>
-          <Match
-            when={
-              (getActiveContentTab().data as QueryContentTabData).executed &&
+        <Show when={!getActiveContentTab().error}>
+          <For
+            each={
               (getActiveContentTab().data as QueryContentTabData).result_sets
-                .length > 0
             }
           >
-            <ResultsTable
-              data={(getActiveContentTab().data as QueryContentTabData).result_sets}
-            />
-          </Match>
-          <Match
-            when={
-              (getActiveContentTab().data as QueryContentTabData).executed &&
-              (getActiveContentTab().data as QueryContentTabData).result_sets
-                .length === 0
-            }
-          >
-            <div class="flex justify-center align-center">
-              {t("components.console.zero_results")}
-            </div>
-          </Match>
-        </Switch>
+            {(result_set, index) => (
+              <Show when={index() === idx()}>
+                <ResultsTable data={result_set.rows} />
+              </Show>
+            )}
+          </For>
+        </Show>
       </div>
     </div>
   );

diff --git a/src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx b/src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx
@@ -3,7 +3,7 @@ import {
   createEditorControlledValue,
   createEditorFocus,
 } from "solid-codemirror";
-import { createSignal, onMount, Show } from "solid-js";
+import { Accessor, createSignal, For, onMount, Setter, Show } from "solid-js";
 import {
   lineNumbers,
   EditorView,
@@ -14,15 +14,19 @@ import {
 import { sql } from "@codemirror/lang-sql";
 import { dracula } from "@uiw/codemirror-theme-dracula";
 import { format } from "sql-formatter";
-import { t } from "i18next";
 import { invoke } from "@tauri-apps/api";
 import { EditIcon, FireIcon } from "components/UI/Icons";
 import { useAppSelector } from "services/Context";
 import { QueryContentTabData } from "services/ConnectionTabs";
 import { QueryResult } from "interfaces";
 import { commandPaletteEmitter } from "components/CommandPalette/actions";
+import { t } from "utils/i18n";
+import { Alert } from "components/UI";
 
-export const QueryTextArea = () => {
+export const QueryTextArea = (props: {
+  idx: Accessor<number>;
+  setIdx: Setter<number>;
+}) => {
   const {
     connectionsService: {
       setActiveContentQueryTabData,
@@ -34,6 +38,23 @@ export const QueryTextArea = () => {
     },
   } = useAppSelector();
 
+  const onPrevClick = () => {
+    props.setIdx(
+      (props.idx() -
+        1 +
+        (getActiveContentTab().data as QueryContentTabData).result_sets
+          .length) %
+      (getActiveContentTab().data as QueryContentTabData).result_sets.length
+    );
+  };
+
+  const onNextClick = () => {
+    props.setIdx(
+      (props.idx() + 1) %
+      (getActiveContentTab().data as QueryContentTabData).result_sets.length
+    );
+  };
+
   const updateQueryText = async (query: string) => {
     setActiveContentQueryTabData({ query });
   };
@@ -77,10 +98,12 @@ export const QueryTextArea = () => {
       setActiveContentQueryTabData({
         query: code(),
         executed: true,
-        result_sets
+        result_sets,
       });
+      // console.log({ result_sets });
     } catch (error) {
-      setActiveContentQueryTabMessage("error", error);
+      // console.log({ error });
+      setActiveContentQueryTabMessage(String(error));
     }
     updateStore();
   };
@@ -117,32 +140,74 @@ export const QueryTextArea = () => {
 
   return (
     <div class="flex-1 flex flex-col">
-      <div class="w-full px-2 py-1 bg-base-100 border-b-2 border-accent">
-        <div
-          class="tooltip tooltip-primary tooltip-bottom"
-          data-tip={t("components.console.actions.format")}
-        >
-          <button class="btn btn-ghost btn-xs mr-2" onClick={() => onFormat()}>
-            <EditIcon />
-          </button>
-        </div>
-        <div
-          class="tooltip tooltip-primary tooltip-bottom"
-          data-tip={t("components.console.actions.execute")}
-        >
-          <button class="btn btn-ghost btn-xs mr-2" onClick={() => onExecute()}>
-            <FireIcon />
-          </button>
+      <div class="w-full px-2 py-1 bg-base-100 border-b-2 border-accent flex items-center">
+        <div>
+          <div
+            class="tooltip tooltip-primary tooltip-bottom"
+            data-tip={t("components.console.actions.format")}
+          >
+            <button
+              class="btn btn-ghost btn-xs mr-2"
+              onClick={() => onFormat()}
+            >
+              <EditIcon />
+            </button>
+          </div>
+          <div
+            class="tooltip tooltip-primary tooltip-bottom"
+            data-tip={t("components.console.actions.execute")}
+          >
+            <button
+              class="btn btn-ghost btn-xs mr-2"
+              onClick={() => onExecute()}
+            >
+              <FireIcon />
+            </button>
+          </div>
         </div>
+
+        <Show when={getActiveContentTab().error}>
+          <Alert color="error">{getActiveContentTab().error}</Alert>
+        </Show>
+        <Show when={!getActiveContentTab().error}>
+          <For
+            each={
+              (getActiveContentTab().data as QueryContentTabData).result_sets
+            }
+          >
+            {(result_set, index) => (
+              <Show when={index() === props.idx()}>
+                <Alert color="info">
+                  <span class="font-semibold">
+                    {t("components.console.result_set")}
+                    <button
+                      class="btn btn-xs mx-0.5 btn-neutral h-5 min-h-0"
+                      onClick={onPrevClick}
+                    >
+                      {"<"}
+                    </button>
+                    {"#" + (props.idx() + 1)}
+                    <button
+                      class="btn btn-xs mx-0.5 btn-neutral h-5 min-h-0"
+                      onClick={onNextClick}
+                    >
+                      {">"}
+                    </button>
+                    {t("components.console.out_of") +
+                      (getActiveContentTab().data as QueryContentTabData)
+                        .result_sets.length +
+                      ". "}
+                  </span>
+                  <span class="font-semibold">{result_set.info + ""}</span>
+                </Alert>
+              </Show>
+            )}
+          </For>
+        </Show>
       </div>
       <div class="overflow-hidden w-full h-full" onKeyDown={handleKeyDown}>
         <div ref={ref} class="w-full h-full" />
       </div>
-      <Show when={getActiveContentTab()?.error}>
-        <div class="w-full p-2 bg-base-200">
-          <span>{getActiveContentTab()?.error?.message}</span>
-        </div>
-      </Show>
     </div>
   );
 };
diff --git a/src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx b/src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx
@@ -28,9 +28,5 @@ export const ResultsTable = (props: { data: Record<string, any>[] }) => {
     });
   });
 
-  return (
-    <>
-      <div id="results-table"></div>
-    </>
-  );
+  return <div id="results-table"></div>;
 };
diff --git a/src/components/UI/Alert.tsx b/src/components/UI/Alert.tsx
@@ -7,7 +7,7 @@ export const AlertColors = {
 
 const Alert = (props: { children: any, color: keyof typeof AlertColors }) => {
   return (
-    <div class={`flex p-2 mb-4 text-sm rounded-lg ${AlertColors[props.color]}`} role="alert">
+    <div class={`flex px-2 py-1 items-center text-sm rounded-lg ${AlertColors[props.color]}`} role="alert">
       <svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
       <span class="sr-only">{props.color}</span>
       <div>

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -128,7 +128,6 @@ export type ResultSet = {
 
 export type QueryResult = {
   result_sets: ResultSet[];
-  message?: string;
 };
 
 export const TableStrucureEntity = {

diff --git a/src/services/ConnectionTabs.ts b/src/services/ConnectionTabs.ts
@@ -62,10 +62,7 @@ export type TableStructureContentTabData = {
 
 export type ContentTab = {
   label: string;
-  error?: {
-    message: string;
-    type: keyof typeof MessageType;
-  };
+  error?: string;
 } & (
     | {
       key: typeof ContentComponent.QueryTab;
@@ -268,18 +265,13 @@ export const ConnectionTabsService = () => {
     );
   };
 
-  const setActiveContentQueryTabMessage = (
-    type: keyof typeof MessageType,
-    message: string | unknown
-  ) => {
+  const setActiveContentQueryTabMessage = (message: string) => {
     const tab = getActiveContentTab();
     if (!tab) return;
     setContentStore(
       "tabs",
       contentStore.tabs.map((t, i) =>
-        i === contentStore.idx
-          ? { ...t, error: { type, message: String(message) } }
-          : t
+        i === contentStore.idx ? { ...t, error: String(message) } : t
       )
     );
   };

diff --git a/src/utils/i18n/en.json b/src/utils/i18n/en.json
@@ -39,7 +39,9 @@
           "format": "Format",
           "execute": "Execute"
         },
-        "zero_results": "0 rows retuned"
+        "zero_results": "0 rows retuned",
+        "result_set": "Result set ",
+        "out_of": " out of "
       },
       "sidebar": {
         "show_table_structure": "Show table structure",