@gisce/react-ooui 2.0.0-alpha.6 → 2.0.0-alpha.61

package/src/widgets/custom/Switch.tsx

@@ -9,10 +9,7 @@ export const Switch = (props: WidgetProps) => {
   const { id, readOnly, required } = ooui;
 
   return (
-    <Field
-      {...props}
-      valuePropName="checked"
-    >
+    <Field {...props} valuePropName="checked">
       <SwitchInput id={id} readOnly={readOnly} required={required} />
     </Field>
   );
@@ -21,7 +18,6 @@ export const Switch = (props: WidgetProps) => {
 const SwitchInput = (props: any) => {
   const { required, readOnly, ...restProps } = props;
 
-
   return (
     <div className="flex flex-row">
       <AntdSwitch disabled={readOnly} {...restProps} />

package/src/widgets/custom/Tags.tsx

@@ -78,7 +78,7 @@ export const TagsInput = (props: TagsInputProps) => {
       const optionsRead = await ConnectionProvider.getHandler().search({
         model: relation,
         params,
-        fields: [field],
+        fieldsToRetrieve: [field],
         context: { ...getContext?.(), ...context },
       });
       const options = optionsRead.map((item: any) => {

package/src/widgets/modals/FormModal.tsx

@@ -26,20 +26,22 @@ export const FormModal = (props: FormModalProps) => {
     ...rest
   } = props;
 
+  const { model } = rest;
+
   const { modalWidth } = useWindowDimensions();
   const [formTitle, setFormTitle] = useState<string>(title!);
   const [isFavourite, setIsFavourite] = useState(false);
   const [currentShortcutId, setCurrentShortcutId] = useState<number>();
+  const { action_id, res_id, action_type, view_id } = actionData || {};
 
   useEffect(() => {
     if (isMenuAction) {
       checkFavourite();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionData, isMenuAction]);
 
   async function checkFavourite() {
-    const { action_id, res_id, action_type, view_id } = actionData;
-
     const result = await ConnectionProvider.getHandler().isShortcutFavorite({
       action_id,
       action_type,
@@ -109,6 +111,7 @@ export const FormModal = (props: FormModalProps) => {
         maskClosable={false}
       >
         <Form
+          key={`${model}-${id}-${action_id}-${res_id}-${action_type}-${view_id}-${title}`}
           id={id}
           showFooter={true}
           insideButtonModal={buttonModal}

package/src/widgets/modals/SearchModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import { useState, useContext } from "react";
 import { Modal, Button, Divider, Row, Space } from "antd";
 import { FormModal } from "./FormModal";
 import SearchTree from "@/widgets/views/SearchTree";
@@ -65,9 +65,7 @@ export const SearchModal = (props: SearchSelectionProps) => {
           treeScrollY={modalHeight * 0.3}
           domain={domain}
           parentContext={context}
-          onChangeSelectedRowKeys={(selectedRowKeys: any) => {
-            setSelectedRowKeys(selectedRowKeys);
-          }}
+          onChangeSelectedRowKeys={setSelectedRowKeys}
         />
         <Divider />
         <Row justify="end">
@@ -98,33 +96,35 @@ export const SearchModal = (props: SearchSelectionProps) => {
     );
   };
 
-  return (<>
-    <Modal
-      title={t("search")}
-      centered
-      width={modalWidth}
-      open={visible && !showCreateModal}
-      closable={true}
-      onCancel={onCloseModal}
-      footer={null}
-      destroyOnClose
-      maskClosable={false}
-    >
-      {content()}
-    </Modal>
-    <FormModal
-      model={model}
-      visible={showCreateModal}
-      parentContext={context}
-      onSubmitSucceed={(id?: number) => {
-        setShowCreateModal(false);
-        onCloseModal();
-        onSelectValues([id!]);
-      }}
-      onCancel={() => {
-        setShowCreateModal(false);
-        onCloseModal();
-      }}
-    />
-  </>);
+  return (
+    <>
+      <Modal
+        title={t("search")}
+        centered
+        width={modalWidth}
+        open={visible && !showCreateModal}
+        closable={true}
+        onCancel={onCloseModal}
+        footer={null}
+        destroyOnClose
+        maskClosable={false}
+      >
+        {content()}
+      </Modal>
+      <FormModal
+        model={model}
+        visible={showCreateModal}
+        parentContext={context}
+        onSubmitSucceed={(id?: number) => {
+          setShowCreateModal(false);
+          onCloseModal();
+          onSelectValues([id!]);
+        }}
+        onCancel={() => {
+          setShowCreateModal(false);
+          onCloseModal();
+        }}
+      />
+    </>
+  );
 };

package/src/widgets/modals/TranslationModal.tsx

@@ -65,7 +65,7 @@ export const TranslationModal = (props: TranslationModalProps) => {
   async function getLangs() {
     const results: any[] = (await ConnectionProvider.getHandler().search({
       params: [["translatable", "=", "1"]],
-      fields: ["code", "name"],
+      fieldsToRetrieve: ["code", "name"],
       model: "res.lang",
     })) as any;
 
@@ -185,7 +185,7 @@ export const TranslationModal = (props: TranslationModalProps) => {
   }
 
   return (
-    (<Modal
+    <Modal
       title={t("translate")}
       centered
       width={modalWidth}
@@ -197,6 +197,6 @@ export const TranslationModal = (props: TranslationModalProps) => {
       maskClosable={false}
     >
       {content()}
-    </Modal>)
+    </Modal>
   );
 };

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

@@ -156,7 +156,7 @@ function Dashboard(props: DashboardProps, ref: any) {
 
     const differences = itemPositions.filter((itemPosition) => {
       const dashboardItem = dashboardItems.find(
-        (dashboardItem) => dashboardItem.id === itemPosition.id
+        (dashboardItem) => dashboardItem.id === itemPosition.id,
       );
       if (!dashboardItem) {
         return false;
@@ -265,7 +265,7 @@ function Dashboard(props: DashboardProps, ref: any) {
             <Graph
               view_id={
                 views.filter(
-                  (view: [number, string]) => view[1] === "graph"
+                  (view: [number, string]) => view[1] === "graph",
                 )[0][0]
               }
               model={model}
@@ -283,7 +283,7 @@ function Dashboard(props: DashboardProps, ref: any) {
               domain={domain}
               view_id={
                 views.filter(
-                  (view: [number, string]) => view[1] === "tree"
+                  (view: [number, string]) => view[1] === "tree",
                 )[0][0]
               }
               onRowClicked={(record) => {

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { Alert, Spin } from "antd";
 
-import Tree from "@/widgets/views/Tree";
+import { Tree } from "@/widgets/views/Tree";
 import { FormView, TreeView } from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
 
@@ -116,6 +116,7 @@ function DashboardTree(props: Props) {
     if (visible) {
       fetchResults();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page, offset, initialFetchDone, visible]);
 
   const fetchData = async (type: "action" | "model") => {
@@ -176,6 +177,7 @@ function DashboardTree(props: Props) {
     } else if (model) {
       fetchData("model");
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [action, model]);
 
   const onRowClickedHandler = (record: any) => {

package/src/widgets/views/DashboardGrid/DashboardGrid.tsx

@@ -16,7 +16,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
         | boolean
         | React.ReactChild
         | React.ReactFragment
-        | React.ReactPortal
+        | React.ReactPortal,
     ) => {
       const { parms, id } = (child as any).props;
       return (
@@ -24,7 +24,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
           {child}
         </div>
       );
-    }
+    },
   );
 
   return (
@@ -43,7 +43,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
               w: item.w,
               h: item.h,
             };
-          })
+          }),
         );
       }}
     >

package/src/widgets/views/DashboardGrid/DashboardGridItem.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { DashboardGridItemProps } from "./DashboardGridItem.types";
 import { ExportOutlined } from "@ant-design/icons";
 import { Row, Col, Typography, theme } from "antd";
+import ErrorBoundary from "antd/es/alert/ErrorBoundary";
 const { useToken } = theme;
 
 const { Text } = Typography;
@@ -56,7 +56,7 @@ export const DashboardGridItem = (props: DashboardGridItemProps) => {
           </Col>
         )}
       </Row>
-      {children}
+      <ErrorBoundary>{children}</ErrorBoundary>
     </div>
   );
 };

package/src/widgets/views/Form.tsx

@@ -555,7 +555,7 @@ function Form(props: FormProps, ref: any) {
           ["res_model", "=", model],
           ["res_id", "=", getCurrentId()!],
         ],
-        fields: ["id", "name"],
+        fieldsToRetrieve: ["id", "name"],
         context: getContext(),
         model: "ir.attachment",
       });
@@ -1014,7 +1014,7 @@ function Form(props: FormProps, ref: any) {
     let mustBlockButtons = false;
 
     try {
-      if (formHasChanges() || getCurrentId() === undefined) {
+      if (!readOnly && (formHasChanges() || getCurrentId() === undefined)) {
         mustBlockButtons = true;
         updateOperationInProgress(true);
         if (submitMode === "2many") {

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

@@ -36,7 +36,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
   const [graphOoui, setGraphOoui] = useState<GraphOoui>();
   const [graphXml, setGraphXml] = useState<string>();
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const { setGraphIsLoading = undefined } = actionViewContext || {};
 

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Line, Column, Pie } from "@ant-design/plots";
 import GraphDefaults from "./GraphDefaults";
 import { useGraphData } from "./useGraphData";
@@ -61,7 +61,7 @@ export const GraphChart = (props: GraphChartProps) => {
           "es-ES",
           {
             useGrouping: true,
-          }
+          },
         )}`}
       </p>
       <Chart

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs from "@/helpers/dayjs";
 
 const formatter = (graphType: "pie" | "default" | "barGrouped") => {
   return (object: any) => {
@@ -25,7 +25,7 @@ const axisFormatter = (value: any) => {
       return value;
     }
     return dayjs(value, (dateFormats.input as any)[dateType]).format(
-      (dateFormats.output as any)[dateType]
+      (dateFormats.output as any)[dateType],
     );
   } else {
     return value;
@@ -157,7 +157,7 @@ function getDateType(dateString: string): string | null {
     const isValidFormat = dayjs(
       dateString,
       (dateFormats.input as any)[format],
-      true
+      true,
     ).isValid();
     if (isValidFormat) {
       return format;

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

@@ -164,7 +164,7 @@ async function retrieveData({
   const values: any[] = (await ConnectionProvider.getHandler().search({
     model,
     params: domain,
-    fields,
+    fieldsToRetrieve: fields,
     context,
     limit,
     order,

package/src/widgets/views/SearchTree.tsx

@@ -5,11 +5,13 @@ import React, {
   useContext,
   forwardRef,
   useImperativeHandle,
+  useMemo,
+  useCallback,
 } from "react";
 import { Alert, Spin } from "antd";
 
 import SearchFilter from "@/widgets/views/searchFilter/SearchFilter";
-import Tree from "@/widgets/views/Tree";
+import { Tree } from "@/widgets/views/Tree";
 import { FormView, TreeView } from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
 
@@ -80,12 +82,12 @@ function SearchTree(props: Props, ref: any) {
   const { height } = useWindowDimensions();
 
   const contentRootContext = useContext(
-    ContentRootContext
+    ContentRootContext,
   ) as ContentRootContextType;
   const { processAction } = contentRootContext || {};
 
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const {
     setResults: setResultsActionView = undefined,
@@ -109,6 +111,14 @@ function SearchTree(props: Props, ref: any) {
     setLimit = undefined,
   } = (rootTree ? actionViewContext : {}) || {};
 
+  const changeSelectedRowKeys = useCallback(
+    (newSelectedRowKeys: any[]) => {
+      setSelectedRowItems?.(newSelectedRowKeys.map((id: number) => ({ id })));
+      onChangeSelectedRowKeys?.(newSelectedRowKeys);
+    },
+    [onChangeSelectedRowKeys, setSelectedRowItems],
+  );
+
   const {
     submit,
     clear,
@@ -170,6 +180,7 @@ function SearchTree(props: Props, ref: any) {
       searchNameGetDoneRef.current = false;
       fetchResults();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page, offset, initialFetchDone, visible, nameSearch, treeView]);
 
   const fetchData = async () => {
@@ -218,6 +229,7 @@ function SearchTree(props: Props, ref: any) {
 
   useEffect(() => {
     fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model]);
 
   const onSearchTreeLimitChange = (newLimit: number) => {
@@ -269,11 +281,6 @@ function SearchTree(props: Props, ref: any) {
     });
   };
 
-  function changeSelectedRowKeys(selectedRowKeys: any[]) {
-    setSelectedRowItems?.(selectedRowKeys.map((id: number) => ({ id })));
-    onChangeSelectedRowKeys?.(selectedRowKeys);
-  }
-
   async function selectAllRecords() {
     const allIds = await getAllIds();
     setSelectedRowItems?.(allIds.map((id: number) => ({ id })));
@@ -284,9 +291,14 @@ function SearchTree(props: Props, ref: any) {
     if (treeView?.isExpandable) {
       return height - 160;
     }
-    return height - (searchFilterHeight + 210);
+    return height - (searchFilterHeight + 240);
   }
 
+  const selectedRowKeys = useMemo(
+    () => selectedRowItems?.map((item) => item.id),
+    [selectedRowItems],
+  );
+
   const content = () => {
     if (!treeView || !formView) {
       return null;
@@ -324,10 +336,8 @@ function SearchTree(props: Props, ref: any) {
           scrollY={treeScrollY || calculateTableHeight()}
           colorsForResults={colorsForResults}
           statusForResults={statusForResults}
-          rowSelection={{
-            selectedRowKeys: selectedRowItems?.map((item) => item.id),
-            onChange: changeSelectedRowKeys,
-          }}
+          selectedRowKeys={selectedRowKeys}
+          onRowSelectionChange={changeSelectedRowKeys}
           sorter={sorter}
           onChangeSort={changeSort}
           onFetchChildrenForRecord={