@gisce/react-ooui 0.8.5 → 0.9.0

package/src/views/RootView.tsx

@@ -116,7 +116,15 @@ function RootView(props: RootViewProps, ref: any) {
         })
       : [];
 
-    const { res_model: model, views, name: title, target } = dataForAction;
+    const {
+      res_model: model,
+      views,
+      name: title,
+      target,
+      view_type,
+    } = dataForAction;
+
+    const treeExpandable = view_type === "tree";
 
     const finalViews = [];
 
@@ -165,6 +173,7 @@ function RootView(props: RootViewProps, ref: any) {
       values,
       forced_values,
       res_id,
+      treeExpandable,
     });
   }
 
@@ -273,7 +282,14 @@ function RootView(props: RootViewProps, ref: any) {
         })
       : [];
 
-    const { res_model: model, views, name: title, target } = dataForAction;
+    const {
+      res_model: model,
+      views,
+      name: title,
+      target,
+      view_type,
+    } = dataForAction;
+    const treeExpandable = view_type === "tree";
 
     const finalViews = [];
 
@@ -326,6 +342,7 @@ function RootView(props: RootViewProps, ref: any) {
       action_id,
       action_type,
       res_id,
+      treeExpandable,
     });
   }
 
@@ -370,6 +387,7 @@ function RootView(props: RootViewProps, ref: any) {
     res_id,
     values,
     forced_values,
+    treeExpandable = false,
   }: {
     domain: any;
     context: any;
@@ -383,6 +401,7 @@ function RootView(props: RootViewProps, ref: any) {
     res_id?: number | boolean;
     values?: any;
     forced_values?: any;
+    treeExpandable?: boolean;
   }) {
     const key = uuidv4();
 
@@ -428,6 +447,7 @@ function RootView(props: RootViewProps, ref: any) {
             res_id={res_id}
             formDefaultValues={values}
             formForcedValues={forced_values}
+            treeExpandable={treeExpandable}
           />
         ),
         key,

package/src/widgets/base/one2many/One2manyInput.tsx

@@ -436,11 +436,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
   };
 
-  const onTreeRowClicked = (itemId: number) => {
-    if (views.get("form")?.fields === undefined) {
-      return;
-    }
-
+  const onTreeRowClicked = (record: any) => {
+    const { id: itemId } = record;
     // We show the detail for the clicked item in a Form modal
     setModalItem(items.find((item) => item.id === itemId));
     setContinuousEntryMode(false);
@@ -568,7 +565,11 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           treeView={views.get("tree")}
           results={resultsToShow}
           loading={isLoading}
-          onRowClicked={onTreeRowClicked}
+          onRowClicked={
+            views.get("form")?.fields !== undefined
+              ? onTreeRowClicked
+              : undefined
+          }
           showPagination={false}
           rowSelection={{
             selectedRowKeys,

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -208,7 +208,8 @@ function DashboardTree(props: Props) {
     }
   }, [action, model]);
 
-  const onRowClickedHandler = (id: number) => {
+  const onRowClickedHandler = (record: any) => {
+    const { id } = record;
     onRowClicked({
       id,
       model: currentModel!,

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

@@ -33,7 +33,14 @@ export async function fetchAction({
       })
     : [];
 
-  const { res_model: model, views, name: title, limit } = dataForAction;
+  const {
+    res_model: model,
+    views,
+    name: title,
+    limit,
+    view_type,
+  } = dataForAction;
+  const treeExpandable = view_type === "tree";
 
   const finalViews = [];
 
@@ -67,5 +74,6 @@ export async function fetchAction({
     domain: parsedDomain,
     initialView,
     limit,
+    treeExpandable,
   };
 }

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,7 +462,44 @@ function SearchTree(props: Props, ref: any) {
     internalLimit.current = newLimit;
   };
 
-  const onRowClickedHandler = (id: number) => {
+  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!,
@@ -448,6 +517,9 @@ function SearchTree(props: Props, ref: any) {
   }
 
   function calculateTableHeight() {
+    if (treeView?.isExpandable) {
+      return height - 160;
+    }
     return height - (searchFilterHeight + 210);
   }
 
@@ -521,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;
@@ -21,12 +25,14 @@ type Props = {
   results: Array<any>;
   showPagination?: boolean;
   onRequestPageChange?: (page: number, pageSize?: number) => void;
-  onRowClicked?: (id: number) => void;
+  onRowClicked?: (record: any) => void;
   rowSelection?: any;
   scrollY?: number;
   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>
     );
   };
 
@@ -234,23 +240,27 @@ function Tree(props: Props): React.ReactElement {
         dataSource={items}
         loading={loading}
         loadingComponent={<Spin />}
-        onRow={(record: any) => {
-          let style = undefined;
-
+        onRowStyle={(record: any) => {
           if (colorsForResults![record.id]) {
-            style = { color: colorsForResults![record.id] };
+            return { color: colorsForResults![record.id] };
           }
-
-          return {
-            style,
-            onDoubleClick: () => {
-              if (onRowClicked) onRowClicked(record.id);
-            },
-          };
+          return undefined;
         }}
+        onRowDoubleClick={onRowClicked}
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}
         sorter={sorter}
+        expandableOpts={
+          onFetchChildrenForRecord
+            ? {
+                expandIcon: PlusSquareOutlined,
+                collapseIcon: MinusSquareOutlined,
+                loadingIcon: LoadingOutlined,
+                onFetchChildrenForRecord,
+                childField: childField!,
+              }
+            : undefined
+        }
       />
       {getSums()}
     </div>