form view - correct handle no data

packages/datalib/src/GridDisplay.ts

@@ -528,10 +528,12 @@ export abstract class GridDisplay {
     this.setConfig((cfg) => ({
       ...cfg,
       isFormView: true,
-      formViewKey: _.pick(
+      formViewKey: rowData
-        rowData,
+        ? _.pick(
-        columns.map((x) => x.columnName)
+            rowData,
-      ),
+            columns.map((x) => x.columnName)
+          )
+        : null,
     }));
   }
 }

packages/web/src/datagrid/DataGridCore.js

@@ -968,9 +968,7 @@ export default function DataGridCore(props) {
     formViewAvailable && display.baseTable && display.baseTable.primaryKey
       ? () => {
           const cell = currentCell;
-          if (!isRegularCell(cell)) return;
+          const rowData = isRegularCell(cell) ? grider.getRowData(cell[0]) : null;
-          const rowData = grider.getRowData(cell[0]);
-          if (!rowData) return;
           display.switchToFormView(rowData);
         }
       : null;

packages/web/src/formview/FormView.js

@@ -342,6 +342,7 @@ export default function FormView(props) {
     }
 
     if (
+      rowData &&
       !event.ctrlKey &&
       !event.altKey &&
       ((event.keyCode >= keycodes.a && event.keyCode <= keycodes.z) ||
@@ -352,7 +353,7 @@ export default function FormView(props) {
       dispatchInsplaceEditor({ type: 'show', text: event.nativeEvent.key, cell: currentCell });
       return;
     }
-    if (event.keyCode == keycodes.f2) {
+    if (rowData && event.keyCode == keycodes.f2) {
       // @ts-ignore
       dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
       return;
@@ -374,7 +375,9 @@ export default function FormView(props) {
 
     if (isDataCell(cell) && !_.isEqual(cell, inplaceEditorState.cell) && _.isEqual(cell, currentCell)) {
       // @ts-ignore
-      dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+      if (rowData) {
+        dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+      }
     } else if (!_.isEqual(cell, inplaceEditorState.cell)) {
       // @ts-ignore
       dispatchInsplaceEditor({ type: 'close' });
@@ -391,6 +394,7 @@ export default function FormView(props) {
   };
 
   const rowCountInfo = React.useMemo(() => {
+    if (rowData  == null) return 'No data';
     if (allRowCount == null || rowCountBefore == null) return 'Loading row count...';
     return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`;
   }, [rowCountBefore, allRowCount]);
@@ -490,11 +494,9 @@ export default function FormView(props) {
                   />
                 ) : (
                   <>
-                    <CellFormattedValue
+                    {rowData && (
-                      value={rowData && rowData[col.columnName]}
+                      <CellFormattedValue value={rowData[col.columnName]} dataType={col.dataType} theme={theme} />
-                      dataType={col.dataType}
+                    )}
-                      theme={theme}
-                    />
                     {!!col.hintColumnName &&
                       rowData &&
                       !(rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) && (

packages/web/src/formview/SqlFormView.js

@@ -11,6 +11,7 @@ import ErrorMessageModal from '../modals/ErrorMessageModal';
 import { scriptToSql } from 'dbgate-sqltree';
 import useModalState from '../modals/useModalState';
 import useShowModal from '../modals/showModal';
+import stableStringify from 'json-stable-stringify';
 
 async function loadRow(props, sql) {
   const { conid, database } = props;
@@ -45,6 +46,7 @@ export default function SqlFormView(props) {
   const [reloadToken, setReloadToken] = React.useState(0);
   const [rowCountInfo, setRowCountInfo] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(false);
+  const loadedFiltersRef = React.useRef('');
 
   const confirmSqlModalState = useModalState();
   const [confirmSql, setConfirmSql] = React.useState('');
@@ -94,6 +96,10 @@ export default function SqlFormView(props) {
     if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData]);
   }, [rowData, refReloadToken]);
 
+  React.useEffect(() => {
+    loadedFiltersRef.current = formDisplay ? stableStringify(formDisplay.config) : null;
+  }, [rowData]);
+
   React.useEffect(() => {
     if (formDisplay) handleLoadCurrentRow();
     setRowCountInfo(null);
@@ -103,7 +109,11 @@ export default function SqlFormView(props) {
   React.useEffect(() => {
     if (!formDisplay.isLoadedCorrectly) return;
 
-    if (formDisplay && !formDisplay.isLoadedCurrentRow(rowData)) {
+    if (
+      formDisplay &&
+      (!formDisplay.isLoadedCurrentRow(rowData) ||
+        loadedFiltersRef.current != stableStringify(formDisplay.config.filters))
+    ) {
       handleLoadCurrentRow();
     }
     setRowCountInfo(null);