style

api/src/controllers/databaseConnections.js

@@ -1,8 +1,8 @@
-const fp = require('lodash/fp');
+const _ = require('lodash');
 const connections = require('./connections');
 const socket = require('../utility/socket');
 const { fork } = require('child_process');
-const DatabaseAnalyser = require('../engines/default/DatabaseAnalyser')
+const DatabaseAnalyser = require('../engines/default/DatabaseAnalyser');
 
 module.exports = {
   /** @type {import('../types').OpenedDatabaseConnection[]} */
@@ -39,9 +39,12 @@ module.exports = {
     return newOpened;
   },
 
-  listTables_meta: 'get',
-  async listTables({ id, database }) {
+  listObjects_meta: 'get',
+  async listObjects({ id, database }) {
     const opened = await this.ensureOpened(id, database);
-    return opened.structure.tables; // .map(fp.pick(['tableName', 'schemaName']));
+    const { tables } = opened.structure;
+    return {
+      tables: _.sortBy(tables, x => `${x.schemaName}.${x.pureName}`),
+    }; // .map(fp.pick(['tableName', 'schemaName']));
   },
 };

api/src/engines/mssql/tables.sql

@@ -1,5 +1,5 @@
 select
-	o.name as tableName, s.name as schemaName, o.object_id,
+	o.name as pureName, s.name as schemaName, o.object_id,
 	o.create_date, o.modify_date 
 from sys.tables o
 inner join sys.schemas s on o.schema_id = s.schema_id

api/src/types.ts

@@ -7,15 +7,12 @@ export interface EngineDriver {
   analyseIncremental(pool): Promise<void>;
 }
 
-// export interface NameWithSchema {
-//   schema: string;  
-//   name: string;
-// }  
-
-export interface TableInfo {
-  // name: NameWithSchema;
-  tableName: string;
+export interface NamedObjectInfo {
+  pureName: string;
   schemaName: string;
+}  
+
+export interface TableInfo extends NamedObjectInfo {
 }
 
 export interface DatabaseInfo {

web/src/appobj/AppObjects.js

@@ -8,6 +8,7 @@ const AppObjectDiv = styled.div`
     background-color: lightblue;
   }
   cursor: pointer;
+  white-space: nowrap;
 `;
 
 const IconWrap = styled.span`

web/src/appobj/tableAppObject.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TableIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function Menu({ data, makeAppObj }) {
+  const handleEdit = () => {
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  };
+  const handleDelete = () => {
+    axios.post('connections/delete', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function tableAppObject({ pureName, schemaName }) {
+  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
+  const key = title;
+  const Icon = TableIcon;
+
+  return { title, key, Icon, Menu };
+}

web/src/widgets/DatabaseWidget.js

@@ -8,6 +8,8 @@ import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
 import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
+import tableAppObject from '../appobj/tableAppObject';
+import theme from '../theme';
 
 const MainContainer = styled.div`
   position: relative;
@@ -19,6 +21,7 @@ const MainContainer = styled.div`
 const InnerContainer = styled.div`
   flex: 1 0;
   overflow: scroll;
+  width: ${theme.leftPanel.width}px;
 `;
 
 function SubDatabaseList({ data }) {
@@ -53,16 +56,14 @@ function ConnectionList() {
 }
 
 function SqlObjectList({ id, database }) {
-  const tables =
-    useFetch({
-      url: `database-connections/list-tables?id=${id}&database=${database}`,
-      reloadTrigger: `database-structure-changed-${id}-${database}`,
-    }) || [];
+  const objects = useFetch({
+    url: `database-connections/list-objects?id=${id}&database=${database}`,
+    reloadTrigger: `database-structure-changed-${id}-${database}`,
+  });
+  const { tables } = objects || {};
   return (
     <>
-      {tables.map(({ tableName, schemaName }) => (
-        <div key={`${schemaName}.${tableName}`}>{tableName}</div>
-      ))}
+      <AppObjectList list={tables} makeAppObj={tableAppObject} />
     </>
   );
 }