form view fixes, open form view menu

packages/datalib/src/TableFormViewDisplay.ts

@@ -186,7 +186,6 @@ export class TableFormViewDisplay extends FormViewDisplay {
   }
 
   isLoadedCurrentRow(row) {
-    console.log('isLoadedCurrentRow', row, this.config.formViewKey);
     if (!row) return false;
     const formViewKey = this.extractKey(row);
     return stableStringify(formViewKey) == stableStringify(this.config.formViewKey);

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -27,6 +27,16 @@ const menus = {
       tab: 'TableDataTab',
       forceNewTab: true,
     },
+    {
+      label: 'Open form',
+      tab: 'TableDataTab',
+      forceNewTab: true,
+      initialData: {
+        grid: {
+          isFormView: true,
+        },
+      },
+    },
     {
       label: 'Open structure',
       tab: 'TableStructureTab',
@@ -115,7 +125,8 @@ export async function openDatabaseObjectDetail(
   tabComponent,
   sqlTemplate,
   { schemaName, pureName, conid, database, objectTypeField },
-  forceNewTab
+  forceNewTab,
+  initialData
 ) {
   const connection = await getConnectionInfo({ conid });
   const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
@@ -138,7 +149,7 @@ export async function openDatabaseObjectDetail(
         initialArgs: sqlTemplate ? { sqlTemplate } : null,
       },
     },
-    undefined,
+    initialData,
     { forceNewTab }
   );
 }
@@ -240,7 +251,14 @@ function Menu({ data }) {
                 }
               );
             } else {
-              openDatabaseObjectDetail(openNewTab, menu.tab, menu.sqlTemplate, data, menu.forceNewTab);
+              openDatabaseObjectDetail(
+                openNewTab,
+                menu.tab,
+                menu.sqlTemplate,
+                data,
+                menu.forceNewTab,
+                menu.initialData
+              );
             }
           }}
         >

packages/web/src/datagrid/DataGrid.js

@@ -63,7 +63,7 @@ export default function DataGrid(props) {
 
       <DataGridContainer>
         {isFormView ? (
-          <FormView {...props} onSelectionChanged={setFormSelection} />
+          <FormView {...props} onSelectionChanged={collapsedWidgets.includes('cellData') ? null : setFormSelection} />
         ) : (
           <GridCore
             {...props}

packages/web/src/formview/FormView.js

@@ -19,6 +19,7 @@ import { copyTextToClipboard } from '../utility/clipboard';
 import { FontIcon } from '../icons';
 import openReferenceForm from './openReferenceForm';
 import useOpenNewTab from '../utility/useOpenNewTab';
+import LoadingInfo from '../widgets/LoadingInfo';
 
 const Table = styled.table`
   border-collapse: collapse;
@@ -125,6 +126,7 @@ export default function FormView(props) {
     allRowCount,
     rowCountBefore,
     onSelectionChanged,
+    isLoading,
   } = props;
   /** @type {import('dbgate-datalib').FormViewDisplay} */
   const formDisplay = props.formDisplay;
@@ -436,6 +438,14 @@ export default function FormView(props) {
       toolbarPortalRef.current
     );
 
+  if (isLoading) {
+    return (
+      <>
+        <LoadingInfo wrapper message="Loading data" />
+        {toolbar}
+      </>
+    );
+  }
   if (!formDisplay || !formDisplay.isLoadedCorrectly) return toolbar;
 
   return (

packages/web/src/formview/SqlFormView.js

@@ -32,10 +32,19 @@ async function loadRow(props, sql) {
 }
 
 export default function SqlFormView(props) {
-  const { formDisplay, changeSetState, dispatchChangeSet, conid, database, onReferenceSourceChanged } = props;
+  const {
+    formDisplay,
+    changeSetState,
+    dispatchChangeSet,
+    conid,
+    database,
+    onReferenceSourceChanged,
+    refReloadToken,
+  } = props;
   const [rowData, setRowData] = React.useState(null);
   const [reloadToken, setReloadToken] = React.useState(0);
   const [rowCountInfo, setRowCountInfo] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const confirmSqlModalState = useModalState();
   const [confirmSql, setConfirmSql] = React.useState('');
@@ -46,8 +55,17 @@ export default function SqlFormView(props) {
   changeSetRef.current = changeSet;
 
   const handleLoadCurrentRow = async () => {
+    let isLoaded = false;
+    if (formDisplay.config.formViewKey) {
+      setIsLoading(true);
       const row = await loadRow(props, formDisplay.getCurrentRowQuery());
-    if (row) setRowData(row);
+      setIsLoading(false);
+      setRowData(row);
+      isLoaded = !!row;
+    }
+    if (!isLoaded) {
+      await handleNavigate('first');
+    }
   };
 
   const handleLoadRowCount = async () => {
@@ -63,16 +81,18 @@ export default function SqlFormView(props) {
   };
 
   const handleNavigate = async (command) => {
+    setIsLoading(true);
     const row = await loadRow(props, formDisplay.navigateRowQuery(command));
-    if (row) {
+    setIsLoading(false);
     setRowData(row);
+    if (row) {
       formDisplay.navigate(row);
     }
   };
 
   React.useEffect(() => {
     if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData]);
-  }, [rowData]);
+  }, [rowData, refReloadToken]);
 
   React.useEffect(() => {
     if (formDisplay) handleLoadCurrentRow();
@@ -105,6 +125,7 @@ export default function SqlFormView(props) {
   }
 
   async function handleConfirmSql() {
+    setIsLoading(true);
     const resp = await axios.request({
       url: 'database-connections/query-data',
       method: 'post',
@@ -114,6 +135,7 @@ export default function SqlFormView(props) {
       },
       data: { sql: confirmSql },
     });
+    setIsLoading(false);
     const { errorMessage } = resp.data || {};
     if (errorMessage) {
       showModal((modalState) => (
@@ -162,10 +184,11 @@ export default function SqlFormView(props) {
         onNavigate={handleNavigate}
         former={former}
         onSave={handleSave}
+        isLoading={isLoading}
         onReload={() => setReloadToken((x) => x + 1)}
         onReconnect={async () => {
           await axios.post('database-connections/refresh', { conid, database });
-          formDisplay.reload();
+          setReloadToken((x) => x + 1);
         }}
         {...rowCountInfo}
       />