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/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..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,12 +18,15 @@ 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, 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 +181,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} @@ -205,10 +209,11 @@ const EditModal = ({ )} @@ -227,11 +232,10 @@ const EditModal = ({ )} 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 ( <>
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 }); }} />