@gisce/react-ooui 1.2.0-rc.8 → 1.2.0-rc.82

package/src/widgets/custom/Markdown.tsx

@@ -0,0 +1,22 @@
+import Field from "@/common/Field";
+import ReactMarkdown from "react-markdown";
+import React from "react";
+import {WidgetProps} from "@/types";
+
+export  const Markdown = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <MarkdownInput {...props} />
+    </Field>
+  );
+};
+
+export const MarkdownInput = (props: any) => {
+  const {value, ooui} = props;
+  return (
+    <div style={{height: ooui.height ? ooui.height + 'px' : '100%', overflow: 'auto'}}>
+      <ReactMarkdown children={value} className="ant-typography"/>
+    </div>
+
+  )
+}

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 React from "react";
+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: any) => {
+  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/custom/Timeline.tsx

@@ -105,12 +105,18 @@ export const TimelineInput = (props: TimelineInputProps) => {
     setError(undefined);
 
     try {
-      const itemsWithValues = await readObjectValues({
-        treeFields: views.get("tree").fields,
-        formFields: views.get("form").fields,
+      const [itemsWithValues] = await readObjectValues({
+        treeView: {
+          fields: views.get("tree").fields,
+          arch: views.get("tree").arch
+        },
+        formView: {
+          fields: views.get("form").fields,
+        },
         model: relation,
         items,
         context: { ...getContext?.(), ...context },
+        currentView: "form",
       });
 
       triggerChange(itemsWithValues);

package/src/widgets/modals/ExportModal.tsx

@@ -3,22 +3,20 @@ import {
   ExportModal as ExportModalFmg,
   Locale,
 } from "@gisce/react-formiga-components";
-import { ExportOptions } from "@gisce/react-formiga-components/dist/components/other/ExportModal/ExportModal.types";
-import React, { useCallback, useRef } from "react";
-import showInfo from "@/ui/InfoDialog";
-import { tForLang } from "@/context/LocaleContext";
-import { getMimeType, openBase64InNewTab } from "@/helpers/filesHelper";
+import React from "react";
+import { useExport } from "@/hooks/useExport";
 
 export type ExportModalProps = {
   visible: boolean;
   locale: string;
   onClose: () => void;
-  selectedRegistersToExport?: number;
+  selectedRegistersToExport?: any[];
   totalRegisters: number;
   model: string;
   domain: any[];
   limit?: number;
   context?: any;
+  visibleRegisters: number;
 };
 
 export const ExportModal = (props: ExportModalProps) => {
@@ -32,145 +30,46 @@ export const ExportModal = (props: ExportModalProps) => {
     totalRegisters,
     domain,
     limit,
+    visibleRegisters,
   } = props;
-  const fields = useRef<any>({});
 
-  const onSucceed = useCallback(
-    async (options: ExportOptions) => {
-      if (options.selectedKeys.length === 0) {
-        showInfo(tForLang("selectAtLeastOneField", locale));
-        return;
-      }
-
-      const { datas } = await ConnectionProvider.getHandler().exportData({
-        model,
-        fields: options.selectedKeys,
-        domain: options.registersAmount === "all" ? [] : domain,
-        limit: options.registersAmount === "all" ? undefined : limit,
-        context,
-        format: options.exportType,
-      });
-
-      onClose();
-
-      await new Promise((resolve) => setTimeout(resolve, 200));
-
-      const fileType: any = await getMimeType(datas);
-      openBase64InNewTab(datas, fileType.mime);
-    },
-    [locale, model, domain, limit, context, onClose]
-  );
-
-  const onGetFields = useCallback(async () => {
-    const viewData = await ConnectionProvider.getHandler().getFields({
-      model,
-      context,
-      fields: [],
-    });
-    fields.current["/"] = viewData;
-    return convertToExportField({ fields: viewData });
-  }, [model, context, fields]);
-
-  const onGetFieldChilds = useCallback(
-    async ({ key, title }: any) => {
-      let fieldDefinition;
-
-      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(sanitizedKey)];
-      }
-
-      const optsForField = fieldDefinition[getChildKey(sanitizedKey)];
-      const relation = optsForField.relation;
-      const viewData = await ConnectionProvider.getHandler().getFields({
-        model: relation,
-        context,
-        fields: [],
-      });
-
-      fields.current[sanitizedKey] = viewData;
-
-      return convertToExportField({
-        fields: viewData,
-        parentTitle: title,
-        parentKey: sanitizedKey,
-      });
-    },
-    [fields, model, context]
-  );
+  const {
+    onExport,
+    onGetFieldChilds,
+    onGetFields,
+    onGetPredefinedExports,
+    onSavePredefinedExport,
+    onRemovePredefinedExport,
+  } = useExport({
+    model,
+    context,
+    domain,
+    limit,
+    selectedRegistersToExport,
+    onClose,
+    locale,
+  });
 
   return (
     <ExportModalFmg
       visible={visible}
       locale={locale as Locale}
-      onSucceed={onSucceed}
+      onSucceed={onExport}
       onCancel={onClose}
-      selectedRegistersToExport={selectedRegistersToExport}
+      selectedRegistersToExport={
+        selectedRegistersToExport &&
+        selectedRegistersToExport.length &&
+        selectedRegistersToExport.length > 0
+          ? selectedRegistersToExport.length
+          : undefined
+      }
       totalRegisters={totalRegisters}
       onGetFieldChilds={onGetFieldChilds}
       onGetFields={onGetFields}
+      visibleRegisters={visibleRegisters}
+      onGetPredefinedExports={onGetPredefinedExports}
+      onSavePredefinedExport={onSavePredefinedExport}
+      onRemovePredefinedExport={onRemovePredefinedExport}
     />
   );
 };
-
-const convertToExportField = ({
-  fields,
-  parentKey,
-  parentTitle,
-}: {
-  fields: any;
-  parentTitle?: string;
-  parentKey?: string;
-}) => {
-  const exportFields = [];
-
-  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: newKey,
-      title: `${parentTitle ? parentTitle + "/" : ""}${valuesForField.string}`,
-      tooltip: valuesForField.help,
-      required: valuesForField.required,
-      isLeaf: !relationField,
-    });
-  }
-  return exportFields;
-};
-
-const getParentKey = (key: string) => {
-  if (key.indexOf("/") === -1) {
-    return key;
-  }
-  const items = key.split("/");
-  return items.slice(0, -1).join("/");
-};
-
-const getChildKey = (key: string) => {
-  if (key.indexOf("/") === -1) {
-    return key;
-  }
-  const items = key.split("/");
-  return items[items.length - 1];
-};

package/src/widgets/modals/FormModal.tsx

@@ -96,12 +96,12 @@ export const FormModal = (props: FormModalProps) => {
   }
 
   return (
-    <FormModalProvider setTitle={setFormTitle}>
+    (<FormModalProvider setTitle={setFormTitle}>
       <Modal
         title={isMenuAction ? header() : formTitle}
         centered
         width={modalWidth}
-        visible={visible}
+        open={visible}
         footer={null}
         destroyOnClose
         onCancel={onCancel}
@@ -115,6 +115,6 @@ export const FormModal = (props: FormModalProps) => {
           {...rest}
         />
       </Modal>
-    </FormModalProvider>
+    </FormModalProvider>)
   );
 };

package/src/widgets/modals/SearchModal.tsx

@@ -98,35 +98,33 @@ export const SearchModal = (props: SearchSelectionProps) => {
     );
   };
 
-  return (
-    <>
-      <Modal
-        title={t("search")}
-        centered
-        width={modalWidth}
-        visible={visible && !showCreateModal}
-        closable={true}
-        onCancel={onCloseModal}
-        footer={null}
-        destroyOnClose
-        maskClosable={false}
-      >
-        {content()}
-      </Modal>
-      <FormModal
-        model={model}
-        visible={showCreateModal}
-        parentContext={context}
-        onSubmitSucceed={(id?: number) => {
-          setShowCreateModal(false);
-          onCloseModal();
-          onSelectValues([id!]);
-        }}
-        onCancel={() => {
-          setShowCreateModal(false);
-          onCloseModal();
-        }}
-      />
-    </>
-  );
+  return (<>
+    <Modal
+      title={t("search")}
+      centered
+      width={modalWidth}
+      open={visible && !showCreateModal}
+      closable={true}
+      onCancel={onCloseModal}
+      footer={null}
+      destroyOnClose
+      maskClosable={false}
+    >
+      {content()}
+    </Modal>
+    <FormModal
+      model={model}
+      visible={showCreateModal}
+      parentContext={context}
+      onSubmitSucceed={(id?: number) => {
+        setShowCreateModal(false);
+        onCloseModal();
+        onSelectValues([id!]);
+      }}
+      onCancel={() => {
+        setShowCreateModal(false);
+        onCloseModal();
+      }}
+    />
+  </>);
 };

package/src/widgets/modals/TranslationModal.tsx

@@ -185,11 +185,11 @@ export const TranslationModal = (props: TranslationModalProps) => {
   }
 
   return (
-    <Modal
+    (<Modal
       title={t("translate")}
       centered
       width={modalWidth}
-      visible={visible}
+      open={visible}
       closable={true}
       onCancel={onCloseModal}
       footer={null}
@@ -197,6 +197,6 @@ export const TranslationModal = (props: TranslationModalProps) => {
       maskClosable={false}
     >
       {content()}
-    </Modal>
+    </Modal>)
   );
 };

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

@@ -105,13 +105,19 @@ function Dashboard(props: DashboardProps, ref: any) {
       })) as FormView
     ).fields;
 
-    return await readObjectValues({
-      treeFields: itemsFields.current,
-      formFields: itemsFields.current,
+    const [results] = await readObjectValues({
+      treeView: {
+        fields: itemsFields.current,
+      },
+      formView: {
+        fields: itemsFields.current,
+      },
       model,
       items,
       context,
+      currentView: "form",
     });
+    return results;
   }
 
   async function fetchValues(view: FormView) {
@@ -214,6 +220,7 @@ function Dashboard(props: DashboardProps, ref: any) {
   }
 
   if (error) {
+    console.log(error);
     return (
       <Alert className="mt-10 mb-20" message={error} type="error" banner />
     );
@@ -308,6 +315,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 +330,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/DashboardGrid/DashboardGridItem.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import { DashboardGridItemProps } from "./DashboardGridItem.types";
 import { ExportOutlined } from "@ant-design/icons";
-import { Row, Col } from "antd";
-import { Typography } from "antd";
+import { Row, Col, Typography, theme } from "antd";
+const { useToken } = theme;
 
 const { Text } = Typography;
 
 export const DashboardGridItem = (props: DashboardGridItemProps) => {
-  const { id, title, children, action, openAction } = props;
+  const { title, children, action, openAction } = props;
+  const { token } = useToken();
 
   return (
     <div
-      className={"shadow-md rounded"}
+      className={"shadow-md"}
       style={{
         height: "100%",
         display: "flex",
@@ -19,12 +20,15 @@ export const DashboardGridItem = (props: DashboardGridItemProps) => {
         overflow: "hidden",
         border: "1px solid #eee",
         backgroundColor: "white",
+        borderRadius: token.borderRadius,
       }}
     >
       <Row
-        className="bg-blueGray-100"
         align="middle"
-        style={{ borderBottom: "1px solid #ddd" }}
+        style={{
+          borderBottom: "1px solid #ddd",
+          backgroundColor: token.colorPrimaryBg,
+        }}
         wrap={false}
       >
         <Col