app object refactor finished

packages/web/src/appobj/columnAppObject.js

@@ -1,15 +0,0 @@
-/** @param columnProps {import('dbgate-types').ColumnInfo} */
-function getColumnIcon(columnProps) {
-  if (columnProps.autoIncrement) return 'img autoincrement';
-  return 'img column';
-}
-
-/** @param columnProps {import('dbgate-types').ColumnInfo} */
-export default function columnAppObject(columnProps, { setOpenedTabs }) {
-  const title = columnProps.columnName;
-  const key = title;
-  const icon = getColumnIcon(columnProps);
-  const isBold = columnProps.notNull;
-
-  return { title, key, icon, isBold };
-}

packages/web/src/appobj/constraintAppObject.js

@@ -1,15 +0,0 @@
-/** @param props {import('dbgate-types').ConstraintInfo} */
-function getConstraintIcon(props) {
-  if (props.constraintType == 'primaryKey') return 'img primary-key';
-  if (props.constraintType == 'foreignKey') return 'img foreign-key';
-  return null;
-}
-
-/** @param props {import('dbgate-types').ConstraintInfo} */
-export default function constraintAppObject(props, { setOpenedTabs }) {
-  const title = props.constraintName;
-  const key = title;
-  const icon = getConstraintIcon(props);
-
-  return { title, key, icon };
-}

packages/web/src/datagrid/ColumnLabel.js

@@ -5,13 +5,13 @@ import styled from 'styled-components';
 import { FontIcon } from '../icons';
 
 const Label = styled.span`
-  font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
+  font-weight: ${(props) => (props.notNull ? 'bold' : 'normal')};
   white-space: nowrap;
 `;
 
 /** @param column {import('dbgate-datalib').DisplayColumn|import('dbgate-types').ColumnInfo} */
 export default function ColumnLabel(column) {
-  let icon = null;
+  let icon = column.forceIcon ? 'img column' : null;
   if (column.autoIncrement) icon = 'img autoincrement';
   if (column.foreignKey) icon = 'img foreign-key';
   return (

packages/web/src/tabs/TableStructureTab.js

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import _ from 'lodash';
 import ObjectListControl from '../utility/ObjectListControl';
 import { TableColumn } from '../utility/TableControl';
-import columnAppObject from '../appobj/columnAppObject';
-import constraintAppObject from '../appobj/constraintAppObject';
 import { useTableInfo, useDbCore } from '../utility/metadataLoaders';
 import useTheme from '../theme/useTheme';
+import ColumnLabel from '../datagrid/ColumnLabel';
+import { FontIcon } from '../icons';
 
 const WhitePage = styled.div`
   position: absolute;
@@ -18,6 +18,25 @@ const WhitePage = styled.div`
   overflow: auto;
 `;
 
+const IconTextSpan = styled.span`
+  white-space: nowrap;
+`;
+
+function getConstraintIcon(data) {
+  if (data.constraintType == 'primaryKey') return 'img primary-key';
+  if (data.constraintType == 'foreignKey') return 'img foreign-key';
+  return null;
+}
+
+function ConstraintLabel({ data }) {
+  const icon = getConstraintIcon(data);
+  return (
+    <IconTextSpan>
+      <FontIcon icon={icon} /> {data.constraintName}
+    </IconTextSpan>
+  );
+}
+
 export default function TableStructureTab({ conid, database, schemaName, pureName, objectTypeField = 'tables' }) {
   const theme = useTheme();
   const tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
@@ -27,7 +46,8 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
     <WhitePage theme={theme}>
       <ObjectListControl
         collection={columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
-        makeAppObj={columnAppObject}
+        NameComponent={({ data }) => <ColumnLabel {...data} forceIcon />}
+        // makeAppObj={columnAppObject}
         title="Columns"
       >
         <TableColumn
@@ -77,7 +97,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         /> */}
       </ObjectListControl>
 
-      <ObjectListControl collection={_.compact([primaryKey])} makeAppObj={constraintAppObject} title="Primary key">
+      <ObjectListControl collection={_.compact([primaryKey])} NameComponent={ConstraintLabel} title="Primary key">
         <TableColumn
           fieldName="columns"
           header="Columns"
@@ -85,7 +105,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         />
       </ObjectListControl>
 
-      <ObjectListControl collection={foreignKeys} makeAppObj={constraintAppObject} title="Foreign keys">
+      <ObjectListControl collection={foreignKeys} NameComponent={ConstraintLabel} title="Foreign keys">
         <TableColumn
           fieldName="baseColumns"
           header="Base columns"
@@ -101,7 +121,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         <TableColumn fieldName="deleteAction" header="ON DELETE" />
       </ObjectListControl>
 
-      <ObjectListControl collection={dependencies} makeAppObj={constraintAppObject} title="Dependencies">
+      <ObjectListControl collection={dependencies} NameComponent={ConstraintLabel} title="Dependencies">
         <TableColumn
           fieldName="baseColumns"
           header="Base columns"

packages/web/src/utility/ObjectListControl.js

@@ -25,7 +25,7 @@ const ObjectListBody = styled.div`
   //   margin-top: 3px;
 `;
 
-export default function ObjectListControl({ collection = [], title, showIfEmpty = false, makeAppObj, children }) {
+export default function ObjectListControl({ collection = [], title, showIfEmpty = false, NameComponent, children }) {
   const theme = useTheme();
   if (collection.length == 0 && !showIfEmpty) return null;
 
@@ -36,11 +36,7 @@ export default function ObjectListControl({ collection = [], title, showIfEmpty
       </ObjectListHeader>
       <ObjectListBody>
         <TableControl rows={collection}>
-          <TableColumn
+          <TableColumn fieldName="displayName" header="Name" formatter={(data) => <NameComponent data={data} />} />
-            fieldName="displayName"
-            header="Name"
-            // formatter={(col) => <AppObjectControl data={col} makeAppObj={makeAppObj} component="span" />}
-          />
           {children}
         </TableControl>
       </ObjectListBody>