form view infrastructure, loading row from DB

packages/web/src/datagrid/DataGrid.js

@@ -21,17 +21,13 @@ const DataGridContainer = styled.div`
 `;
 
 export default function DataGrid(props) {
-  const { GridCore, FormView } = props;
+  const { GridCore, FormView, config, formDisplay } = props;
   const theme = useTheme();
   const [managerSize, setManagerSize] = React.useState(0);
   const [selection, setSelection] = React.useState([]);
   const [grider, setGrider] = React.useState(null);
-  const [formViewData, setFormViewData] = React.useState(null);
-  const isFormView = !!formViewData;
-
-  const handleSetFormView = (rowData) => {
-    setFormViewData(rowData);
-  };
+  // const [formViewData, setFormViewData] = React.useState(null);
+  const isFormView = !!(config && config.isFormView);
 
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
@@ -57,13 +53,13 @@ export default function DataGrid(props) {
 
       <DataGridContainer>
         {isFormView ? (
-          <FormView {...props} rowData={formViewData} onSetTableView={() => setFormViewData(null)} />
+          <FormView {...props} />
         ) : (
           <GridCore
             {...props}
             onSelectionChanged={setSelection}
             onChangeGrider={setGrider}
-            onSetFormView={FormView ? handleSetFormView : null}
+            formViewAvailable={!!FormView && !!formDisplay}
           />
         )}
       </DataGridContainer>

packages/web/src/datagrid/DataGridCore.js

@@ -116,7 +116,7 @@ export default function DataGridCore(props) {
     onSelectionChanged,
     frameSelection,
     onKeyDown,
-    onSetFormView,
+    formViewAvailable,
   } = props;
   // console.log('RENDER GRID', display.baseTable.pureName);
   const columns = React.useMemo(() => display.allColumns, [display]);
@@ -943,6 +943,13 @@ export default function DataGridCore(props) {
     display.clearFilters();
   };
 
+  const handleSetFormView =
+    formViewAvailable && display.baseTable && display.baseTable.primaryKey
+      ? (rowData) => {
+          display.switchToFormView(rowData);
+        }
+      : null;
+
   // console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
   // console.log(
   //   'gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()',
@@ -1048,7 +1055,7 @@ export default function DataGridCore(props) {
                 display={display}
                 focusedColumn={display.focusedColumn}
                 frameSelection={frameSelection}
-                onSetFormView={onSetFormView}
+                onSetFormView={handleSetFormView}
               />
             )
           )}

packages/web/src/datagrid/TableDataGrid.js

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import DataGrid from './DataGrid';
 import styled from 'styled-components';
-import { TableGridDisplay, createGridConfig, createGridCache } from 'dbgate-datalib';
+import { TableGridDisplay, TableFormViewDisplay, createGridConfig, createGridCache } from 'dbgate-datalib';
 import { getFilterValueExpression } from 'dbgate-filterparser';
 import { findEngineDriver } from 'dbgate-tools';
 import { useConnectionInfo, getTableInfo, useDatabaseInfo } from '../utility/metadataLoaders';
@@ -88,7 +88,22 @@ export default function TableDataGrid({
       : null;
   }
 
+  function createFormDisplay() {
+    return connection
+      ? new TableFormViewDisplay(
+          { schemaName, pureName },
+          findEngineDriver(connection, extensions),
+          config,
+          setConfig,
+          cache || myCache,
+          setCache || setMyCache,
+          dbinfo
+        )
+      : null;
+  }
+
   const [display, setDisplay] = React.useState(createDisplay());
+  const [formDisplay, setFormDisplay] = React.useState(createFormDisplay());
 
   React.useEffect(() => {
     setRefReloadToken((v) => v + 1);
@@ -102,6 +117,13 @@ export default function TableDataGrid({
     setDisplay(newDisplay);
   }, [connection, config, cache || myCache, conid, database, schemaName, pureName, dbinfo, extensions]);
 
+  React.useEffect(() => {
+    const newDisplay = createFormDisplay();
+    if (!newDisplay) return;
+    if (formDisplay && formDisplay.isLoadedCorrectly && !newDisplay.isLoadedCorrectly) return;
+    setFormDisplay(newDisplay);
+  }, [connection, config, cache || myCache, conid, database, schemaName, pureName, dbinfo, extensions]);
+
   const handleDatabaseStructureChanged = React.useCallback(() => {
     (setCache || setMyCache)(createGridCache());
   }, []);
@@ -159,9 +181,12 @@ export default function TableDataGrid({
     <VerticalSplitter>
       <DataGrid
         // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
+        config={config}
+        setConfig={setConfig}
         conid={conid}
         database={database}
         display={display}
+        formDisplay={formDisplay}
         tabVisible={tabVisible}
         changeSetState={changeSetState}
         dispatchChangeSet={dispatchChangeSet}
@@ -174,9 +199,9 @@ export default function TableDataGrid({
         GridCore={SqlDataGridCore}
         FormView={SqlFormView}
         isDetailView={isDetailView}
-        tableInfo={
-          dbinfo && dbinfo.tables && dbinfo.tables.find((x) => x.pureName == pureName && x.schemaName == schemaName)
-        }
+        // tableInfo={
+        //   dbinfo && dbinfo.tables && dbinfo.tables.find((x) => x.pureName == pureName && x.schemaName == schemaName)
+        // }
       />
       {reference && (
         <ReferenceContainer>

packages/web/src/formview/FormView.js

@@ -61,15 +61,34 @@ const NullSpan = styled.span`
   font-style: italic;
 `;
 
-export default function FormView({ tableInfo, rowData, toolbarPortalRef, tabVisible, onSetTableView }) {
+export default function FormView(props) {
+  const { rowData, toolbarPortalRef, tabVisible, config, setConfig } = props;
+  /** @type {import('dbgate-datalib').FormViewDisplay} */
+  const formDisplay = props.formDisplay;
   const theme = useTheme();
   const [headerRowRef, { height: rowHeight }] = useDimensions();
   const [wrapperRef, { height: wrapperHeight }] = useDimensions();
 
-  if (!tableInfo || !rowData) return null;
+  const handleSwitchToTable = () => {
+    setConfig((cfg) => ({
+      ...cfg,
+      isFormView: false,
+      formViewKey: null,
+    }));
+  };
+
+  const toolbar =
+    toolbarPortalRef &&
+    toolbarPortalRef.current &&
+    tabVisible &&
+    ReactDOM.createPortal(<FormViewToolbar switchToTable={handleSwitchToTable} />, toolbarPortalRef.current);
+
+  // console.log('display', display);
+
+  if (!formDisplay || !formDisplay.isLoadedCorrectly) return toolbar;
 
   const rowCount = Math.floor((wrapperHeight - 20) / rowHeight);
-  const columnChunks = _.chunk(tableInfo.columns, rowCount);
+  const columnChunks = _.chunk(formDisplay.columns, rowCount);
 
   return (
     <Wrapper ref={wrapperRef}>
@@ -78,18 +97,15 @@ export default function FormView({ tableInfo, rowData, toolbarPortalRef, tabVisi
           {chunk.map((col) => (
             <TableRow key={col.columnName} theme={theme} ref={headerRowRef} style={{ height: `${rowHeight}px` }}>
               <TableHeaderCell theme={theme}>
-                <ColumnLabel {...col} foreignKey={findForeignKeyForColumn(tableInfo, col)} />
+                <ColumnLabel {...col} />
               </TableHeaderCell>
-              <TableBodyCell theme={theme}>{rowData[col.columnName]}</TableBodyCell>
+              <TableBodyCell theme={theme}>{rowData && rowData[col.columnName]}</TableBodyCell>
             </TableRow>
           ))}
         </Table>
       ))}
 
-      {toolbarPortalRef &&
-        toolbarPortalRef.current &&
-        tabVisible &&
-        ReactDOM.createPortal(<FormViewToolbar switchToTable={onSetTableView} />, toolbarPortalRef.current)}
+      {toolbar}
     </Wrapper>
   );
 }

packages/web/src/formview/SqlFormView.js

@@ -1,6 +1,71 @@
+import { TableFormViewDisplay } from 'dbgate-datalib';
+import { findEngineDriver } from 'dbgate-tools';
 import React from 'react';
+import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
+import useExtensions from '../utility/useExtensions';
 import FormView from './FormView';
+import axios from '../utility/axios';
+
+async function loadCurrentRow(props) {
+  const { formDisplay, conid, database } = props;
+  /** @type {import('dbgate-datalib').TableFormViewDisplay} */
+
+  const sql = formDisplay.getCurrentRowQuery();
+
+  const response = await axios.request({
+    url: 'database-connections/query-data',
+    method: 'post',
+    params: {
+      conid,
+      database,
+    },
+    data: { sql },
+  });
+
+  if (response.data.errorMessage) return response.data;
+  return response.data.rows[0];
+}
 
 export default function SqlFormView(props) {
-  return <FormView {...props} />;
+  const { formDisplay } = props;
+  const [rowData, setRowData] = React.useState(null);
+
+  const handleLoadCurrentRow = async () => {
+    const row = await loadCurrentRow(props);
+    if (row) setRowData(row);
+  };
+
+  React.useEffect(() => {
+    handleLoadCurrentRow();
+  }, [formDisplay]);
+
+  // const { config, setConfig, cache, setCache, schemaName, pureName, conid, database } = props;
+  // const { formViewKey } = config;
+
+  // const [display, setDisplay] = React.useState(null);
+
+  // const connection = useConnectionInfo({ conid });
+  // const dbinfo = useDatabaseInfo({ conid, database });
+  // const extensions = useExtensions();
+
+  // console.log('SqlFormView.props', props);
+
+  // React.useEffect(() => {
+  //   const newDisplay = connection
+  //     ? new TableFormViewDisplay(
+  //         { schemaName, pureName },
+  //         findEngineDriver(connection, extensions),
+  //         config,
+  //         setConfig,
+  //         cache,
+  //         setCache,
+  //         dbinfo
+  //       )
+  //     : null;
+  //   if (!newDisplay) return;
+  //   if (display && display.isLoadedCorrectly && !newDisplay.isLoadedCorrectly) return;
+  //   setDisplay(newDisplay);
+  // }, [config, cache, conid, database, schemaName, pureName, dbinfo, extensions]);
+
+  return <FormView {...props} rowData={rowData} />;
 }