introduced yarn workspace

packages/web/src/tabs/TableCreateScriptTab.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import AceEditor from 'react-ace';
+import useDimensions from '../utility/useDimensions';
+
+const Wrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export default function TableCreateScriptTab({ conid, database, schemaName, pureName }) {
+  const sql = `SELECT * FROM MOJE`;
+  const [containerRef, { height, width }] = useDimensions();
+
+  /** @type {import('dbgate').TableInfo} */
+  const tableInfo = useFetch({
+    url: 'tables/table-info',
+    params: { conid, database, schemaName, pureName },
+  });
+
+  return (
+    <Wrapper ref={containerRef}>
+      <AceEditor
+        mode="sql"
+        theme="github"
+        // onChange={onChange}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{ $blockScrolling: true }}
+        value={sql}
+        readOnly
+        fontSize="11pt"
+        width={`${width}px`}
+        height={`${height}px`}
+      />
+    </Wrapper>
+  );
+}

packages/web/src/tabs/TableDataTab.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import DataGrid from '../datagrid/DataGrid';
+
+export default function TableDataTab({ conid, database, schemaName, pureName }) {
+  return <DataGrid params={{ conid, database, schemaName, pureName }} />;
+}

packages/web/src/tabs/TableStructureTab.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import styled from 'styled-components';
+import _ from 'lodash';
+import theme from '../theme';
+import useFetch from '../utility/useFetch';
+import ObjectListControl from '../utility/ObjectListControl';
+import { TableColumn } from '../utility/TableControl';
+import columnAppObject from '../appobj/columnAppObject';
+import constraintAppObject from '../appobj/constraintAppObject';
+
+const WhitePage = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+`;
+
+export default function TableStructureTab({ conid, database, schemaName, pureName }) {
+  /** @type {import('dbgate').TableInfo} */
+  const tableInfo = useFetch({
+    url: 'tables/table-info',
+    params: { conid, database, schemaName, pureName },
+  });
+  if (!tableInfo) return null;
+  const { columns, primaryKey, foreignKeys, dependencies } = tableInfo;
+  return (
+    <WhitePage>
+      <ObjectListControl
+        collection={columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
+        makeAppObj={columnAppObject}
+        title="Columns"
+      >
+        <TableColumn
+          fieldName="notNull"
+          header="Not NULL"
+          sortable={true}
+          formatter={row => (row.notNull ? 'YES' : 'NO')}
+        />
+        <TableColumn fieldName="dataType" header="Data Type" sortable={true} />
+        <TableColumn fieldName="defaultValue" header="Default value" sortable={true} />
+        <TableColumn
+          fieldName="isSparse"
+          header="Is Sparse"
+          sortable={true}
+          formatter={row => (row.isSparse ? 'YES' : 'NO')}
+        />
+        <TableColumn fieldName="computedExpression" header="Computed Expression" sortable={true} />
+        <TableColumn
+          fieldName="isPersisted"
+          header="Is Persisted"
+          sortable={true}
+          formatter={row => (row.isPersisted ? 'YES' : 'NO')}
+        />
+        {/* {_.includes(dbCaps.columnListOptionalColumns, 'referencedTableNamesFormatted') && (
+          <TableColumn fieldName="referencedTableNamesFormatted" header="References" sortable={true} />
+        )}
+        <TableColumn
+          fieldName="actions"
+          header=""
+          formatter={row => (
+            <span>
+              <Link
+                linkElementId={encodeHtmlId(`button_delete_column_${row.column.name}`)}
+                onClick={() => this.deleteColumn(row)}
+              >
+                Delete
+              </Link>{' '}
+              |{' '}
+              <Link
+                linkElementId={encodeHtmlId(`button_edit_column__${row.column.name}`)}
+                onClick={() => this.editColumn(row)}
+              >
+                Edit
+              </Link>
+            </span>
+          )}
+        /> */}
+      </ObjectListControl>
+
+      <ObjectListControl collection={_.compact([primaryKey])} makeAppObj={constraintAppObject} title="Primary key">
+        <TableColumn
+          fieldName="columns"
+          header="Columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+      </ObjectListControl>
+
+      <ObjectListControl collection={foreignKeys} makeAppObj={constraintAppObject} title="Foreign keys">
+        <TableColumn
+          fieldName="baseColumns"
+          header="Base columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+        <TableColumn fieldName="refTable" header="Referenced table" formatter={row => row.refTableName} />
+        <TableColumn
+          fieldName="refColumns"
+          header="Referenced columns"
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
+        />
+        <TableColumn fieldName="updateAction" header="ON UPDATE" />
+        <TableColumn fieldName="deleteAction" header="ON DELETE" />
+      </ObjectListControl>
+
+      <ObjectListControl collection={dependencies} makeAppObj={constraintAppObject} title="Dependencies">
+        <TableColumn
+          fieldName="baseColumns"
+          header="Base columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+        <TableColumn fieldName="baseTable" header="Base table" formatter={row => row.pureName} />
+        <TableColumn
+          fieldName="refColumns"
+          header="Referenced columns"
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
+        />
+        <TableColumn fieldName="updateAction" header="ON UPDATE" />
+        <TableColumn fieldName="deleteAction" header="ON DELETE" />
+      </ObjectListControl>
+    </WhitePage>
+  );
+}

packages/web/src/tabs/index.js

@@ -0,0 +1,9 @@
+import TableDataTab from './TableDataTab';
+import TableStructureTab from './TableStructureTab';
+import TableCreateScriptTab from './TableCreateScriptTab'
+
+export default {
+  TableDataTab,
+  TableStructureTab,
+  TableCreateScriptTab,
+};