@gisce/react-ooui 0.8.7 → 0.9.0

package/src/widgets/views/SearchTree.tsx

@@ -22,6 +22,11 @@ import { getColorMap, 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;
 
@@ -96,6 +101,7 @@ function SearchTree(props: Props, ref: any) {
   const [searchFilterHeight, setSearchFilterHeight] = useState<number>(200);
 
   const originalResults = useRef<any[]>([]);
+  const expandableClickActionData = useRef<any>();
 
   const { height } = useWindowDimensions();
 
@@ -119,6 +125,11 @@ function SearchTree(props: Props, ref: any) {
     setTreeIsLoading = undefined,
   } = (rootTree ? actionViewContext : {}) || {};
 
+  const contentRootContext = useContext(
+    ContentRootContext
+  ) as ContentRootContextType;
+  const { processAction } = contentRootContext || {};
+
   useImperativeHandle(ref, () => ({
     refreshResults: () => {
       searchNameGetDoneRef.current = false;
@@ -168,7 +179,9 @@ function SearchTree(props: Props, ref: any) {
           model: currentModel!,
           ids: resultsIds,
           arch: treeView?.arch!,
-          fields: Object.keys(treeView?.fields!),
+          fields: treeView!.field_parent
+            ? [...Object.keys(treeView!.fields), treeView!.field_parent]
+            : treeView!.fields,
           context: parentContext,
           attrs: colors && {
             colors,
@@ -254,7 +267,9 @@ function SearchTree(props: Props, ref: any) {
       limit,
       offset,
       model: currentModel!,
-      fields: treeView!.fields,
+      fields: treeView!.field_parent
+        ? [...Object.keys(treeView!.fields), treeView!.field_parent]
+        : treeView!.fields,
       context: parentContext,
       attrs: colors && { colors },
     });
@@ -308,6 +323,23 @@ function SearchTree(props: Props, ref: any) {
     }
   };
 
+  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
+        ? [...Object.keys(treeView!.fields), treeView!.field_parent]
+        : treeView!.fields,
+      context: parentContext,
+    });
+
+    setResults([...getResults(), ...children]);
+
+    return children;
+  }
+
   useEffect(() => {
     if (!initialFetchDone) {
       return;
@@ -430,8 +462,44 @@ function SearchTree(props: Props, ref: any) {
     internalLimit.current = newLimit;
   };
 
-  const onRowClickedHandler = (record: any) => {
+  const treeButOpen = async (record: any) => {
+    const { id } = record;
+
+    if (!expandableClickActionData.current) {
+      expandableClickActionData.current = await ConnectionProvider.getHandler().treeButOpen(
+        {
+          id: treeView!.view_id,
+          model: currentModel!,
+          context: parentContext,
+        }
+      );
+    }
+
+    const actionData: any = expandableClickActionData.current[0][2];
+
+    await processAction?.({
+      actionData,
+      fields: treeView!.fields,
+      values: {
+        active_id: id,
+        ...record,
+      },
+      context: parentContext,
+    });
+  };
+
+  const onRowClickedHandler = async (record: any) => {
     const { id } = record;
+
+    if (treeView?.isExpandable) {
+      try {
+        await treeButOpen(record);
+      } catch (err) {
+        showErrorDialog(err);
+      }
+      return;
+    }
+
     onRowClicked({
       id,
       model: currentModel!,
@@ -449,6 +517,9 @@ function SearchTree(props: Props, ref: any) {
   }
 
   function calculateTableHeight() {
+    if (treeView?.isExpandable) {
+      return height - 160;
+    }
     return height - (searchFilterHeight + 210);
   }
 
@@ -522,6 +593,10 @@ function SearchTree(props: Props, ref: any) {
                 : [...originalResults.current];
             setResults(sortedResults);
           }}
+          onFetchChildrenForRecord={
+            treeView.isExpandable ? onFetchChildrenForRecord : undefined
+          }
+          childField={treeView.field_parent}
         />
       </>
     );

package/src/widgets/views/Tree.tsx

@@ -10,7 +10,11 @@ import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
 import { parseFloatToString } from "@/helpers/timeHelper";
 import { ProgressBarInput } from "../base/ProgressBar";
 import { Table as GisceTable } from "@gisce/react-formiga-table";
-import useDeepCompareEffect from "use-deep-compare-effect";
+import {
+  PlusSquareOutlined,
+  MinusSquareOutlined,
+  LoadingOutlined,
+} from "@ant-design/icons";
 
 type Props = {
   total: number;
@@ -27,6 +31,8 @@ type Props = {
   colorsForResults?: { [key: number]: string };
   onChangeSort?: (results: any) => void;
   sorter?: any;
+  onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
+  childField?: string;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -100,6 +106,8 @@ function Tree(props: Props): React.ReactElement {
     colorsForResults = {},
     onChangeSort,
     sorter,
+    onFetchChildrenForRecord,
+    childField,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -148,27 +156,25 @@ function Tree(props: Props): React.ReactElement {
         .replace("{total}", total?.toString());
 
   const pagination = () => {
-    if (!showPagination) {
+    if (!showPagination || treeView.isExpandable) {
       return null;
     }
 
     return loading ? null : (
-      <>
-        <Row align="bottom" className="pb-4">
-          <Col span={12}>
-            <Pagination
-              total={total}
-              pageSize={limit}
-              current={page}
-              showSizeChanger={false}
-              onChange={onRequestPageChange}
-            />
-          </Col>
-          <Col span={12} className="text-right">
-            {summary}
-          </Col>
-        </Row>
-      </>
+      <Row align="bottom" className="pb-4">
+        <Col span={12}>
+          <Pagination
+            total={total}
+            pageSize={limit}
+            current={page}
+            showSizeChanger={false}
+            onChange={onRequestPageChange}
+          />
+        </Col>
+        <Col span={12} className="text-right">
+          {summary}
+        </Col>
+      </Row>
     );
   };
 
@@ -244,6 +250,17 @@ function Tree(props: Props): React.ReactElement {
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}
         sorter={sorter}
+        expandableOpts={
+          onFetchChildrenForRecord
+            ? {
+                expandIcon: PlusSquareOutlined,
+                collapseIcon: MinusSquareOutlined,
+                loadingIcon: LoadingOutlined,
+                onFetchChildrenForRecord,
+                childField: childField!,
+              }
+            : undefined
+        }
       />
       {getSums()}
     </div>