From f1ccb995ed8192dfc8a83cf7929e4f51ff8b15e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Tue, 10 Dec 2024 12:40:09 +0100
Subject: [PATCH] fix: improve indicators with title

---
 src/hooks/useFormGraphData.ts                 |  8 ++-
 src/widgets/custom/Indicator.tsx              | 54 +++++++++----------
 .../views/Dashboard/dashboardHelper.ts        | 20 ++++---
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/hooks/useFormGraphData.ts b/src/hooks/useFormGraphData.ts
index 485f130e7..199727eaf 100644
--- a/src/hooks/useFormGraphData.ts
+++ b/src/hooks/useFormGraphData.ts
@@ -12,7 +12,7 @@ export const useFormGraphData = (actionId: number) => {
   const formContext = useContext(FormContext) as FormContextType;
   const { getContext, getPlainValues, activeId } = formContext || {};
   const { globalValues, rootContext } = useConfigContext();
-  const context = useMemo(() => {
+  const context: any = useMemo(() => {
     return { ...getContext?.(), ...rootContext };
   }, [getContext, rootContext]);
 
@@ -28,6 +28,12 @@ export const useFormGraphData = (actionId: number) => {
           ...getPlainValues(),
         },
       });
+
+      if (!context.active_id) {
+        setActionData(result);
+        throw new Error("active_id_not_found");
+      }
+
       const { views } = result as any;
 
       const treeView = views.find((view: any[]) => {
diff --git a/src/widgets/custom/Indicator.tsx b/src/widgets/custom/Indicator.tsx
index 3636e8a19..eb9c52207 100644
--- a/src/widgets/custom/Indicator.tsx
+++ b/src/widgets/custom/Indicator.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from "react";
-import { Tooltip, theme, Statistic, Card } from "antd";
+import { Tooltip, theme, Statistic, Card, Empty } from "antd";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Field from "@/common/Field";
@@ -20,6 +20,7 @@ import {
 import { GraphCard } from "../views/Graph";
 import { useFormContext } from "@/context/FormContext";
 import { useLocale } from "@gisce/react-formiga-components";
+import styled from "styled-components";
 const { useToken } = theme;
 
 type IndicatorProps = WidgetProps & {
@@ -108,14 +109,11 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
     if (!ooui) {
       return;
     }
-    if (!activeId) {
-      return;
-    }
     fetchData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ooui, activeId]);
 
-  if (error) {
+  if (error && error.message !== "active_id_not_found") {
     return <ErrorAlert error={error} />;
   }
 
@@ -123,10 +121,6 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
 
   const GraphComponent = readForViewEnabled ? GraphServer : Graph;
 
-  if (!activeId) {
-    return <GrahCardPendingToCalculate id={id} />;
-  }
-
   return (
     <GraphCard
       id={id}
@@ -137,27 +131,31 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
     >
       {loading && <CenteredSpinner />}
       {!loading && (
-        <GraphComponent
-          view_id={initialView.id}
-          model={model}
-          context={context}
-          domain={domain}
-          limit={limit}
-          fixedHeight={height}
-        />
+        <>
+          {!activeId ? (
+            <StyledEmpty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              imageStyle={{ height: 15 }}
+            />
+          ) : (
+            <GraphComponent
+              view_id={initialView.id}
+              model={model}
+              context={context}
+              domain={domain}
+              limit={limit}
+              fixedHeight={height}
+            />
+          )}
+        </>
       )}
     </GraphCard>
   );
 };
 
-const GrahCardPendingToCalculate = ({ id }: { id: string }) => {
-  const { t } = useLocale();
-  return (
-    <GraphCard
-      id={id}
-      parms={{}}
-      title={t("pendingToCalculate")}
-      openAction={() => {}}
-    />
-  );
-};
+const StyledEmpty = styled(Empty)`
+  &.ant-empty.ant-empty-normal {
+    margin: 0;
+    margin-top: 5px;
+  }
+`;
diff --git a/src/widgets/views/Dashboard/dashboardHelper.ts b/src/widgets/views/Dashboard/dashboardHelper.ts
index fbf360475..6b2cc8259 100644
--- a/src/widgets/views/Dashboard/dashboardHelper.ts
+++ b/src/widgets/views/Dashboard/dashboardHelper.ts
@@ -25,13 +25,7 @@ export async function fetchAction({
     fields: {},
   });
 
-  const parsedDomain = dataForAction.domain
-    ? await ConnectionProvider.getHandler().evalDomain({
-        domain: dataForAction.domain,
-        values: globalValues,
-        context: { ...rootContext, ...parsedContext },
-      })
-    : [];
+  const finalContext = { ...rootContext, ...parsedContext };
 
   const {
     res_model: model,
@@ -42,6 +36,18 @@ export async function fetchAction({
   } = dataForAction;
   const treeExpandable = view_type === "tree";
 
+  if (!finalContext.active_id) {
+    return { title };
+  }
+
+  const parsedDomain = dataForAction.domain
+    ? await ConnectionProvider.getHandler().evalDomain({
+        domain: dataForAction.domain,
+        values: globalValues,
+        context: finalContext,
+      })
+    : [];
+
   const finalViews = [];
 
   for (const viewArray of views) {