@gisce/react-ooui 1.2.0-rc.3 → 1.2.0-rc.31

package/src/stories/Label.stories.tsx

@@ -12,7 +12,7 @@ export default {
 export const Default = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
-    string: "Lorem ipsum",
+    string: "<b>Lorem ipsum</b>",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -25,7 +25,7 @@ export const LabelSecondary = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'secondary'}"
+    widget_props: "{'label_type': 'secondary'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -38,7 +38,7 @@ export const LabelWaning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'warning'}"
+    widget_props: "{'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -51,7 +51,7 @@ export const LabelDanger = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'danger'}"
+    widget_props: "{'label_type': 'danger'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -64,7 +64,7 @@ export const LabelSuccess = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'success'}"
+    widget_props: "{'label_type': 'success'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -73,12 +73,11 @@ export const LabelSuccess = (): React.ReactElement => {
   );
 };
 
-
 export const LabelH1 = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1'}"
+    widget_props: "{'label_size': 'h1'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -91,7 +90,7 @@ export const LabelH2Warning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1', 'label_type': 'warning'}"
+    widget_props: "{'label_size': 'h1', 'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">

package/src/stories/mocks/models/crm_case.ts

@@ -39,13 +39,14 @@ export default {
     task_id: false,
     user_id: [1, "Administrator"],
     workdones_ids: [],
+    integer: 40003.23,
   },
   form: {
-    arch:
-      '<form string="Casos">\n       <group col="8" colspan="4">\n                                <field colspan="4" name="partner_id" on_change="onchange_partner_id(partner_id, email_from)" select="1"/>\n                                <field colspan="3" name="partner_address_id" on_change="onchange_partner_address_id(partner_address_id, email_from)" select="2"/>\n                             \n                                <field colspan="3" name="email_from" select="2"/>\n                                <button name="remind_partner" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                                <field name="user_id" select="1" domain="[(\'id\',\'!=\', 0)]"/>\n                                <button name="autoassign" string="Assigna-me\'l" type="object"/>\n                                <button name="remind_user" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                            </group><field name="state" select="1"/></form>',
+    arch: '<form string="Casos">\n      <field name="integer" /> <group col="8" colspan="4">\n                                <field colspan="4" name="partner_id" on_change="onchange_partner_id(partner_id, email_from)" select="1"/>\n                                <field colspan="3" name="partner_address_id" on_change="onchange_partner_address_id(partner_address_id, email_from)" select="2"/>\n                             \n                                <field colspan="3" name="email_from" select="2"/>\n                                <button name="remind_partner" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                                <field name="user_id" select="1" domain="[(\'id\',\'!=\', 0)]"/>\n                                <button name="autoassign" string="Assigna-me\'l" type="object"/>\n                                <button name="remind_user" states="open,pending" string="Envia notificaci\u00f3" type="object"/>\n                            </group><field name="state" select="1"/></form>',
 
     field_parent: false,
     fields: {
+      integer: { string: "Integer", type: "integer" },
       active: { string: "Actiu", type: "boolean", views: {} },
       canal_id: {
         context: "",
@@ -138,8 +139,7 @@ export default {
         type: "one2many",
         views: {
           form: {
-            arch:
-              '<form string="Historial de comunicaci&#xF3;">\n                                    <group col="6" colspan="4">\n                                        <field name="date" select="1"/>\n                                        <field name="email" select="1"/>\n                                        <field name="canal_id" select="2"/>\n                                    </group>\n                                    <newline/>\n                                    <field colspan="4" name="description" nolabel="1" select="2"/>\n                                </form>\n                                ',
+            arch: '<form string="Historial de comunicaci&#xF3;">\n                                    <group col="6" colspan="4">\n                                        <field name="date" select="1"/>\n                                        <field name="email" select="1"/>\n                                        <field name="canal_id" select="2"/>\n                                    </group>\n                                    <newline/>\n                                    <field colspan="4" name="description" nolabel="1" select="2"/>\n                                </form>\n                                ',
             fields: {
               canal_id: {
                 context: "",
@@ -160,8 +160,7 @@ export default {
             },
           },
           tree: {
-            arch:
-              '<tree string="Historial de comunicaci&#xF3;">\n                                    <field name="note"/>\n                                </tree>\n                            ',
+            arch: '<tree string="Historial de comunicaci&#xF3;">\n                                    <field name="note"/>\n                                </tree>\n                            ',
             fields: {
               note: {
                 digits: [16, 2],
@@ -185,8 +184,7 @@ export default {
         type: "one2many",
         views: {
           form: {
-            arch:
-              '<form string="Accions">\n                                    <separator colspan="4" string="Informaci\u00f3 de l\'acci\u00f3"/>\n                                    <field colspan="4" name="name"/>\n                                    <field name="date" select="2"/>\n                                    <field name="fefe_id" select="2"/>\n                                    <field name="som" select="2"/>\n                                    <field name="canal_id"/>\n                                </form>\n                            ',
+            arch: '<form string="Accions">\n                                    <separator colspan="4" string="Informaci\u00f3 de l\'acci\u00f3"/>\n                                    <field colspan="4" name="name"/>\n                                    <field name="date" select="2"/>\n                                    <field name="fefe_id" select="2"/>\n                                    <field name="som" select="2"/>\n                                    <field name="canal_id"/>\n                                </form>\n                            ',
             fields: {
               canal_id: {
                 context: "",
@@ -389,8 +387,7 @@ export default {
         type: "one2many",
         views: {
           tree: {
-            arch:
-              '<tree editable="top">\n                                <field name="date"/>\n                                <field name="type_id"/>\n                                <field name="hours" sum="Time spent" widget="float_time"/>\n                          \n                                <field name="name"/>    \n                            </tree>\n                        ',
+            arch: '<tree editable="top">\n                                <field name="date"/>\n                                <field name="type_id"/>\n                                <field name="hours" sum="Time spent" widget="float_time"/>\n                          \n                                <field name="name"/>    \n                            </tree>\n                        ',
             fields: {
               date: { string: "Data", type: "datetime", views: {} },
               hours: { string: "Temps dedicat", type: "float", views: {} },

package/src/types/index.ts

@@ -41,6 +41,7 @@ type TreeView = BaseView & {
   search_fields?: SearchFields;
   isExpandable?: boolean;
   field_parent?: string;
+  toolbar?: any;
 };
 
 type FormView = TreeView & {
@@ -223,6 +224,7 @@ type EvalDomainRequest = {
   domain: string;
   values: any;
   context?: any;
+  fields?: any;
 };
 
 type IsShortcutFavoriteOptions = {

package/src/views/ActionView.tsx

@@ -28,6 +28,7 @@ import {
 import { useHotkeys } from "react-hotkeys-hook";
 import { GoToResourceModal } from "@/ui/GoToResourceModal";
 import showInfo from "@/ui/InfoDialog";
+import showErrorDialog from "@/ui/ActionErrorDialog";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import { GraphActionView } from "@/views/actionViews/GraphActionView";
 import { FormActionView } from "./actionViews/FormActionView";
@@ -191,6 +192,7 @@ function ActionView(props: Props, ref: any) {
         case "form": {
           viewDataRetrieved.push({
             ...(viewInfo as FormView),
+            type: viewType,
           });
           break;
         }
@@ -198,12 +200,14 @@ function ActionView(props: Props, ref: any) {
           viewDataRetrieved.push({
             ...(viewInfo as TreeView),
             isExpandable: treeExpandable,
+            type: viewType,
           });
           break;
         }
         case "graph": {
           viewDataRetrieved.push({
             ...(viewInfo as GraphView),
+            type: viewType,
           });
           break;
         }
@@ -211,18 +215,18 @@ function ActionView(props: Props, ref: any) {
           break;
       }
     }
+    let currentViewToAssign = undefined;
 
     if (!initialView && viewDataRetrieved.find((v) => v.type === "tree")) {
       const treeView: TreeView = viewDataRetrieved.find(
         (v) => v.type === "tree"
       ) as TreeView;
-      setCurrentView(treeView);
+      currentViewToAssign = treeView;
     } else if (!initialView) {
       const formView: TreeView = viewDataRetrieved.find(
         (v) => v.type === "form"
       ) as TreeView;
-
-      setCurrentView(formView);
+      currentViewToAssign = formView;
     } else {
       const view = viewDataRetrieved.find((v) => {
         if (!initialView.id) {
@@ -231,9 +235,16 @@ function ActionView(props: Props, ref: any) {
           return v.type === initialView.type && v.view_id === initialView.id;
         }
       });
-      setCurrentView(view);
+      currentViewToAssign = view;
+    }
+
+    if (!currentViewToAssign) {
+      showErrorDialog(
+        "Error determining the first view to show.\nPlease, make sure the view ids on the fields_view_get responses are the same as the ones defined in the action"
+      );
     }
 
+    setCurrentView(currentViewToAssign);
     setAvailableViews(viewDataRetrieved);
     setIsLoading(false);
   };

package/src/views/RootView.tsx

@@ -250,6 +250,7 @@ function RootView(props: RootViewProps, ref: any) {
             fields,
             values: { ...values, ...globalValues },
           }),
+          fields,
           context: { ...rootContext, ...parsedContext },
         })
       : [];
@@ -437,6 +438,11 @@ function RootView(props: RootViewProps, ref: any) {
         },
       });
     } else {
+      const formattedInitialView =
+        initialView && Array.isArray(initialView.id)
+          ? { ...initialView, id: initialView.id[0] }
+          : initialView;
+
       addNewTab({
         title,
         action: {
@@ -454,7 +460,7 @@ function RootView(props: RootViewProps, ref: any) {
             context={{ ...rootContext, ...context }}
             domain={domain}
             setCanWeClose={registerViewCloseFn}
-            initialView={initialView}
+            initialView={formattedInitialView}
             res_id={res_id}
             formDefaultValues={values}
             formForcedValues={forced_values}

package/src/views/actionViews/TreeActionView.tsx

@@ -2,7 +2,11 @@ import TreeActionBar from "@/actionbar/TreeActionBar";
 import { FormView, TreeView, View } from "@/types";
 import TitleHeader from "@/ui/TitleHeader";
 import SearchTree from "@/widgets/views/SearchTree";
-import React from "react";
+import React, { useContext } from "react";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
 
 export type TreeActionViewProps = {
   formView?: FormView;
@@ -38,6 +42,10 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     searchTreeNameSearch,
   } = props;
 
+  const { currentView, setPreviousView } = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+
   if (!visible) {
     return null;
   }
@@ -46,7 +54,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     <>
       <TitleHeader>
         <TreeActionBar
-          toolbar={formView?.toolbar}
+          toolbar={treeView?.toolbar}
           parentContext={context}
           treeExpandable={treeView?.isExpandable || false}
         />
@@ -66,6 +74,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
           const itemIndex = results.findIndex((item: any) => {
             return item.id === id;
           });
+          setPreviousView?.(currentView);
           setCurrentItemIndex(itemIndex);
           const formView = availableViews.find(
             (v) => v.type === "form"

package/src/widgets/base/Integer.tsx

@@ -32,6 +32,7 @@ export const Integer = (props: IntegerProps) => {
         }}
         defaultValue={0}
         onBlur={elementHasLostFocus}
+        precision={0}
       />
     </Field>
   );

package/src/widgets/base/Label.tsx

@@ -3,6 +3,7 @@ import { Tooltip, Typography } from "antd";
 import { WidgetProps } from "@/types";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { Label as LabelOoui } from "@gisce/ooui";
+import { Interweave } from "interweave";
 const { Text, Title } = Typography;
 
 type Props = WidgetProps & {
@@ -18,13 +19,8 @@ const alignClass = {
 
 const Label = (props: Props) => {
   const { ooui, align, responsiveBehaviour } = props;
-  const {
-    label,
-    tooltip,
-    fieldForLabel,
-    labelSize,
-    labelType,
-  } = ooui as LabelOoui;
+  const { label, tooltip, fieldForLabel, labelSize, labelType } =
+    ooui as LabelOoui;
   const addColon = fieldForLabel !== null ? true : false;
   const labelText = addColon && label.length > 1 ? label + " :" : label;
   const responsiveAlign = responsiveBehaviour ? "left" : "right";
@@ -43,10 +39,10 @@ const Label = (props: Props) => {
       )}
       <span className="pr-2">
         <TextType
-          level={labelSize !== "text" ? ((labelSize as string) as any) : null}
+          level={labelSize !== "text" ? (labelSize as string as any) : null}
           type={labelType as any}
         >
-          {labelText}
+          <Interweave content={labelText} />
         </TextType>
       </span>
     </div>

package/src/widgets/base/ReferenceTree.tsx

@@ -0,0 +1,62 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { Space } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
+import { LoadingOutlined } from "@ant-design/icons";
+
+export type ReferenceTreeProps = {
+  value: string;
+  context?: any;
+  selectionValues?: any;
+};
+
+export const ReferenceTree = (
+  props: ReferenceTreeProps
+): React.ReactElement => {
+  const { value, context, selectionValues } = props;
+  const [name, setName] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const [model, id] = value ? value.split(",") : [];
+  const intId = parseInt(id);
+
+  const fetchName = useCallback(async () => {
+    if (!value) {
+      return;
+    }
+    if (value && name) {
+      return;
+    }
+    setLoading(true);
+    const nameResponse = await ConnectionProvider.getHandler().execute({
+      action: "name_get",
+      payload: [intId],
+      model,
+      context,
+    });
+    setName(nameResponse[0][1]);
+    setLoading(false);
+  }, [value, name]);
+
+  useEffect(() => {
+    fetchName();
+  }, [value]);
+
+  if (!value && !loading) {
+    return <></>;
+  }
+
+  if (loading) {
+    return <LoadingOutlined />;
+  }
+
+  const selectionDescription = selectionValues.get(model);
+
+  return (
+    <Space>
+      <>{`${selectionDescription}:`}</>
+      <>{name}</>
+      <Many2oneSuffix id={intId} model={model} />
+    </Space>
+  );
+};

package/src/widgets/base/many2one/Many2one.tsx

@@ -132,13 +132,12 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
         if (transformedDomain.current && transformedDomain.current.length > 0) {
           tryFetchFirstResultOrShowSearch(inputTextRef.current as string);
         } else {
-          const results: any[] = await ConnectionProvider.getHandler().nameSearch(
-            {
+          const results: any[] =
+            await ConnectionProvider.getHandler().nameSearch({
               model: relation,
               payload: inputTextRef.current as string,
               context: { ...getContext?.(), ...context },
-            }
-          );
+            });
 
           if (results.length === 1) {
             inputTextRef.current = undefined;
@@ -207,16 +206,16 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
 
   async function parseDomain() {
     if (widgetDomain) {
-      transformedDomain.current = await ConnectionProvider.getHandler().evalDomain(
-        {
+      transformedDomain.current =
+        await ConnectionProvider.getHandler().evalDomain({
           domain: widgetDomain,
           values: transformPlainMany2Ones({
             fields: getFields(),
             values: getValues(),
           }),
+          fields: getFields(),
           context: getContext(),
-        }
-      );
+        });
     }
 
     if (domain && domain.length > 0) {
@@ -232,7 +231,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
   }
 
   async function onKeyDown(event: any) {
-    if (event.code === "Enter") {
+    if (event.keyCode === 13) {
       event.preventDefault();
       event.stopPropagation();
       await onElementLostFocus();

package/src/widgets/base/many2one/Many2oneTree.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import React from "react";
+import { Many2oneSuffix } from "./Many2oneSuffix";
+
+export type Many2oneTreeProps = { m2oField: any };
+
+export const Many2oneTree = (props: Many2oneTreeProps): React.ReactElement => {
+  const { m2oField } = props;
+  if (!m2oField) {
+    return <></>;
+  }
+  return (
+    <Space>
+      <>{m2oField.value}</>
+      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
+    </Space>
+  );
+};

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

@@ -168,6 +168,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
             fields: getFields(),
             values: getValues(),
           }),
+          fields: getFields(),
           context: getContext(),
         }),
         widgetFieldName: fieldName,
@@ -573,6 +574,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           }}
           sorter={sorter}
           onChangeSort={setSorter}
+          context={{ ...getContext?.(), ...context }}
         />
       );
     }

package/src/widgets/containers/Group.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Group as GroupOoui } from "@gisce/ooui";
 import Container from "./Container";
-import Fieldset from "@/ui/Fieldset";
+import { FieldSet } from "@gisce/react-formiga-components";
 
 type Props = {
   ooui: GroupOoui;
@@ -15,12 +15,12 @@ function Group(props: Props): React.ReactElement {
   return (
     <>
       {ooui.label && showLabel ? (
-        <Fieldset label={ooui.label}>
+        <FieldSet label={ooui.label}>
           <Container
             container={ooui!.container}
             responsiveBehaviour={responsiveBehaviour}
           />
-        </Fieldset>
+        </FieldSet>
       ) : (
         <Container
           container={ooui!.container}

package/src/widgets/custom/MultiCheckbox.tsx

@@ -62,6 +62,7 @@ export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
           fields: formContext?.getFields(),
           values: formContext.getPlainValues(),
         }),
+        fields: formContext?.getFields(),
         context: formContext.getContext(),
       });
       params = [...params, ...evaluatedDomain];

package/src/widgets/custom/Tags.tsx

@@ -23,7 +23,7 @@ export const Tags = (props: TagsProps) => {
 
   return (
     <Field type={"array"} {...props}>
-      <TagsInput ooui={ooui}  />
+      <TagsInput ooui={ooui} />
     </Field>
   );
 };
@@ -31,16 +31,15 @@ export const Tags = (props: TagsProps) => {
 export const TagsInput = (props: TagsInputProps) => {
   const { value, ooui, onChange } = props;
   const { items = [] } = value || {};
-  const itemsToShow = items.filter(
-    (item) => item.operation !== "pendingRemove"
-  ).map((item) => item.id) as number[];
+  const itemsToShow = items
+    .filter((item) => item.operation !== "pendingRemove")
+    .map((item) => item.id) as number[];
 
   const [options, setOptions] = useState<any[]>([]);
   const [error, setError] = useState<string>();
   const [isLoadingOptions, setIsLoadingOptions] = useState<boolean>(false);
   const { relation, context, readOnly, field } = ooui;
 
-
   const formContext = useContext(FormContext) as FormContextType;
   const { getContext } = formContext || {};
 
@@ -62,16 +61,16 @@ export const TagsInput = (props: TagsInputProps) => {
         params = [["id", "in", itemsToShow]];
       }
       if (ooui.domain) {
-        const evaluatedDomain = await ConnectionProvider.getHandler().evalDomain(
-          {
+        const evaluatedDomain =
+          await ConnectionProvider.getHandler().evalDomain({
             domain: ooui.domain,
             values: transformPlainMany2Ones({
               fields: formContext?.getFields(),
               values: formContext.getPlainValues(),
             }),
-                context: formContext.getContext(),
-          }
-        );
+            fields: formContext?.getFields(),
+            context: formContext.getContext(),
+          });
         params = [...params, ...evaluatedDomain];
       }
 
@@ -81,18 +80,17 @@ export const TagsInput = (props: TagsInputProps) => {
         fields: [field],
         context: { ...getContext?.(), ...context },
       });
-      const options = optionsRead.map((item:any) => {
+      const options = optionsRead.map((item: any) => {
         const value = item[field];
         let formattedValue = value;
         if (Array.isArray(value)) {
           formattedValue = value[1];
         }
-        return {label: formattedValue, value: item.id}
+        return { label: formattedValue, value: item.id };
       });
       setOptions(options);
-
     } catch (err) {
-      setError(err as any)
+      setError(err as any);
     } finally {
       setIsLoadingOptions(false);
     }
@@ -104,19 +102,21 @@ export const TagsInput = (props: TagsInputProps) => {
         if (item.operation == "pendingRemove") {
           return {
             ...item,
-            operation: "pendingLink"
-          }
+            operation: "pendingLink",
+          };
         } else {
-          return item
+          return item;
         }
       } else {
-        return {id: item.id, operation: 'pendingRemove'}
+        return { id: item.id, operation: "pendingRemove" };
       }
-    })
-    const currentIds = newItems.map(item => item.id)
-    ids.filter(id => !currentIds.includes(id)).map((id) => {
-      newItems.push({id, operation: 'pendingLink'});
     });
+    const currentIds = newItems.map((item) => item.id);
+    ids
+      .filter((id) => !currentIds.includes(id))
+      .map((id) => {
+        newItems.push({ id, operation: "pendingLink" });
+      });
     triggerChange(newItems);
   };
 
@@ -130,10 +130,11 @@ export const TagsInput = (props: TagsInputProps) => {
       <AntTag
         color={colorFromString(label)}
         onMouseDown={onPreventMouseDown}
-        style={{margin: '5px'}}
+        style={{ margin: "5px" }}
         closable={closable}
-        onClose={onClose}>
-          {label}
+        onClose={onClose}
+      >
+        {label}
       </AntTag>
     );
   };
@@ -154,10 +155,8 @@ export const TagsInput = (props: TagsInputProps) => {
           options={options}
           onChange={onChangeSelected}
           loading={isLoadingOptions}
-          >
-        </Select>
+        ></Select>
       </div>
     </>
   );
-
 };