From 27ca4f3b6a21e5b52e07223a7dcbe9742686a56e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Mon, 11 Mar 2024 11:15:18 +0100 Subject: [PATCH 1/2] fixes target/spf values after editing one of them --- .../target-spf/bulk-action-menu/index.tsx | 2 +- .../bulk-action-menu/modals/edit/index.tsx | 7 ++++--- .../grid-setup/features/target-spf/index.tsx | 17 ++++++++++++++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx index f0dd99dd02..e64fa073f8 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx @@ -24,7 +24,7 @@ const SplitFeaturesBulkActionMenu = ({ selectedFeatureIds, onDone, }: { - features: (Feature & { name: string })[]; + features: (Feature & { name: string; marxanSettings: { prop?: number; fpf?: number } })[]; selectedFeatureIds: Feature['id'][]; onDone: () => void; }): JSX.Element => { diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx index 558b102c9a..e064dbb82f 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx @@ -23,7 +23,7 @@ const EditModal = ({ handleModal, onDone, }: { - selectedFeatures: (Feature & { name: string })[]; + selectedFeatures: (Feature & { name: string; marxanSettings: { prop?: number; fpf?: number } })[]; handleModal: (modalKey: 'split' | 'edit' | 'delete', isVisible: boolean) => void; onDone?: () => void; }): JSX.Element => { @@ -178,8 +178,9 @@ const EditModal = ({ return ( initialValues={{ - target: 50, - spf: 1, + target: + (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.prop) || 50, + spf: (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.fpf) || 1, }} ref={formRef} onSubmit={onEditSubmit} diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx index f5b239e472..5058f2e79b 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, ComponentProps, useCallback, useMemo, useState } from 'react'; +import { ChangeEvent, ComponentProps, useCallback, useEffect, useMemo, useState } from 'react'; import { useQueryClient } from 'react-query'; @@ -418,6 +418,21 @@ const TargetAndSPFFeatures = (): JSX.Element => { const displayBulkActions = selectedFeatureIds.length > 0; const displaySaveButton = selectedFeaturesQuery.data?.length > 0; + useEffect(() => { + setFeatureValues((prevValues) => ({ + ...prevValues, + ...selectedFeaturesQuery.data?.reduce((acc, { id, marxanSettings }) => { + return { + ...acc, + [id]: { + target: marxanSettings?.prop * 100, + spf: marxanSettings?.fpf, + }, + }; + }, {}), + })); + }, [selectedFeaturesQuery.data]); + return ( <>
From 5631f79f61acc033da9540d61738980b4222cc25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Tue, 12 Mar 2024 16:59:37 +0100 Subject: [PATCH 2/2] adds validation for target and spf fields --- .../features/target-spf/all-targets/index.tsx | 16 ++++++++---- .../bulk-action-menu/modals/edit/index.tsx | 13 ++++++---- .../row-item/details/index.tsx | 25 ++++++++++++++----- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/all-targets/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/all-targets/index.tsx index 30bf2a2f8c..84283fe87d 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/all-targets/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/all-targets/index.tsx @@ -34,13 +34,16 @@ const AllTargetsSelector = ({ type="number" min={0} max={100} + step={0.01} defaultValue={values.target} value={values.target} - // disabled={!editable} onChange={({ target: { value: inputValue } }) => { + const numericValue = Number(inputValue); + if (numericValue < 0 || numericValue > 100) return; + setValues((prevValues) => ({ ...prevValues, - target: Number(inputValue), + target: numericValue, })); }} onKeyDownCapture={(event) => { @@ -75,12 +78,15 @@ const AllTargetsSelector = ({ mode="dashed" type="number" defaultValue={values.spf} - // value={inputFPFValue} - // disabled={!editable} + step={0.01} + min={0} onChange={({ target: { value: inputValue } }) => { + const numericValue = Number(inputValue); + if (numericValue <= 0) return; + setValues((prevValues) => ({ ...prevValues, - spf: Number(inputValue), + spf: numericValue, })); }} onKeyDownCapture={(event) => { diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx index e064dbb82f..6619c98e5c 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx @@ -18,6 +18,9 @@ export type FormValues = { spf: number; }; +const INPUT_CLASSES = + 'h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600'; + const EditModal = ({ selectedFeatures, handleModal, @@ -206,10 +209,11 @@ const EditModal = ({ )} @@ -228,11 +232,10 @@ const EditModal = ({ )} diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/row-item/details/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/row-item/details/index.tsx index db96649919..e6448e0e98 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/row-item/details/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/row-item/details/index.tsx @@ -6,6 +6,8 @@ import { useCanEditScenario } from 'hooks/permissions'; import Input from 'components/forms/input'; +const INPUT_CLASES = 'w-[55px] rounded-md border-solid border-gray-600 px-0 py-1 text-center'; + export const RowDetails = ({ item, onChange }): JSX.Element => { const { query } = useRouter(); const { pid, sid } = query as { pid: string; sid: string }; @@ -28,20 +30,26 @@ export const RowDetails = ({ item, onChange }): JSX.Element => {
Target { + const numericValue = Number(inputValue); + if (numericValue < 0 || numericValue > 100) return; + setValues((prevValues) => ({ ...prevValues, - target: Number(inputValue), + target: numericValue, })); - onChange(id, { target: Number(inputValue) }); + onChange(id, { target: numericValue }); }} /> % @@ -49,20 +57,25 @@ export const RowDetails = ({ item, onChange }): JSX.Element => {
SPF { + const numericValue = Number(inputValue); + if (numericValue <= 0) return; + setValues((prevValues) => ({ ...prevValues, - spf: Number(inputValue), + spf: numericValue, })); - onChange(id, { spf: Number(inputValue) }); + onChange(id, { spf: numericValue }); }} />