feat: add modal with row data, add row actions

package.json

@@ -23,6 +23,7 @@
     "codemirror": "^6.0.1",
     "fuse.js": "^6.6.2",
     "i18next": "^23.1.0",
+    "renderjson": "^1.4.0",
     "solid-codemirror": "^2.3.0",
     "solid-command-palette": "github:on3iro/solid-command-palette#update-dependencies",
     "solid-contextmenu": "^0.0.2",

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

@@ -18,6 +18,7 @@ import { invoke } from "@tauri-apps/api";
 import {
   ChevronLeft,
   ChevronRight,
+  Copy,
   EditIcon,
   FireIcon,
   VimIcon,
@@ -108,6 +109,10 @@ export const QueryTextArea = (props: {
     }
   };
 
+  const copyQueryToClipboard = () => {
+    navigator.clipboard.writeText(code());
+  };
+
   createEffect(() => {
     setCode(getContentData("Query").query ?? "");
   });
@@ -143,6 +148,18 @@ export const QueryTextArea = (props: {
             </button>
           </div>
 
+          <div
+            class="tooltip tooltip-primary tooltip-bottom"
+            data-tip={t("components.console.actions.copy_query")}
+          >
+            <button
+              class="btn btn-ghost btn-xs mr-2"
+              onClick={() => copyQueryToClipboard()}
+            >
+              <Copy />
+            </button>
+          </div>
+
           <div
             class="tooltip tooltip-primary tooltip-bottom"
             data-tip={t("components.console.actions.vim_mode_on")}

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

@@ -1,16 +1,18 @@
 import { Row } from "interfaces";
-import { createEffect } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 import { TabulatorFull as Tabulator } from "tabulator-tables";
+import renderjson from "renderjson";
 
 export const ResultsTable = (props: { rows: Row[] }) => {
+  const [modalData, setModalData] = createSignal("");
   createEffect(() => {
     let columns: { title: string; field: string; resizeable: boolean }[] = [];
     if (props.rows.length) {
       columns = Object.keys(props.rows[0]).map((k) => ({
         title: k,
         field: k,
         resizeable: true,
-        // editor: 'input' as const,
+        // editor: "input" as const, // this will make the whole table navigable
       }));
     }
 
@@ -29,8 +31,54 @@ export const ResultsTable = (props: { rows: Row[] }) => {
       height: "100%",
       paginationCounter: "rows",
       debugInvalidOptions: false,
+      rowContextMenu: [
+        {
+          label: "Show row in JSON",
+          action: function(e, column) {
+            renderjson.set_show_to_level(10);
+            // @ts-ignore
+            setModalData(column._row.data);
+            // @ts-ignore
+            document.getElementById("my_modal_1").showModal();
+          },
+        },
+        {
+          label: "Copy row to clipboard",
+          action: function(e, column) {
+            // @ts-ignore
+            navigator.clipboard.writeText(JSON.stringify(column._row.data));
+          },
+        },
+        {
+          separator: true,
+        },
+      ],
+      // only relevant if editor is set to "input"
+      // keybindings: {
+      //   //@ts-ignore
+      //   navUp: ["ctrl + shift + k", 38],
+      //   //@ts-ignore
+      //   navDown: ["ctrl + shift + j", 40],
+      //   //@ts-ignore
+      //   navLeft: ["ctrl + shift + h", 37],
+      //   //@ts-ignore
+      //   navRight: ["ctrl + shift + l", 39],
+      // },
     });
   });
 
-  return <div id="results-table"></div>;
+  return (
+    <>
+      <dialog id="my_modal_1" class="modal">
+        <div class="modal-box">
+          <h3 class="font-bold text-lg">Hello!</h3>
+          <div>{renderjson(modalData())}</div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button>close</button>
+        </form>
+      </dialog>
+      <div id="results-table"></div>
+    </>
+  );
 };

src/components/UI/Icons/Copy.tsx

@@ -0,0 +1,14 @@
+export const Copy = () => {
+  return (
+    <svg
+      class="w-4 h-4 text-secondary"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 18 20"
+    >
+      <path d="M5 9V4.13a2.96 2.96 0 0 0-1.293.749L.879 7.707A2.96 2.96 0 0 0 .13 9H5Zm11.066-9H9.829a2.98 2.98 0 0 0-2.122.879L7 1.584A.987.987 0 0 0 6.766 2h4.3A3.972 3.972 0 0 1 15 6v10h1.066A1.97 1.97 0 0 0 18 14V2a1.97 1.97 0 0 0-1.934-2Z" />
+      <path d="M11.066 4H7v5a2 2 0 0 1-2 2H0v7a1.969 1.969 0 0 0 1.933 2h9.133A1.97 1.97 0 0 0 13 18V6a1.97 1.97 0 0 0-1.934-2Z" />
+    </svg>
+  );
+};

src/components/UI/Icons/index.ts

@@ -2,6 +2,7 @@ export * from "./Add";
 export * from "./ChevronLeft";
 export * from "./ChevronRight";
 export * from "./Close";
+export * from "./Copy";
 export * from "./Edit";
 export * from "./Fire";
 export * from "./Home";

src/index.css

@@ -179,3 +179,35 @@ dialog {
 .loading-xl {
   width: 6rem;
 }
+
+.renderjson a {
+  text-decoration: none;
+}
+.renderjson .disclosure {
+  color: primary;
+  font-size: 150%;
+}
+.renderjson .syntax {
+  color: grey;
+}
+.renderjson .string {
+  @apply text-primary text-lg;
+}
+.renderjson .number {
+  color: cyan;
+}
+.renderjson .boolean {
+  color: plum;
+}
+.renderjson .key {
+  @apply text-accent text-lg;
+}
+.renderjson .keyword {
+  color: lightgoldenrodyellow;
+}
+.renderjson .object.syntax {
+  color: lightseagreen;
+}
+.renderjson .array.syntax {
+  color: lightsalmon;
+}

src/utils/i18n/en.json

@@ -38,7 +38,8 @@
         "actions": {
           "format": "Format",
           "execute": "Execute",
-          "vim_mode_on": "Vim mode on"
+          "vim_mode_on": "Vim mode on",
+          "copy_query": "Copy query to clipboard"
         },
         "zero_results": "0 rows retuned",
         "result_set": "Result set ",

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module 'renderjson';