FIX: Show Record Information was not working on lazy loaded screens

frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx

@@ -43,6 +43,12 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { onColumnOrderChangeFinished } from "model/actions-ui/DataView/TableView/onColumnOrderChangeFinished";
 import { getDataView } from "model/selectors/DataView/getDataView";
 import { IFocusable } from "model/entities/FormFocusManager";
+import { runGeneratorInFlowWithHandler } from "utils/runInFlowWithHandler";
+import { getFormScreenLifecycle } from "model/selectors/FormScreen/getFormScreenLifecycle";
+import { getMenuItemId } from "model/selectors/getMenuItemId";
+import { getDataStructureEntityId } from "model/selectors/DataView/getDataStructureEntityId";
+import { getSessionId } from "model/selectors/getSessionId";
+import { getRecordInfo } from "model/selectors/RecordInfo/getRecordInfo";
 
 function createTableRenderer(ctx: any, gridDimensions: IGridDimensions) {
   const groupedColumnSettings = computed(
@@ -100,9 +106,9 @@ function createTableRenderer(ctx: any, gridDimensions: IGridDimensions) {
     });
   }
 
-  function handleClick(event: any) {
+  async function handleClick(event: any) {
     const domRect = event.target.getBoundingClientRect();
-    const handlingResult = handleTableClick(
+    const handlingResult = await handleTableClick(
       event,
       event.clientX - domRect.x,
       event.clientY - domRect.y,
@@ -363,13 +369,28 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
   }
 
   @action.bound handleScrollerClick(event: any) {
-    const {handled} = this.tableRenderer.handleClick(event);
-    if (!this.tablePanelView.isEditing || !handled) {
-      this.focusTable();
-    }
-    if (!handled) {
-      this.props.onOutsideTableClick?.(event);
-    }
+    const self = this;
+    runGeneratorInFlowWithHandler({
+      ctx: this.context.tablePanelView,
+      generator: function* (){
+        const handled = yield self.tableRenderer.handleClick(event);
+        if (!self.tablePanelView.isEditing || !handled) {
+          self.focusTable();
+          let dataView = getDataView(self.context.tablePanelView);
+          if (getFormScreenLifecycle(dataView).focusedDataViewId === dataView.id && dataView.selectedRowId) {
+            yield*getRecordInfo(dataView).onSelectedRowMaybeChanged(
+              getMenuItemId(dataView),
+              getDataStructureEntityId(dataView),
+              dataView.selectedRowId,
+              getSessionId(dataView)
+            );
+          }
+        }
+        if (!handled) {
+          self.props.onOutsideTableClick?.(event);
+        }
+      }()
+    });
   }
 
   @action.bound handleResize(contentRect: { bounds: BoundingRect }) {

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/cells/dataCell.ts

@@ -137,8 +137,8 @@ function registerClickHandler(columnId: string) {
       y: checkboxClickableArea.y,
       w: checkboxClickableArea.width,
       h: checkboxClickableArea.height,
-      handler(event: any) {
-        flow(function*() {
+      async handler(event: any) {
+        await flow(function*() {
           if (event.isDouble) {
             getTablePanelView(ctx).setEditing(false);
             const defaultAction = getDataView(ctx).firstEnabledDefaultAction;
@@ -157,8 +157,8 @@ function registerClickHandler(columnId: string) {
     y: cellClickableArea.y,
     w: cellClickableArea.width,
     h: cellClickableArea.height,
-    handler(event: any) {
-      flow(function*() {
+    async handler(event: any) {
+      await flow(function*() {
         if (event.isDouble) {
           getTablePanelView(ctx).setEditing(false);
           const defaultAction = getDataView(ctx).firstEnabledDefaultAction;

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/cells/groupCell.ts

@@ -122,8 +122,8 @@ export function drawGroupCell() {
       y: currentRowTop(),
       w: groupCellWidth,
       h: 20,
-      handler(event: any) {
-        flow(function*() {
+      async handler(event: any) {
+        await flow(function*() {
           if (!row.sourceGroup.isExpanded && row.sourceGroup.childGroups.length === 0) {
             yield onGroupHeaderToggleClick(ctx)(event, groupRow);
           }
@@ -136,19 +136,19 @@ export function drawGroupCell() {
           }
           row.sourceGroup.isExpanded = !row.sourceGroup.isExpanded;
 
-          unselectRowIfInClosedGroup(ctx, row);
+          yield*unselectRowIfInClosedGroup(ctx, row);
         })();
       },
     });
   }
 }
 
-function unselectRowIfInClosedGroup(ctx: any, row: IGroupRow) {
+function* unselectRowIfInClosedGroup(ctx: any, row: IGroupRow): Generator {
   const dataView = getDataView(ctx);
   if (!row.sourceGroup.isExpanded && dataView.selectedRowId) {
     const containsSelectedRow = !!row.sourceGroup.getRowById(dataView.selectedRowId);
     if (containsSelectedRow) {
-      dataView.selectedRowId = undefined;
+      yield*dataView.setSelectedRowId(undefined);
     }
   }
 }

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/cells/selectionCheckboxCell.ts

@@ -108,8 +108,8 @@ function registerClickHandler() {
     y: currentRowTop(),
     w: currentColumnWidthVisible(),
     h: currentRowHeight(),
-    handler(event: any) {
-      flow(function*() {
+    async handler(event: any) {
+      await flow(function*() {
         const tablePanelView = getTablePanelView(ctx);
         const dataTable = getDataTable(ctx);
         const rowId = dataTable.getRowId(row);

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/onClick.ts

@@ -18,13 +18,13 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { clickSubscriptions, mouseMoveSubscriptions, mouseOverSubscriptions, } from "./renderingValues";
-import { IClickSubsItem, IMouseOverSubsItem } from "./types";
+import { IClickSubsItem, IMouseMoveSubsItem, IMouseOverSubsItem } from "./types";
 
 export function onClick(item: IClickSubsItem) {
   clickSubscriptions().push(item);
 }
 
-export function handleTableClick(
+export async function handleTableClick(
   event: any,
   canvasX: number,
   canvasY: number,
@@ -35,15 +35,15 @@ export function handleTableClick(
   let handled = false;
   for (let h of clickSubscriptions) {
     if (h.x <= canvasX && h.x + h.w >= canvasX && h.y <= canvasY && h.y + h.h >= canvasY) {
-      h.handler(event, canvasX, canvasY, canvasX, canvasY);
+      await h.handler(event, canvasX, canvasY, canvasX, canvasY);
       handled = true;
       break;
     }
   }
-  return {handled};
+  return handled;
 }
 
-export function onMouseMove(item: IClickSubsItem) {
+export function onMouseMove(item: IMouseMoveSubsItem) {
   mouseMoveSubscriptions().push(item);
 }
 

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/renderingValues.ts

@@ -18,7 +18,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ValueBox } from "./common/ValueBox";
-import { IClickSubsItem, IMouseOverSubsItem, ITableRow } from "./types";
+import { IClickSubsItem, IMouseMoveSubsItem, IMouseOverSubsItem, ITableRow } from "./types";
 import { Memoized } from "./common/Memoized";
 import { getTablePanelView } from "model/selectors/TablePanelView/getTablePanelView";
 import { getDataTable } from "model/selectors/DataView/getDataTable";
@@ -140,7 +140,7 @@ scRenderTable.push(() => {
   clickSubscriptions.clear();
 });
 
-export const mouseMoveSubscriptions = ValueBox<IClickSubsItem[]>();
+export const mouseMoveSubscriptions = ValueBox<IMouseMoveSubsItem[]>();
 scRenderTable.push(() => {
   mouseMoveSubscriptions.clear();
 });

frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/types.ts

@@ -81,6 +81,15 @@ export interface IToolTipData {
 }
 
 export interface IClickSubsItem {
+  handler(event: any, worldX: number, worldY: number, canvasX: number, canvasY: number): Promise<void>;
+
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface IMouseMoveSubsItem {
   handler(event: any, worldX: number, worldY: number, canvasX: number, canvasY: number): void;
 
   x: number;

frontend-html/src/gui/Components/ScreenElements/TreeView.tsx

@@ -24,6 +24,7 @@ import { action, computed, observable } from "mobx";
 import S from "./TreeView.module.css";
 import cx from "classnames";
 import { isTreeDataTable, TreeDataTable } from "../../../model/entities/TreeDataTable";
+import { runGeneratorInFlowWithHandler } from "utils/runInFlowWithHandler";
 
 @observer
 export class TreeView extends React.Component<{ dataView: IDataView }> {
@@ -71,7 +72,13 @@ export class TreeView extends React.Component<{ dataView: IDataView }> {
   expanded: string[] = []
 
   onRowClick(node: Node) {
-    this.props.dataView.setSelectedRowId(node.id);
+    const self = this;
+    runGeneratorInFlowWithHandler({
+      ctx: this.props.dataView,
+      generator: function*(){
+        yield*self.props.dataView.setSelectedRowId  (node.id);
+      }()
+    })
   }
 
   onCaretClick(node: Node) {

frontend-html/src/model/actions-ui/DataView/TableView/onFieldKeyDown.ts

@@ -69,13 +69,13 @@ export function onFieldKeyDown(ctx: any) {
               return;
             }
 
-            yield dataView.lifecycle.runRecordChangedReaction(function*() {
-              if (event.shiftKey) {
-                yield selectPrevColumn(ctx)(true);
-              } else {
-                yield selectNextColumn(ctx)(true);
-              }
-            });
+            if (event.shiftKey) {
+              selectPrevColumn(ctx)(true);
+            } else {
+              yield*selectNextColumn(ctx)(true);
+            }
+            yield*dataView.lifecycle.runRecordChangedReaction();
+
             event.preventDefault();
             tablePanelView.dontHandleNextScroll();
             tablePanelView.scrollToCurrentCell();
@@ -85,7 +85,7 @@ export function onFieldKeyDown(ctx: any) {
             if (event.shiftKey) {
               selectPrevColumn(ctx)(true);
             } else {
-              selectNextColumn(ctx)(true);
+              yield*selectNextColumn(ctx)(true);
             }
             event.preventDefault();
 
@@ -107,13 +107,12 @@ export function onFieldKeyDown(ctx: any) {
             return;
           }
 
-          yield dataView.lifecycle.runRecordChangedReaction(function*() {
-            if (event.shiftKey) {
-              yield*selectPrevRow(ctx)();
-            } else {
-              yield*selectNextRow(ctx)();
-            }
-          });
+          if (event.shiftKey) {
+            yield*selectPrevRow(ctx)();
+          } else {
+            yield*selectNextRow(ctx)();
+          }
+          yield*dataView.lifecycle.runRecordChangedReaction();
 
           tablePanelView.scrollToCurrentCell();
           tablePanelView.setEditing(true);

frontend-html/src/model/actions-ui/DataView/TableView/onTableKeyDown.ts

@@ -58,7 +58,7 @@ export function onTableKeyDown(ctx: any) {
           if (event.shiftKey) {
             selectPrevColumn(ctx)(true);
           } else {
-            selectNextColumn(ctx)(true);
+            yield*selectNextColumn(ctx)(true);
           }
           event.preventDefault();
           getTablePanelView(ctx).scrollToCurrentCell();

frontend-html/src/model/actions/DataLoading/processCRUDResult.ts

@@ -100,14 +100,14 @@ function*processSingleResult(ctx: any, resultItem: ICRUDResult,
           yield dataView.insertRecord(tablePanelView.firstVisibleRowIndex, dataSourceRow, shouldLockNewRowAtTop);
           try {
             dataView.lifecycle.stopSelectedRowReaction();
-            dataView.selectRow(dataSourceRow);
+            yield*dataView.selectRow(dataSourceRow);
             yield*dataView.lifecycle.changeMasterRow();
           } finally {
-            dataView.lifecycle.startSelectedRowReaction();
+            yield*dataView.lifecycle.startSelectedRowReaction();
           }
         } else {
           yield dataView.insertRecord(dataView.tableRows.length, dataSourceRow, shouldLockNewRowAtTop);
-          dataView.selectRow(dataSourceRow);
+          yield*dataView.selectRow(dataSourceRow);
         }
         getDataViewCache(dataView).UpdateData(dataView);
       }
@@ -119,7 +119,7 @@ function*processSingleResult(ctx: any, resultItem: ICRUDResult,
       for (let dataView of dataViews) {
         const row = dataView.dataTable.getRowById(resultItem.objectId);
         if (row) {
-          dataView.deleteRowAndSelectNext(row);
+          yield*dataView.deleteRowAndSelectNext(row);
           getDataViewCache(dataView).UpdateData(dataView);
         }
       }
@@ -149,7 +149,7 @@ function*processSingleResult(ctx: any, resultItem: ICRUDResult,
           yield*dataView.lifecycle.navigateChildren();
         }
         if (!dataView.selectedRow) {
-          dataView.reselectOrSelectFirst();
+          yield*dataView.reselectOrSelectFirst();
         }
       }
       break;
@@ -184,7 +184,7 @@ function*batchProcessUpdates(ctx: any, updates: ICRUDResult[], resortTables?: bo
       yield dataView.dataTable.updateSortAndFilter({retainPreviousSelection: true});
     }
     if (!dataView.selectedRow) {
-      dataView.reselectOrSelectFirst();
+      yield*dataView.reselectOrSelectFirst();
     }
     dataView.formFocusManager.stopAutoFocus();
   }

frontend-html/src/model/actions/DataView/TableView/selectNextColumn.ts

@@ -20,7 +20,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 import { getTablePanelView } from "model/selectors/TablePanelView/getTablePanelView";
 
 export function selectNextColumn(ctx: any) {
-  return function selectNextColumn(nextRowWhenEnd?: boolean) {
-    getTablePanelView(ctx).selectNextColumn(nextRowWhenEnd);
+  return function* selectNextColumn(nextRowWhenEnd?: boolean) {
+    yield*getTablePanelView(ctx).selectNextColumn(nextRowWhenEnd);
   };
 }

frontend-html/src/model/actions/DataView/selectFirstRow.ts

@@ -26,7 +26,7 @@ export function selectFirstRow(ctx: any) {
   return function*selectFirstRow() {
     let dataView = getDataView(ctx);
     if (dataView.infiniteScrollLoader) yield*dataView.infiniteScrollLoader!.loadFirstPage();
-    dataView.selectFirstRow();
+    yield*dataView.selectFirstRow();
     getTablePanelView(ctx).scrollToCurrentRow();
     if (!isLazyLoading(ctx)) {
       setTimeout(() => {

frontend-html/src/model/actions/DataView/selectLastRow.ts

@@ -28,7 +28,7 @@ export function selectLastRow(ctx: any) {
     if (dataView.infiniteScrollLoader){
       yield*dataView.infiniteScrollLoader.loadLastPage();
     }
-    dataView.selectLastRow();
+    yield*dataView.selectLastRow();
     getTablePanelView(ctx).scrollToCurrentRow();
     if (!isLazyLoading(ctx)) {
       setTimeout(() => {

frontend-html/src/model/actions/DataView/selectNextRow.ts

@@ -24,7 +24,7 @@ import { getGridFocusManager } from "model/entities/GridFocusManager";
 
 export function selectNextRow(ctx: any) {
   return function*selectNextRow() {
-    getDataView(ctx).selectNextRow();
+    yield*getDataView(ctx).selectNextRow();
     getTablePanelView(ctx).scrollToCurrentRow();
     if (!isLazyLoading(ctx)) {
       setTimeout(() => {