@gisce/react-ooui 1.0.19 → 1.1.0

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 (

package/src/widgets/views/searchFilter/SearchFilter.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Form, Row, Col } from "antd";
+import React, { useEffect, useState } from "react";
+import { Form, Row, Col, Alert } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
 import {
@@ -13,7 +13,8 @@ import { SearchBottomBar } from "./SearchBottomBar";
 import { SearchFields } from "@/types";
 import { SearchParams } from "./SearchParams";
 
-import { getParamsForFields } from "@/helpers/searchFilterHelper";
+import { getParamsForFields } from "@/helpers/searchHelper";
+import Measure from "react-measure";
 
 type Props = {
   fields: any;
@@ -24,6 +25,10 @@ type Props = {
   limit: number;
   offset: number;
   onLimitChange?: (limit: number) => void;
+  searchVisible?: boolean;
+  setSearchFilterHeight?: (height: number) => void;
+  searchError?: string;
+  searchValues?: any;
 };
 
 function SearchFilter(props: Props) {
@@ -36,6 +41,10 @@ function SearchFilter(props: Props) {
     offset,
     limit,
     onLimitChange,
+    searchVisible,
+    setSearchFilterHeight,
+    searchError,
+    searchValues,
   } = props;
 
   const [simpleSearchFields, setSimpleSearchFields] = useState<Container>();
@@ -44,6 +53,10 @@ function SearchFilter(props: Props) {
 
   const [form] = Form.useForm();
 
+  useEffect(() => {
+    form.setFieldsValue(searchValues);
+  }, [searchValues]);
+
   const getRowsAndCols = () => {
     if (!advancedSearchFields) {
       return;
@@ -83,30 +96,52 @@ function SearchFilter(props: Props) {
     delete values.limit;
     const newParams = getParamsForFields(values, fields);
 
-    onSubmit({ params: newParams, offset, limit });
+    onSubmit({ params: newParams, offset, limit, searchValues: values });
   };
 
   return (
-    <Form
-      className="bg-gray-50 rounded p-3 shadow-md"
-      form={form}
-      onFinish={onFinish}
-      initialValues={{ offset, limit }}
+    <Measure
+      bounds
+      onResize={(contentRect) => {
+        setSearchFilterHeight?.(contentRect.bounds?.height!);
+      }}
     >
-      {rows}
-      {advancedFilter && <SearchParams onLimitChange={onLimitChange}/>}
-      <SearchBottomBar
-        advancedFilter={advancedFilter}
-        onAdvancedFilterToggle={() => {
-          setAdvancedFilter(!advancedFilter);
-        }}
-        onClear={() => {
-          form.resetFields();
-          onClear();
-        }}
-        isSearching={isSearching}
-      />
-    </Form>
+      {({ measureRef }) => (
+        <div ref={measureRef}>
+          <div style={{ display: searchVisible ? "block" : "none" }}>
+            <Form
+              className="p-3 rounded shadow-md bg-gray-50"
+              form={form}
+              onFinish={onFinish}
+              initialValues={{ offset, limit }}
+            >
+              {rows}
+              {advancedFilter && <SearchParams onLimitChange={onLimitChange} />}
+              <SearchBottomBar
+                advancedFilter={advancedFilter}
+                onAdvancedFilterToggle={() => {
+                  setAdvancedFilter(!advancedFilter);
+                }}
+                onClear={() => {
+                  form.resetFields();
+                  onClear();
+                }}
+                isSearching={isSearching}
+              />
+            </Form>
+            {searchError && (
+              <Alert
+                className="mt-10"
+                message={searchError}
+                type="error"
+                banner
+              />
+            )}
+            <div className="pb-5" />
+          </div>
+        </div>
+      )}
+    </Measure>
   );
 }
 

package/dist/helpers/searchFilterHelper.d.ts

@@ -1,5 +0,0 @@
-declare const getParamsForFields: (values: any, fields: any) => any[];
-declare const groupDateTimeValuesIfNeeded: (values: any) => any;
-declare const removeUndefinedFields: (values: any) => any;
-export { removeUndefinedFields, groupDateTimeValuesIfNeeded, getParamsForFields, };
-//# sourceMappingURL=searchFilterHelper.d.ts.map

package/dist/helpers/searchFilterHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchFilterHelper.d.ts","sourceRoot":"","sources":["searchFilterHelper.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,kBAAkB,WAAY,GAAG,UAAU,GAAG,UAoBnD,CAAC;AA+DF,QAAA,MAAM,2BAA2B,WAAY,GAAG,QAqC/C,CAAC;AAuBF,QAAA,MAAM,qBAAqB,WAAY,GAAG,QAUzC,CAAC;AAEF,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,kBAAkB,GACnB,CAAC"}

package/dist/widgets/views/Dashboard/Dashboard.types.d.ts

@@ -1,8 +0,0 @@
-import { ShortcutApi } from '../../../ui/FavouriteButton';
-export declare type DashboardProps = {
-    model: string;
-    id: number;
-    context?: any;
-    configAction?: ShortcutApi;
-};
-//# sourceMappingURL=Dashboard.types.d.ts.map

package/dist/widgets/views/Dashboard/Dashboard.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dashboard.types.d.ts","sourceRoot":"","sources":["Dashboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B,CAAC"}

package/src/widgets/views/Dashboard/Dashboard.types.ts

@@ -1,8 +0,0 @@
-import { ShortcutApi } from "@/ui/FavouriteButton";
-
-export type DashboardProps = {
-  model: string;
-  id: number;
-  context?: any;
-  configAction?: ShortcutApi;
-};