@gisce/react-ooui 1.2.0-rc.9 → 1.2.0-rc.91

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

@@ -11,6 +11,8 @@ import {
   ApiOutlined,
 } from "@ant-design/icons";
 import { ViewType } from "@/types";
+import { theme } from "antd";
+const { useToken } = theme;
 
 type One2manyTopBarProps = {
   title: string;
@@ -49,6 +51,7 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
     showCreateButton,
     showToggleButton,
   } = props;
+  const { token } = useToken();
 
   function separator() {
     return <div className="inline-block w-3" />;
@@ -56,7 +59,13 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
 
   function title() {
     return (
-      <div className="flex flex-grow h-8 text-gray-200 bg-gray-700">
+      <div
+        className="flex flex-grow h-8 text-white"
+        style={{
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorPrimaryActive,
+        }}
+      >
         <div className="flex flex-col items-center justify-center h-full">
           <span className="pl-2 font-bold">{titleString}</span>
         </div>

package/src/widgets/containers/Group.tsx

@@ -1,7 +1,9 @@
 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";
+import { Space } from "antd";
+import iconMapper from "@/helpers/iconMapper";
 
 type Props = {
   ooui: GroupOoui;
@@ -11,16 +13,17 @@ type Props = {
 
 function Group(props: Props): React.ReactElement {
   const { ooui, showLabel = true, responsiveBehaviour } = props;
+  const icon: React.ElementType | undefined = iconMapper(ooui.icon || "");
 
   return (
     <>
-      {ooui.label && showLabel ? (
-        <Fieldset label={ooui.label}>
+      {(ooui.label || icon) && showLabel ? (
+        <FieldSet label={ooui.label} icon={icon}>
           <Container
             container={ooui!.container}
             responsiveBehaviour={responsiveBehaviour}
           />
-        </Fieldset>
+        </FieldSet>
       ) : (
         <Container
           container={ooui!.container}

package/src/widgets/custom/Avatar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {WidgetProps} from "@/types";
+import { Avatar as AntdAvatar, Tooltip } from "antd";
+import { Avatar as AvatarOoui} from "@gisce/ooui";
+import { colorFromString } from "@/helpers/formHelper";
+
+type AvatarProps = WidgetProps & {
+  ooui: AvatarOoui
+  value?: any;
+};
+
+const Avatar = (props: AvatarProps): React.ReactElement | null => {
+  console.log("Avatar Props", props);
+  const {ooui, value} = props;
+  if (!value) {
+    return null;
+  }
+  let formattedValue = value;
+  if (ooui.selectionValues.size) {
+    formattedValue = ooui.selectionValues.get(value);
+  } else if (Array.isArray(value)) {
+    formattedValue = value[1];
+  }
+  const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
+  const backgroundColor = colorFromString(formattedValue);
+  return (
+    <Tooltip title={formattedValue}>
+      <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
+    </Tooltip>
+  );
+}
+
+export default Avatar;

package/src/widgets/custom/ButtonGroup.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useState } from "react";
 import Field from "@/common/Field";
 import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
+import { Button } from "@/widgets/base/Button";
 import {
   ButtonGroup as ButtonGroupOoui,
   Button as ButtonOoui,
@@ -20,6 +21,8 @@ type ButtonGroupProps = {
 
 type ItemsProps = {
   ooui: ButtonOoui[];
+  executeButtonAction: any,
+  lang: string
 };
 
 export const ButtonGroup = (props: ButtonGroupProps) => {
@@ -73,27 +76,37 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
 
     onClick_confirm();
   }
-
-  return (
-    <Field ooui={new FieldOoui({ ...{ ooui } })}>
-      <Dropdown.Button
-        disabled={!activated || readOnly}
-        onClick={onClick}
-        icon={<DownOutlined />}
-        type={primary ? "primary" : undefined}
-        //danger={danger ? true : undefined} This works but typescript
-        // doesn't accept
-        overlay={<Items ooui={secondaryButtons} />}
-      >
-        {getButtonIcon()}
-        {caption}
-      </Dropdown.Button>
-    </Field>
-  );
+  if (ooui.buttons.length === 0) {
+    return null;
+  } else if (ooui.buttons.length > 1) {
+    return (
+      <Field ooui={new FieldOoui({ ...{ ooui } })}>
+        <Dropdown.Button
+          disabled={!activated || readOnly}
+          onClick={onClick}
+          icon={<DownOutlined />}
+          type={primary ? "primary" : undefined}
+          //danger={danger ? true : undefined} This works but typescript
+          // doesn't accept
+          overlay={<Items ooui={secondaryButtons} executeButtonAction={executeButtonAction} lang={lang} /> }
+        >
+          {getButtonIcon()}
+          {caption}
+        </Dropdown.Button>
+      </Field>
+    );
+  }  else if (defaultButton) {
+    return (
+      <Button ooui={defaultButton} />
+    )
+  }
 };
 
 const Items = (props: ItemsProps) => {
-  const { ooui } = props;
+  const { ooui, executeButtonAction, lang } = props;
+  if (!ooui) {
+    return null;
+  }
   const items = ooui.map((button) => {
     const {
       id,
@@ -106,10 +119,7 @@ const Items = (props: ItemsProps) => {
       readOnly,
       danger,
     } = button;
-    const formContext = useContext(FormContext) as FormContextType;
-    const { executeButtonAction } = formContext || {};
     const [isRunning, setIsRunning] = useState<boolean>(false);
-    const { lang } = useContext(LocaleContext) as LocaleContextType;
 
     async function onClick_confirm() {
       setIsRunning(true);

package/src/widgets/custom/FiberGrid.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import Field from "@/common/Field";
 import { Char as CharOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
-import { GridUi } from "fiber-diagram";
+import { GridUi } from "@gisce/fiber-diagram";
 
 export const FiberGrid = (props: WidgetProps) => {
   const { ooui } = props;
-  const { id, readOnly, required } = ooui as CharOoui;
-  // const requiredClass =
-  //   required && !readOnly ? Config.requiredClass : undefined;
+  const { required } = ooui as CharOoui;
 
   return (
     <Field required={required} {...props}>

package/src/widgets/custom/Indicator.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { Tooltip } from "antd";
+import { Tooltip, theme } from "antd";
 import { Statistic, Card } from "antd";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Field from "@/common/Field";
-import {QuestionCircleOutlined} from "@ant-design/icons";
+import { QuestionCircleOutlined } from "@ant-design/icons";
 import iconMapper from "@/helpers/iconMapper";
+const { useToken } = theme;
 
 type IndicatorProps = WidgetProps & {
-  ooui: IndicatorOoui
+  ooui: IndicatorOoui;
   value?: number;
 };
 
@@ -25,18 +26,22 @@ export const Indicator = (props: IndicatorProps) => {
 type IndicatorInputProps = {
   ooui: IndicatorOoui;
   value?: any;
-}
+};
 
 const IndicatorInput = (props: IndicatorInputProps) => {
+  const { token } = useToken();
   const { ooui, value } = props;
   const title = (
     <>
       <span>{ooui.label} </span>
-      {ooui.tooltip &&
+      {ooui.tooltip && (
         <Tooltip title={ooui.tooltip}>
-          <QuestionCircleOutlined className="pr-1 text-xs text-blue-400"/>
+          <QuestionCircleOutlined
+            className="pr-1 text-xs"
+            style={{ color: token.colorPrimaryBg }}
+          />
         </Tooltip>
-      }
+      )}
     </>
   );
   const Icon: React.ElementType = iconMapper(ooui.icon) as any;
@@ -49,18 +54,14 @@ const IndicatorInput = (props: IndicatorInputProps) => {
   const field = (
     <Statistic
       title={title}
-      prefix={Icon && <Icon/>}
+      prefix={Icon && <Icon />}
       suffix={ooui.suffix}
       value={formattedValue}
     />
-  )
+  );
   if (ooui.card) {
-    return (
-      <Card>
-        {field}
-      </Card>
-    );
+    return <Card>{field}</Card>;
   } else {
     return field;
   }
-}
+};

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];
-};