refactor(common-ui,clusters-ui): add fillPendingRow prop in Grouped…

…DataTable and update cluster views
AntaresSimulatorTeam · Mar 25, 2024 · aba0d83 · aba0d83
1 parent 7ae6166
commit aba0d83
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx
@@ -21,7 +21,7 @@ import {
   addCapacity,
   capacityAggregationFn,
   useClusterDataWithCapacity,
-} from "../common/utils";
+} from "../common/clustersUtils";
 import { TRow } from "../../../../../../common/GroupedDataTable/types";
 
 function Renewables() {
@@ -154,6 +154,11 @@ function Renewables() {
       deleteConfirmationMessage={(count) =>
         t("studies.modelization.clusters.question.delete", { count })
       }
+      fillPendingRow={(row) => ({
+        ...row,
+        enabledCapacity: 0,
+        installedCapacity: 0,
+      })}
     />
   );
 }

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
@@ -21,7 +21,7 @@ import {
   addCapacity,
   capacityAggregationFn,
   useClusterDataWithCapacity,
-} from "../common/utils";
+} from "../common/clustersUtils";
 import { TRow } from "../../../../../../common/GroupedDataTable/types";
 
 function Thermal() {
@@ -168,6 +168,11 @@ function Thermal() {
       deleteConfirmationMessage={(count) =>
         t("studies.modelization.clusters.question.delete", { count })
       }
+      fillPendingRow={(row) => ({
+        ...row,
+        enabledCapacity: 0,
+        installedCapacity: 0,
+      })}
     />
   );
 }

diff --git a/...xplore/Modelization/Areas/common/utils.ts → ...odelization/Areas/common/clustersUtils.ts b/...xplore/Modelization/Areas/common/utils.ts → ...odelization/Areas/common/clustersUtils.ts
@@ -1,22 +1,9 @@
 import { DependencyList, useMemo } from "react";
-import * as R from "ramda";
 import { MRT_AggregationFn } from "material-react-table";
-import { StudyMetadata } from "../../../../../../../common/types";
-import { editStudy } from "../../../../../../../services/api/study";
 import { ThermalClusterWithCapacity } from "../Thermal/utils";
 import { RenewableClusterWithCapacity } from "../Renewables/utils";
 import usePromiseWithSnackbarError from "../../../../../../../hooks/usePromiseWithSnackbarError";
 
-export const saveField = R.curry(
-  (
-    studyId: StudyMetadata["id"],
-    path: string,
-    data: Record<string, unknown>,
-  ): Promise<void> => {
-    return editStudy(data, studyId, path);
-  },
-);
-
 /**
  * Custom aggregation function summing the values of each row,
  * to display enabled and installed capacity in the same cell. This function is
@@ -33,11 +20,12 @@ export const saveField = R.curry(
 export const capacityAggregationFn = <
   T extends ThermalClusterWithCapacity | RenewableClusterWithCapacity,
 >(): MRT_AggregationFn<T> => {
-  return (_colHeader, rows) => {
-    const { enabledCapacitySum, installedCapacitySum } = rows.reduce(
+  return (columnId, leafRows) => {
+    const { enabledCapacitySum, installedCapacitySum } = leafRows.reduce(
       (acc, row) => {
-        acc.enabledCapacitySum += row.original.enabledCapacity ?? 0;
-        acc.installedCapacitySum += row.original.installedCapacity ?? 0;
+        acc.enabledCapacitySum += row.original.enabledCapacity;
+        acc.installedCapacitySum += row.original.installedCapacity;
+
         return acc;
       },
       { enabledCapacitySum: 0, installedCapacitySum: 0 },

diff --git a/webapp/src/components/common/GroupedDataTable/index.tsx b/webapp/src/components/common/GroupedDataTable/index.tsx
@@ -45,6 +45,9 @@ export interface GroupedDataTableProps<
   onNameClick?: (row: MRT_Row<TData>) => void;
   isLoading?: boolean;
   deleteConfirmationMessage?: string | ((count: number) => string);
+  fillPendingRow?: (
+    pendingRow: TRow<TGroups[number]>,
+  ) => TRow<TGroups[number]> & Partial<TData>;
 }
 
 // Use ids to identify default columns (instead of `accessorKey`),
@@ -66,6 +69,7 @@ function GroupedDataTable<
   onNameClick,
   isLoading,
   deleteConfirmationMessage,
+  fillPendingRow,
 }: GroupedDataTableProps<TGroups, TData>) {
   const { t } = useTranslation();
   const [openDialog, setOpenDialog] = useState<
@@ -273,14 +277,18 @@ function GroupedDataTable<
   ////////////////////////////////////////////////////////////////
 
   const addPendingRow = (row: TRow<TGroups[number]>) => {
-    pendingRows.current.push(row);
+    const pendingRow = fillPendingRow?.(row) || row;
+
+    pendingRows.current.push(pendingRow);
+
     // Type can be asserted as `TData` because the row will be checked in cell renders
-    setTableData((prev) => [...prev, row as TData]);
-  };
+    // and `fillPendingRow` allows to add needed data
+    setTableData((prev) => [...prev, pendingRow as TData]);
 
-  const removePendingRow = (row: TRow<TGroups[number]>) => {
-    pendingRows.current = pendingRows.current.filter((r) => r !== row);
-    setTableData((prev) => prev.filter((r) => r !== row));
+    return function removePendingRow() {
+      pendingRows.current = pendingRows.current.filter((r) => r !== pendingRow);
+      setTableData((prev) => prev.filter((r) => r !== pendingRow));
+    };
   };
 
   function isPendingRow(row: TData) {
@@ -305,7 +313,7 @@ function GroupedDataTable<
     }
 
     createOps.increment();
-    addPendingRow(values);
+    const removePendingRow = addPendingRow(values);
 
     try {
       const newRow = await onCreate(values);
@@ -314,7 +322,7 @@ function GroupedDataTable<
       enqueueErrorSnackbar(t("global.error.createFailed"), toError(error));
     }
 
-    removePendingRow(values);
+    removePendingRow();
     createOps.decrement();
   };
 
@@ -333,7 +341,7 @@ function GroupedDataTable<
     };
 
     createOps.increment();
-    addPendingRow(duplicatedRow);
+    const removePendingRow = addPendingRow(duplicatedRow);
 
     try {
       const newRow = await onDuplicate(selectedRow, newName);
@@ -342,7 +350,7 @@ function GroupedDataTable<
       enqueueErrorSnackbar(t("global.error.createFailed"), toError(error));
     }
 
-    removePendingRow(duplicatedRow);
+    removePendingRow();
     createOps.decrement();
   };