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

package/src/widgets/base/Reference.tsx

@@ -49,6 +49,8 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
 
   useEffect(() => {
     if (!value) {
+      setSelectionValue(undefined);
+      setMany2oneValue([]);
       return;
     }
 
@@ -73,8 +75,16 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           }
           onChange={(changedValue: string) => {
             setSelectionValue(changedValue);
-            setMany2oneValue([]);
-            onChange?.(undefined);
+            let m2oValue = many2oneValue[0] || 0;
+            if (changedValue !== selectionValue) {
+              setMany2oneValue([]);
+              m2oValue = 0;
+            }
+            const referenceValue = `${changedValue},${m2oValue}`;
+            if (referenceValue === value) {
+              return;
+            }
+            onChange?.(referenceValue);
           }}
           value={selectionValue}
         />
@@ -92,7 +102,7 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           value={many2oneValue}
           onChange={(changedValue: any[]) => {
             setMany2oneValue(changedValue);
-            const referenceValue = `${selectionValue},${changedValue[0]}`;
+            const referenceValue = `${selectionValue},${changedValue[0] || 0}`;
             if (referenceValue === value) {
               return;
             }

package/src/widgets/base/ReferenceTree.tsx

@@ -0,0 +1,62 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { Space } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
+import { LoadingOutlined } from "@ant-design/icons";
+
+export type ReferenceTreeProps = {
+  value: string;
+  context?: any;
+  selectionValues?: any;
+};
+
+export const ReferenceTree = (
+  props: ReferenceTreeProps
+): React.ReactElement => {
+  const { value, context, selectionValues } = props;
+  const [name, setName] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const [model, id] = value ? value.split(",") : [];
+  const intId = parseInt(id);
+
+  const fetchName = useCallback(async () => {
+    if (!value) {
+      return;
+    }
+    if (value && name) {
+      return;
+    }
+    setLoading(true);
+    const nameResponse = await ConnectionProvider.getHandler().execute({
+      action: "name_get",
+      payload: [intId],
+      model,
+      context,
+    });
+    setName(nameResponse[0][1]);
+    setLoading(false);
+  }, [value, name]);
+
+  useEffect(() => {
+    fetchName();
+  }, [value]);
+
+  if (!value && !loading) {
+    return <></>;
+  }
+
+  if (loading) {
+    return <LoadingOutlined />;
+  }
+
+  const selectionDescription = selectionValues.get(model);
+
+  return (
+    <Space>
+      <>{`${selectionDescription}:`}</>
+      <>{name}</>
+      <Many2oneSuffix id={intId} model={model} />
+    </Space>
+  );
+};

package/src/widgets/base/Selection.tsx

@@ -5,7 +5,11 @@ import styled from "styled-components";
 import Field from "@/common/Field";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 const { Option } = Select;
 
@@ -56,6 +60,6 @@ export const SelectionInput = (props: SelectionInputProps) => {
 
 const RequiredSelect = styled(Select)`
   &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

package/src/widgets/base/Separator.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Divider } from "antd";
+import { Divider, Space } from "antd";
 import { Separator as SeparatorOoui } from "@gisce/ooui";
+import iconMapper from "@/helpers/iconMapper";
 
 type Props = {
   ooui: SeparatorOoui;
@@ -8,11 +9,18 @@ type Props = {
 
 export const Separator = (props: Props) => {
   const { ooui } = props;
-  const { label } = ooui;
+  const { label, icon } = ooui;
+  const Icon : React.ElementType | undefined = iconMapper(icon || "");
+
 
   return (
     <Divider orientation="left" className="text-sm">
-      {label}
+      { (Icon || label) &&
+        <Space>
+          {Icon ? <Icon /> : null}
+          {label}
+        </Space>
+      }
     </Divider>
   );
 };

package/src/widgets/base/Text.tsx

@@ -1,7 +1,6 @@
-import React, { useContext, useState } from "react";
-import { Input, Row } from "antd";
+import React, { CSSProperties, useContext, useState } from "react";
+import { Input, Row, theme } from "antd";
 import Field from "@/common/Field";
-import Config from "@/Config";
 import { Text as TextOoui } from "@gisce/ooui";
 import { TranslationModal } from "../modals/TranslationModal";
 import { FormContext, FormContextType } from "@/context/FormContext";
@@ -9,6 +8,7 @@ import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { TranslationOutlined } from "@ant-design/icons";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import showInfo from "@/ui/InfoDialog";
+const { useToken } = theme;
 
 const { TextArea } = Input;
 
@@ -19,8 +19,11 @@ type Props = {
 const Text = (props: Props) => {
   const { ooui } = props;
   const { id, readOnly, required, height, translatable } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -29,14 +32,13 @@ const Text = (props: Props) => {
       {translatable ? (
         <TranslatableText
           field={id}
-          requiredClass={requiredClass}
           height={height}
+          requiredStyle={requiredStyle}
         />
       ) : (
         <TextArea
           disabled={readOnly || translatable}
-          className={requiredClass}
-          style={{ height: height ? height + "px" : "100%" }}
+          style={{ height: height ? height + "px" : "100%", ...requiredStyle }}
           rows={4}
           onBlur={elementHasLostFocus}
         />
@@ -48,13 +50,13 @@ const Text = (props: Props) => {
 const TranslatableText = ({
   value,
   field,
-  requiredClass,
+  requiredStyle,
   onChange,
   height,
 }: {
   value?: string;
   field: string;
-  requiredClass: string | undefined;
+  requiredStyle: CSSProperties | undefined;
   height: number | undefined;
   onChange?: (value: string) => void;
 }) => {
@@ -80,9 +82,9 @@ const TranslatableText = ({
             }}
             style={{
               height: height ? height + "px" : "100%",
+              ...requiredStyle
             }}
             id={field}
-            className={requiredClass}
             rows={4}
             onBlur={elementHasLostFocus}
           />
@@ -128,10 +130,10 @@ const TranslatableText = ({
           style={{
             height: height ? height + "px" : "100%",
             cursor: "pointer",
+            ...requiredStyle
           }}
           id={field}
           disabled={true}
-          className={requiredClass}
           rows={4}
           onBlur={elementHasLostFocus}
         />

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

@@ -6,13 +6,17 @@ import {
   LoadingOutlined,
 } from "@ant-design/icons";
 import styled from "styled-components";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 import {
   Many2one as Many2oneOoui,
   transformDomainForChildWidget,
 } from "@gisce/ooui";
 import Field from "@/common/Field";
-import Config from "@/Config";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import { FormModal } from "@/widgets/modals/FormModal";
 import ConnectionProvider from "@/ConnectionProvider";
@@ -65,8 +69,10 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
     id: fieldName,
     domain: widgetDomain,
   } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: mapToken.colorPrimaryBg }
+      : undefined;
   const [showSearchModal, setShowSearchModal] = useState<boolean>(false);
   const [showFormModal, setShowFormModal] = useState<boolean>(false);
   const [searching, setSearching] = useState<boolean>(false);
@@ -75,14 +81,8 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
   const [inputText, setInputText] = useState<string>("");
   const inputTextRef = useRef<string>();
   const formContext = useContext(FormContext) as FormContextType;
-  const {
-    domain,
-    getValues,
-    getFields,
-    getContext,
-    setOriginalValue,
-    elementHasLostFocus,
-  } = formContext || {};
+  const { domain, getValues, getFields, getContext, elementHasLostFocus } =
+    formContext || {};
   const transformedDomain = useRef<any[]>([]);
   const [searchDomain, setSearchDomain] = useState<any>([]);
 
@@ -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;
@@ -167,7 +166,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
       });
 
       if (resultIds.length === 1) {
-        fetchNameAndUpdate(resultIds[0], true);
+        fetchNameAndUpdate(resultIds[0]);
       } else {
         setSearchText(text);
         setShowSearchModal(true);
@@ -179,10 +178,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
     setShowSearchModal(true);
   };
 
-  const fetchNameAndUpdate = async (
-    id: number,
-    mustUpdateOriginalForm?: boolean
-  ) => {
+  const fetchNameAndUpdate = async (id: number) => {
     setSearching(true);
 
     try {
@@ -194,10 +190,6 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
       });
 
       triggerChange([id, value[0][1]]);
-
-      if (mustUpdateOriginalForm) {
-        setOriginalValue(ooui.id, [id, value[0][1]]);
-      }
     } catch (err) {
       showErrorDialog(err);
     } finally {
@@ -207,16 +199,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 +224,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();
@@ -253,7 +245,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           value={inputText}
           disabled={readOnly}
           onChange={onValueStringChange}
-          className={requiredClass}
+          style={requiredStyle}
           onBlur={onElementLostFocus}
           onKeyDown={onKeyDown}
           suffix={
@@ -265,17 +257,18 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           }
         />
       </Col>
-      <Col flex="32px">
+      <Col flex="32px" style={{ paddingRight: 0 }}>
         <Button
           icon={<FolderOpenOutlined />}
           disabled={id === undefined || text === "" || inputText === undefined}
           onClick={() => {
             setShowFormModal(true);
           }}
+          style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
           tabIndex={-1}
         />
       </Col>
-      <Col flex="32px">
+      <Col flex="32px" style={{ paddingLeft: 0 }}>
         <Button
           icon={searching ? <LoadingOutlined /> : <SearchOutlined />}
           disabled={readOnly || searching}
@@ -283,6 +276,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
             searchButtonTappedRef.current = true;
             tryFetchFirstResultOrShowSearch(text);
           }}
+          style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
           tabIndex={-1}
         />
       </Col>
@@ -324,6 +318,6 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
 
 const RequiredInput = styled(Input)`
   .ant-input {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

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

@@ -14,10 +14,10 @@ export const Many2oneSuffixModal = (props: Props) => {
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   return (
-    <Modal
+    (<Modal
       title={t("selectAction")}
       centered
-      visible={visible}
+      open={visible}
       footer={null}
       destroyOnClose
       onCancel={onCancel}
@@ -37,6 +37,6 @@ export const Many2oneSuffixModal = (props: Props) => {
           );
         })}
       </Space>
-    </Modal>
+    </Modal>)
   );
 };

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

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useContext, useEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useContext,
+  useEffect,
+  useCallback,
+} from "react";
 import { One2many as One2manyOoui } from "@gisce/ooui";
 import { Alert, Spin } from "antd";
 import { Form } from "@/index";
@@ -25,7 +31,7 @@ import { One2manyTopBar } from "@/widgets/base/one2many/One2manyTopBar";
 import { readObjectValues, getNextPendingId } from "@/helpers/one2manyHelper";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { sortResults } from "@/helpers/treeHelper";
+import { getColorMap, getTree, sortResults } from "@/helpers/treeHelper";
 import { transformPlainMany2Ones } from "@/helpers/formHelper";
 
 type One2manyValue = {
@@ -83,7 +89,6 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     formContext || {};
   const { lang, t } = useContext(LocaleContext) as LocaleContextType;
 
-  const formRef = useRef();
   const [formHasChanges, setFormHasChanges] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
@@ -96,6 +101,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const transformedDomain = useRef<any[]>([]);
   const [sorter, setSorter] = useState<any>();
   const originalSortItemIds = useRef<number[]>();
+  const [colorsForResults, setColorsForResults] = useState<any>(undefined);
 
   const {
     readOnly,
@@ -106,14 +112,31 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const isMany2many = ooui.type === "many2many";
   const { id: fieldName } = ooui;
   const itemsToShow = items.filter(
-    (item) => item.values && item.operation !== "pendingRemove"
+    (item) =>
+      (item.values || item.treeValues) && item.operation !== "pendingRemove"
   );
+  const previousCurrentView = useRef<ViewType>();
 
   useEffect(() => {
-    if (items.some((item) => !item.values)) {
+    if (previousCurrentView.current !== currentView) {
+      previousCurrentView.current = currentView;
+      fetchDataIfNeeded();
+      return;
+    }
+
+    fetchDataIfNeeded();
+  }, [items, currentView]);
+
+  const fetchDataIfNeeded = useCallback(() => {
+    if (currentView === "form" && items.some((item) => !item.values)) {
+      fetchData();
+    } else if (
+      currentView === "tree" &&
+      items.some((item) => !item.treeValues)
+    ) {
       fetchData();
     }
-  }, [items]);
+  }, [items, currentView]);
 
   useEffect(() => {
     parseDomain();
@@ -133,25 +156,36 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
   };
 
-  const fetchOriginalItemsFromApi = async () => {
+  const fetchOriginalItemsFromApi = async (mode?: ViewType) => {
     setIsLoading(true);
     setFormHasChanges(false);
     setError(undefined);
 
     try {
-      const itemsWithValues = await readObjectValues({
-        treeFields: views.get("tree").fields,
-        formFields: views.get("form")?.fields || {},
+      const [itemsWithValues, evaluatedColorsForTree] = await readObjectValues({
+        treeView: {
+          arch: views.get("tree")?.arch,
+          fields: views.get("tree")?.fields,
+        },
+        formView: {
+          fields: views.get("form")?.fields || {},
+        },
         model: relation,
         items,
         context: { ...getContext?.(), ...context },
+        currentView: mode || currentView,
       });
 
       if (!originalSortItemIds.current) {
         originalSortItemIds.current = itemsWithValues.map((item) => item.id!);
       }
 
+      if ((currentView || mode) === "tree" && evaluatedColorsForTree) {
+        setColorsForResults(evaluatedColorsForTree);
+      }
+
       triggerChange(itemsWithValues);
+      return itemsWithValues;
     } catch (err) {
       setError(err as any);
     } finally {
@@ -161,17 +195,16 @@ const One2manyInput: React.FC<One2manyInputProps> = (
 
   async function parseDomain() {
     if (widgetDomain) {
-      transformedDomain.current = transformDomainForChildWidget({
-        domain: await ConnectionProvider.getHandler().evalDomain({
+      transformedDomain.current =
+        await ConnectionProvider.getHandler().evalDomain({
           domain: widgetDomain,
           values: transformPlainMany2Ones({
             fields: getFields(),
             values: getValues(),
           }),
+          fields: getFields(),
           context: getContext(),
-        }),
-        widgetFieldName: fieldName,
-      });
+        });
     }
 
     if (domain && domain.length > 0) {
@@ -437,10 +470,19 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
   };
 
-  const onTreeRowClicked = (record: any) => {
+  const onTreeRowClicked = async (record: any) => {
     const { id: itemId } = record;
+
+    let itemsToLoadFrom: One2manyItem[] | undefined = items;
+
+    // We should fetch the form data if needed in order to get the form values
+    const modalItem = items.find((item) => item.id === itemId);
+    if (modalItem?.values === undefined) {
+      itemsToLoadFrom = await fetchOriginalItemsFromApi("form");
+    }
+
     // We show the detail for the clicked item in a Form modal
-    setModalItem(items.find((item) => item.id === itemId));
+    setModalItem(itemsToLoadFrom!.find((item) => item.id === itemId));
     setContinuousEntryMode(false);
     setShowFormModal(true);
   };
@@ -506,12 +548,18 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         return t("noCurrentEntries");
       }
 
+      if (
+        currentView !== previousCurrentView.current &&
+        items.some((item) => !item.values)
+      ) {
+        return <Spin />;
+      }
+
       return (
         <Form
           formView={views.get("form")}
           values={itemsToShow[itemIndex]?.values}
           parentContext={{ ...getContext?.(), ...context }}
-          ref={formRef}
           model={relation}
           id={itemsToShow[itemIndex]?.id}
           submitMode={"values"}
@@ -542,16 +590,20 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       );
     }
 
-    const resultsToShow = sorter
-      ? sortResults({
-          resultsToSort: itemsToShow.map((item) => item.treeValues),
-          sorter,
-          fields: {
-            ...views.get("tree").fields,
-            ...(views.get("form")?.fields || {}),
-          },
-        })
-      : itemsToShow.map((item) => item.treeValues);
+    let resultsToShow = [];
+
+    if (itemsToShow.some((item) => item.treeValues)) {
+      resultsToShow = sorter
+        ? sortResults({
+            resultsToSort: itemsToShow.map((item) => item.treeValues),
+            sorter,
+            fields: {
+              ...views.get("tree").fields,
+              ...(views.get("form")?.fields || {}),
+            },
+          })
+        : itemsToShow.map((item) => item.treeValues);
+    }
 
     if (currentView === "tree") {
       return (
@@ -573,6 +625,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           }}
           sorter={sorter}
           onChangeSort={setSorter}
+          context={{ ...getContext?.(), ...context }}
+          colorsForResults={colorsForResults}
         />
       );
     }