@gisce/react-ooui 1.1.66 → 1.1.68

package/dist/widgets/base/one2many/One2manyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8nB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4nB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/widgets/custom/Avatar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { WidgetProps } from '../../types';
+import { Avatar as AvatarOoui } from "@gisce/ooui";
+declare type AvatarProps = WidgetProps & {
+    ooui: AvatarOoui;
+    value?: any;
+};
+declare const Avatar: (props: AvatarProps) => React.ReactElement | null;
+export default Avatar;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/widgets/custom/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAC,MAAM,aAAa,CAAC;AAGlD,aAAK,WAAW,GAAG,WAAW,GAAG;IAC/B,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,MAAM,YAAY,GAAG,IAmBzD,CAAA;AAED,eAAe,MAAM,CAAC"}

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

@@ -1 +1 @@
-{"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;AAsB3C,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,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;CACf,CAAC;AA8GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA2M9C;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;AAuB3C,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,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;CACf,CAAC;AAkHF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA4M9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.1.66",
+  "version": "1.1.68",
   "files": [
     "dist",
     "src",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
-    "@gisce/ooui": "^0.19.6",
+    "@gisce/ooui": "^0.20.0",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",

package/src/stories/custom/Avatar.stories.tsx

@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+
+import { Avatar as AvatarOoui } from "@gisce/ooui";
+import Avatar from "@/widgets/custom/Avatar";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Custom/Avatar",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new AvatarOoui({
+    name: "user",
+    string: "Lorem ipsum",
+  });
+  const value = "John Wick";
+  return (
+    <LocaleProvider lang="en_US">
+      <Avatar ooui={ooui} value={value} />
+    </LocaleProvider>
+  );
+};
+
+
+
+

package/src/stories/views/Tree.stories.jsx

@@ -25,6 +25,7 @@ Default.args = {
   results: [
     {
       city: false,
+      user_id: [1, "John Wick"],
       country: false,
       id: 62,
       lang: false,
@@ -36,6 +37,7 @@ Default.args = {
     },
     {
       city: "Wavre",
+      user_id: [2, "JIGNACIO FERREIRO ANDRES"],
       country: [20, "Belgium"],
       id: 3,
       lang: false,
@@ -47,6 +49,7 @@ Default.args = {
     },
     {
       city: false,
+      user_id: [3, "JOSEFA REINA GUTIERREZ"],
       country: false,
       id: 106,
       lang: "ca_ES",
@@ -58,6 +61,7 @@ Default.args = {
     },
     {
       city: "Sevilla",
+      user_id: [4, "GUADALUPE CALERO CATALAN"],
       country: [67, "España"],
       id: 32,
       lang: false,
@@ -70,6 +74,7 @@ Default.args = {
     {
       city: false,
       country: [67, "España"],
+      user_id: [5, "ANDER BAUTISTA ROLDAN"],
       id: 82,
       lang: "es_ES",
       name: "Apellido2 Apellido2, Nombre",
@@ -80,6 +85,7 @@ Default.args = {
     },
     {
       city: "Zaragoza",
+      user_id: [7, "FELICIDAD PAEZ BARRERA"],
       country: [67, "España"],
       id: 33,
       lang: false,
@@ -92,12 +98,17 @@ Default.args = {
   ],
   treeView: {
     arch:
-      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
+      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="user_id" widget="avatar"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
     fields: {
       progressbar: {
         string: "Progress bar",
         type: "progressbar",
       },
+      user_id: {
+        string: "User",
+        type: "many2one",
+        relation: "res.users",
+      },
       numeric: {
         digits: [16, 3],
         string: "Potència contractada (kW)",

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

@@ -195,8 +195,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
 
   async function parseDomain() {
     if (widgetDomain) {
-      transformedDomain.current = transformDomainForChildWidget({
-        domain: await ConnectionProvider.getHandler().evalDomain({
+      transformedDomain.current =
+        await ConnectionProvider.getHandler().evalDomain({
           domain: widgetDomain,
           values: transformPlainMany2Ones({
             fields: getFields(),
@@ -204,9 +204,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           }),
           fields: getFields(),
           context: getContext(),
-        }),
-        widgetFieldName: fieldName,
-      });
+        });
     }
 
     if (domain && domain.length > 0) {

package/src/widgets/custom/Avatar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {WidgetProps} from "@/types";
+import { Avatar as AntdAvatar, Tooltip } from "antd";
+import { Avatar as AvatarOoui} from "@gisce/ooui";
+import { colorFromString } from "@/helpers/formHelper";
+
+type AvatarProps = WidgetProps & {
+  ooui: AvatarOoui
+  value?: any;
+};
+
+const Avatar = (props: AvatarProps): React.ReactElement | null => {
+  console.log("Avatar Props", props);
+  const {ooui, value} = props;
+  if (!value) {
+    return null;
+  }
+  let formattedValue = value;
+  if (ooui.selectionValues.size) {
+    formattedValue = ooui.selectionValues.get(value);
+  } else if (Array.isArray(value)) {
+    formattedValue = value[1];
+  }
+  const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
+  const backgroundColor = colorFromString(formattedValue);
+  return (
+    <Tooltip title={formattedValue}>
+      <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
+    </Tooltip>
+  );
+}
+
+export default Avatar;

package/src/widgets/views/Tree.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/context/ActionViewContext";
 import { Many2oneTree } from "../base/many2one/Many2oneTree";
 import { ReferenceTree } from "../base/ReferenceTree";
+import Avatar from "../custom/Avatar";
 import moment from "moment";
 import { DatePickerConfig } from "@/common/DatePicker";
 
@@ -154,6 +155,10 @@ const referenceComponent = (
   );
 };
 
+const AvatarFn = (value: any, key:string, ooui: any, context: any): React.ReactElement => (
+  <Avatar ooui={ooui} value={value} />
+)
+
 function Tree(props: Props): React.ReactElement {
   const {
     page = 1,
@@ -213,6 +218,7 @@ function Tree(props: Props): React.ReactElement {
         selection: SelectionComponent,
         date: dateComponentFn,
         datetime: dateTimeComponentFn,
+        avatar: AvatarFn,
       },
       context
     );