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

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

package/src/widgets/modals/ExportModal.tsx

@@ -13,13 +13,13 @@ export type ExportModalProps = {
   visible: boolean;
   locale: string;
   onClose: () => void;
-  selectedRegistersToExport?: number;
+  selectedRegistersToExport?: any[];
   totalRegisters: number;
   model: string;
   domain: any[];
   limit?: number;
-  treeFields?: any;
   context?: any;
+  visibleRegisters: number;
 };
 
 export const ExportModal = (props: ExportModalProps) => {
@@ -29,26 +29,40 @@ export const ExportModal = (props: ExportModalProps) => {
     onClose,
     model,
     context,
-    treeFields,
     selectedRegistersToExport,
     totalRegisters,
     domain,
     limit,
+    visibleRegisters,
   } = props;
   const fields = useRef<any>({});
 
   const onSucceed = useCallback(
     async (options: ExportOptions) => {
-      if (options.selectedKeys.length === 0) {
+      if (
+        options.selectedKeys === undefined ||
+        options.selectedKeys.length === 0
+      ) {
         showInfo(tForLang("selectAtLeastOneField", locale));
         return;
       }
 
+      let exportDomain = domain;
+
+      if (
+        options.registersAmount === "selected" &&
+        selectedRegistersToExport?.length !== 0
+      ) {
+        exportDomain = [
+          ["id", "in", selectedRegistersToExport?.map((r) => r.id)],
+        ];
+      }
+
       const { datas } = await ConnectionProvider.getHandler().exportData({
         model,
         fields: options.selectedKeys,
-        domain: options.registersAmount === "all" ? [] : domain,
-        limit: options.registersAmount === "all" ? undefined : limit,
+        domain: exportDomain,
+        limit: options.registersAmount === "all" ? 0 : limit,
         context,
         format: options.exportType,
       });
@@ -77,13 +91,18 @@ export const ExportModal = (props: ExportModalProps) => {
     async ({ key, title }: any) => {
       let fieldDefinition;
 
-      if (key.indexOf("/") === -1) {
+      const sanitizedKey =
+        key.split("/")[key.split("/").length - 1] === "id"
+          ? key.split("/").slice(0, -1).join("/")
+          : key;
+
+      if (sanitizedKey.indexOf("/") === -1) {
         fieldDefinition = fields.current["/"];
       } else {
-        fieldDefinition = fields.current[getParentKey(key)];
+        fieldDefinition = fields.current[getParentKey(sanitizedKey)];
       }
 
-      const optsForField = fieldDefinition[getChildKey(key)];
+      const optsForField = fieldDefinition[getChildKey(sanitizedKey)];
       const relation = optsForField.relation;
       const viewData = await ConnectionProvider.getHandler().getFields({
         model: relation,
@@ -91,12 +110,12 @@ export const ExportModal = (props: ExportModalProps) => {
         fields: [],
       });
 
-      fields.current[key] = viewData;
+      fields.current[sanitizedKey] = viewData;
 
       return convertToExportField({
         fields: viewData,
         parentTitle: title,
-        parentKey: key,
+        parentKey: sanitizedKey,
       });
     },
     [fields, model, context]
@@ -108,11 +127,17 @@ export const ExportModal = (props: ExportModalProps) => {
       locale={locale as Locale}
       onSucceed={onSucceed}
       onCancel={onClose}
-      selectedRegistersToExport={selectedRegistersToExport}
+      selectedRegistersToExport={
+        selectedRegistersToExport &&
+        selectedRegistersToExport.length &&
+        selectedRegistersToExport.length > 0
+          ? selectedRegistersToExport.length
+          : undefined
+      }
       totalRegisters={totalRegisters}
       onGetFieldChilds={onGetFieldChilds}
       onGetFields={onGetFields}
-      selectedKeys={treeFields ? Object.keys(treeFields) : undefined}
+      visibleRegisters={visibleRegisters}
     />
   );
 };
@@ -130,14 +155,27 @@ const convertToExportField = ({
 
   for (const key of Object.keys(fields)) {
     const valuesForField = fields[key];
+
+    if (valuesForField.relation && valuesForField.is_function === true) {
+      continue;
+    }
+
     const relationField =
       valuesForField.type === "many2one" ||
       valuesForField.type === "one2many" ||
       valuesForField.type === "many2many";
 
+    let newKey = `${parentKey ? parentKey + "/" : ""}${key}`;
+
+    if (relationField) {
+      newKey += "/id";
+    }
+
     exportFields.push({
-      key: `${parentKey ? parentKey + "/" : ""}${key}`,
-      title: `${parentTitle ? parentTitle + "/" : ""}${valuesForField.string}`,
+      key: newKey,
+      title: `${parentTitle ? parentTitle + " → " : ""}${
+        valuesForField.string
+      }`,
       tooltip: valuesForField.help,
       required: valuesForField.required,
       isLeaf: !relationField,

package/src/widgets/views/Dashboard/Dashboard.tsx

@@ -308,6 +308,10 @@ function Dashboard(props: DashboardProps, ref: any) {
             />
           );
         } else if (initialView !== undefined) {
+          const formattedInitialView =
+            initialView && Array.isArray(initialView.id)
+              ? { ...initialView, id: initialView.id[0] }
+              : initialView;
           childContent = (
             <ActionView
               action_id={actionId}
@@ -319,7 +323,7 @@ function Dashboard(props: DashboardProps, ref: any) {
               context={context}
               domain={domain}
               setCanWeClose={() => {}}
-              initialView={initialView}
+              initialView={formattedInitialView}
               limit={limit}
             />
           );

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -219,6 +219,7 @@ function DashboardTree(props: Props) {
             });
             setResults(sortedResults);
           }}
+          context={parentContext}
         />
       </div>
     );

package/src/widgets/views/Form.tsx

@@ -15,6 +15,7 @@ import {
   Row,
   Alert,
   Spin,
+  message,
 } from "antd";
 import Measure from "react-measure";
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
@@ -54,6 +55,7 @@ import {
   ContentRootContextType,
 } from "@/context/ContentRootContext";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { convertToPlain2ManyValues } from "@/helpers/one2manyHelper";
 
 export type FormProps = {
   model: string;
@@ -105,7 +107,7 @@ function Form(props: FormProps, ref: any) {
     defaultValues,
     forcedValues = {},
   } = props;
-  const { lang } = useContext(LocaleContext) as LocaleContextType;
+  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
 
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [error, setError] = useState<string>();
@@ -126,7 +128,8 @@ function Form(props: FormProps, ref: any) {
   const responsiveBehaviour = containerWidth < WIDTH_BREAKPOINT;
 
   const formContext = useContext(FormContext) as FormContextType;
-  const { activeId: parentId } = formContext || {};
+  const { activeId: parentId, getPlainValues: getParentPlainValues } =
+    formContext || {};
 
   const actionViewContext = useContext(
     ActionViewContext
@@ -137,6 +140,8 @@ function Form(props: FormProps, ref: any) {
     setCurrentId = undefined,
     setFormIsLoading = undefined,
     setAttachments = undefined,
+    title = undefined,
+    setTitle = undefined,
   } = (rootForm ? actionViewContext : {}) || {};
 
   const contentRootContext = useContext(
@@ -342,6 +347,7 @@ function Form(props: FormProps, ref: any) {
       await antForm.validateFields();
       return false;
     } catch (verror) {
+      message.error(t("fillRequiredFields"));
       return true;
     }
   }
@@ -398,13 +404,11 @@ function Form(props: FormProps, ref: any) {
     if (valuesProps) {
       values = valuesProps;
     } else {
-      ({
-        values,
-        defaultGetCalled: hasDefaultGetCalled,
-      } = await fetchValuesFromApi({
-        fields: _fields,
-        arch: _arch!,
-      }));
+      ({ values, defaultGetCalled: hasDefaultGetCalled } =
+        await fetchValuesFromApi({
+          fields: _fields,
+          arch: _arch!,
+        }));
     }
 
     if (actionDomain) {
@@ -455,15 +459,13 @@ function Form(props: FormProps, ref: any) {
 
   const getFormView = async (): Promise<FormView> => {
     if (getDataFromAction) {
-      const action = await ConnectionProvider.getHandler().getActionStringForModel(
-        model
-      );
-      const viewsForAction = await ConnectionProvider.getHandler().getViewsForAction(
-        {
+      const action =
+        await ConnectionProvider.getHandler().getActionStringForModel(model);
+      const viewsForAction =
+        await ConnectionProvider.getHandler().getViewsForAction({
           action,
           context: parentContext,
-        }
-      );
+        });
       return viewsForAction.views.get("form");
     }
 
@@ -609,13 +611,13 @@ function Form(props: FormProps, ref: any) {
       formSubmitting.current = false;
       setFormHasChanges?.(false);
       onCancel?.();
-      return true;
+      return { succeed: true, id: getCurrentId()! };
     }
 
     if (await checkIfFormHasErrors()) {
       formSubmitting.current = false;
       formErrorsDialog(lang);
-      return false;
+      return { succeed: false, id: getCurrentId()! };
     }
 
     setIsSubmitting(true);
@@ -640,6 +642,7 @@ function Form(props: FormProps, ref: any) {
       setIsSubmitting(false);
       setFormIsSaving?.(false);
       onSubmitError?.(err);
+      message.error(t("errorWhileSavingForm"));
       setError(err?.message ? err.message : err);
     } finally {
       formSubmitting.current = false;
@@ -647,7 +650,7 @@ function Form(props: FormProps, ref: any) {
       setIsSubmitting(false);
     }
 
-    return submitSucceed;
+    return { succeed: submitSucceed, id: getCurrentId()! };
   };
 
   const parseForm = ({
@@ -663,13 +666,20 @@ function Form(props: FormProps, ref: any) {
     // TODO: Here we must inject `values` to the ooui parser in order to evaluate arch+values and get the new form container
     ooui.parse(arch, {
       readOnly,
-      values: {
-        ...values,
-        ...getAdditionalValues(),
-      },
+      values: convertToPlain2ManyValues(
+        {
+          ...values,
+          ...getAdditionalValues(),
+        },
+        fields
+      ),
     });
     setFormOoui(ooui);
 
+    if (ooui.string && ooui.string !== title) {
+      setTitle?.(ooui.string);
+    }
+
     if (formModalContext && ooui.string)
       formModalContext.setTitle?.(ooui.string);
   };
@@ -695,7 +705,7 @@ function Form(props: FormProps, ref: any) {
       if (
         checkFieldsType({
           changedFields,
-          fields,
+          formOoui: formOoui!,
           types: [
             "text",
             "codeeditor",
@@ -756,6 +766,7 @@ function Form(props: FormProps, ref: any) {
           ...formOoui?.context,
         },
       },
+      parentValues: getParentPlainValues?.(),
       onChangeFieldActionArgs: onChangeFieldAction.args,
     });
 

package/src/widgets/views/SearchTree.tsx

@@ -307,6 +307,7 @@ function SearchTree(props: Props, ref: any) {
           searchValues={searchValues}
         />
         <Tree
+          context={parentContext}
           total={totalItems}
           limit={limit}
           page={page}
@@ -327,6 +328,7 @@ function SearchTree(props: Props, ref: any) {
             treeView.isExpandable ? fetchChildrenForRecord : undefined
           }
           childField={treeView.field_parent}
+          rootTree={rootTree}
         />
       </>
     );