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

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={
@@ -272,6 +264,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           onClick={() => {
             setShowFormModal(true);
           }}
+          style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
           tabIndex={-1}
         />
       </Col>
@@ -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 {
@@ -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/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/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/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";
 
 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;
   }
-}
+};