show columns

api/src/engines/mssql/MsSqlAnalyser.js

@@ -36,8 +36,8 @@ class MsSqlAnalyser extends DatabaseAnalayser {
         .filter(col => col.objectId == table.objectId)
         .map(({ isNullable, isIdentity, ...col }) => ({
           ...col,
-          notNull: isNullable != 'True',
+          notNull: !isNullable,
-          autoIncrement: isIdentity == 'True',
+          autoIncrement: !!isIdentity,
         })),
     }));
   }

web/src/appobj/AppObjects.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
@@ -12,11 +14,16 @@ const AppObjectDiv = styled.div`
   white-space: nowrap;
 `;
 
+const AppObjectSpan = styled.span`
+  white-space: nowrap;
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+`;
+
 const IconWrap = styled.span`
   margin-right: 10px;
 `;
 
-export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick }) {
+export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick, isBold, component = 'div' }) {
   const setOpenedTabs = useSetOpenedTabs();
 
   const handleContextMenu = event => {
@@ -26,18 +33,20 @@ export function AppObjectCore({ title, Icon, Menu, data, makeAppObj, onClick })
     showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} setOpenedTabs={setOpenedTabs} />);
   };
 
+  const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
+
   return (
-    <AppObjectDiv onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined}>
+    <Component onContextMenu={handleContextMenu} onClick={onClick ? () => onClick(data) : undefined} isBold={isBold}>
       <IconWrap>
         <Icon />
       </IconWrap>
       {title}
-    </AppObjectDiv>
+    </Component>
   );
 }
 
-export function AppObjectControl({ data, makeAppObj }) {
+export function AppObjectControl({ data, makeAppObj, component = 'div' }) {
   const setOpenedTabs = useSetOpenedTabs();
   const appobj = makeAppObj(data, { setOpenedTabs });
-  return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} />;
+  return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />;
 }

web/src/appobj/columnAppObject.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableIcon } from '../icons';
+import { ColumnIcon, SequenceIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
 import showModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
@@ -7,11 +7,18 @@ import axios from '../utility/axios';
 import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
 
+/** @param columnProps {import('dbgate').ColumnInfo} */
+function getColumnIcon(columnProps) {
+  if (columnProps.autoIncrement) return SequenceIcon;
+  return ColumnIcon;
+}
+
 /** @param columnProps {import('dbgate').ColumnInfo} */
 export default function columnAppObject(columnProps, { setOpenedTabs }) {
   const title = columnProps.columnName;
   const key = title;
-  const Icon = TableIcon;
+  const Icon = getColumnIcon(columnProps);
+  const isBold = columnProps.notNull;
 
-  return { title, key, Icon };
+  return { title, key, Icon, isBold };
 }

web/src/utility/ObjectListControl.js

@@ -2,7 +2,9 @@ import React from 'react';
 import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
-import TableControl from './TableControl';
+import TableControl, { TableColumn } from './TableControl';
+import { AppObjectControl } from '../appobj/AppObjects';
+import columnAppObject from '../appobj/columnAppObject';
 
 const ObjectListWrapper = styled.div`
   margin-bottom: 20px;
@@ -34,7 +36,14 @@ export default function ObjectListControl({ collection = [], title, showIfEmpty
         <ObjectListHeaderTitle>{title}</ObjectListHeaderTitle>
       </ObjectListHeader>
       <ObjectListBody>
-        <TableControl rows={collection}>{children}</TableControl>
+        <TableControl rows={collection}>
+          <TableColumn
+            fieldName="displayName"
+            header="Name"
+            formatter={col => <AppObjectControl data={col} makeAppObj={columnAppObject} component="span" />}
+          />
+          {children}
+        </TableControl>
       </ObjectListBody>
     </ObjectListWrapper>
   );

web/src/utility/TableControl.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
@@ -21,7 +22,7 @@ const TableBodyCell = styled.td`
   padding: 5px;
 `;
 
-export function TableColumn({ fieldName, header, sortable, formatter = undefined }) {
+export function TableColumn({ fieldName, header, sortable = false, formatter = undefined }) {
   return <></>;
 }
 
@@ -32,8 +33,10 @@ function format(row, col) {
 }
 
 export default function TableControl({ rows = [], children }) {
-  const columns = (children instanceof Array ? children : [children])
+  console.log('children', children);
-    .filter(child => child != null)
+
+  const columns = (children instanceof Array ? _.flatten(children) : [children])
+    .filter(child => child && child.props && child.props.fieldName)
     .map(child => child.props);
 
   return (