@gisce/react-ooui 0.8.7 → 0.9.2

package/src/views/ActionView.tsx

@@ -45,6 +45,7 @@ type Props = {
   res_id?: number | boolean;
   action_id: number;
   action_type: string;
+  treeExpandable?: boolean;
 };
 
 export type View = {
@@ -67,6 +68,7 @@ function ActionView(props: Props, ref: any) {
     res_id = false,
     action_id,
     action_type,
+    treeExpandable = false,
   } = props;
   const [currentView, setCurrentViewInternal] = useState<View>();
   const [availableViews, setAvailableViews] = useState<View[]>([]);
@@ -183,7 +185,7 @@ function ActionView(props: Props, ref: any) {
         });
 
         if (viewType === "tree") {
-          setTreeView(viewData);
+          setTreeView({ ...viewData, isExpandable: treeExpandable });
         } else if (viewType === "form") {
           setFormView(viewData);
           setToolbar((viewData as any)?.toolbar);
@@ -404,7 +406,10 @@ function ActionView(props: Props, ref: any) {
           {currentView!.type === "form" ? (
             <FormActionBar />
           ) : (
-            <TreeActionBar parentContext={context} />
+            <TreeActionBar
+              parentContext={context}
+              treeExpandable={treeView?.isExpandable || false}
+            />
           )}
         </TitleHeader>
         {content()}

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/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
+            ? { ...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
+        ? { ...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
+        ? { ...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 => {
@@ -38,7 +44,7 @@ const booleanComponentFn = (value: boolean): React.ReactElement => {
         alignContent: "center",
       }}
     >
-      <Checkbox defaultChecked={value} disabled />
+      <Checkbox checked={value} disabled />
     </div>
   );
 };
@@ -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>