load views, procedures, functions

packages/web/src/appobj/databaseObjectAppObject.js

@@ -0,0 +1,16 @@
+import tableAppObject from './tableAppObject';
+import viewAppObject from './viewAppObject';
+
+const databaseObjectAppObject = () => ({ objectTypeField, ...other }, props) => {
+  switch (objectTypeField) {
+    case 'tables':
+      // @ts-ignore
+      return tableAppObject()(other, props);
+    case 'views':
+      // @ts-ignore
+      return viewAppObject()(other, props);
+  }
+  return null;
+};
+
+export default databaseObjectAppObject;

packages/web/src/appobj/tableAppObject.js

@@ -58,9 +58,10 @@ const tableAppObject = () => ({ conid, database, pureName, schemaName }, { setOp
       database,
     });
   };
-  const matcher = filter => filterName(filter, pureName);
+  const matcher = (filter) => filterName(filter, pureName);
+  const groupTitle = 'Tables';
 
-  return { title, key, Icon, Menu, onClick, matcher };
+  return { title, key, Icon, Menu, onClick, matcher, groupTitle };
 };
 
 export default tableAppObject;

packages/web/src/appobj/viewAppObject.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ViewIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import { openNewTab } from '../utility/common';
+import getConnectionInfo from '../utility/getConnectionInfo';
+import fullDisplayName from '../utility/fullDisplayName';
+import { filterName } from '@dbgate/datalib';
+
+// async function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
+//   const connection = await getConnectionInfo(conid);
+//   const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+//     schemaName,
+//     pureName,
+//   })}`;
+
+//   openNewTab(setOpenedTabs, {
+//     title: pureName,
+//     tooltip,
+//     icon: 'table2.svg',
+//     tabComponent,
+//     props: {
+//       schemaName,
+//       pureName,
+//       conid,
+//       database,
+//     },
+//   });
+// }
+
+// function Menu({ data, makeAppObj, setOpenedTabs }) {
+//   const handleOpenData = () => {
+//     openTableDetail(setOpenedTabs, 'TableDataTab', data);
+//   };
+//   const handleOpenStructure = () => {
+//     openTableDetail(setOpenedTabs, 'TableStructureTab', data);
+//   };
+//   const handleOpenCreateScript = () => {
+//     openTableDetail(setOpenedTabs, 'TableCreateScriptTab', data);
+//   };
+//   return (
+//     <>
+//       <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
+//       <DropDownMenuItem onClick={handleOpenStructure}>Open structure</DropDownMenuItem>
+//       <DropDownMenuItem onClick={handleOpenCreateScript}>Create SQL</DropDownMenuItem>
+//     </>
+//   );
+// }
+
+const viewAppObject = () => ({ conid, database, pureName, schemaName }, { setOpenedTabs }) => {
+  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
+  const key = title;
+  const Icon = ViewIcon;
+  // const onClick = ({ schemaName, pureName }) => {
+  //   openTableDetail(setOpenedTabs, 'TableDataTab', {
+  //     schemaName,
+  //     pureName,
+  //     conid,
+  //     database,
+  //   });
+  // };
+  const matcher = (filter) => filterName(filter, pureName);
+  const groupTitle = 'Views';
+
+  return {
+    title,
+    key,
+    Icon,
+    // Menu, onClick,
+    matcher,
+    groupTitle,
+  };
+};
+
+export default viewAppObject;

packages/web/src/tabs/QueryTab.js

@@ -57,6 +57,8 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
 
   const handleExecute = async () => {
     setExecuteNumber((num) => num + 1);
+    const selectedText = editorRef.current.editor.getSelectedText();
+
     let sesid = sessionId;
     if (!sesid) {
       const resp = await axios.post('sessions/create', {
@@ -68,7 +70,7 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
     }
     await axios.post('sessions/execute-query', {
       sesid,
-      sql: queryText,
+      sql: selectedText || queryText,
     });
   };
 
@@ -99,7 +101,11 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
         />
         <ResultTabs sessionId={sessionId} executeNumber={executeNumber}>
           <TabPage label="Messages" key="messages">
-            <SessionMessagesView sessionId={sessionId} onMessageClick={handleMesageClick} executeNumber={executeNumber} />
+            <SessionMessagesView
+              sessionId={sessionId}
+              onMessageClick={handleMesageClick}
+              executeNumber={executeNumber}
+            />
           </TabPage>
         </ResultTabs>
       </VerticalSplitter>

packages/web/src/widgets/DatabaseWidget.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import _ from 'lodash';
 
 import useFetch from '../utility/useFetch';
 import { AppObjectList } from '../appobj/AppObjectList';
@@ -9,6 +10,7 @@ import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalStat
 import tableAppObject from '../appobj/tableAppObject';
 import theme from '../theme';
 import InlineButton from './InlineButton';
+import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -46,7 +48,7 @@ const Input = styled.input`
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
-  const handleDatabaseClick = database => {
+  const handleDatabaseClick = (database) => {
     setDb({
       ...database,
       connection: data,
@@ -59,7 +61,7 @@ function SubDatabaseList({ data }) {
   });
   return (
     <AppObjectList
-      list={(databases || []).map(db => ({ ...db, connection: data }))}
+      list={(databases || []).map((db) => ({ ...db, connection: data }))}
       makeAppObj={databaseAppObject({ boldCurrentDatabase: true })}
       onObjectClick={handleDatabaseClick}
     />
@@ -75,7 +77,7 @@ function ConnectionList() {
   return (
     <>
       <SearchBoxWrapper>
-        <Input type="text" placeholder="Search connection" value={filter} onChange={e => setFilter(e.target.value)} />
+        <Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
         <InlineButton>Refresh</InlineButton>
       </SearchBoxWrapper>
 
@@ -96,8 +98,13 @@ function SqlObjectList({ conid, database }) {
     url: `database-connections/list-objects?conid=${conid}&database=${database}`,
     reloadTrigger: `database-structure-changed-${conid}-${database}`,
   });
-  const { tables } = objects || {};
+
   const [filter, setFilter] = React.useState('');
+  const objectList = _.flatten(
+    ['tables', 'views'].map((objectTypeField) =>
+      ((objects || {})[objectTypeField] || []).map((obj) => ({ ...obj, objectTypeField }))
+    )
+  );
   return (
     <>
       <SearchBoxWrapper>
@@ -105,15 +112,15 @@ function SqlObjectList({ conid, database }) {
           type="text"
           placeholder="Search tables or objects"
           value={filter}
-          onChange={e => setFilter(e.target.value)}
+          onChange={(e) => setFilter(e.target.value)}
         />
         <InlineButton>Refresh</InlineButton>
       </SearchBoxWrapper>
       <InnerContainer>
         <AppObjectList
-          list={(tables || []).map(x => ({ ...x, conid, database }))}
-          makeAppObj={tableAppObject()}
-          groupFunc={appobj => 'Tables'}
+          list={objectList.map((x) => ({ ...x, conid, database }))}
+          makeAppObj={databaseObjectAppObject()}
+          groupFunc={(appobj) => appobj.groupTitle}
           filter={filter}
         />
       </InnerContainer>