adds restoration panel validations

Vizzuality · Dec 16, 2024 · 2c14edd · 2c14edd
1 parent 2d9e3a3
commit 2c14edd
Show file tree

Hide file tree

Showing 12 changed files with 247 additions and 137 deletions.
diff --git a/client/src/containers/projects/form/cost-inputs-overrides/capex/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/capex/index.tsx
@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -38,7 +39,10 @@ export default function CapexCostInputsTable() {
     ecosystem,
     countryCode,
     activity,
-    parameters: { restorationActivity },
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
   } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/opex/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/opex/index.tsx
@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -38,7 +39,10 @@ export default function OpexCostInputsTable() {
     ecosystem,
     countryCode,
     activity,
-    parameters: { restorationActivity },
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
   } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/other/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/other/index.tsx
@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -38,7 +39,10 @@ export default function OtherCostInputsTable() {
     ecosystem,
     countryCode,
     activity,
-    parameters: { restorationActivity },
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
   } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({

diff --git a/client/src/containers/projects/form/restoration-plan/columns.tsx b/client/src/containers/projects/form/restoration-plan/columns.tsx
@@ -1,8 +1,6 @@
 import { createColumnHelper } from "@tanstack/react-table";
 
 import CellValue from "@/containers/projects/form/cell-value";
-import { DataColumnDef } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
 
 import { Label } from "@/components/ui/label";
 
@@ -27,14 +25,11 @@ export const COLUMNS = [
     cell: (props) => (
       <CellValue
         className="relative after:absolute after:right-6 after:top-1/2 after:inline-block after:-translate-y-1/2 after:text-sm after:text-muted-foreground after:content-['ha']"
-        name={`parameters.restorationYearlyBreakdown.${props.row.original.year}`}
+        // @ts-expect-error fix later
+        name={`parameters.restorationYearlyBreakdown.${props.row.original.year === -1 ? 0 : props.row.original.year}`}
         hasUnit
       />
     ),
-    // size: 75,
     maxSize: 55,
-    // cell: (props) => {
-    //   return <Label>{props.getValue()}</Label>;
-    // },
   }),
 ];
diff --git a/client/src/containers/projects/form/restoration-plan/index.tsx b/client/src/containers/projects/form/restoration-plan/index.tsx
@@ -1,8 +1,7 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
-import { useFormContext } from "react-hook-form";
+import { useFormContext, useWatch } from "react-hook-form";
 
-import { ASSUMPTIONS_NAME_TO_DTO_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
   getCoreRowModel,
@@ -12,7 +11,6 @@ import {
 import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 
-import { AssumptionsFormProperty } from "@/containers/projects/form/assumptions/columns";
 import { COLUMNS } from "@/containers/projects/form/restoration-plan/columns";
 import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
 
@@ -31,17 +29,33 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+const useFormValues = () => {
+  const { getValues } = useFormContext<CreateCustomProjectForm>();
+
+  return {
+    ...getValues(),
+    ...useWatch(),
+  };
+};
+
 export default function RestorationPlanProjectForm() {
   const form = useFormContext<CreateCustomProjectForm>();
 
-  const v = form.getValues();
-  console.log(v);
+  const formValues = useFormValues();
 
   const {
     ecosystem,
     activity,
-    assumptions: { projectLength },
-  } = form.getValues();
+    projectSizeHa,
+    assumptions: {
+      // @ts-expect-error fix later
+      projectLength,
+    },
+    parameters: {
+      // @ts-expect-error fix later
+      restorationYearlyBreakdown,
+    },
+  } = formValues;
 
   const { queryKey } = queryKeys.customProjects.assumptions({
     ecosystem,
@@ -68,8 +82,6 @@ export default function RestorationPlanProjectForm() {
     ? Number(projectLength)
     : defaultRestorationProjectLength;
 
-  console.log({ totalYears });
-
   const DATA = useMemo(
     () =>
       Array.from({
@@ -89,6 +101,34 @@ export default function RestorationPlanProjectForm() {
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const { setError, clearErrors } = form;
+
+  const breakDownError =
+    // @ts-expect-error fix later
+    form.formState.errors.parameters?.restorationYearlyBreakdown;
+
+  useEffect(() => {
+    const totalHectares = (restorationYearlyBreakdown as string[])
+      ?.filter(Boolean)
+      .reduce((acc, hectares) => acc + Number(hectares), 0);
+
+    if (totalHectares > projectSizeHa) {
+      setError("parameters.restorationYearlyBreakdown", {
+        message: `Total hectares restored cannot exceed project size. (${totalHectares}/${projectSizeHa})`,
+      });
+    } else {
+      if (breakDownError?.message) {
+        clearErrors("parameters.restorationYearlyBreakdown");
+      }
+    }
+  }, [
+    projectSizeHa,
+    restorationYearlyBreakdown,
+    setError,
+    clearErrors,
+    breakDownError?.message,
+  ]);
+
   return (
     <Accordion type="single" collapsible defaultValue="assumptions">
       <AccordionItem value="assumptions" className="border-b-0">
@@ -103,6 +143,9 @@ export default function RestorationPlanProjectForm() {
             <p className="font-normal text-muted-foreground">
               Overrides annual hectares inputs
             </p>
+            {breakDownError && (
+              <p className="text-destructive">{breakDownError.message}</p>
+            )}
           </div>
         </AccordionTrigger>
         <AccordionContent className="pb-0">

diff --git a/client/src/containers/projects/form/setup/conservation-project-details/loss-rate.tsx b/client/src/containers/projects/form/setup/conservation-project-details/loss-rate.tsx
@@ -26,29 +26,35 @@ export default function LossRate() {
     ecosystem,
     countryCode,
     activity,
-    parameters: { lossRateUsed },
+    parameters: {
+      // @ts-expect-error fix later
+      lossRateUsed,
+    },
   } = form.getValues();
 
   const queryKey = queryKeys.customProjects.defaultActivityTypes({
     ecosystem,
     countryCode,
   }).queryKey;
 
-  const { data } = client.customProjects.getActivityTypesDefaults.useQuery(
-    queryKey,
-    { query: { ecosystem, countryCode } },
-    {
+  const { data, isSuccess } =
+    client.customProjects.getActivityTypesDefaults.useQuery(
       queryKey,
-      enabled:
-        !!ecosystem &&
-        !!countryCode &&
-        lossRateUsed === LOSS_RATE_USED.NATIONAL_AVERAGE,
-      select: (response) => {
-        const { data } = response.body;
-        return data[activity as ACTIVITY.CONSERVATION].ecosystemLossRate;
+      { query: { ecosystem, countryCode } },
+      {
+        queryKey,
+        enabled:
+          !!ecosystem &&
+          !!countryCode &&
+          lossRateUsed === LOSS_RATE_USED.NATIONAL_AVERAGE,
+        select: (response) => {
+          const { data } = response.body;
+          return data[activity as ACTIVITY.CONSERVATION].ecosystemLossRate;
+        },
       },
-    },
-  );
+    );
+
+  if (!isSuccess) return null;
 
   if (lossRateUsed === LOSS_RATE_USED.NATIONAL_AVERAGE) {
     return (

diff --git a/...containers/projects/form/setup/conservation-project-details/t1-global-emission-factor.tsx b/...containers/projects/form/setup/conservation-project-details/t1-global-emission-factor.tsx
@@ -23,18 +23,21 @@ export default function T1GlobalEmissionFactor() {
     countryCode,
   }).queryKey;
 
-  const { data } = client.customProjects.getActivityTypesDefaults.useQuery(
-    queryKey,
-    { query: { ecosystem, countryCode } },
-    {
+  const { data, isSuccess } =
+    client.customProjects.getActivityTypesDefaults.useQuery(
       queryKey,
-      enabled: !!ecosystem && !!countryCode,
-      select: (response) => {
-        const { data } = response.body;
-        return data[activity as ACTIVITY.CONSERVATION].emissionFactor.tier1;
+      { query: { ecosystem, countryCode } },
+      {
+        queryKey,
+        enabled: !!ecosystem && !!countryCode,
+        select: (response) => {
+          const { data } = response.body;
+          return data[activity as ACTIVITY.CONSERVATION].emissionFactor.tier1;
+        },
       },
-    },
-  );
+    );
+
+  if (!isSuccess) return null;
 
   return (
     <div className="flex">

diff --git a/...tainers/projects/form/setup/conservation-project-details/t2-national-emission-factors.tsx b/...tainers/projects/form/setup/conservation-project-details/t2-national-emission-factors.tsx
@@ -23,18 +23,21 @@ export default function T2NationalEmissionFactors() {
     countryCode,
   }).queryKey;
 
-  const { data } = client.customProjects.getActivityTypesDefaults.useQuery(
-    queryKey,
-    { query: { ecosystem, countryCode } },
-    {
+  const { data, isSuccess } =
+    client.customProjects.getActivityTypesDefaults.useQuery(
       queryKey,
-      enabled: !!ecosystem && !!countryCode,
-      select: (response) => {
-        const { data } = response.body;
-        return data[activity as ACTIVITY.CONSERVATION].emissionFactor.tier2;
+      { query: { ecosystem, countryCode } },
+      {
+        queryKey,
+        enabled: !!ecosystem && !!countryCode,
+        select: (response) => {
+          const { data } = response.body;
+          return data[activity as ACTIVITY.CONSERVATION].emissionFactor.tier2;
+        },
       },
-    },
-  );
+    );
+
+  if (!isSuccess) return null;
 
   return (
     <div className="flex gap-3">