@gisce/react-ooui 2.0.0-rc.0 → 2.0.0-rc.11

package/src/views/actionViews/GraphActionView.tsx

@@ -113,7 +113,6 @@ export const GraphActionView = (props: GraphActionViewProps) => {
           formView.search_fields,
           treeView.search_fields,
         ])}
-        formXml={formView.arch}
         limit={limit!}
         onClear={clear}
         offset={offset}

package/src/widgets/WidgetFactory.tsx

@@ -33,6 +33,7 @@ import {
   Steps,
   Tag,
   CodeEditor,
+  CommentsTimelineField,
 } from "@/index";
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
@@ -118,6 +119,8 @@ const getWidgetType = (type: string) => {
       return Steps;
     case "codeeditor":
       return CodeEditor;
+    case "comments_timeline":
+      return CommentsTimelineField;
     default:
       return undefined;
   }

package/src/widgets/base/Integer.tsx

@@ -27,7 +27,20 @@ export const Integer = (props: IntegerProps) => {
         className={"w-full "}
         disabled={readOnly}
         formatter={(value) => {
-          return `${value}`.replace(/[^0-9\-]+/g, "");
+          // Check if value is not undefined and is a valid number
+          if (value === undefined) {
+            return "";
+          }
+
+          if (typeof value === "string" && !isNaN(parseFloat(value))) {
+            let truncatedValue = Math.trunc(parseFloat(value));
+            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
+          } else if (typeof value === "number") {
+            let truncatedValue = Math.trunc(value);
+            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
+          }
+
+          return "";
         }}
         onChange={(newValue: any) => {
           const newNumber = newValue as number;

package/src/widgets/base/many2one/Many2oneSuffix.tsx

@@ -20,6 +20,7 @@ import ConnectionProvider from "@/ConnectionProvider";
 import { processValues } from "@/helpers/formHelper";
 import showErrorDialog from "@/ui/ActionErrorDialog";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { parseContextFields, parseDomainFields } from "@gisce/ooui";
 
 type Props = {
   id: number;
@@ -60,18 +61,29 @@ export const Many2oneSuffix = (props: Props) => {
         context,
       }) as FormView;
       setFormView(formView);
-      const { fields, arch } = formView;
-
-      const values = (
-        await ConnectionProvider.getHandler().readObjects({
-          model,
-          ids: [id],
-          fields,
-          context,
-        })
-      )[0];
-
-      setTargetValues({ ...processValues(values, fields), active_id: id });
+      let fields: string[] = [];
+      const { toolbar } = formView;
+      toolbar.action?.filter((item: any) => item.hasOwnProperty('context')).map((item: any) => fields.push(...parseContextFields(item.context)));
+      toolbar.action?.filter((item: any) => item.hasOwnProperty('domain')).map((item: any) => fields.push(...parseDomainFields(item.domain)));
+      toolbar.relate?.filter((item: any) => item.hasOwnProperty('context')).map((item: any) => fields.push(...parseContextFields(item.context)));
+      toolbar.relate?.filter((item: any) => item.hasOwnProperty('domain')).map((item: any) => fields.push(...parseDomainFields(item.domain)));
+      toolbar.print?.filter((item: any) => item.hasOwnProperty('context')).map((item: any) => fields.push(...parseContextFields(item.context)));
+      fields = fields.filter((i) => Object.keys(formView.fields).indexOf(i) > -1)
+
+      let values = {}
+
+      if (fields.length > 0) {
+        values = (
+          await ConnectionProvider.getHandler().readObjects({
+            model,
+            ids: [id],
+            fieldsToRetrieve: fields,
+            context,
+          })
+        )[0];
+      }
+      values = { ...processValues(values, fields), active_id: id };
+      setTargetValues(values);
 
       setIsLoading(false);
     } catch (err) {

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

@@ -437,11 +437,19 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const onFormModalSubmitSucceed = (
     id: number | undefined,
     _: any,
-    values: any
+    values: any,
+    x2manyPendingLink: boolean = false
   ) => {
     let updatedItems: One2manyItem[];
 
-    if (id) {
+    if (x2manyPendingLink) {
+      updatedItems = items.concat({
+        id,
+        operation: "pendingLink",
+        values: { ...values, id },
+        treeValues: { ...values, id },
+      });
+    } else if (id) {
       updatedItems = items.map((item: One2manyItem) => {
         if (item.id === id) {
           return {
@@ -683,7 +691,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         formView={views.get("form")}
         model={relation}
         id={modalItem?.id}
-        submitMode={"values"}
+        submitMode={"2many"}
         values={modalItem?.values}
         defaultValues={modalItem?.defaultValues}
         visible={showFormModal}

package/src/widgets/custom/Avatar.tsx

@@ -10,7 +10,6 @@ type AvatarProps = WidgetProps & {
 };
 
 const Avatar = (props: AvatarProps): React.ReactElement | null => {
-  console.log("Avatar Props", props);
   const {ooui, value} = props;
   if (!value) {
     return null;

package/src/widgets/custom/Comments.tsx

@@ -0,0 +1,144 @@
+import React, {useContext} from "react";
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import {Card, Space, Typography, Avatar, Tag, Timeline, TimelineItemProps} from "antd"
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+const { Meta } = Card;
+const { Text} = Typography;
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import md5 from "md5";
+
+
+dayjs.extend(relativeTime);
+
+type GravatarProps = {
+  email: string,
+  size?: number,
+  theme: string,
+}
+
+type CommentDataType = {
+  id: number,
+  isSender: boolean,
+  isAuthor: boolean,
+  text: string,
+  email: string,
+  date: string,
+  author: string,
+}
+
+type CommentProps = {
+  data: CommentDataType,
+  style?: any,
+}
+
+type CommentsTypeProps = {
+  data: CommentDataType[],
+}
+
+type CommentsTimelineProps = {
+  value?: EventsType[],
+}
+
+
+type EventActionType = {
+  date: string,
+  action: string,
+}
+
+export type EventsType = {
+  type: "action" | "comment",
+  event: EventActionType | CommentDataType
+
+}
+
+const Gravatar = ({ email, size = 40, theme = '' } : GravatarProps) => {
+  // Genera el enlace de Gravatar utilizando el email
+  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${theme}`;
+
+  return (
+    <Avatar src={gravatarUrl} size={size} />
+  );
+};
+
+
+function TextWithNewlines({ text }:{text: string}) {
+  const textParts = text.split('\n');
+
+  return (
+    <div>
+      {textParts.map((part, index) => (
+        <React.Fragment key={index}>
+          {part}
+          {index !== textParts.length - 1 && <br />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export const Comment = (props: CommentProps) => {
+  const {data, style} = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  return (
+    <Card key={data.id} style={{...style, ...{textAlign: 'start'}}}>
+      <Meta avatar={<Gravatar email={data.email} theme='mp'/>}
+            title={data.author}
+            description={(
+              <Space direction="horizontal">
+                <span title={data.date}>{dayjs(data.date).fromNow()}</span>
+                {data.isAuthor && <Tag color="blue">{t('author')}</Tag>}
+              </Space>
+            )} style={{marginBottom: '5px'}}/>
+      <Text>
+        <TextWithNewlines text={data.text} />
+      </Text>
+    </Card>
+  )
+}
+
+export const Comments = (props: CommentsTypeProps) => {
+  const { data = [] } = props;
+  const comments = data.map((c) => {
+      const style = {float: c.isSender ? 'right' : 'left', width: '60%'};
+      return <Comment data={c} style={style}/>
+    });
+  return (
+    <div>
+      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+        {comments}
+      </Space>
+    </div>
+  )
+}
+
+
+export const CommentsTimeline = (props: CommentsTimelineProps) => {
+  const { value } = props;
+  const items = (value || []).map(i => {
+    if (i.type === 'action') {
+      return {
+        children: `${i.event.date} - ${(i.event as EventActionType).action}`
+      }
+    } else if (i.type === "comment") {
+      return {
+        color: 'gray',
+        position: (i.event as CommentDataType).isSender ? 'left' : 'right',
+        label: i.event.date,
+        children: <Comment data={i.event as CommentDataType} />,
+      }
+    }
+  })
+  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />
+}
+
+export const CommentsTimelineField = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <CommentsTimeline />
+    </Field>
+  );
+}

package/src/widgets/views/Form.tsx

@@ -67,8 +67,13 @@ export type FormProps = {
   showFooter?: boolean;
   getDataFromAction?: boolean;
   mustClearAfterSave?: boolean;
-  submitMode?: "api" | "values";
-  onSubmitSucceed?: (id?: number, values?: any, formValues?: any) => void;
+  submitMode?: "api" | "values" | "2many";
+  onSubmitSucceed?: (
+    id?: number,
+    values?: any,
+    formValues?: any,
+    x2manyPendingLink?: boolean
+  ) => void;
   onSubmitError?: (error: any) => void;
   onCancel?: () => void;
   onFieldsChange?: (values: any) => void;
@@ -127,6 +132,7 @@ function Form(props: FormProps, ref: any) {
   const lastAssignedValues = useRef<any>({});
   const warningIsShown = useRef<boolean>(false);
   const formSubmitting = useRef<boolean>(false);
+  const x2manyPendingLink = useRef<boolean>(false);
 
   const widthToEvaluate =
     parentWidth !== undefined ? parentWidth : containerWidth;
@@ -203,10 +209,15 @@ function Form(props: FormProps, ref: any) {
     }
   }, [defaultGetCalled]);
 
-  const onSubmitSucceed = (id?: number, values?: any, formValues?: any) => {
+  const onSubmitSucceed = (
+    id?: number,
+    values?: any,
+    formValues?: any,
+    x2manyPendingLink?: boolean
+  ) => {
     setFormHasChanges?.(false);
     setFormIsSaving?.(false);
-    propsOnSubmitSucceed?.(id, values, formValues);
+    propsOnSubmitSucceed?.(id, values, formValues, x2manyPendingLink);
     setCurrentId?.(id);
   };
 
@@ -294,6 +305,15 @@ function Form(props: FormProps, ref: any) {
     return { ...parentContext, ...formOoui?.context };
   }
 
+  function getActiveIdsContext() {
+    const currentId = getCurrentId()!;
+
+    if (!currentId) {
+      return {};
+    }
+    return { active_id: getCurrentId()!, active_ids: [getCurrentId()!] };
+  }
+
   function getAdditionalValues() {
     return {
       id: getCurrentId()!,
@@ -608,6 +628,32 @@ function Form(props: FormProps, ref: any) {
     formSubmitting.current = true;
 
     setError(undefined);
+
+    if (
+      x2manyPendingLink.current &&
+      !formHasChanges() &&
+      getCurrentId()! &&
+      callOnSubmitSucceed
+    ) {
+      formSubmitting.current = false;
+      setFormHasChanges?.(false);
+      onSubmitSucceed?.(
+        getCurrentId(),
+        getValues(),
+        getFormValues(),
+        x2manyPendingLink.current
+      );
+      x2manyPendingLink.current = false;
+      const currentId = getCurrentId()!;
+
+      if (mustClearAfterSave) {
+        createdId.current = undefined;
+        assignNewValuesToForm({ values: {}, fields, reset: true });
+      }
+
+      return { succeed: true, id: currentId };
+    }
+
     if (!formHasChanges() && getCurrentId()! && callOnSubmitSucceed) {
       formSubmitting.current = false;
       setFormHasChanges?.(false);
@@ -659,15 +705,17 @@ function Form(props: FormProps, ref: any) {
     fields,
     arch,
     values,
+    operationInProgress = false,
   }: {
     arch: string;
     fields: any;
     values: any;
+    operationInProgress?: boolean;
   }) => {
     const ooui = new FormOoui(fields);
     // 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,
+      readOnly: readOnly || operationInProgress,
       values: convertToPlain2ManyValues(
         {
           ...values,
@@ -833,9 +881,9 @@ function Form(props: FormProps, ref: any) {
       action,
       payload: [getCurrentId()!],
       context: {
-        ...context,
         ...formOoui?.context,
         ...parentContext,
+        ...context,
       },
     });
 
@@ -934,6 +982,15 @@ function Form(props: FormProps, ref: any) {
     checkFieldsChanges({ elementHasLostFocus: true });
   }
 
+  function updateOperationInProgress(value: boolean) {
+    parseForm({
+      fields,
+      arch: arch!,
+      values: getCurrentValues(fields),
+      operationInProgress: value,
+    });
+  }
+
   async function executeButtonAction({
     type,
     action,
@@ -955,19 +1012,36 @@ function Form(props: FormProps, ref: any) {
       return;
     }
 
+    let mustBlockButtons = false;
+
     try {
       if (formHasChanges() || getCurrentId() === undefined) {
-        await submitForm({ callOnSubmitSucceed: false });
+        mustBlockButtons = true;
+        updateOperationInProgress(true);
+        if (submitMode === "2many") {
+          await submitApi({ callOnSubmitSucceed: false });
+          x2manyPendingLink.current = true;
+        } else {
+          await submitForm({ callOnSubmitSucceed: false });
+        }
       }
 
+      const additionalContext = x2manyPendingLink.current
+        ? getActiveIdsContext()
+        : {};
+
+      const updatedContext = { ...context, ...additionalContext };
+
       if (type === "object") {
-        await runObjectButton({ action, context });
+        await runObjectButton({ action, context: updatedContext });
       } else if (type === "workflow") {
         await runWorkflowButton({ action });
       } else if (type === "action") {
-        await runActionButton({ action, context });
+        await runActionButton({ action, context: updatedContext });
       }
+      mustBlockButtons && updateOperationInProgress(false);
     } catch (err) {
+      mustBlockButtons && updateOperationInProgress(false);
       showErrorDialog(err);
     }
   }

package/src/widgets/views/Graph/GraphIndicator.tsx

@@ -297,7 +297,7 @@ function CommonIndicator({
     fontSize = maxFontSize;
   }
 
-  const IconElement: any = icon && iconMapper(icon);
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize: fontSize * 0.7}});
 
   return (
     <div
@@ -373,13 +373,13 @@ function PercentageIndicator({
     tw = tw * 1.5;
   }
 
-  const IconElement: any = icon && iconMapper(icon);
-
   if (tw >= width * 0.85 || fontSize * 2 < twoLinesHeight) {
     const maxFontSize = ((width * 0.85) / tw) * fontSize;
     fontSize = maxFontSize;
   }
 
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize}});
+
   return (
     <div
       ref={measureRef}

package/src/widgets/views/SearchTree.tsx

@@ -125,10 +125,11 @@ function SearchTree(props: Props, ref: any) {
     colorsForResults,
     statusForResults,
     totalItems,
+    getAllIds,
   } = useSearch({
     model: currentModel!,
     setSearchTreeNameSearch,
-    setSelectedRowItems,
+    setSelectedRowItems: changeSelectedRowKeys,
     setSearchParams,
     setSearchValues,
     searchParams,
@@ -182,9 +183,9 @@ function SearchTree(props: Props, ref: any) {
       setInitialFetchDone(true);
     } catch (error) {
       setInitialError(error);
+      setTreeIsLoading?.(false);
     } finally {
       setIsLoading(false);
-      setTreeIsLoading?.(false);
     }
   };
 
@@ -269,13 +270,16 @@ function SearchTree(props: Props, ref: any) {
   };
 
   function changeSelectedRowKeys(selectedRowKeys: any[]) {
-    const selectedRowItems = getResults().filter((entry: any) =>
-      selectedRowKeys.includes(entry.id)
-    );
-    setSelectedRowItems?.(selectedRowItems);
+    setSelectedRowItems?.(selectedRowKeys.map((id: number) => ({ id })));
     onChangeSelectedRowKeys?.(selectedRowKeys);
   }
 
+  async function selectAllRecords() {
+    const allIds = await getAllIds();
+    setSelectedRowItems?.(allIds.map((id: number) => ({ id })));
+    onChangeSelectedRowKeys?.(allIds);
+  }
+
   function calculateTableHeight() {
     if (treeView?.isExpandable) {
       return height - 160;
@@ -291,12 +295,11 @@ function SearchTree(props: Props, ref: any) {
     return (
       <>
         <SearchFilter
-          fields={{ ...treeView.fields, ...formView.fields }}
+          fields={{ ...formView.fields, ...treeView.fields }}
           searchFields={mergeSearchFields([
             formView.search_fields,
             treeView.search_fields,
           ])}
-          formXml={formView.arch}
           onClear={clear}
           limit={limit}
           offset={offset}
@@ -332,6 +335,7 @@ function SearchTree(props: Props, ref: any) {
           }
           childField={treeView.field_parent}
           rootTree={rootTree}
+          onSelectAllRecords={selectAllRecords}
         />
       </>
     );