@gisce/react-ooui 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA6N9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAmN9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "files": [
     "dist",
     "src",

package/src/actionbar/TreeActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Space } from "antd";
+import { Space, Spin } from "antd";
 import ChangeViewButton from "./ChangeViewButton";
 import {
   ActionViewContext,
@@ -151,6 +151,13 @@ function TreeActionBar(props: Props) {
 
   return (
     <Space wrap={true}>
+      {treeIsLoading && (
+        <>
+          <Spin />
+          {separator()}
+          {separator()}
+        </>
+      )}
       {treeExpandable ? null : (
         <>
           <SearchBar

package/src/context/ContentRootContext.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/context/TabManagerContext";
 import { FormModal } from "@/widgets/modals/FormModal";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { transformPlainMany2Ones } from "@/helpers/formHelper";
+import { transformPlainMany2Ones, stringFormat } from "@/helpers/formHelper";
 
 export type ContentRootContextType = {
   processAction: ({
@@ -182,7 +182,9 @@ const ContentRootProvider = (
         context,
       });
     } else if (type === "ir.actions.act_window") {
-      return await runAction({ actionData, fields, values, context });
+      return await runAction({actionData, fields, values, context});
+    } else if (type === "ir.actions.act_url") {
+      window.open(stringFormat(actionData.url, {...values, context}), "_blank");
     } else {
       showErrorDialog(`${type} action not supported`);
       return {};

package/src/helpers/formHelper.ts

@@ -295,3 +295,8 @@ export const colorTextFromBackground = (color: string) => {
   return getTextColor(color);
 
 }
+
+
+export const stringFormat = (text: string, values: any): string => {
+  return text.replace(/\{([^}]+)\}/g, (match, key)  => values[key] !== undefined ? values[key] : match);
+}

package/src/hooks/useSearch.ts

@@ -293,6 +293,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
   const changeSort = useCallback(
     (newSorter: any) => {
+      if (JSON.stringify(newSorter) === JSON.stringify(sorter)) return;
       setSorter?.(newSorter);
       const sortedResults =
         newSorter !== undefined

package/src/widgets/views/SearchTree.tsx

@@ -182,9 +182,9 @@ function SearchTree(props: Props, ref: any) {
       setInitialFetchDone(true);
     } catch (error) {
       setInitialError(error);
+      setTreeIsLoading?.(false);
     } finally {
       setIsLoading(false);
-      setTreeIsLoading?.(false);
     }
   };
 

package/src/widgets/views/Tree.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Pagination, Checkbox, Space, Row, Col, Spin, Tag, Badge } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
@@ -114,8 +108,8 @@ const floatTimeComponent = (value: number): React.ReactElement => {
   return <>{parseFloatToString(value)}</>;
 };
 
-const numberComponent = (value: any): React.ReactElement => {
-  return <div style={{ textAlign: "right" }}>{JSON.stringify(value)}</div>;
+const numberComponent = (value: number): React.ReactElement => {
+  return <div style={{ textAlign: "right" }}>{value}</div>;
 };
 
 const imageComponent = (value: string): React.ReactElement => {
@@ -215,22 +209,22 @@ function Tree(props: Props): React.ReactElement {
     const columns = getTableColumns(
       treeOoui.current,
       {
-        boolean: numberComponent,
-        many2one: numberComponent,
-        text: numberComponent,
-        one2many: numberComponent,
-        many2many: numberComponent,
-        progressbar: numberComponent,
-        float_time: numberComponent,
-        image: numberComponent,
+        boolean: booleanComponentFn,
+        many2one: many2OneComponentFn,
+        text: textComponentFn,
+        one2many: one2ManyComponentFn,
+        many2many: one2ManyComponentFn,
+        progressbar: progressBarComponentFn,
+        float_time: floatTimeComponent,
+        image: imageComponent,
         integer: numberComponent,
         float: numberComponent,
-        reference: numberComponent,
-        tag: numberComponent,
-        selection: numberComponent,
-        date: numberComponent,
-        datetime: numberComponent,
-        avatar: numberComponent,
+        reference: referenceComponent,
+        tag: TagComponent,
+        selection: SelectionComponent,
+        date: dateComponentFn,
+        datetime: dateTimeComponentFn,
+        avatar: AvatarFn,
       },
       context
     );
@@ -337,26 +331,6 @@ function Tree(props: Props): React.ReactElement {
     }
   }
 
-  const onRowStyle = useCallback(
-    (record: any) => {
-      if (colorsForResults![record.id]) {
-        return { color: colorsForResults![record.id] };
-      }
-      return undefined;
-    },
-    [colorsForResults]
-  );
-
-  const onRowStatus = useCallback(
-    (record: any) => {
-      if (statusForResults![record.id]) {
-        return <Badge color={statusForResults[record.id]} />;
-      }
-      return undefined;
-    },
-    [statusForResults]
-  );
-
   return treeOoui.current === null ? (
     <Spin style={{ padding: "2rem" }} />
   ) : (
@@ -368,8 +342,18 @@ function Tree(props: Props): React.ReactElement {
         dataSource={items}
         loading={loading}
         loadingComponent={<Spin />}
-        onRowStyle={onRowStyle}
-        onRowStatus={onRowStatus}
+        onRowStyle={(record: any) => {
+          if (colorsForResults![record.id]) {
+            return { color: colorsForResults![record.id] };
+          }
+          return undefined;
+        }}
+        onRowStatus={(record: any) => {
+          if (statusForResults![record.id]) {
+            return <Badge color={statusForResults[record.id]} />;
+          }
+          return undefined;
+        }}
         onRowDoubleClick={onRowClicked}
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}