Merge branch 'feature/paginated-table' into alpha

src/actionbar/ShareUrlButton.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 import { Button, Input, message, Space, Popover, theme } from "antd";
 import { CopyOutlined, CheckOutlined } from "@ant-design/icons";
 import { useLocale } from "@gisce/react-formiga-components";
@@ -15,6 +15,7 @@ export type ShareUrlButtonProps = {
 };
 
 export function ShareUrlButton({ res_id, searchParams }: ShareUrlButtonProps) {
+  const buttonRef = useRef(null);
   const { currentView } = useActionViewContext();
   const initialView = {
     id: currentView.view_id,
@@ -118,12 +119,14 @@ export function ShareUrlButton({ res_id, searchParams }: ShareUrlButtonProps) {
   return (
     <div style={{ maxHeight: 28 }}>
       <Popover content={popoverContent} trigger="click" placement="bottom">
-        <ActionButton
-          style={{ height: 28 }}
-          icon={<IconShare2 size={16} color={token.colorTextSecondary} />}
-          disabled={moreDataNeededForCopying}
-          tooltip={t("share")}
-        />
+        <div ref={buttonRef}>
+          <ActionButton
+            style={{ height: 28 }}
+            icon={<IconShare2 size={16} color={token.colorTextSecondary} />}
+            disabled={moreDataNeededForCopying}
+            tooltip={t("share")}
+          />
+        </div>
       </Popover>
     </div>
   );

src/actionbar/TreeActionBar.tsx

@@ -79,7 +79,7 @@ function TreeActionBarComponent({
     limit,
     totalItems,
     isActive,
-    isInfiniteTree,
+    treeType,
   } = useContext(ActionViewContext) as ActionViewContextType;
 
   const advancedExportEnabled = useFeatureIsEnabled(
@@ -183,12 +183,12 @@ function TreeActionBarComponent({
         setSearchTreeNameSearch?.(searchString);
       } else {
         setSearchTreeNameSearch?.(undefined);
-        if (!isInfiniteTree) {
+        if (treeType !== "infinite") {
           searchTreeRef?.current?.refreshResults();
         }
       }
     },
-    [isInfiniteTree, searchTreeRef, setSearchTreeNameSearch],
+    [treeType, searchTreeRef, setSearchTreeNameSearch],
   );
 
   const handleExportAction = useCallback(
@@ -220,14 +220,14 @@ function TreeActionBarComponent({
   );
 
   useEffect(() => {
-    if (isInfiniteTree && searchTreeNameSearch === undefined) {
+    if (treeType === "infinite" && searchTreeNameSearch === undefined) {
       if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
       }
       searchTreeRef?.current?.refreshResults();
     }
-  }, [isInfiniteTree, searchTreeNameSearch, searchTreeRef]);
+  }, [treeType, searchTreeNameSearch, searchTreeRef]);
 
   useHotkeys(
     "ctrl+l,command+l",

src/actionbar/useNextPrevious.ts

@@ -6,7 +6,7 @@ import { useShowErrorDialog } from "@/ui/GenericErrorDialog";
 
 export const useNextPrevious = () => {
   const {
-    isInfiniteTree,
+    treeType,
     totalItems,
     currentItemIndex,
     setCurrentId,
@@ -109,20 +109,20 @@ export const useNextPrevious = () => {
   );
 
   const onNextClick = useCallback(() => {
-    if (isInfiniteTree) {
+    if (treeType === "infinite") {
       handleInfiniteNavigation("next");
     } else {
       handleFiniteNavigation("next");
     }
-  }, [isInfiniteTree, handleInfiniteNavigation, handleFiniteNavigation]);
+  }, [treeType, handleInfiniteNavigation, handleFiniteNavigation]);
 
   const onPreviousClick = useCallback(() => {
-    if (isInfiniteTree) {
+    if (treeType === "infinite") {
       handleInfiniteNavigation("previous");
     } else {
       handleFiniteNavigation("previous");
     }
-  }, [isInfiniteTree, handleInfiniteNavigation, handleFiniteNavigation]);
+  }, [treeType, handleInfiniteNavigation, handleFiniteNavigation]);
 
   return {
     onNextClick,

src/context/ActionViewContext.tsx

@@ -1,6 +1,10 @@
 import { convertParamsToValues } from "@/helpers/searchHelper";
 import { DEFAULT_SEARCH_LIMIT } from "@/models/constants";
 import { TreeView, View } from "@/types";
+import {
+  DEFAULT_TREE_TYPE,
+  TreeType,
+} from "@/views/actionViews/TreeActionView";
 import { ColumnState } from "@gisce/react-formiga-table";
 import { createContext, useContext, useEffect, useState } from "react";
 
@@ -24,14 +28,16 @@ type ActionViewProviderProps = {
   totalItems: number;
   setTotalItems: (totalItems: number) => void;
   selectedRowItems?: any[];
-  setSelectedRowItems: (value: any[]) => void;
+  setSelectedRowItems: (value: any[] | ((prevValue: any[]) => any[])) => void;
   setSearchTreeNameSearch: (searchString?: string) => void;
   searchTreeNameSearch?: string;
   goToResourceId: (ids: number[], openInSameTab?: boolean) => Promise<void>;
   limit?: number;
   isActive: boolean;
   children: React.ReactNode;
   initialSearchParams?: any[];
+  initialCurrentPage?: number;
+  initialOrder?: any[];
 };
 
 export type ActionViewContextType = Omit<
@@ -66,13 +72,17 @@ 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;
-  isInfiniteTree?: boolean;
-  setIsInfiniteTree?: (value: boolean) => void;
-  sortState?: ColumnState[];
-  setSortState?: (value: ColumnState[] | undefined) => void;
+  treeType?: TreeType;
+  setTreeType?: (value: TreeType) => void;
+  order?: ColumnState[];
+  setOrder?: (value: ColumnState[] | undefined) => void;
+  currentPage?: number;
+  setCurrentPage?: (value: number) => void;
 };
 
 export const ActionViewContext = createContext<ActionViewContextType | null>(
@@ -116,6 +126,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
     limit: limitProps,
     isActive,
     initialSearchParams,
+    initialCurrentPage,
+    initialOrder,
   } = props;
 
   const [formIsSaving, setFormIsSaving] = useState<boolean>(false);
@@ -138,20 +150,30 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
     ),
   );
   const [treeFirstVisibleRow, setTreeFirstVisibleRow] = useState<number>(0);
+  const [treeFirstVisibleColumn, setTreeFirstVisibleColumn] = useState<
+    string | undefined
+  >(undefined);
   const [searchQuery, setSearchQuery] = useState<SearchQueryParams>();
-  const [isInfiniteTree, setIsInfiniteTree] = useState<boolean>(false);
-  const [sortState, setSortState] = useState<ColumnState[]>();
+  const [treeType, setTreeType] = useState<TreeType>(DEFAULT_TREE_TYPE);
+  const [order, setOrder] = useState<ColumnState[] | undefined>(
+    initialOrder as ColumnState[] | undefined,
+  );
 
   const [limit, setLimit] = useState<number>(
     limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT,
   );
   const [title, setTitle] = useState<string>(titleProps);
 
+  const [currentPage, setCurrentPage] = useState<number>(
+    initialCurrentPage || 1,
+  );
+
   useEffect(() => {
     if (results && results.length > 0 && !currentItemIndex) {
       setCurrentItemIndex?.(0);
       setCurrentId?.(results[0].id);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [results]);
 
   useEffect(() => {
@@ -244,12 +266,16 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         isActive,
         setTreeFirstVisibleRow,
         treeFirstVisibleRow,
+        treeFirstVisibleColumn,
+        setTreeFirstVisibleColumn,
         searchQuery,
         setSearchQuery,
-        isInfiniteTree,
-        setIsInfiniteTree,
-        sortState,
-        setSortState,
+        treeType,
+        setTreeType,
+        order,
+        setOrder,
+        currentPage,
+        setCurrentPage,
       }}
     >
       {children}
@@ -322,12 +348,16 @@ export const useActionViewContext = () => {
       setTitle: () => {},
       treeFirstVisibleRow: 0,
       setTreeFirstVisibleRow: () => {},
+      treeFirstVisibleColumn: undefined,
+      setTreeFirstVisibleColumn: () => {},
       searchQuery: undefined,
       setSearchQuery: () => {},
-      isInfiniteTree: false,
-      setIsInfiniteTree: () => {},
-      sortState: undefined,
-      setSortState: () => {},
+      treeType: DEFAULT_TREE_TYPE,
+      setTreeType: () => {},
+      order: undefined,
+      setOrder: () => {},
+      currentPage: 1,
+      setCurrentPage: () => {},
     };
   }
 

src/helpers/treeHelper.tsx

@@ -31,6 +31,7 @@ const getTableColumns = (
   tree: TreeOoui,
   components: any,
   context: any,
+  treeType: "infinite" | "paginated" | "legacy",
 ): Column[] => {
   const tableColumns = tree.columns.map((column) => {
     const type = column.type;
@@ -59,6 +60,15 @@ const getTableColumns = (
       };
     }
 
+    let isSortable = true;
+
+    if (treeType === "legacy") {
+      isSortable = type !== "one2many";
+    } else {
+      isSortable =
+        type !== "one2many" && type !== "many2one" && !column.isFunction;
+    }
+
     return {
       key,
       dataIndex: key,
@@ -77,8 +87,7 @@ const getTableColumns = (
         if (aItem > bItem) return 1;
         return 0;
       },
-      isSortable:
-        type !== "one2many" && type !== "many2one" && !column.isFunction,
+      isSortable,
     };
   });
   return tableColumns;

src/hooks/useSearchTreeState.ts

@@ -5,16 +5,24 @@ import {
   useIsUnderActionViewContext,
 } from "@/context/ActionViewContext";
 import { ColumnState } from "@gisce/react-formiga-table";
+import { DEFAULT_PAGE_SIZE } from "@/widgets/views/Tree/Paginated/hooks/usePaginatedSearch";
+import { DEFAULT_SEARCH_LIMIT } from "@/models/constants";
+import {
+  DEFAULT_TREE_TYPE,
+  TreeType,
+} from "@/views/actionViews/TreeActionView";
 
 export type SearchTreeState = {
   treeIsLoading: boolean;
   setTreeIsLoading: (value: boolean) => void;
   searchVisible: boolean;
   setSearchVisible: (value: boolean) => void;
   selectedRowItems: any[];
-  setSelectedRowItems: (value: any[]) => void;
+  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;
@@ -28,8 +36,14 @@ export type SearchTreeState = {
   totalItems: number;
   setTotalItems: (value: number) => void;
   isActive?: boolean;
-  sortState?: ColumnState[];
-  setSortState: (value: ColumnState[] | undefined) => void;
+  order?: ColumnState[];
+  setOrder: (value: ColumnState[] | undefined) => void;
+  currentPage: number;
+  setCurrentPage: (value: number) => void;
+  treeType: TreeType;
+  setTreeType: (value: TreeType) => void;
+  limit: number;
+  setLimit: (value: number) => void;
 };
 
 export function useSearchTreeState({
@@ -46,16 +60,20 @@ 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] =
     useState<string>();
   const [localResults, setLocalResults] = useState<any[]>([]);
   const [localSearchQuery, setLocalSearchQuery] = useState<SearchQueryParams>();
   const [localTotalItems, setLocalTotalItems] = useState(0);
-  const [localSortState, setLocalSortState] = useState<
-    ColumnState[] | undefined
-  >();
+  const [localOrder, setLocalOrder] = useState<ColumnState[] | undefined>();
+  const [localCurrentPage, setLocalCurrentPage] = useState<number>(1);
+  const [localTreeType, setLocalTreeType] =
+    useState<TreeType>(DEFAULT_TREE_TYPE);
+  const [localLimit, setLocalLimit] = useState<number>(DEFAULT_SEARCH_LIMIT);
 
   // Return either context values or local state values based on isUnderActionViewContext
   return isUnderActionViewContext
@@ -70,6 +88,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 || {},
@@ -84,8 +105,14 @@ export function useSearchTreeState({
         totalItems: actionViewContext.totalItems ?? 0,
         setTotalItems: actionViewContext.setTotalItems ?? (() => {}),
         isActive: actionViewContext.isActive,
-        sortState: actionViewContext.sortState,
-        setSortState: actionViewContext.setSortState ?? (() => {}),
+        order: actionViewContext.order,
+        setOrder: actionViewContext.setOrder ?? (() => {}),
+        currentPage: actionViewContext.currentPage ?? 1,
+        setCurrentPage: actionViewContext.setCurrentPage ?? (() => {}),
+        treeType: actionViewContext.treeType ?? DEFAULT_TREE_TYPE,
+        setTreeType: actionViewContext.setTreeType ?? (() => {}),
+        limit: actionViewContext.limit ?? DEFAULT_SEARCH_LIMIT,
+        setLimit: actionViewContext.setLimit ?? (() => {}),
       }
     : {
         treeIsLoading: localTreeIsLoading,
@@ -96,6 +123,8 @@ export function useSearchTreeState({
         setSelectedRowItems: setLocalSelectedRowItems,
         treeFirstVisibleRow: localTreeFirstVisibleRow,
         setTreeFirstVisibleRow: setLocalTreeFirstVisibleRow,
+        treeFirstVisibleColumn: localTreeFirstVisibleColumn,
+        setTreeFirstVisibleColumn: setLocalTreeFirstVisibleColumn,
         searchParams: localSearchParams,
         setSearchParams: setLocalSearchParams,
         searchValues: localSearchValues,
@@ -109,7 +138,13 @@ export function useSearchTreeState({
         totalItems: localTotalItems,
         setTotalItems: setLocalTotalItems,
         isActive: undefined,
-        sortState: localSortState,
-        setSortState: setLocalSortState,
+        order: localOrder,
+        setOrder: setLocalOrder,
+        currentPage: localCurrentPage,
+        setCurrentPage: setLocalCurrentPage,
+        treeType: localTreeType,
+        setTreeType: setLocalTreeType,
+        limit: localLimit,
+        setLimit: setLocalLimit,
       };
 }