fix: sync changes from v2 to v2-develop (#802) [skip ci]

Co-authored-by: mguellsegarra <5711443+mguellsegarra@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.52.1",
+  "version": "2.52.2",
   "engines": {
     "node": "20.5.0"
   },
@@ -37,7 +37,7 @@
     "@gisce/fiber-diagram": "2.1.1",
     "@gisce/ooui": "2.27.0",
     "@gisce/react-formiga-components": "1.8.0",
-    "@gisce/react-formiga-table": "1.9.0",
+    "@gisce/react-formiga-table": "1.9.1",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
     "@types/deep-equal": "^1.0.4",

src/context/ActionViewContext.tsx

@@ -1,5 +1,6 @@
 import { DEFAULT_SEARCH_LIMIT } from "@/models/constants";
 import { View } from "@/types";
+import { ColumnState } from "@gisce/react-formiga-table";
 import { createContext, useContext, useEffect, useState } from "react";
 
 type ActionViewProviderProps = {
@@ -68,6 +69,8 @@ export type ActionViewContextType = Omit<
   setSearchQuery?: (value: SearchQueryParams) => void;
   isInfiniteTree?: boolean;
   setIsInfiniteTree?: (value: boolean) => void;
+  sortState?: ColumnState[];
+  setSortState?: (value: ColumnState[] | undefined) => void;
 };
 
 export const ActionViewContext = createContext<ActionViewContextType | null>(
@@ -127,6 +130,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const [treeFirstVisibleRow, setTreeFirstVisibleRow] = useState<number>(0);
   const [searchQuery, setSearchQuery] = useState<SearchQueryParams>();
   const [isInfiniteTree, setIsInfiniteTree] = useState<boolean>(false);
+  const [sortState, setSortState] = useState<ColumnState[]>();
 
   const [limit, setLimit] = useState<number>(
     limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT,
@@ -234,6 +238,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         setSearchQuery,
         isInfiniteTree,
         setIsInfiniteTree,
+        sortState,
+        setSortState,
       }}
     >
       {children}
@@ -310,6 +316,8 @@ export const useActionViewContext = () => {
       setSearchQuery: () => {},
       isInfiniteTree: false,
       setIsInfiniteTree: () => {},
+      sortState: undefined,
+      setSortState: () => {},
     };
   }
 

src/helpers/treeHelper.tsx

@@ -6,7 +6,7 @@ import {
   Reference,
 } from "@gisce/ooui";
 import { TreeView, Column } from "@/types";
-import { SortDirection } from "@gisce/react-formiga-table";
+import { SortDirection, ColumnState } from "@gisce/react-formiga-table";
 
 const getTree = (treeView: TreeView): TreeOoui => {
   const xml = treeView.arch;
@@ -219,6 +219,33 @@ function hasActualValues(obj: Record<string, any>): boolean {
   return false;
 }
 
+const getSortedFieldsFromState = ({
+  state,
+}: {
+  state?: ColumnState[];
+}): Record<string, SortDirection> | undefined => {
+  if (!state) {
+    return undefined;
+  }
+
+  const columnsWithSort = state
+    .filter((col) => col.sort)
+    .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0));
+
+  if (columnsWithSort.length === 0) {
+    return undefined;
+  }
+  const sortFields = columnsWithSort.reduce(
+    (acc, col) => ({
+      ...acc,
+      [col.colId]: col.sort,
+    }),
+    {},
+  );
+
+  return sortFields;
+};
+
 const getOrderFromSortFields = (sortFields?: Record<string, SortDirection>) => {
   if (!sortFields) {
     return undefined;
@@ -260,4 +287,5 @@ export {
   hasActualValues,
   getOrderFromSortFields,
   extractTreeXmlAttribute,
+  getSortedFieldsFromState,
 };

src/hooks/useSearchTreeState.ts

@@ -4,6 +4,7 @@ import {
   SearchQueryParams,
   useIsUnderActionViewContext,
 } from "@/context/ActionViewContext";
+import { ColumnState } from "@gisce/react-formiga-table";
 
 export type SearchTreeState = {
   treeIsLoading: boolean;
@@ -27,6 +28,8 @@ export type SearchTreeState = {
   totalItems: number;
   setTotalItems: (value: number) => void;
   isActive?: boolean;
+  sortState?: ColumnState[];
+  setSortState: (value: ColumnState[] | undefined) => void;
 };
 
 export function useSearchTreeState({
@@ -50,6 +53,9 @@ export function useSearchTreeState({
   const [localResults, setLocalResults] = useState<any[]>([]);
   const [localSearchQuery, setLocalSearchQuery] = useState<SearchQueryParams>();
   const [localTotalItems, setLocalTotalItems] = useState(0);
+  const [localSortState, setLocalSortState] = useState<
+    ColumnState[] | undefined
+  >();
 
   // Return either context values or local state values based on isUnderActionViewContext
   return isUnderActionViewContext
@@ -78,6 +84,8 @@ export function useSearchTreeState({
         totalItems: actionViewContext.totalItems ?? 0,
         setTotalItems: actionViewContext.setTotalItems ?? (() => {}),
         isActive: actionViewContext.isActive,
+        sortState: actionViewContext.sortState,
+        setSortState: actionViewContext.setSortState ?? (() => {}),
       }
     : {
         treeIsLoading: localTreeIsLoading,
@@ -101,5 +109,7 @@ export function useSearchTreeState({
         totalItems: localTotalItems,
         setTotalItems: setLocalTotalItems,
         isActive: undefined,
+        sortState: localSortState,
+        setSortState: setLocalSortState,
       };
 }

src/views/actionViews/TreeActionView.tsx

@@ -1,7 +1,14 @@
 import TreeActionBar from "@/actionbar/TreeActionBar";
 import { FormView, TreeView, View } from "@/types";
 import TitleHeader from "@/ui/TitleHeader";
-import { Fragment, useCallback, useContext, useEffect, useMemo } from "react";
+import {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import {
   ActionViewContext,
   ActionViewContextType,
@@ -43,6 +50,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     availableViews,
     searchTreeNameSearch,
   } = props;
+  const previousVisibleRef = useRef(visible);
 
   const isInfiniteTree = useMemo(() => {
     if (!treeView?.arch || treeView.isExpandable) {
@@ -57,9 +65,12 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInfiniteTree]);
 
-  const { currentView, setPreviousView, setIsInfiniteTree } = useContext(
-    ActionViewContext,
-  ) as ActionViewContextType;
+  const {
+    currentView,
+    setPreviousView,
+    setIsInfiniteTree,
+    setSelectedRowItems,
+  } = useContext(ActionViewContext) as ActionViewContextType;
 
   const onRowClicked = useCallback(
     (event: any) => {
@@ -86,6 +97,14 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     ],
   );
 
+  useEffect(() => {
+    if (previousVisibleRef.current && !visible && isInfiniteTree) {
+      setSelectedRowItems?.([]);
+    }
+    previousVisibleRef.current = visible;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, isInfiniteTree]);
+
   if (!visible) {
     return null;
   }

src/widgets/base/one2many/One2manyTree.tsx

@@ -1,12 +1,16 @@
 import {
+  ColumnState,
   InfiniteTable,
   InfiniteTableRef,
   SortDirection,
 } from "@gisce/react-formiga-table";
 import { One2manyItem } from "./One2manyInput";
 import { Tree as TreeOoui } from "@gisce/ooui";
-import { RefObject, useCallback, useMemo, useRef } from "react";
-import { getTableColumns, getTableItems } from "@/helpers/treeHelper";
+import { RefObject, useCallback, useRef } from "react";
+import {
+  getSortedFieldsFromState,
+  getTableColumns,
+} from "@/helpers/treeHelper";
 import { COLUMN_COMPONENTS } from "@/widgets/views/Tree/treeComponents";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { useDeepCompareMemo } from "use-deep-compare";
@@ -113,12 +117,15 @@ export const One2manyTree = ({
     async ({
       startRow,
       endRow,
-      sortFields,
+      state,
     }: {
       startRow: number;
       endRow: number;
-      sortFields?: Record<string, SortDirection>;
+      state?: ColumnState[];
     }) => {
+      const sortFields = getSortedFieldsFromState({
+        state,
+      });
       const { results, colors, status } = await onFetchRecords({
         allItems: itemsRef.current,
         startRow,