@gisce/react-ooui 1.2.0-rc.5 → 1.2.0-rc.50

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/stories/views/Tree.stories.jsx

@@ -30,7 +30,7 @@ Default.args = {
       lang: false,
       name: "AGRI ENERGIA ELECTRICA, S.A.",
       ref: "0112",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 100,
     },
@@ -41,7 +41,7 @@ Default.args = {
       lang: false,
       name: "Agrolait",
       ref: false,
-      title: false,
+      title: "ltd",
       numeric: 30.1,
       progressbar: 70.434331,
     },
@@ -85,14 +85,14 @@ Default.args = {
       lang: false,
       name: "Aragón",
       ref: "02",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 20.01,
     },
   ],
   treeView: {
     arch:
-      '<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title"/>\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="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",
@@ -149,7 +149,7 @@ Default.args = {
       },
       title: {
         selection: [
-          ["Corp.", "Corp."],
+          ["corp", "Corp."],
           ["ltd", "Ltd"],
           ["", ""],
         ],

package/src/types/index.ts

@@ -224,6 +224,7 @@ type EvalDomainRequest = {
   domain: string;
   values: any;
   context?: any;
+  fields?: any;
 };
 
 type IsShortcutFavoriteOptions = {

package/src/ui/FavouriteButton.tsx

@@ -55,7 +55,7 @@ const FavouriteButton = (props: Props) => {
   const [shortcuts, setShortcuts] = useState<ShortcutApi[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentShortcutId, setCurrentShortcutId] = useState<number>();
-  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const { t } = (useContext(LocaleContext) as LocaleContextType) || {};
 
   const tabManagerContext = useContext(
     TabManagerContext
@@ -150,10 +150,10 @@ const FavouriteButton = (props: Props) => {
     <Menu onClick={handleMenuClick}>
       <div style={{ width: 300, padding: 5, display: "flex" }}>
         <div style={{ paddingLeft: 15, color: "#ccc" }}>
-          {t("favorites").toUpperCase()}
+          {t?.("favorites").toUpperCase()}
         </div>
         <div style={{ flexGrow: 1, paddingLeft: 10 }}>
-          <Tooltip title={t("edit_favorites")}>
+          <Tooltip title={t?.("edit_favorites")}>
             <EditOutlined
               style={{ color: "#1890FF", cursor: "pointer" }}
               onClick={editFavourites}
@@ -177,7 +177,7 @@ const FavouriteButton = (props: Props) => {
         </>
       ) : (
         <div style={{ width: 300, padding: 5, paddingLeft: 15 }}>
-          {t("no_favorites")}
+          {t?.("no_favorites")}
         </div>
       )}
     </Menu>

package/src/views/ActionView.tsx

@@ -192,6 +192,7 @@ function ActionView(props: Props, ref: any) {
         case "form": {
           viewDataRetrieved.push({
             ...(viewInfo as FormView),
+            type: viewType,
           });
           break;
         }
@@ -199,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;
         }

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;
   }
@@ -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/WidgetFactory.tsx

@@ -29,6 +29,7 @@ import {
   Radio,
   Switch,
   Steps,
+  Tag,
   CodeEditor,
 } from "@/index";
 import { Image } from "./base/Image";
@@ -99,6 +100,8 @@ const getWidgetType = (type: string) => {
       return Indicator;
     case "tags":
       return Tags;
+    case "tag":
+      return Tag;
     case "multicheckbox":
       return MultiCheckbox;
     case "radio":

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/ButtonGroup.tsx

@@ -83,7 +83,7 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
         type={primary ? "primary" : undefined}
         //danger={danger ? true : undefined} This works but typescript
         // doesn't accept
-        overlay={<Items ooui={secondaryButtons} />}
+        overlay={Items({ooui: secondaryButtons})}
       >
         {getButtonIcon()}
         {caption}

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/Tag.tsx

@@ -0,0 +1,24 @@
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import { Tag as AntdTag } from 'antd';
+import { colorFromString } from "@/helpers/formHelper";
+
+
+export const Tag = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <TagInput {...props}/>
+    </Field>
+  );
+};
+
+export const TagInput = (props) => {
+  const {ooui, value} = props;
+  if (!value) {
+    return null
+  }
+  const color = ooui.colors === "auto" ? colorFromString(value) : ooui.colors[value]
+  return (
+    <AntdTag color={color}>{ooui.selectionValues.get(value)}</AntdTag>
+  );
+}

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>
     </>
   );
-
 };