form view - loading, navigation

packages/web/src/formview/FormView.js

@@ -62,7 +62,7 @@ const NullSpan = styled.span`
 `;
 
 export default function FormView(props) {
-  const { rowData, toolbarPortalRef, tabVisible, config, setConfig } = props;
+  const { rowData, toolbarPortalRef, tabVisible, config, setConfig, onNavigate } = props;
   /** @type {import('dbgate-datalib').FormViewDisplay} */
   const formDisplay = props.formDisplay;
   const theme = useTheme();
@@ -81,7 +81,10 @@ export default function FormView(props) {
     toolbarPortalRef &&
     toolbarPortalRef.current &&
     tabVisible &&
-    ReactDOM.createPortal(<FormViewToolbar switchToTable={handleSwitchToTable} />, toolbarPortalRef.current);
+    ReactDOM.createPortal(
+      <FormViewToolbar switchToTable={handleSwitchToTable} onNavigate={onNavigate} />,
+      toolbarPortalRef.current
+    );
 
   // console.log('display', display);
 

packages/web/src/formview/FormViewToolbar.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function FormViewToolbar({ switchToTable }) {
+export default function FormViewToolbar({ switchToTable, onNavigate }) {
   return (
     <>
       <ToolbarButton onClick={switchToTable} icon="icon table">
         Table view
       </ToolbarButton>
+      <ToolbarButton onClick={() => onNavigate('begin')} icon="icon arrow-begin">
+        First
+      </ToolbarButton>
+      <ToolbarButton onClick={() => onNavigate('previous')} icon="icon arrow-left">
+        Previous
+      </ToolbarButton>
+      <ToolbarButton onClick={() => onNavigate('next')} icon="icon arrow-right">
+        Next
+      </ToolbarButton>
+      <ToolbarButton onClick={() => onNavigate('end')} icon="icon arrow-end">
+        Last
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/formview/SqlFormView.js

@@ -6,11 +6,10 @@ import useExtensions from '../utility/useExtensions';
 import FormView from './FormView';
 import axios from '../utility/axios';
 
-async function loadCurrentRow(props) {
-  const { formDisplay, conid, database } = props;
+async function loadRow(props, sql) {
+  const { conid, database } = props;
   /** @type {import('dbgate-datalib').TableFormViewDisplay} */
-
-  const sql = formDisplay.getCurrentRowQuery();
+  const formDisplay = props.formDisplay;
 
   const response = await axios.request({
     url: 'database-connections/query-data',
@@ -31,12 +30,22 @@ export default function SqlFormView(props) {
   const [rowData, setRowData] = React.useState(null);
 
   const handleLoadCurrentRow = async () => {
-    const row = await loadCurrentRow(props);
+    const row = await loadRow(props, formDisplay.getCurrentRowQuery());
     if (row) setRowData(row);
   };
 
+  const handleNavigate = async (command) => {
+    const row = await loadRow(props, formDisplay.navigateRowQuery(command));
+    if (row) {
+      setRowData(row);
+      formDisplay.navigate(row);
+    }
+  };
+
   React.useEffect(() => {
-    handleLoadCurrentRow();
+    if (formDisplay && !formDisplay.isLoadedCurrentRow(rowData)) {
+      handleLoadCurrentRow();
+    }
   }, [formDisplay]);
 
   // const { config, setConfig, cache, setCache, schemaName, pureName, conid, database } = props;
@@ -67,5 +76,5 @@ export default function SqlFormView(props) {
   //   setDisplay(newDisplay);
   // }, [config, cache, conid, database, schemaName, pureName, dbinfo, extensions]);
 
-  return <FormView {...props} rowData={rowData} />;
+  return <FormView {...props} rowData={rowData} onNavigate={handleNavigate} />;
 }