From 87044c49de1d4b6312e743f88d6142081c1893bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Thu, 14 Mar 2024 14:20:43 +0100 Subject: [PATCH] planning units: adds loaders after saving selection and clearing --- .../actions-summary/buttons/index.tsx | 22 ++++++++++- .../actions-summary/index.tsx | 37 +++++++++++++++++-- .../planning-unit-status/actions/index.tsx | 6 +++ app/store/slices/scenarios/edit.ts | 7 +++- 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx index 763cc30c4a..a1d144dad7 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx @@ -1,15 +1,33 @@ +import { useRouter } from 'next/router'; + +import { useAppSelector } from 'store/hooks'; +import { ScenarioEditStateProps } from 'store/slices/scenarios/edit'; + import Button from 'components/button'; +import Loading from 'components/loading'; export const ActionsSummaryButtons = ({ onCancel }: { onCancel: () => void }) => { + const { query } = useRouter(); + const { sid } = query as { sid: string }; + + const { submittingPU }: { submittingPU: ScenarioEditStateProps['submittingPU'] } = useAppSelector( + (state) => state[`/scenarios/${sid}/edit`] + ); + return ( -
+
- +
); }; diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx index 69b2e56e24..75ea51a835 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; @@ -13,6 +13,7 @@ import { useToasts } from 'hooks/toast'; import Button from 'components/button'; import type { ButtonProps } from 'components/button'; import Icon from 'components/icon'; +import Loading from 'components/loading'; import { cn } from 'utils/cn'; import HEXAGON_SVG from 'svgs/map/hexagon.svg?sprite'; @@ -28,6 +29,11 @@ export const ActionsSummary = ({ const { query } = useRouter(); const { sid } = query as { sid: string }; const { addToast } = useToasts(); + const [clearLoading, setClearLoading] = useState<{ [key in PUAction]: boolean }>({ + include: false, + exclude: false, + available: false, + }); const scenarioSlice = getScenarioEditSlice(sid); const { @@ -76,6 +82,8 @@ export const ActionsSummary = ({ break; } + setClearLoading((prev) => ({ ...prev, [PUAction]: true })); + scenarioPUDeletion.mutate( { sid, PUKind }, { @@ -126,6 +134,9 @@ export const ActionsSummary = ({ } ); }, + onSettled: () => { + setClearLoading((prev) => ({ ...prev, [PUAction]: false })); + }, } ); }, @@ -197,7 +208,12 @@ export const ActionsSummary = ({ > {puTmpIncludedValue.length + puIncludedValue.length} PU -
+
+