form view infrastructure, loading row from DB

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} />;
 }