@gisce/react-ooui 1.2.0-rc.7 → 1.2.0-rc.71

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/many2one/Many2one.tsx

@@ -80,7 +80,6 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
     getValues,
     getFields,
     getContext,
-    setOriginalValue,
     elementHasLostFocus,
   } = formContext || {};
   const transformedDomain = useRef<any[]>([]);
@@ -132,13 +131,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 +165,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 +177,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 +189,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 +198,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 +223,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();

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 {
@@ -168,6 +202,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
             fields: getFields(),
             values: getValues(),
           }),
+          fields: getFields(),
           context: getContext(),
         }),
         widgetFieldName: fieldName,
@@ -437,10 +472,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 +550,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 +592,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 +627,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           }}
           sorter={sorter}
           onChangeSort={setSorter}
+          context={{ ...getContext?.(), ...context }}
+          colorsForResults={colorsForResults}
         />
       );
     }

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/ButtonGroup.tsx

@@ -83,7 +83,7 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
         type={primary ? "primary" : undefined}
         //danger={danger ? true : undefined} This works but typescript
         // doesn't accept
-        overlay={<Items ooui={secondaryButtons} />}
+        overlay={Items({ooui: secondaryButtons})}
       >
         {getButtonIcon()}
         {caption}

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);