From bb35a496f841764924bc62d890cc2614a35a8cbb Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 9 Jan 2021 16:55:47 +0100
Subject: [PATCH] form view toolbar

---
 packages/web/src/datagrid/DataGrid.js        |  2 +-
 packages/web/src/formview/FormView.js        |  9 ++++++++-
 packages/web/src/formview/FormViewToolbar.js | 12 ++++++++++++
 packages/web/src/formview/SqlFormView.js     |  4 ++--
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 packages/web/src/formview/FormViewToolbar.js

diff --git a/packages/web/src/datagrid/DataGrid.js b/packages/web/src/datagrid/DataGrid.js
index 226bf4233..3ccb1400a 100644
--- a/packages/web/src/datagrid/DataGrid.js
+++ b/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}
diff --git a/packages/web/src/formview/FormView.js b/packages/web/src/formview/FormView.js
index 457a5be2a..0457a13b8 100644
--- a/packages/web/src/formview/FormView.js
+++ b/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>
   );
 }
diff --git a/packages/web/src/formview/FormViewToolbar.js b/packages/web/src/formview/FormViewToolbar.js
new file mode 100644
index 000000000..280c0124a
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/packages/web/src/formview/SqlFormView.js b/packages/web/src/formview/SqlFormView.js
index aa0f46c58..15528424a 100644
--- a/packages/web/src/formview/SqlFormView.js
+++ b/packages/web/src/formview/SqlFormView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import FormView from './FormView';
 
-export default function SqlFormView({ rowData, tableInfo }) {
-  return <FormView rowData={rowData} tableInfo={tableInfo} />;
+export default function SqlFormView(props) {
+  return <FormView {...props} />;
 }