master-detail view

packages/web/src/datagrid/DataGrid.js

@@ -10,6 +10,7 @@ import {
   ManagerMainContainer,
   ManagerOuterContainer1,
   ManagerOuterContainer2,
+  ManagerOuterContainerFull,
   WidgetTitle,
 } from './ManagerStyles';
 import ReferenceManager from './ReferenceManager';
@@ -40,18 +41,21 @@ const DataGridContainer = styled.div`
 
 /** @param props {import('./types').DataGridProps} */
 export default function DataGrid(props) {
+  const Container1 = props.showReferences ? ManagerOuterContainer1 : ManagerOuterContainerFull;
   return (
     <MainContainer>
       <LeftContainer>
         <ManagerMainContainer>
-          <ManagerOuterContainer1>
+          <Container1>
             <WidgetTitle>Columns</WidgetTitle>
             <ColumnManager {...props} />
-          </ManagerOuterContainer1>
-          <ManagerOuterContainer2>
-            <WidgetTitle>References</WidgetTitle>
-            <ReferenceManager {...props} />
-          </ManagerOuterContainer2>
+          </Container1>
+          {props.showReferences && (
+            <ManagerOuterContainer2>
+              <WidgetTitle>References</WidgetTitle>
+              <ReferenceManager {...props} />
+            </ManagerOuterContainer2>
+          )}
         </ManagerMainContainer>
       </LeftContainer>
 

packages/web/src/datagrid/DataGridCore.js

@@ -425,6 +425,10 @@ export default function DataGridCore(props) {
     }
   }, [jslid]);
 
+  React.useEffect(() => {
+    if (props.onSelectedRowsChanged) props.onSelectedRowsChanged(getSelectedRowData())
+  }, [selectedCells]);
+
   // const handleCloseInplaceEditor = React.useCallback(
   //   mode => {
   //     const [row, col] = currentCell || [];
@@ -680,8 +684,16 @@ export default function DataGridCore(props) {
     return res;
   }
 
+  function getSelectedRowIndexes() {
+    return _.uniq((selectedCells || []).map((x) => x[0]));
+  }
+
   function getSelectedRowDefinitions() {
-    return getRowDefinitions(_.uniq((selectedCells || []).map((x) => x[0])));
+    return getRowDefinitions(getSelectedRowIndexes());
+  }
+
+  function getSelectedRowData() {
+    return _.compact(getSelectedRowIndexes().map((index) => loadedRows && loadedRows[index]));
   }
 
   function revertRowChanges() {

packages/web/src/datagrid/ManagerStyles.js

@@ -31,6 +31,10 @@ export const ManagerOuterContainer2 = styled(ManagerOuterContainer)`
   flex: 0 0 40%;
 `;
 
+export const ManagerOuterContainerFull = styled(ManagerOuterContainer)`
+  flex: 1;
+`;
+
 export const ManagerInnerContainer = styled.div`
   flex: 1 1;
   overflow-y: scroll;

packages/web/src/datagrid/ReferenceManager.js

@@ -31,9 +31,9 @@ const NameContainer = styled.div`
   margin-left: 5px;
 `;
 
-function ManagerRow({ tableName, columns, Icon }) {
+function ManagerRow({ tableName, columns, Icon, onClick }) {
   return (
-    <LinkContainer>
+    <LinkContainer onClick={onClick}>
       <Icon />
       <NameContainer>
         {tableName} ({columns.map((x) => x.columnName).join(', ')})
@@ -60,7 +60,22 @@ export default function ReferenceManager(props) {
           <>
             <Header>References tables ({foreignKeys.length})</Header>
             {foreignKeys.map((fk) => (
-              <ManagerRow key={fk.constraintName} Icon={LinkIcon} tableName={fk.refTableName} columns={fk.columns} />
+              <ManagerRow
+                key={fk.constraintName}
+                Icon={LinkIcon}
+                tableName={fk.refTableName}
+                columns={fk.columns}
+                onClick={() =>
+                  props.onReferenceClick({
+                    schemaName: fk.refSchemaName,
+                    pureName: fk.refTableName,
+                    columns: fk.columns.map((col) => ({
+                      baseName: col.columnName,
+                      refName: col.refColumnName,
+                    })),
+                  })
+                }
+              />
             ))}
           </>
         )}
@@ -68,7 +83,22 @@ export default function ReferenceManager(props) {
           <>
             <Header>Dependend tables ({dependencies.length})</Header>
             {dependencies.map((fk) => (
-              <ManagerRow key={fk.constraintName} Icon={ReferenceIcon} tableName={fk.pureName} columns={fk.columns} />
+              <ManagerRow
+                key={fk.constraintName}
+                Icon={ReferenceIcon}
+                tableName={fk.pureName}
+                columns={fk.columns}
+                onClick={() =>
+                  props.onReferenceClick({
+                    schemaName: fk.schemaName,
+                    pureName: fk.pureName,
+                    columns: fk.columns.map((col) => ({
+                      baseName: col.refColumnName,
+                      refName: col.columnName,
+                    })),
+                  })
+                }
+              />
             ))}
           </>
         )}

packages/web/src/datagrid/TableDataGrid.js

@@ -1,9 +1,13 @@
 import React from 'react';
+import _ from 'lodash';
 import DataGrid from './DataGrid';
 import { TableGridDisplay, createGridConfig, createGridCache } from '@dbgate/datalib';
+import { getFilterValueExpression } from '@dbgate/filterparser';
 import { useConnectionInfo, getTableInfo } from '../utility/metadataLoaders';
 import engines from '@dbgate/engines';
 import useSocket from '../utility/SocketProvider';
+import { VerticalSplitter } from '../widgets/Splitter';
+import stableStringify from 'json-stable-stringify';
 
 export default function TableDataGrid({
   conid,
@@ -12,14 +16,20 @@ export default function TableDataGrid({
   pureName,
   tabVisible,
   toolbarPortalRef,
-  cache,
-  setCache,
   changeSetState,
   dispatchChangeSet,
+  config = undefined,
+  setConfig = undefined,
+  cache = undefined,
+  setCache = undefined,
 }) {
-  const [config, setConfig] = React.useState(createGridConfig());
+  const [myConfig, setMyConfig] = React.useState(createGridConfig());
+  const [childConfig, setChildConfig] = React.useState(createGridConfig());
+  const [myCache, setMyCache] = React.useState(createGridCache());
+  const [childCache, setChildCache] = React.useState(createGridCache());
 
   const connection = useConnectionInfo({ conid });
+  const [reference, setReference] = React.useState(null);
 
   const display = React.useMemo(
     () =>
@@ -27,18 +37,18 @@ export default function TableDataGrid({
         ? new TableGridDisplay(
             { schemaName, pureName },
             engines(connection),
-            config,
-            setConfig,
-            cache,
-            setCache,
+            config || myConfig,
+            setConfig || setMyConfig,
+            cache || myCache,
+            setCache || setMyCache,
             (name) => getTableInfo({ conid, database, ...name })
           )
         : null,
-    [connection, config, cache]
+    [connection, config || myConfig, cache || myCache, conid, database, schemaName, pureName]
   );
 
   const handleDatabaseStructureChanged = React.useCallback(() => {
-    setCache(createGridCache());
+    (setCache || setMyCache)(createGridCache());
   }, []);
 
   const socket = useSocket();
@@ -54,18 +64,62 @@ export default function TableDataGrid({
     }
   }, [conid, database, display]);
 
+  const handleSelectedRowsChanged = (selectedRows) => {
+    const filters = {
+      ...(config || myConfig).filters,
+      ..._.fromPairs(
+        reference.columns.map((col) => [
+          col.refName,
+          selectedRows.map((x) => getFilterValueExpression(x[col.baseName])).join(','),
+        ])
+      ),
+    };
+    if (stableStringify(filters) != stableStringify((config || myConfig).filters)) {
+      setChildConfig((cfg) => ({
+        ...cfg,
+        filters,
+      }));
+      setChildCache((ca) => ({
+        ...ca,
+        refreshTime: new Date().getTime(),
+      }));
+    }
+  };
+
   if (!display) return null;
 
   return (
-    <DataGrid
-      // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
-      conid={conid}
-      database={database}
-      display={display}
-      tabVisible={tabVisible}
-      changeSetState={changeSetState}
-      dispatchChangeSet={dispatchChangeSet}
-      toolbarPortalRef={toolbarPortalRef}
-    />
+    <VerticalSplitter>
+      <DataGrid
+        // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
+        conid={conid}
+        database={database}
+        display={display}
+        tabVisible={tabVisible}
+        changeSetState={changeSetState}
+        dispatchChangeSet={dispatchChangeSet}
+        toolbarPortalRef={toolbarPortalRef}
+        showReferences
+        onReferenceClick={setReference}
+        onSelectedRowsChanged={reference ? handleSelectedRowsChanged : null}
+      />
+      {reference && (
+        <TableDataGrid
+          key={`${reference.schemaName}.${reference.pureName}`}
+          conid={conid}
+          database={database}
+          pureName={reference.pureName}
+          schemaName={reference.schemaName}
+          changeSetState={changeSetState}
+          dispatchChangeSet={dispatchChangeSet}
+          toolbarPortalRef={toolbarPortalRef}
+          tabVisible={false}
+          config={childConfig}
+          setConfig={setChildConfig}
+          cache={childCache}
+          setCache={setChildCache}
+        />
+      )}
+    </VerticalSplitter>
   );
 }

packages/web/src/datagrid/types.ts

@@ -1,4 +1,4 @@
-import { GridDisplay, ChangeSet } from '@dbgate/datalib';
+import { GridDisplay, ChangeSet, GridReferenceDefinition } from '@dbgate/datalib';
 
 export interface DataGridProps {
   conid?: string;
@@ -9,4 +9,7 @@ export interface DataGridProps {
   dispatchChangeSet?: Function;
   toolbarPortalRef?: any;
   jslid?: string;
+  showReferences?: boolean;
+  onReferenceClick?: (def: GridReferenceDefinition) => void;
+  onSelectedRowsChanged?: Function;
 }

packages/web/src/tabs/TableDataTab.js

@@ -6,7 +6,6 @@ import { useUpdateDatabaseForTab } from '../utility/globalState';
 import TableDataGrid from '../datagrid/TableDataGrid';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
-  const [cache, setCache] = React.useState(createGridCache());
   const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
   useUpdateDatabaseForTab(tabVisible, conid, database);
 
@@ -18,8 +17,6 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
       pureName={pureName}
       tabVisible={tabVisible}
       toolbarPortalRef={toolbarPortalRef}
-      cache={cache}
-      setCache={setCache}
       changeSetState={changeSetState}
       dispatchChangeSet={dispatchChangeSet}
     />

packages/web/src/widgets/Splitter.js

@@ -11,20 +11,21 @@ const MainContainer = styled.div`
 const ChildContainer = styled.div`
   flex: 1;
   // flex: 0 0 50%;
-//   flex-basis: 100px;
-//   flex-grow: 1;
+  //   flex-basis: 100px;
+  //   flex-grow: 1;
   display: flex;
   position: relative;
 `;
 
 export function VerticalSplitter({ children }) {
-  if (!_.isArray(children) || children.length !== 2) {
-    throw new Error('Splitter must have exactly 2 children');
+  const childrenArray = _.isArray(children) ? children : [children];
+  if (childrenArray.length !== 1 && childrenArray.length != 2) {
+    throw new Error('Splitter must have 1 or 2 children');
   }
   return (
     <MainContainer>
-      <ChildContainer>{children[0]}</ChildContainer>
-      <ChildContainer>{children[1]}</ChildContainer>
+      <ChildContainer>{childrenArray[0]}</ChildContainer>
+      {childrenArray[1] && <ChildContainer>{childrenArray[1]}</ChildContainer>}
     </MainContainer>
   );
 }