swithc to form keyboard shortcut

packages/web/src/datagrid/DataGridContextMenu.js

@@ -14,6 +14,7 @@ export default function DataGridContextMenu({
   openFreeTable,
   openChartSelection,
   openActiveChart,
+  switchToForm,
 }) {
   return (
     <>
@@ -57,6 +58,11 @@ export default function DataGridContextMenu({
       <DropDownMenuItem onClick={openFreeTable}>Open selection in free table editor</DropDownMenuItem>
       <DropDownMenuItem onClick={openChartSelection}>Open chart from selection</DropDownMenuItem>
       {openActiveChart && <DropDownMenuItem onClick={openActiveChart}>Open active chart</DropDownMenuItem>}
+      {!!switchToForm && (
+        <DropDownMenuItem onClick={switchToForm} keyText="F4">
+          Form view
+        </DropDownMenuItem>
+      )}
     </>
   );
 }

packages/web/src/datagrid/DataGridCore.js

@@ -382,6 +382,7 @@ export default function DataGridCore(props) {
         openFreeTable={handleOpenFreeTable}
         openChartSelection={handleOpenChart}
         openActiveChart={openActiveChart}
+        switchToForm={handleSwitchToFormView}
       />
     );
   };
@@ -720,6 +721,11 @@ export default function DataGridCore(props) {
       display.reload();
     }
 
+    if (event.keyCode == keycodes.f4) {
+      event.preventDefault();
+      handleSwitchToFormView();
+    }
+
     if (event.keyCode == keycodes.s && event.ctrlKey) {
       event.preventDefault();
       handleSave();
@@ -950,6 +956,17 @@ export default function DataGridCore(props) {
         }
       : null;
 
+  const handleSwitchToFormView =
+    formViewAvailable && display.baseTable && display.baseTable.primaryKey
+      ? () => {
+          const cell = currentCell;
+          if (!isRegularCell(cell)) return;
+          const rowData = grider.getRowData(cell[0]);
+          if (!rowData) return;
+          display.switchToFormView(rowData);
+        }
+      : null;
+
   // console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
   // console.log(
   //   'gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()',
@@ -1090,6 +1107,7 @@ export default function DataGridCore(props) {
               await axios.post('database-connections/refresh', { conid, database });
               display.reload();
             }}
+            switchToForm={handleSwitchToFormView}
           />,
           props.toolbarPortalRef.current
         )}

packages/web/src/datagrid/DataGridToolbar.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function DataGridToolbar({ reload, reconnect, grider, save }) {
+export default function DataGridToolbar({ reload, reconnect, grider, save, switchToForm }) {
   return (
     <>
+      {switchToForm && (
+        <ToolbarButton onClick={switchToForm} icon="icon form">
+          Form view
+        </ToolbarButton>
+      )}
       <ToolbarButton onClick={reload} icon="icon reload">
         Refresh
       </ToolbarButton>

packages/web/src/formview/FormView.js

@@ -330,6 +330,11 @@ export default function FormView(props) {
       onReload();
     }
 
+    if (event.keyCode == keycodes.f4) {
+      event.preventDefault();
+      handleSwitchToTable();
+    }
+
     if (
       !event.ctrlKey &&
       !event.altKey &&

packages/web/src/formview/FormViewContextMenu.js

@@ -4,12 +4,22 @@ import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
 export default function FormViewContextMenu({ switchToTable, onNavigate }) {
   return (
     <>
-      <DropDownMenuItem onClick={switchToTable}>Table view</DropDownMenuItem>
+      <DropDownMenuItem onClick={switchToTable} keyText="F4">
+        Table view
+      </DropDownMenuItem>
       <DropDownMenuDivider />
-      <DropDownMenuItem onClick={() => onNavigate('begin')}>Navigate to begin</DropDownMenuItem>
+      <DropDownMenuItem onClick={() => onNavigate('begin')} keyText="Ctrl+Home">
-      <DropDownMenuItem onClick={() => onNavigate('previous')}>Navigate to previous</DropDownMenuItem>
+        Navigate to begin
-      <DropDownMenuItem onClick={() => onNavigate('next')}>Navigate to next</DropDownMenuItem>
+      </DropDownMenuItem>
-      <DropDownMenuItem onClick={() => onNavigate('end')}>Navigate to end</DropDownMenuItem>
+      <DropDownMenuItem onClick={() => onNavigate('previous')} keyText="Ctrl+Up">
+        Navigate to previous
+      </DropDownMenuItem>
+      <DropDownMenuItem onClick={() => onNavigate('next')} keyText="Ctrl+Down">
+        Navigate to next
+      </DropDownMenuItem>
+      <DropDownMenuItem onClick={() => onNavigate('end')} keyText="Ctrl+End">
+        Navigate to end
+      </DropDownMenuItem>
     </>
   );
 }