form view toolbar

packages/web/src/datagrid/DataGrid.js

@@ -57,7 +57,7 @@ export default function DataGrid(props) {
 
       <DataGridContainer>
         {isFormView ? (
-          <FormView {...props} rowData={formViewData} />
+          <FormView {...props} rowData={formViewData} onSetTableView={() => setFormViewData(null)} />
         ) : (
           <GridCore
             {...props}

packages/web/src/formview/FormView.js

@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ColumnLabel from '../datagrid/ColumnLabel';
 import { findForeignKeyForColumn } from 'dbgate-tools';
 import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 import useDimensions from '../utility/useDimensions';
+import FormViewToolbar from './FormViewToolbar';
 
 const Table = styled.table`
   border-collapse: collapse;
@@ -59,7 +61,7 @@ const NullSpan = styled.span`
   font-style: italic;
 `;
 
-export default function FormView({ tableInfo, rowData }) {
+export default function FormView({ tableInfo, rowData, toolbarPortalRef, tabVisible, onSetTableView }) {
   const theme = useTheme();
   const [headerRowRef, { height: rowHeight }] = useDimensions();
   const [wrapperRef, { height: wrapperHeight }] = useDimensions();
@@ -83,6 +85,11 @@ export default function FormView({ tableInfo, rowData }) {
           ))}
         </Table>
       ))}
+
+      {toolbarPortalRef &&
+        toolbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<FormViewToolbar switchToTable={onSetTableView} />, toolbarPortalRef.current)}
     </Wrapper>
   );
 }

packages/web/src/formview/FormViewToolbar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ToolbarButton from '../widgets/ToolbarButton';
+
+export default function FormViewToolbar({ switchToTable }) {
+  return (
+    <>
+      <ToolbarButton onClick={switchToTable} icon="icon table">
+        Table view
+      </ToolbarButton>
+    </>
+  );
+}

packages/web/src/formview/SqlFormView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormView from './FormView';
 
-export default function SqlFormView({ rowData, tableInfo }) {
+export default function SqlFormView(props) {
-  return <FormView rowData={rowData} tableInfo={tableInfo} />;
+  return <FormView {...props} />;
 }