fix: let form graphs refresh, remove shadow in graphcards in form wid…

…gets, pass activeId
gisce · Jul 9, 2024 · 1fa1b5f · 1fa1b5f
1 parent 774b80a
commit 1fa1b5f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/src/hooks/useFormGraphData.ts b/src/hooks/useFormGraphData.ts
@@ -10,28 +10,25 @@ export const useFormGraphData = (actionId: number) => {
   const [actionData, setActionData] = useState<any>();
   const [treeShortcut, setTreeShortcut] = useState<ShortcutApi>();
   const formContext = useContext(FormContext) as FormContextType;
-  const { getContext, getValues } = formContext || {};
+  const { getContext, getValues, activeId } = formContext || {};
   const { globalValues, rootContext } = useConfigContext();
   const context = useMemo(() => {
     return { ...getContext?.(), ...rootContext };
   }, [getContext, rootContext]);
 
-  useEffect(() => {
-    if (!actionId) {
-      return;
-    }
-    fetchData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actionId]);
-
   const fetchData = async () => {
     setError(undefined);
     setLoading(true);
     try {
       const result = await fetchAction({
         actionId,
         rootContext: context,
-        globalValues: { ...globalValues, ...getValues() },
+        globalValues: {
+          ...globalValues,
+          ...getValues(),
+          active_id: activeId,
+          active_ids: [activeId],
+        },
       });
       const { views } = result as any;
 
@@ -66,5 +63,5 @@ export const useFormGraphData = (actionId: number) => {
     setLoading(false);
   };
 
-  return { actionData, treeShortcut, loading, error };
+  return { actionData, treeShortcut, loading, error, fetchData };
 };
diff --git a/src/widgets/custom/Indicator.tsx b/src/widgets/custom/Indicator.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { Tooltip, theme, Statistic, Card } from "antd";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
@@ -90,9 +90,9 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
   const { ooui } = props;
   const { actionId } = ooui;
 
-  const { actionData, treeShortcut, loading, error } = useFormGraphData(
-    actionId!,
-  );
+  const { actionData, treeShortcut, loading, error, fetchData } =
+    useFormGraphData(actionId!);
+
   const readForViewEnabled = useFeatureIsEnabled(
     ErpFeatureKeys.FEATURE_READFORVIEW,
   );
@@ -101,33 +101,40 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
   ) as TabManagerContextType;
   const { openShortcut } = tabManagerContext || {};
 
-  if (loading) {
-    return <CenteredSpinner />;
-  }
+  useEffect(() => {
+    if (!ooui) {
+      return;
+    }
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ooui]);
 
   if (error) {
     return <ErrorAlert error={error} />;
   }
 
-  const { id, model, limit, domain, context, initialView } = actionData;
+  const { id, model, limit, domain, context, initialView } = actionData || {};
 
   const GraphComponent = readForViewEnabled ? GraphServer : Graph;
 
   return (
     <GraphCard
       id={id}
       parms={{}}
-      title={actionData.title}
+      title={actionData?.title || ""}
       action={treeShortcut}
       openAction={openShortcut as any}
     >
-      <GraphComponent
-        view_id={initialView.id}
-        model={model}
-        context={context}
-        domain={domain}
-        limit={limit}
-      />
+      {loading && <CenteredSpinner />}
+      {!loading && (
+        <GraphComponent
+          view_id={initialView.id}
+          model={model}
+          context={context}
+          domain={domain}
+          limit={limit}
+        />
+      )}
     </GraphCard>
   );
 };
diff --git a/src/widgets/views/Graph/GraphCard.tsx b/src/widgets/views/Graph/GraphCard.tsx
@@ -14,7 +14,7 @@ export const GraphCard = (props: GraphCardProps) => {
 
   return (
     <div
-      className={"shadow-md"}
+      className={hasDragAndDrop ? "shadow-md" : undefined}
       style={{
         height: "100%",
         display: "flex",