feat: wip

Author: mguellsegarra

src/context/ActionViewContext.tsx

@@ -71,7 +71,9 @@ export type ActionViewContextType = Omit<
   setLimit?: (value: number) => void;
   setTitle?: (value: string) => void;
   treeFirstVisibleRow: number;
-  setTreeFirstVisibleRow: (totalItems: number) => void;
+  setTreeFirstVisibleRow: (value: number) => void;
+  treeFirstVisibleColumn: string | undefined;
+  setTreeFirstVisibleColumn: (value: string | undefined) => void;
   searchQuery?: SearchQueryParams;
   setSearchQuery?: (value: SearchQueryParams) => void;
   treeType?: TreeType;
@@ -147,6 +149,9 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
     ),
   );
   const [treeFirstVisibleRow, setTreeFirstVisibleRow] = useState<number>(0);
+  const [treeFirstVisibleColumn, setTreeFirstVisibleColumn] = useState<
+    string | undefined
+  >(undefined);
   const [searchQuery, setSearchQuery] = useState<SearchQueryParams>();
   const [treeType, setTreeType] = useState<TreeType>(DEFAULT_TREE_TYPE);
   const [sortState, setSortState] = useState<ColumnState[]>();
@@ -257,6 +262,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         isActive,
         setTreeFirstVisibleRow,
         treeFirstVisibleRow,
+        treeFirstVisibleColumn,
+        setTreeFirstVisibleColumn,
         searchQuery,
         setSearchQuery,
         treeType,
@@ -339,6 +346,8 @@ export const useActionViewContext = () => {
       setTitle: () => {},
       treeFirstVisibleRow: 0,
       setTreeFirstVisibleRow: () => {},
+      treeFirstVisibleColumn: undefined,
+      setTreeFirstVisibleColumn: () => {},
       searchQuery: undefined,
       setSearchQuery: () => {},
       treeType: DEFAULT_TREE_TYPE,

src/helpers/treeHelper.tsx

@@ -62,7 +62,7 @@ const getTableColumns = (
 
     let isSortable = true;
 
-    if (treeType === "legacy" || treeType === "paginated") {
+    if (treeType === "legacy") {
       isSortable = type !== "one2many";
     } else {
       isSortable =
@@ -74,19 +74,6 @@ const getTableColumns = (
       dataIndex: key,
       title: column.label,
       render,
-      comparator: (valueA: any, valueB: any, nodeA: any, nodeB: any) => {
-        let aItem = nodeA?.data?.[key] || "";
-        let bItem = nodeB?.data?.[key] || "";
-
-        if (type === "many2one") {
-          aItem = nodeA?.data?.[key]?.value || "";
-          bItem = nodeB?.data?.[key]?.value || "";
-        }
-
-        if (aItem < bItem) return -1;
-        if (aItem > bItem) return 1;
-        return 0;
-      },
       sorter: (a: any, b: any) => {
         let aItem = a[key] || "";
         let bItem = b[key] || "";

src/hooks/usePaginatedSearch.ts

@@ -14,7 +14,14 @@ import { ConnectionProvider, TreeView } from "..";
 import { useShowErrorDialog } from "@/ui/GenericErrorDialog";
 import { useDeepCompareEffect } from "use-deep-compare";
 import deepEqual from "deep-equal";
-import { getColorMap, getStatusMap, getTableItems } from "@/helpers/treeHelper";
+import {
+  getColorMap,
+  getStatusMap,
+  getTableItems,
+  getTree,
+  getSortedFieldsFromState,
+  getOrderFromSortFields,
+} from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 import { getKey } from "@/helpers/tree-columnStorageHelper";
 import { useTreeColumnStorageFetch } from "@/widgets/base/one2many/useTreeColumnStorageFetch";
@@ -57,6 +64,8 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     setSelectedRowItems,
     setTreeFirstVisibleRow,
     treeFirstVisibleRow,
+    treeFirstVisibleColumn,
+    setTreeFirstVisibleColumn,
     selectedRowItems,
     setSearchParams,
     searchValues,
@@ -72,12 +81,15 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     setCurrentPage,
     pageSize,
     setPageSize,
+    sortState: actionViewSortState,
+    setSortState: setActionViewSortState,
   } = useSearchTreeState({ useLocalState: !rootTree });
 
   // Local state
   const [totalRowsLoading, setTotalRowsLoading] = useState<boolean>(true);
   const [totalRows, setTotalRows] = useState<number | null>();
   const [results, setResults] = useState<any[]>([]);
+  const hasRestoredSortStateForFirstTime = useRef<boolean>(false);
 
   // Refs
   const nameSearch = nameSearchProps || searchTreeNameSearch;
@@ -173,6 +185,10 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     return treeFirstVisibleRow;
   }, [treeFirstVisibleRow]);
 
+  const onGetFirstVisibleColumn = useCallback(() => {
+    return treeFirstVisibleColumn;
+  }, [treeFirstVisibleColumn]);
+
   const onRowStyle = useCallback((item: Record<string, any>): CSSProperties => {
     if (colorsForResults.current[item.node?.data?.id]) {
       return { color: colorsForResults.current[item.node?.data?.id] };
@@ -269,6 +285,7 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     mergedParams,
     nameSearch,
     domain,
+    actionViewSortState,
   ]);
 
   useEffect(() => {
@@ -320,6 +337,14 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
       attrs.status = treeOoui.status;
     }
 
+    let order;
+    if (actionViewSortState?.length) {
+      const sortFields = getSortedFieldsFromState({
+        state: actionViewSortState,
+      });
+      order = getOrderFromSortFields(sortFields);
+    }
+
     const params = nameSearch ? domain : mergedParams;
 
     const { results, attrsEvaluated } = await searchForTree({
@@ -332,6 +357,7 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
         : treeView!.fields,
       context,
       attrs,
+      order,
       name_search: nameSearch,
     });
 
@@ -401,6 +427,7 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     treeView,
     treeViewFetching,
     updateTotalRows,
+    actionViewSortState,
   ]);
 
   const refresh = useCallback(async () => {
@@ -504,5 +531,10 @@ export const usePaginatedSearch = (props: PaginatedSearchProps) => {
     updateColumnState,
     currentPage,
     pageSize,
+    sortState: actionViewSortState,
+    setSortState: setActionViewSortState,
+    treeFirstVisibleColumn,
+    setTreeFirstVisibleColumn,
+    onGetFirstVisibleColumn,
   };
 };

src/hooks/useSearchTreeState.ts

@@ -20,6 +20,8 @@ export type SearchTreeState = {
   setSelectedRowItems: (value: any[] | ((prevValue: any[]) => any[])) => void;
   treeFirstVisibleRow: number;
   setTreeFirstVisibleRow: (value: number) => void;
+  treeFirstVisibleColumn: string | undefined;
+  setTreeFirstVisibleColumn: (value: string | undefined) => void;
   searchParams: any[];
   setSearchParams: (value: any[]) => void;
   searchValues: any;
@@ -57,6 +59,8 @@ export function useSearchTreeState({
   const [localSearchVisible, setLocalSearchVisible] = useState(false);
   const [localSelectedRowItems, setLocalSelectedRowItems] = useState<any[]>([]);
   const [localTreeFirstVisibleRow, setLocalTreeFirstVisibleRow] = useState(0);
+  const [localTreeFirstVisibleColumn, setLocalTreeFirstVisibleColumn] =
+    useState<string | undefined>(undefined);
   const [localSearchParams, setLocalSearchParams] = useState<any[]>([]);
   const [localSearchValues, setLocalSearchValues] = useState<any>({});
   const [localSearchTreeNameSearch, setLocalSearchTreeNameSearch] =
@@ -85,6 +89,9 @@ export function useSearchTreeState({
         treeFirstVisibleRow: actionViewContext.treeFirstVisibleRow ?? 0,
         setTreeFirstVisibleRow:
           actionViewContext.setTreeFirstVisibleRow ?? (() => {}),
+        treeFirstVisibleColumn: actionViewContext.treeFirstVisibleColumn,
+        setTreeFirstVisibleColumn:
+          actionViewContext.setTreeFirstVisibleColumn ?? (() => {}),
         searchParams: actionViewContext.searchParams || [],
         setSearchParams: actionViewContext.setSearchParams ?? (() => {}),
         searchValues: actionViewContext.searchValues || {},
@@ -117,6 +124,8 @@ export function useSearchTreeState({
         setSelectedRowItems: setLocalSelectedRowItems,
         treeFirstVisibleRow: localTreeFirstVisibleRow,
         setTreeFirstVisibleRow: setLocalTreeFirstVisibleRow,
+        treeFirstVisibleColumn: localTreeFirstVisibleColumn,
+        setTreeFirstVisibleColumn: setLocalTreeFirstVisibleColumn,
         searchParams: localSearchParams,
         setSearchParams: setLocalSearchParams,
         searchValues: localSearchValues,

src/widgets/views/Tree/Paginated/SearchTreePaginated.tsx

@@ -145,6 +145,10 @@ function SearchTreePaginatedComp(props: SearchTreePaginatedProps, ref: any) {
     updateColumnState,
     currentPage,
     pageSize,
+    sortState: actionViewSortState,
+    setSortState: setActionViewSortState,
+    setTreeFirstVisibleColumn,
+    onGetFirstVisibleColumn,
   } = usePaginatedSearch({
     treeViewFetching: loading,
     treeOoui,
@@ -279,6 +283,8 @@ function SearchTreePaginatedComp(props: SearchTreePaginatedProps, ref: any) {
         onGetColumnsState={getColumnState}
         onChangeFirstVisibleRowIndex={setTreeFirstVisibleRow}
         onGetFirstVisibleRowIndex={onGetFirstVisibleRowIndex}
+        onGetFirstVisibleColumn={onGetFirstVisibleColumn}
+        onChangeFirstVisibleColumn={setTreeFirstVisibleColumn}
         footer={footerComp}
         hasStatusColumn={treeOoui?.status !== null}
         statusComponent={statusComp}
@@ -287,6 +293,8 @@ function SearchTreePaginatedComp(props: SearchTreePaginatedProps, ref: any) {
         headerCheckboxState={headerCheckboxState}
         onHeaderCheckboxClick={onHeaderCheckboxClick}
         onForceReload={refresh}
+        initialSortState={actionViewSortState}
+        onSortChange={setActionViewSortState}
       />
     );
   }, [
@@ -303,13 +311,17 @@ function SearchTreePaginatedComp(props: SearchTreePaginatedProps, ref: any) {
     getColumnState,
     setTreeFirstVisibleRow,
     onGetFirstVisibleRowIndex,
+    setTreeFirstVisibleColumn,
+    onGetFirstVisibleColumn,
     footerComp,
     statusComp,
     onRowStatus,
     onRowStyle,
     headerCheckboxState,
     onHeaderCheckboxClick,
     refresh,
+    actionViewSortState,
+    setActionViewSortState,
   ]);
 
   // Render