@gisce/react-ooui 1.1.40 → 1.1.42

package/dist/widgets/base/one2many/One2manyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8kB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+mB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/widgets/custom/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["Timeline.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAO1C,aAAK,aAAa,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,aAAK,kBAAkB,GAAG,aAAa,GAAG;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAsD5C,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA+GtD,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["Timeline.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAO1C,aAAK,aAAa,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,aAAK,kBAAkB,GAAG,aAAa,GAAG;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAsD5C,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAgHtD,CAAC"}

package/dist/widgets/views/Dashboard/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["Dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,gCAAgC,CAAC;AACxC,OAAO,kCAAkC,CAAC;AAI1C,OAAO,EAAE,cAAc,EAAY,MAAM,SAAS,CAAC;;AAsWnD,wBAAqC"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["Dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,gCAAgC,CAAC;AACxC,OAAO,kCAAkC,CAAC;AAI1C,OAAO,EAAE,cAAc,EAAY,MAAM,SAAS,CAAC;;AAwWnD,wBAAqC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "files": [
     "dist",
     "src",

package/src/helpers/one2manyHelper.ts

@@ -1,5 +1,6 @@
 import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
 import ConnectionProvider from "@/ConnectionProvider";
+import { ViewType } from "@/types";
 
 type ReadObjectValuesOptions = {
   items: One2manyItem[];
@@ -7,12 +8,20 @@ type ReadObjectValuesOptions = {
   treeFields: any;
   formFields: any;
   context?: any;
+  currentView: ViewType;
 };
 
 const readObjectValues = async (
   options: ReadObjectValuesOptions
 ): Promise<One2manyItem[]> => {
-  const { items, model, formFields, treeFields, context = {} } = options;
+  const {
+    items,
+    model,
+    formFields,
+    treeFields,
+    context,
+    currentView = {},
+  } = options;
 
   const temporalItems: One2manyItem = items.filter(
     (item) => item.operation !== "original"
@@ -23,47 +32,47 @@ const readObjectValues = async (
     .filter((item) => item.operation === "original")
     .map((item) => item.id) as number[];
 
+  const fieldsToRetrieve: { [key: string]: any } = {
+    form: formFields,
+    tree: treeFields,
+  };
+
   const values = await ConnectionProvider.getHandler().readObjects({
     model,
     ids: idsToFetch,
-    fields: { ...formFields, ...treeFields },
+    fields: fieldsToRetrieve[currentView as string],
     context,
   });
 
-  const formValues = values.map((result: any) => {
+  const filteredValues = values.map((result: any) => {
     const resultFormValues: any = {};
     Object.keys(result).forEach((key) => {
-      if (formFields.hasOwnProperty(key) || key === "id") {
+      if (
+        fieldsToRetrieve[currentView as string].hasOwnProperty(key) ||
+        key === "id"
+      ) {
         resultFormValues[key] = result[key];
       }
     });
     return resultFormValues;
   });
 
-  const treeValues = values.map((result: any) => {
-    const resultTreeValues: any = {};
-    Object.keys(result).forEach((key) => {
-      if (treeFields.hasOwnProperty(key) || key === "id") {
-        resultTreeValues[key] = result[key];
-      }
-    });
-    return resultTreeValues;
-  });
-
   // We fill the values property of the One2manyItem with the retrieved values from the API
   const originalItemsWithFetchedValues: One2manyItem[] = items.map((item) => {
-    const fetchedFormItemValues = formValues.find(
-      (itemValues: any) => itemValues.id === item.id
-    );
-    const fetchedTreeItemValues = treeValues.find(
+    const fetchedItemValues = filteredValues.find(
       (itemValues: any) => itemValues.id === item.id
     );
 
-    return {
+    const itemWithFetchedValues = {
       ...item,
-      values: fetchedFormItemValues,
-      treeValues: fetchedTreeItemValues,
     };
+
+    if (currentView === "form") {
+      itemWithFetchedValues["values"] = fetchedItemValues;
+    } else if (currentView === "tree") {
+      itemWithFetchedValues["treeValues"] = fetchedItemValues;
+    }
+    return itemWithFetchedValues;
   });
 
   return originalItemsWithFetchedValues.concat(temporalItems);
@@ -79,14 +88,8 @@ type RemoveItemOptions = {
 };
 
 const removeItems = async (options: RemoveItemOptions) => {
-  const {
-    model,
-    activeId,
-    fieldName,
-    idsToRemove,
-    fields,
-    isMany2many,
-  } = options;
+  const { model, activeId, fieldName, idsToRemove, fields, isMany2many } =
+    options;
 
   const values: any = {};
   values[fieldName] = [];

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";
@@ -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>();
@@ -106,14 +111,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,7 +155,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     }
   };
 
-  const fetchOriginalItemsFromApi = async () => {
+  const fetchOriginalItemsFromApi = async (mode?: ViewType) => {
     setIsLoading(true);
     setFormHasChanges(false);
     setError(undefined);
@@ -145,6 +167,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         model: relation,
         items,
         context: { ...getContext?.(), ...context },
+        currentView: mode || currentView,
       });
 
       if (!originalSortItemIds.current) {
@@ -152,6 +175,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       }
 
       triggerChange(itemsWithValues);
+      return itemsWithValues;
     } catch (err) {
       setError(err as any);
     } finally {
@@ -438,10 +462,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);
   };
@@ -507,12 +540,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"}

package/src/widgets/custom/Timeline.tsx

@@ -111,6 +111,7 @@ export const TimelineInput = (props: TimelineInputProps) => {
         model: relation,
         items,
         context: { ...getContext?.(), ...context },
+        currentView: "form",
       });
 
       triggerChange(itemsWithValues);

package/src/widgets/views/Dashboard/Dashboard.tsx

@@ -111,6 +111,7 @@ function Dashboard(props: DashboardProps, ref: any) {
       model,
       items,
       context,
+      currentView: "form",
     });
   }
 
@@ -214,6 +215,7 @@ function Dashboard(props: DashboardProps, ref: any) {
   }
 
   if (error) {
+    console.log(error);
     return (
       <Alert className="mt-10 mb-20" message={error} type="error" banner />
     );