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

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,8 @@ import {
   ContentRootContextType,
 } from "@/context/ContentRootContext";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { convertToPlain2ManyValues } from "@/helpers/one2manyHelper";
+import { ErrorAlert } from "@/ui/ErrorAlert";
 
 export type FormProps = {
   model: string;
@@ -105,7 +108,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 +129,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 +141,8 @@ function Form(props: FormProps, ref: any) {
     setCurrentId = undefined,
     setFormIsLoading = undefined,
     setAttachments = undefined,
+    title = undefined,
+    setTitle = undefined,
   } = (rootForm ? actionViewContext : {}) || {};
 
   const contentRootContext = useContext(
@@ -342,6 +348,7 @@ function Form(props: FormProps, ref: any) {
       await antForm.validateFields();
       return false;
     } catch (verror) {
+      message.error(t("fillRequiredFields"));
       return true;
     }
   }
@@ -398,13 +405,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) {
@@ -428,11 +433,6 @@ function Form(props: FormProps, ref: any) {
     }
   };
 
-  function setOriginalValue(field: string, value: any) {
-    originalFormValues.current[field] = value;
-    setFormHasChanges?.(formHasChanges());
-  }
-
   const cancelUnsavedChanges = async () => {
     return new Promise(async (resolve) => {
       if (formHasChanges()) {
@@ -455,15 +455,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 +607,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);
@@ -635,11 +633,13 @@ function Form(props: FormProps, ref: any) {
 
       await fetchValues();
       submitSucceed = true;
+      message.success(t("savedRegisters"));
     } catch (err) {
       formSubmitting.current = false;
       setIsSubmitting(false);
       setFormIsSaving?.(false);
       onSubmitError?.(err);
+      message.error(t("errorWhileSavingForm"));
       setError(err?.message ? err.message : err);
     } finally {
       formSubmitting.current = false;
@@ -647,7 +647,7 @@ function Form(props: FormProps, ref: any) {
       setIsSubmitting(false);
     }
 
-    return submitSucceed;
+    return { succeed: submitSucceed, id: getCurrentId()! };
   };
 
   const parseForm = ({
@@ -663,13 +663,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 +702,7 @@ function Form(props: FormProps, ref: any) {
       if (
         checkFieldsType({
           changedFields,
-          fields,
+          formOoui: formOoui!,
           types: [
             "text",
             "codeeditor",
@@ -756,6 +763,7 @@ function Form(props: FormProps, ref: any) {
           ...formOoui?.context,
         },
       },
+      parentValues: getParentPlainValues?.(),
       onChangeFieldActionArgs: onChangeFieldAction.args,
     });
 
@@ -943,7 +951,9 @@ function Form(props: FormProps, ref: any) {
     }
 
     try {
-      await submitForm({ callOnSubmitSucceed: false });
+      if (formHasChanges() || getCurrentId() === undefined) {
+        await submitForm({ callOnSubmitSucceed: false });
+      }
 
       if (type === "object") {
         await runObjectButton({ action, context });
@@ -983,7 +993,6 @@ function Form(props: FormProps, ref: any) {
           getFieldValue={getFieldValue}
           executeButtonAction={executeButtonAction}
           getContext={getContext}
-          setOriginalValue={setOriginalValue}
           submitForm={submitForm}
           fetchValues={fetchValues}
           formHasChanges={formHasChanges}
@@ -1053,14 +1062,7 @@ function Form(props: FormProps, ref: any) {
     >
       {({ measureRef }) => (
         <div className="pb-2" ref={measureRef}>
-          {error && (
-            <Alert
-              className="mt-10 mb-20"
-              message={JSON.stringify(error)}
-              type="error"
-              banner
-            />
-          )}
+          {error && <ErrorAlert className="mt-10 mb-20" error={error} />}
           {content()}
           {showFooter && footer()}
         </div>

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

@@ -57,7 +57,12 @@ export const GraphChart = (props: GraphChartProps) => {
   return (
     <div style={{ padding: "1rem" }}>
       <p style={{ textAlign: "right" }}>
-        {`${t("totalRegisters")} ${evaluatedEntries?.length}`}
+        {`${t("totalRegisters")} ${evaluatedEntries?.length?.toLocaleString(
+          "es-ES",
+          {
+            useGrouping: true,
+          }
+        )}`}
       </p>
       <Chart
         {...getGraphProps({

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -1,13 +1,67 @@
+import dayjs from "dayjs";
+
+const formatter = (graphType: "pie" | "default" | "barGrouped") => {
+  return (object: any) => {
+    const formattedValue = object.value.toLocaleString("es-ES", {
+      useGrouping: true,
+    });
+    const name = graphType === "pie" ? object.x : object.type;
+    return { name, value: formattedValue };
+  };
+};
+
+const axisFormatter = (value: any) => {
+  if (typeof value === "string" && stringIsValidNumeric(value)) {
+    return parseFloat(value).toLocaleString("es-ES", {
+      useGrouping: true,
+    });
+  } else if (isNumber(value)) {
+    return value.toLocaleString("es-ES", {
+      useGrouping: true,
+    });
+  } else if (isValidDateString(value)) {
+    const dateType = getDateType(value);
+    if (dateType === null) {
+      return value;
+    }
+    return dayjs(value, (dateFormats.input as any)[dateType]).format(
+      (dateFormats.output as any)[dateType]
+    );
+  } else {
+    return value;
+  }
+};
+
+const stringIsValidNumeric = (value: string) => {
+  const regex = /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/;
+  return regex.test(value);
+};
+
+const isNumber = (value: any) => {
+  return typeof value === "number" && !isNaN(value);
+};
+
 const DefaultGraphOptions = {
   default: {
     padding: "auto",
     xAxis: {
       tickCount: 5,
+      label: {
+        formatter: axisFormatter,
+      },
+    },
+    yAxis: {
+      label: {
+        formatter: axisFormatter,
+      },
     },
     legend: {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("default"),
+    },
   },
   pie: {
     appendPadding: 10,
@@ -25,6 +79,9 @@ const DefaultGraphOptions = {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("pie"),
+    },
     interactions: [
       {
         type: "element-active",
@@ -37,6 +94,19 @@ const DefaultGraphOptions = {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("barGrouped"),
+    },
+    xAxis: {
+      label: {
+        formatter: axisFormatter,
+      },
+    },
+    yAxis: {
+      label: {
+        formatter: axisFormatter,
+      },
+    },
     label: {
       position: "middle",
       layout: [
@@ -54,4 +124,47 @@ const DefaultGraphOptions = {
   },
 };
 
+function isValidDateString(variable: any): boolean {
+  // Check if the variable is defined and is a string
+  if (typeof variable !== "string" || variable === undefined) {
+    return false;
+  }
+
+  // Check if the string is a valid date
+  const date = new Date(variable);
+  return date.toString() !== "Invalid Date";
+}
+
+const dateFormats = {
+  input: {
+    hours: "YYYY-MM-DD HH:mm",
+    days: "YYYY-MM-DD",
+    weeks: "YYYY-[W]WW",
+    months: "YYYY-MM",
+    years: "YYYY",
+  },
+  output: {
+    hours: "DD/MM/YYYY HH:mm",
+    days: "DD/MM/YYYY",
+    weeks: "[W]WW/YYYY",
+    months: "MM/YYYY",
+    years: "YYYY",
+  },
+};
+
+function getDateType(dateString: string): string | null {
+  for (const format in dateFormats.input) {
+    const isValidFormat = dayjs(
+      dateString,
+      (dateFormats.input as any)[format],
+      true
+    ).isValid();
+    if (isValidFormat) {
+      return format;
+    }
+  }
+
+  return null;
+}
+
 export default DefaultGraphOptions;

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

@@ -273,7 +273,11 @@ function CommonIndicator({
       ? minFontSize
       : height * fontGrowFactor;
 
-  let finalValue = total ? `${value}/${total}` : `${value}`;
+  const localeValue = value?.toLocaleString("es-ES", {
+    useGrouping: true,
+  });
+
+  let finalValue = total ? `${localeValue}/${total}` : `${localeValue}`;
 
   if (suffix) {
     finalValue += " " + suffix;
@@ -342,13 +346,23 @@ function PercentageIndicator({
       ? minFontSize
       : twoLinesHeight * fontGrowFactor;
 
-  let finalValue = total ? `${value}/${total}` : `${value}`;
+  const localeValue = value?.toLocaleString("es-ES", {
+    useGrouping: true,
+  });
+
+  let finalValue = total
+    ? `${localeValue}/${total?.toLocaleString("es-ES", {
+        useGrouping: true,
+      })}`
+    : `${localeValue}`;
 
   if (suffix) {
     finalValue += " " + suffix;
   }
 
-  const percentValue = `${percent}%`;
+  const percentValue = `${percent?.toLocaleString("es-ES", {
+    useGrouping: true,
+  })}%`;
 
   let tw = getTextWidth(
     percentValue,
@@ -382,10 +396,8 @@ function PercentageIndicator({
     >
       <Row align={"middle"}>
         {IconElement && (
-          <Col>
-            <IconElement
-              style={{ fontSize: fontSize * 1, color, paddingRight: "10px" }}
-            />
+          <Col style={{ fontSize: fontSize * 1, color, paddingRight: "10px" }}>
+            <IconElement />
           </Col>
         )}
         <Col>

package/src/widgets/views/SearchTree.tsx

@@ -295,6 +295,7 @@ function SearchTree(props: Props, ref: any) {
             formView.search_fields,
             treeView.search_fields,
           ])}
+          formXml={formView.arch}
           onClear={clear}
           limit={limit}
           offset={offset}
@@ -307,6 +308,7 @@ function SearchTree(props: Props, ref: any) {
           searchValues={searchValues}
         />
         <Tree
+          context={parentContext}
           total={totalItems}
           limit={limit}
           page={page}
@@ -327,6 +329,7 @@ function SearchTree(props: Props, ref: any) {
             treeView.isExpandable ? fetchChildrenForRecord : undefined
           }
           childField={treeView.field_parent}
+          rootTree={rootTree}
         />
       </>
     );

package/src/widgets/views/Tree.tsx

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
+import { Pagination, Checkbox, Space, Row, Col, Spin, Tag } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
 import { TreeView, Column } from "@/types";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { Many2oneSuffix } from "../base/many2one/Many2oneSuffix";
 import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
 import { parseFloatToString } from "@/helpers/timeHelper";
 import { ProgressBarInput } from "../base/ProgressBar";
@@ -16,6 +15,15 @@ import {
   LoadingOutlined,
 } from "@ant-design/icons";
 import { One2manyValue } from "../base/one2many/One2manyInput";
+import { Interweave } from "interweave";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import { Many2oneTree } from "../base/many2one/Many2oneTree";
+import { ReferenceTree } from "../base/ReferenceTree";
+import dayjs from "dayjs";
+import { DatePickerConfig } from "@/common/DatePicker";
 
 type Props = {
   total?: number;
@@ -34,6 +42,8 @@ type Props = {
   sorter?: any;
   onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
   childField?: string;
+  rootTree?: boolean;
+  context?: any;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -51,18 +61,30 @@ const booleanComponentFn = (value: boolean): React.ReactElement => {
 };
 
 const many2OneComponentFn = (m2oField: any): React.ReactElement => {
-  if (!m2oField) {
-    return <></>;
-  }
-  return (
-    <Space>
-      <>{m2oField.value}</>
-      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
-    </Space>
-  );
+  return <Many2oneTree m2oField={m2oField} />;
 };
+
 const textComponentFn = (value: any): React.ReactElement => {
-  return <div style={{ whiteSpace: "pre-line" }}>{value}</div>;
+  return <Interweave content={value?.replace(/(?:\r\n|\r|\n)/g, "<br>")} />;
+};
+
+const dateComponentFn = (value: any): React.ReactElement => {
+  if (!value || (value && value.length === 0)) return <></>;
+
+  const formattedValue = dayjs(
+    value,
+    DatePickerConfig.date.dateInternalFormat
+  ).format(DatePickerConfig.date.dateDisplayFormat);
+  return <>{formattedValue}</>;
+};
+
+const dateTimeComponentFn = (value: any): React.ReactElement => {
+  if (!value || (value && value.length === 0)) return <></>;
+  const formattedValue = dayjs(
+    value,
+    DatePickerConfig.time.dateInternalFormat
+  ).format(DatePickerConfig.time.dateDisplayFormat);
+  return <>{formattedValue}</>;
 };
 
 const one2ManyComponentFn = (value: One2manyValue): React.ReactElement => {
@@ -91,6 +113,47 @@ const imageComponent = (value: string): React.ReactElement => {
   );
 };
 
+const TagComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      {value ? <Tag color={ooui.colors[value]}>{ooui.selectionValues.get(value)}</Tag> : null}
+    </>
+  );
+};
+
+const SelectionComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>{ooui.selectionValues.get(value)}</>
+  );
+};
+
+const referenceComponent = (
+  value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      <ReferenceTree
+        value={value}
+        selectionValues={ooui.selectionValues}
+        context={context}
+      />
+    </>
+  );
+};
+
 function Tree(props: Props): React.ReactElement {
   const {
     page = 1,
@@ -109,6 +172,8 @@ function Tree(props: Props): React.ReactElement {
     sorter,
     onFetchChildrenForRecord,
     childField,
+    rootTree = false,
+    context,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -121,23 +186,42 @@ function Tree(props: Props): React.ReactElement {
   const { t } = useContext(LocaleContext) as LocaleContextType;
   const internalLimit = useRef(limit);
 
+  const actionViewContext = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { title = undefined, setTitle = undefined } =
+    (rootTree ? actionViewContext : {}) || {};
+
   useEffect(() => {
     treeOoui.current = getTree(treeView);
 
-    const columns = getTableColumns(treeOoui.current, {
-      boolean: booleanComponentFn,
-      many2one: many2OneComponentFn,
-      text: textComponentFn,
-      one2many: one2ManyComponentFn,
-      many2many: one2ManyComponentFn,
-      progressbar: progressBarComponentFn,
-      float_time: floatTimeComponent,
-      image: imageComponent,
-      integer: numberComponent,
-      float: numberComponent,
-    });
+    const columns = getTableColumns(
+      treeOoui.current,
+      {
+        boolean: booleanComponentFn,
+        many2one: many2OneComponentFn,
+        text: textComponentFn,
+        one2many: one2ManyComponentFn,
+        many2many: one2ManyComponentFn,
+        progressbar: progressBarComponentFn,
+        float_time: floatTimeComponent,
+        image: imageComponent,
+        integer: numberComponent,
+        float: numberComponent,
+        reference: referenceComponent,
+        tag: TagComponent,
+        selection: SelectionComponent,
+        date: dateComponentFn,
+        datetime: dateTimeComponentFn,
+      },
+      context
+    );
 
     setColumns(columns);
+
+    if (treeOoui.current.string && title !== treeOoui.current.string) {
+      setTitle?.(treeOoui.current.string);
+    }
   }, [treeView]);
 
   useEffect(() => {
@@ -171,7 +255,9 @@ function Tree(props: Props): React.ReactElement {
         <Col span={12}>
           <Pagination
             total={total}
-            pageSize={internalLimit.current}
+            pageSize={
+              internalLimit.current === 0 ? total : internalLimit.current
+            }
             current={page}
             showSizeChanger={false}
             onChange={onRequestPageChange}
@@ -216,7 +302,7 @@ function Tree(props: Props): React.ReactElement {
     });
 
     return (
-      <div className="p-1 pb-0 pl-2 mt-2 bg-gray-50">{summary.join(", ")}</div>
+      <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>
     );
   }