query designer

packages/web/src/tabs/QueryDesignTab.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" context="module">
+  let lastFocusedEditor = null;
+  const getCurrentEditor = () =>
+    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+
+  registerFileCommands({
+    idPrefix: 'designer',
+    category: 'Designer',
+    getCurrentEditor,
+    folder: 'query',
+    format: 'json',
+    fileExtension: 'qdesign',
+
+    execute: true,
+  });
+</script>
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { getContext } from 'svelte';
+  import sqlFormatter from 'sql-formatter';
+
+  import { writable, derived, get } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
+  import SqlEditor from '../query/SqlEditor.svelte';
+  import useEditorData from '../query/useEditorData';
+  import { activeTabId, extensions, getActiveTabId, nullStore } from '../stores';
+  import applySqlTemplate from '../utility/applySqlTemplate';
+  import axiosInstance from '../utility/axiosInstance';
+  import { changeTab } from '../utility/common';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import socket from '../utility/socket';
+  import SocketMessageView from '../query/SocketMessageView.svelte';
+  import memberStore from '../utility/memberStore';
+  import useEffect from '../utility/useEffect';
+  import ResultTabs from '../query/ResultTabs.svelte';
+  import { registerFileCommands } from '../commands/stdCommands';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import QueryDesigner from '../designer/QueryDesigner.svelte';
+  import createReducer from '../utility/createReducer';
+  import createUndoReducer from '../utility/createUndoReducer';
+  import _ from 'lodash';
+
+  export let tabid;
+  export let conid;
+  export let database;
+  export let initialArgs;
+
+  const instance = get_current_component();
+  const tabVisible: any = getContext('tabVisible');
+
+  let busy = false;
+  let executeNumber = 0;
+  let visibleResultTabs = false;
+  let sessionId = null;
+  let sqlPreview = '';
+
+  let domEditor;
+
+  $: connection = useConnectionInfo({ conid });
+
+  $: effect = useEffect(() => {
+    return onSession(sessionId);
+  });
+  function onSession(sid) {
+    if (sid) {
+      socket.on(`session-done-${sid}`, handleSessionDone);
+      return () => {
+        socket.off(`session-done-${sid}`, handleSessionDone);
+      };
+    }
+    return () => {};
+  }
+  $: $effect;
+
+  $: {
+    changeTab(tabid, tab => ({ ...tab, busy }));
+  }
+
+  $: {
+    busy;
+    sessionId;
+    invalidateCommands();
+  }
+
+  export function canKill() {
+    return !!sessionId;
+  }
+
+  export function isBusy() {
+    return busy;
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export async function execute() {
+    if (busy) return;
+    executeNumber++;
+    visibleResultTabs = true;
+
+    let sesid = sessionId;
+    if (!sesid) {
+      const resp = await axiosInstance.post('sessions/create', {
+        conid,
+        database,
+      });
+      sesid = resp.data.sesid;
+      sessionId = sesid;
+    }
+    busy = true;
+    // timerLabel.start();
+    await axiosInstance.post('sessions/execute-query', {
+      sesid,
+      sql: sqlPreview,
+    });
+  }
+
+  export async function kill() {
+    await axiosInstance.post('sessions/kill', {
+      sesid: sessionId,
+    });
+    sessionId = null;
+    busy = false;
+    // timerLabel.stop();
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  const handleSessionDone = () => {
+    busy = false;
+    // timerLabel.stop();
+  };
+
+  const handleChange = (value, skipUndoChain) =>
+    // @ts-ignore
+    dispatchModel({
+      type: 'compute',
+      useMerge: skipUndoChain,
+      compute: v => (_.isFunction(value) ? value(v) : value),
+    });
+
+  const { editorState, editorValue, setEditorData } = useEditorData({
+    tabid,
+    onInitialData: value => {
+      dispatchModel({ type: 'reset', value });
+    },
+  });
+
+  $: setEditorData($modelState.value);
+
+  const [modelState, dispatchModel] = createUndoReducer({
+    tables: [],
+    references: [],
+    columns: [],
+  });
+  // {visibleResultTabs && (
+  //     <TabPage label="Messages" key="messages">
+  //       <SocketMessagesView
+  //         eventName={sessionId ? `session-info-${sessionId}` : null}
+  //         executeNumber={executeNumber}
+  //       />
+  //     </TabPage>
+  //   )}
+</script>
+
+<QueryDesigner
+  value={$modelState.value || {}}
+  {conid}
+  {database}
+  engine={$connection && $connection.engine}
+  onChange={handleChange}
+/>
+<!-- 
+<VerticalSplitter initialValue="70%">
+  <ResultTabs {sessionId} {executeNumber}>
+    <TabPage label="Columns" key="columns">
+      <QueryDesignColumns value={modelState.value || {}} onChange={handleChange} />
+    </TabPage>
+    <TabPage label="SQL" key="sql">
+      <SqlEditor value={sqlPreview} {engine} readOnly />
+    </TabPage>
+  </ResultTabs>
+</VerticalSplitter> -->

packages/web/src/tabs/index.js

@@ -12,7 +12,7 @@ import * as MarkdownEditorTab from './MarkdownEditorTab.svelte';
 // import MarkdownViewTab from './MarkdownViewTab';
 // import MarkdownPreviewTab from './MarkdownPreviewTab';
 // import FavoriteEditorTab from './FavoriteEditorTab';
-// import QueryDesignTab from './QueryDesignTab';
+import * as QueryDesignTab from './QueryDesignTab.svelte';
 
 export default {
   TableDataTab,
@@ -29,5 +29,5 @@ export default {
   //   MarkdownViewTab,
   //   MarkdownPreviewTab,
   //   FavoriteEditorTab,
-  //   QueryDesignTab,
+  QueryDesignTab,
 };