@gisce/react-ooui 1.2.0-rc.4 → 1.2.0-rc.41

package/src/helpers/one2manyHelper.ts

@@ -79,14 +79,8 @@ type RemoveItemOptions = {
 };
 
 const removeItems = async (options: RemoveItemOptions) => {
-  const {
-    model,
-    activeId,
-    fieldName,
-    idsToRemove,
-    fields,
-    isMany2many,
-  } = options;
+  const { model, activeId, fieldName, idsToRemove, fields, isMany2many } =
+    options;
 
   const values: any = {};
   values[fieldName] = [];
@@ -136,4 +130,28 @@ const getNextPendingId = (items: One2manyItem[]) => {
   }
 };
 
-export { readObjectValues, removeItems, linkItem, getNextPendingId };
+const convertToPlain2ManyValues = (values: any, fields: any) => {
+  const result: any = {};
+  Object.keys(values).forEach((key) => {
+    if (
+      fields.hasOwnProperty(key) &&
+      (fields[key].type === "one2many" || fields[key].type === "many2many") &&
+      values[key] &&
+      values[key]?.items
+    ) {
+      result[key] = values[key].items.filter(
+        (item: One2manyItem) => item.operation !== "pendingRemove"
+      );
+    } else {
+      result[key] = values[key];
+    }
+  });
+  return result;
+};
+export {
+  readObjectValues,
+  removeItems,
+  linkItem,
+  getNextPendingId,
+  convertToPlain2ManyValues,
+};

package/src/helpers/treeHelper.ts

@@ -1,4 +1,10 @@
-import { Tree as TreeOoui, Selection, Many2one, Boolean } from "@gisce/ooui";
+import {
+  Tree as TreeOoui,
+  Selection,
+  Many2one,
+  Boolean,
+  Reference,
+} from "@gisce/ooui";
 import { TreeView, Column } from "@/types";
 
 const getTree = (treeView: TreeView): TreeOoui => {
@@ -9,7 +15,11 @@ const getTree = (treeView: TreeView): TreeOoui => {
   return tree;
 };
 
-const getTableColumns = (tree: TreeOoui, components: any): Array<Column> => {
+const getTableColumns = (
+  tree: TreeOoui,
+  components: any,
+  context: any
+): Array<Column> => {
   const tableColumns = tree.columns.map((column) => {
     const type = column.type;
     const key = column.id;
@@ -18,7 +28,7 @@ const getTableColumns = (tree: TreeOoui, components: any): Array<Column> => {
 
     if (component) {
       render = (item: any) => {
-        return component(item);
+        return component(item, key, column, context);
       };
     }
 
@@ -54,9 +64,11 @@ const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
       } else {
         const widget = treeOoui.findById(key);
 
-        if (widget instanceof Selection) {
+        if (widget instanceof Reference) {
+          parsedItem[key] = item[key];
+        } else if (widget instanceof Selection) {
           const selection = widget;
-          parsedItem[key] = selection.selectionValues.get(item[key]);
+          parsedItem[key] = item[key];
         } else if (widget instanceof Many2one) {
           parsedItem[key] = item[key] &&
             Array.isArray(item[key]) &&

package/src/index.ts

@@ -37,6 +37,7 @@ import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
 import { Tags } from "@/widgets/custom/Tags";
+import { Tag } from "@/widgets/custom/Tag";
 import { MultiCheckbox } from "./widgets/custom/MultiCheckbox";
 import { Radio } from "@/widgets/custom/Radio";
 import { Switch } from "@/widgets/custom/Switch";
@@ -145,6 +146,7 @@ export {
   DashboardGridItem,
   DashboardGrid,
   Tags,
+  Tag,
   MultiCheckbox,
   Radio,
   Switch,

package/src/locales/ca_ES.tsx

@@ -86,4 +86,8 @@ export default {
   totalRegisters: "Registres totals:",
   export: "Exportar",
   selectAtLeastOneField: "Selecciona almenys un camp per a l'exportació",
+  printScreen: "Imprimir pantalla",
+  advancedExport: "Exportació avançada",
+  savedRegisters: "Registre guardat correctament",
+  errorWhileSavingForm: "Error en guardar el formulari",
 };

package/src/locales/en_US.tsx

@@ -83,4 +83,8 @@ export default {
   totalRegisters: "Total registers:",
   export: "Export",
   selectAtLeastOneField: "Select at least one field for the export",
+  printScreen: "Print screen",
+  advancedExport: "Advanced export",
+  savedRegisters: "Record successfully saved",
+  errorWhileSavingForm: "Error while saving form",
 };

package/src/locales/es_ES.tsx

@@ -87,4 +87,8 @@ export default {
   totalRegisters: "Registros totales:",
   export: "Exportar",
   selectAtLeastOneField: "Selecciona al menos un campo para la exportación",
+  printScreen: "Imprimir pantalla",
+  advancedExport: "Exportación avanzada",
+  savedRegisters: "Registro guardado correctamente",
+  errorWhileSavingForm: "Error al guardar el formulario",
 };

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/containers/Notebook.stories.tsx

@@ -167,3 +167,30 @@ export const IconTabs = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+
+export const IconTablerTabs = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook">
+      <page string="Home" icon="bolt">
+        <field name="name" />
+      </page>
+      <page string="Attributes" icon="address-book">
+        <field name="surname" />
+      </page>
+    </notebook>
+  </form>`;
+
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};

package/src/stories/custom/Tag.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { Tag as TagOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+import { TagInput } from "../../widgets/custom/Tag";
+
+export default {
+  title: "Components/Widgets/Custom/Tag",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": {"draft": "blue", "open": "green"}}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithoutColor = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithColorAuto = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": "auto"}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};

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