@gisce/react-ooui 1.0.18 → 1.1.0

package/src/widgets/views/Graph/Graph.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import {
   Graph as GraphOoui,
   parseGraph,
@@ -9,20 +15,35 @@ import { LoadingOutlined } from "@ant-design/icons";
 import ConnectionProvider from "@/ConnectionProvider";
 import { GraphIndicator } from "./GraphIndicator";
 import { GraphChart } from "./GraphChart";
+import { GraphView } from "@/types";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
 
 export type GraphProps = {
   view_id: number;
   model: string;
   domain: any;
   context: any;
-  limit: number;
+  limit?: number;
 };
 
-export const Graph = (props: GraphProps) => {
+const GraphComp = (props: GraphProps, ref: any) => {
   const { view_id, model, context, domain, limit } = props;
   const [loading, setLoading] = useState(false);
   const [graphOoui, setGraphOoui] = useState<GraphOoui>();
   const [graphXml, setGraphXml] = useState<string>();
+  const actionViewContext = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { setGraphIsLoading = undefined } = actionViewContext || {};
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
+      fetchData();
+    },
+  }));
 
   useEffect(() => {
     fetchData();
@@ -30,14 +51,15 @@ export const Graph = (props: GraphProps) => {
 
   async function fetchData() {
     setLoading(true);
+    setGraphIsLoading?.(true);
 
     try {
-      const viewData = await ConnectionProvider.getHandler().getView({
+      const viewData = (await ConnectionProvider.getHandler().getView({
         model,
         id: view_id,
         type: "graph",
         context,
-      });
+      })) as GraphView;
 
       setGraphXml(viewData.arch);
       const graph = parseGraph(viewData.arch);
@@ -48,11 +70,21 @@ export const Graph = (props: GraphProps) => {
     }
 
     setLoading(false);
+    setGraphIsLoading?.(false);
   }
 
   if (loading) {
     return (
-      <div style={{ padding: "1rem" }}>
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          height: "20%",
+          justifyContent: "center",
+          alignContent: "center",
+          padding: "1rem",
+        }}
+      >
         <LoadingOutlined style={{ height: "12px" }} />
       </div>
     );
@@ -106,3 +138,5 @@ export const Graph = (props: GraphProps) => {
     }
   }
 };
+
+export const Graph = forwardRef(GraphComp);

package/src/widgets/views/Graph/GraphChart.tsx

@@ -16,7 +16,7 @@ export type GraphChartProps = {
   domain: any;
   context: any;
   xml: string;
-  limit: number;
+  limit?: number;
 };
 
 export const GraphChart = (props: GraphChartProps) => {

package/src/widgets/views/Graph/useGraphData.tsx

@@ -16,7 +16,7 @@ export type GraphDataQueryOpts = {
   model: string;
   domain?: any;
   context?: any;
-  limit: number;
+  limit?: number;
 };
 
 export type GraphDataOpts = GraphDataQueryOpts & {
@@ -126,7 +126,7 @@ async function retrieveData({
   domain: any;
   context: any;
   order: string | null;
-  limit: number;
+  limit?: number;
 }) {
   const values: any[] = (await ConnectionProvider.getHandler().search({
     model,

package/src/widgets/views/SearchTree.tsx

@@ -5,7 +5,6 @@ import React, {
   useContext,
   forwardRef,
   useImperativeHandle,
-  useCallback,
 } from "react";
 import { Alert, Spin } from "antd";
 
@@ -18,22 +17,14 @@ import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
-import {
-  getColorMap,
-  getTableItems,
-  getTree,
-  sortResults,
-} from "@/helpers/treeHelper";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
-import Measure from "react-measure";
 import { mergeSearchFields } from "@/helpers/formHelper";
 import {
   ContentRootContext,
   ContentRootContextType,
 } from "@/context/ContentRootContext";
 import showErrorDialog from "@/ui/ActionErrorDialog";
-
-const DEFAULT_SEARCH_LIMIT = 80;
+import { DEFAULT_SEARCH_LIMIT, useSearch } from "@/hooks/useSearch";
 
 type OnRowClickedData = {
   id: number;
@@ -83,33 +74,23 @@ function SearchTree(props: Props, ref: any) {
   const [treeView, setTreeView] = useState<TreeView>();
   const [formView, setFormView] = useState<FormView>();
 
-  const [page, setPage] = useState<number>(1);
-  const [offset, setOffset] = useState<number>(0);
-  const [limit, setLimit] = useState<number>(DEFAULT_SEARCH_LIMIT);
   const [limitFromAction, setLimitFromAction] = useState<number>();
+  const [limit, setLimit] = useState<number>(DEFAULT_SEARCH_LIMIT);
 
-  const paramsRef = useRef<Array<any>>([]);
-
-  const [totalItems, setTotalItems] = useState<number>();
-  const [resultsInternal, setResultsInternal] = useState<any>([]);
-  const [colorsForResults, setColorsForResults] = useState<any>(undefined);
-
-  const [searchFilterLoading, setSearchFilterLoading] = useState<boolean>(
-    false
-  );
-  const [searchError, setSearchError] = useState<string>();
   const [initialError, setInitialError] = useState<string>();
 
-  const [tableRefreshing, setTableRefreshing] = useState<boolean>(false);
-
   const actionDomain = useRef<any>([]);
   const [searchFilterHeight, setSearchFilterHeight] = useState<number>(200);
 
-  const originalResults = useRef<any[]>([]);
   const expandableClickActionData = useRef<any>();
 
   const { height } = useWindowDimensions();
 
+  const contentRootContext = useContext(
+    ContentRootContext
+  ) as ContentRootContextType;
+  const { processAction } = contentRootContext || {};
+
   const actionViewContext = useContext(
     ActionViewContext
   ) as ActionViewContextType;
@@ -120,6 +101,7 @@ function SearchTree(props: Props, ref: any) {
     results: resultsActionView = undefined,
     selectedRowItems = undefined,
     setSelectedRowItems = undefined,
+    searchParams = [],
     setSearchParams = undefined,
     searchVisible = true,
     setSearchVisible = undefined,
@@ -128,12 +110,51 @@ function SearchTree(props: Props, ref: any) {
     setTotalItems: setActionViewTotalItems = undefined,
     setSearchTreeNameSearch = undefined,
     setTreeIsLoading = undefined,
+    searchValues = {},
+    setSearchValues = undefined,
   } = (rootTree ? actionViewContext : {}) || {};
 
-  const contentRootContext = useContext(
-    ContentRootContext
-  ) as ContentRootContextType;
-  const { processAction } = contentRootContext || {};
+  const {
+    submit,
+    clear,
+    fetchResults,
+    tableRefreshing,
+    searchFilterLoading,
+    searchError,
+    page,
+    offset,
+    getResults,
+    requestPageChange,
+    changeSort,
+    fetchChildrenForRecord,
+    colorsForResults,
+    totalItems,
+  } = useSearch({
+    model: currentModel!,
+    setSearchTreeNameSearch,
+    setSelectedRowItems,
+    setSearchParams,
+    setSearchValues,
+    searchParams,
+    setSearchVisible,
+    setTreeIsLoading,
+    nameSearch,
+    searchNameGetDoneRef,
+    context: parentContext,
+    formView: formView!,
+    treeView: treeView!,
+    sorter,
+    setSorter,
+    setCurrentItemIndex,
+    setResultsActionView,
+    resultsActionView,
+    domain,
+    currentId,
+    setActionViewTotalItems,
+    limitFromAction,
+    setLimit,
+    limit,
+  });
 
   useImperativeHandle(ref, () => ({
     refreshResults: () => {
@@ -142,212 +163,6 @@ function SearchTree(props: Props, ref: any) {
     },
   }));
 
-  const onRequestPageChange = (page: number) => {
-    setTableRefreshing(true);
-    setPage(page);
-    setOffset((page - 1) * limit!);
-  };
-
-  function setResults(results: any) {
-    setResultsActionView?.([...results]);
-    setResultsInternal([...results]);
-  }
-
-  const getResults = useCallback(() => {
-    if (!resultsActionView) {
-      return resultsInternal;
-    }
-    return resultsActionView;
-  }, [resultsActionView, resultsInternal]);
-
-  const searchByNameSearch = async () => {
-    const searchResults = await ConnectionProvider.getHandler().nameSearch({
-      model: currentModel!,
-      payload: nameSearch,
-      limit: internalLimit.current,
-      attrs: actionDomain.current.length > 0 ? actionDomain.current : domain,
-      context: parentContext,
-    });
-
-    setTotalItems(searchResults.length);
-    setActionViewTotalItems?.(searchResults.length);
-
-    if (searchResults.length > 0) {
-      const resultsIds = searchResults.map((item: any) => {
-        return item?.[0];
-      });
-
-      const { colors } = getTree(treeView!);
-
-      const resultsWithData = await ConnectionProvider.getHandler().readEvalUiObjects(
-        {
-          model: currentModel!,
-          ids: resultsIds,
-          arch: treeView?.arch!,
-          fields: treeView!.field_parent
-            ? { ...treeView!.fields, [treeView!.field_parent]: {} }
-            : treeView!.fields,
-          context: parentContext,
-          attrs: colors && {
-            colors,
-          },
-        }
-      );
-      const resultsData = resultsWithData[0];
-
-      originalResults.current = [...resultsData];
-
-      setColorsForResults(getColorMap(resultsWithData[1]));
-
-      const newResultIds = resultsData.map((item: any) => item.id);
-
-      const resultsSorted =
-        sorter !== undefined
-          ? sortResults({
-              resultsToSort: resultsData,
-              sorter,
-              fields: { ...treeView!.fields, ...formView!.fields },
-            })
-          : [...originalResults.current];
-
-      setResults(resultsSorted);
-
-      if (newResultIds.length > 0) {
-        setCurrentItemIndex?.(0);
-      } else {
-        setCurrentItemIndex?.(undefined);
-      }
-    } else {
-      setResults([]);
-      setCurrentItemIndex?.(undefined);
-    }
-
-    searchNameGetDoneRef.current = true;
-  };
-
-  const getUniqueFieldsForParams = (params: any[]) => {
-    const uniqueFields: any = {};
-
-    params.forEach((param) => {
-      if (Array.isArray(param) && param[0]) {
-        uniqueFields[param[0]] = true;
-      } else {
-        uniqueFields[param] = true;
-      }
-    });
-
-    return Object.keys(uniqueFields);
-  };
-
-  const mergeParams = (searchParams: any[], domainParams: any[]) => {
-    const finalParams = searchParams;
-    const uniqueParams = getUniqueFieldsForParams(searchParams);
-
-    domainParams.forEach((element) => {
-      if (Array.isArray(element) && element[0]) {
-        if (!uniqueParams.includes(element[0])) {
-          finalParams.push(element);
-        }
-      } else if (!uniqueParams.includes(element)) {
-        finalParams.push(element);
-      }
-    });
-
-    return finalParams;
-  };
-
-  const searchResults = async () => {
-    const domainParams =
-      actionDomain.current.length > 0 ? actionDomain.current : domain;
-
-    const searchParams = mergeParams(paramsRef.current, domainParams);
-    const { colors } = getTree(treeView!);
-
-    const {
-      totalItems,
-      results,
-      attrsEvaluated,
-    } = await ConnectionProvider.getHandler().searchForTree({
-      params: searchParams,
-      limit,
-      offset,
-      model: currentModel!,
-      fields: treeView!.field_parent
-        ? { ...treeView!.fields, [treeView!.field_parent]: {} }
-        : treeView!.fields,
-      context: parentContext,
-      attrs: colors && { colors },
-    });
-    setColorsForResults(getColorMap(attrsEvaluated));
-
-    originalResults.current = [...results];
-
-    const resultsSorted =
-      sorter !== undefined
-        ? sortResults({
-            resultsToSort: results,
-            sorter: sorter,
-            fields: { ...treeView!.fields, ...formView!.fields },
-          })
-        : [...originalResults.current];
-
-    totalItems.then((value) => {
-      setTotalItems(value);
-      setActionViewTotalItems?.(value);
-    });
-
-    setResults(resultsSorted);
-
-    if (resultsActionView && resultsSorted.length > 0) {
-      const newCurrentItemIndex = resultsSorted.findIndex(
-        (item) => currentId === item.id
-      );
-
-      if (newCurrentItemIndex === -1) {
-        setCurrentItemIndex?.(0);
-      } else {
-        setCurrentItemIndex?.(newCurrentItemIndex);
-      }
-    } else {
-      setCurrentItemIndex?.(undefined);
-    }
-  };
-
-  const fetchResults = async () => {
-    try {
-      setTableRefreshing(true);
-      setTreeIsLoading?.(true);
-      if (nameSearch && !searchNameGetDoneRef.current) {
-        await searchByNameSearch();
-      } else {
-        await searchResults();
-      }
-    } catch (error) {
-      setSearchError(error);
-    } finally {
-      setTableRefreshing(false);
-      setSearchFilterLoading(false);
-      setTreeIsLoading?.(false);
-    }
-  };
-
-  async function onFetchChildrenForRecord(record: any) {
-    const child_id = record[treeView?.field_parent || "child_id"];
-
-    const children = await ConnectionProvider.getHandler().readObjects({
-      model: currentModel!,
-      ids: child_id,
-      fields: treeView!.field_parent
-        ? { ...treeView!.fields, [treeView!.field_parent]: {} }
-        : treeView!.fields,
-      context: parentContext,
-    });
-
-    setResults([...getResults(), ...children]);
-
-    return getTableItems(getTree(treeView!), children);
-  }
-
   useEffect(() => {
     if (!initialFetchDone) {
       return;
@@ -381,12 +196,11 @@ function SearchTree(props: Props, ref: any) {
   };
 
   const fetchActionData = async () => {
-    const dataForAction = await ConnectionProvider.getHandler().getViewsForAction(
-      {
+    const dataForAction =
+      await ConnectionProvider.getHandler().getViewsForAction({
         action: action!,
         context: parentContext,
-      }
-    );
+      });
     actionDomain.current = dataForAction.domain;
     setFormView(dataForAction.views.get("form"));
     setTreeView(dataForAction.views.get("tree"));
@@ -432,40 +246,6 @@ function SearchTree(props: Props, ref: any) {
     }
   }, [action, model]);
 
-  const onClear = () => {
-    if (tableRefreshing) return;
-    setSearchTreeNameSearch?.(undefined);
-    paramsRef.current = [];
-    setSearchParams?.([]);
-    setSearchError(undefined);
-    setOffset(0);
-    setPage(1);
-    setLimit(limitFromAction || DEFAULT_SEARCH_LIMIT);
-  };
-
-  const onSubmit = ({
-    params: newParams,
-    limit: newLimit,
-    offset: newOffset,
-  }: {
-    params: any;
-    limit: number;
-    offset: number;
-  }) => {
-    if (tableRefreshing) return;
-    paramsRef.current = newParams;
-    setSearchTreeNameSearch?.(undefined);
-    setSelectedRowItems?.([]);
-    setSearchParams?.(newParams);
-    setSearchVisible?.(false);
-    setSearchFilterLoading(true);
-    setSearchError(undefined);
-    setPage(1);
-    if (newLimit) setLimit(newLimit);
-    if (newOffset) setOffset(newOffset);
-    fetchResults();
-  };
-
   const onSearchTreeLimitChange = (newLimit: number) => {
     internalLimit.current = newLimit;
   };
@@ -474,13 +254,12 @@ function SearchTree(props: Props, ref: any) {
     const { id } = record;
 
     if (!expandableClickActionData.current) {
-      expandableClickActionData.current = await ConnectionProvider.getHandler().treeButOpen(
-        {
+      expandableClickActionData.current =
+        await ConnectionProvider.getHandler().treeButOpen({
           id: treeView!.view_id,
           model: currentModel!,
           context: parentContext,
-        }
-      );
+        });
     }
 
     const actionData: any = expandableClickActionData.current[0][2];
@@ -538,48 +317,30 @@ function SearchTree(props: Props, ref: any) {
 
     return (
       <>
-        <Measure
-          bounds
-          onResize={(contentRect) => {
-            setSearchFilterHeight(contentRect.bounds?.height!);
-          }}
-        >
-          {({ measureRef }) => (
-            <div ref={measureRef}>
-              <div style={{ display: searchVisible ? "block" : "none" }}>
-                <SearchFilter
-                  fields={{ ...treeView.fields, ...formView.fields }}
-                  searchFields={mergeSearchFields([
-                    formView.search_fields,
-                    treeView.search_fields,
-                  ])}
-                  onClear={onClear}
-                  limit={limit}
-                  offset={offset}
-                  isSearching={searchFilterLoading}
-                  onSubmit={onSubmit}
-                  onLimitChange={onSearchTreeLimitChange}
-                />
-                {searchError && (
-                  <Alert
-                    className="mt-10"
-                    message={searchError}
-                    type="error"
-                    banner
-                  />
-                )}
-                <div className="pb-5" />
-              </div>
-            </div>
-          )}
-        </Measure>
+        <SearchFilter
+          fields={{ ...treeView.fields, ...formView.fields }}
+          searchFields={mergeSearchFields([
+            formView.search_fields,
+            treeView.search_fields,
+          ])}
+          onClear={clear}
+          limit={limit}
+          offset={offset}
+          isSearching={searchFilterLoading}
+          onSubmit={submit}
+          onLimitChange={onSearchTreeLimitChange}
+          setSearchFilterHeight={setSearchFilterHeight}
+          searchError={searchError}
+          searchVisible={searchVisible}
+          searchValues={searchValues}
+        />
         <Tree
           total={totalItems}
           limit={limit}
           page={page}
           treeView={treeView}
           results={getResults()}
-          onRequestPageChange={onRequestPageChange}
+          onRequestPageChange={requestPageChange}
           loading={tableRefreshing}
           onRowClicked={onRowClickedHandler}
           scrollY={treeScrollY || calculateTableHeight()}
@@ -589,20 +350,9 @@ function SearchTree(props: Props, ref: any) {
             onChange: changeSelectedRowKeys,
           }}
           sorter={sorter}
-          onChangeSort={(newSorter) => {
-            setSorter?.(newSorter);
-            const sortedResults =
-              newSorter !== undefined
-                ? sortResults({
-                    resultsToSort: getResults(),
-                    sorter: newSorter,
-                    fields: { ...treeView.fields, ...formView.fields },
-                  })
-                : [...originalResults.current];
-            setResults(sortedResults);
-          }}
+          onChangeSort={changeSort}
           onFetchChildrenForRecord={
-            treeView.isExpandable ? onFetchChildrenForRecord : undefined
+            treeView.isExpandable ? fetchChildrenForRecord : undefined
           }
           childField={treeView.field_parent}
         />
@@ -610,10 +360,10 @@ function SearchTree(props: Props, ref: any) {
     );
   };
 
-  if (initialError) {
-    return (
-      <Alert className="mt-10" message={initialError} type="error" banner />
-    );
+  const error = initialError || searchError;
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
   }
 
   return (