query - result tabs

packages/web/src/datagrid/types.ts

@@ -1,11 +1,11 @@
 import { GridDisplay, ChangeSet } from '@dbgate/datalib';
 
 export interface DataGridProps {
-  conid: number;
-  database: string;
+  conid?: number;
+  database?: string;
   display: GridDisplay;
   tabVisible?: boolean;
-  changeSetState: { value: ChangeSet };
-  dispatchChangeSet: Function;
-  toolbarPortalRef: any;
+  changeSetState?: { value: ChangeSet };
+  dispatchChangeSet?: Function;
+  toolbarPortalRef?: any;
 }

packages/web/src/sqleditor/JslDataGrid.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import DataGrid from '../datagrid/DataGrid';
+
+export default function JslDataGrid({ jslid }) {
+  return <div>{jslid}</div>;
+  //     const display=React.useMemo(()=>)
+  //   return <DataGrid />;
+}

packages/web/src/sqleditor/ResultTabs.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TabPage, TabControl } from '../widgets/TabControl';
+import useSocket from '../utility/SocketProvider';
+import JslDataGrid from './JslDataGrid';
+
+export default function ResultTabs({ children, sessionId }) {
+  const socket = useSocket();
+  const [resultIds, setResultIds] = React.useState([]);
+
+  const handleResultSet = (props) => {
+    const { jslid } = props;
+    setResultIds((ids) => [...ids, jslid]);
+  };
+
+  React.useEffect(() => {
+    if (sessionId && socket) {
+      socket.on(`session-recordset-${sessionId}`, handleResultSet);
+      return () => {
+        socket.off(`session-recordset-${sessionId}`, handleResultSet);
+      };
+    }
+  }, [sessionId, socket]);
+
+  return (
+    <TabControl>
+      {children}
+      {resultIds.map((jslid, index) => (
+        <TabPage label={`Result ${index + 1}`} key={index}>
+          <JslDataGrid jslid={jslid} />
+        </TabPage>
+      ))}
+    </TabControl>
+  );
+}

packages/web/src/sqleditor/SqlEditor.js

@@ -28,6 +28,7 @@ export default function SqlEditor({
   readOnly = false,
   onChange = undefined,
   tabVisible = false,
+  onKeyDown = undefined,
 }) {
   const [containerRef, { height, width }] = useDimensions();
   const editorRef = React.useRef(null);
@@ -35,6 +36,16 @@ export default function SqlEditor({
   React.useEffect(() => {
     if (tabVisible && editorRef.current && editorRef.current.editor) editorRef.current.editor.focus();
   }, [tabVisible]);
+
+  React.useEffect(() => {
+    if (onKeyDown && editorRef.current) {
+      editorRef.current.editor.keyBinding.addKeyboardHandler(onKeyDown);
+    }
+    return () => {
+      editorRef.current.editor.keyBinding.removeKeyboardHandler(onKeyDown);
+    };
+  }, [onKeyDown]);
+
   return (
     <Wrapper ref={containerRef}>
       <AceEditor

packages/web/src/tabs/QueryTab.js

@@ -10,6 +10,9 @@ import { useUpdateDatabaseForTab } from '../utility/globalState';
 import QueryToolbar from '../query/QueryToolbar';
 import styled from 'styled-components';
 import SessionMessagesView from '../query/SessionMessagesView';
+import { TabPage, TabControl } from '../widgets/TabControl';
+import getResultTabs from '../sqleditor/ResultTabs';
+import ResultTabs from '../sqleditor/ResultTabs';
 
 const MainContainer = styled.div``;
 
@@ -65,6 +68,8 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
     });
   };
 
+  const handleKeyDown = (e) => {};
+
   return (
     <MainContainer>
       <EditorContainer>
@@ -73,6 +78,7 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
           onChange={handleChange}
           tabVisible={tabVisible}
           engine={connection && connection.engine}
+          onKeyDown={handleKeyDown}
         />
 
         {toolbarPortalRef &&
@@ -84,7 +90,11 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
           )}
       </EditorContainer>
       <MessagesContainer>
-        <SessionMessagesView sessionId={sessionId} />
+        <ResultTabs sessionId={sessionId}>
+          <TabPage label="Messages">
+            <SessionMessagesView sessionId={sessionId} />
+          </TabPage>
+        </ResultTabs>
       </MessagesContainer>
     </MainContainer>
   );

packages/web/src/widgets/TabControl.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import _ from 'lodash';
+import styled from 'styled-components';
+import theme from '../theme';
+
+const TabItem = styled.div`
+  border-right: 1px solid white;
+  padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: ${theme.tabsPanel.hoverFont};
+  }
+  background-color: ${(props) =>
+    // @ts-ignore
+    props.selected ? theme.mainArea.background : 'inherit'};
+`;
+
+const TabNameWrapper = styled.span`
+  margin-left: 5px;
+`;
+
+const TabContainer = styled.div``;
+
+const TabsContainer = styled.div`
+  display: flex;
+  height: ${theme.tabsPanel.height}px;
+  right: 0;
+  background-color: ${theme.tabsPanel.background};
+`;
+
+export function TabPage({ label = undefined, children }) {
+  return children;
+}
+
+export function TabControl({ children }) {
+  const [value, setValue] = React.useState(0);
+  const childrenArray = (_.isArray(children) ? _.flatten(children) : [children]).filter((x) => x);
+  return (
+    <div>
+      <TabsContainer>
+        {childrenArray
+          .filter((x) => x.props)
+          .map((tab, index) => (
+            // @ts-ignore
+            <TabItem key={index} onClick={() => setValue(index)} selected={value == index}>
+              <TabNameWrapper>{tab.props.label}</TabNameWrapper>
+            </TabItem>
+          ))}
+      </TabsContainer>
+      {<TabContainer key={value}>{childrenArray[value] && childrenArray[value].props.children}</TabContainer>}
+    </div>
+  );
+}