Merge pull request #1662 from Vizzuality/MRXN23-604-fe-scenario-featu…

…res-in [MRXN23-604] fixes target/spf values after editing one of them
Vizzuality · Mar 12, 2024 · 09144a8 · 09144a8
2 parents 2770bd6 + 5631f79
commit 09144a8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 21 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
@@ -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/...layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx b/...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/...ct/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx b/...ct/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 (
     <FormRFF<FormValues>
       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 = ({
                       <input
                         {...fprops.input}
                         type="number"
-                        className="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"
+                        className={INPUT_CLASSES}
                         defaultValue={fprops.input.value}
                         min={0}
                         max={100}
+                        step={0.01}
                       />
                     </Field>
                   )}
@@ -227,11 +232,10 @@ const EditModal = ({
                       <input
                         {...fprops.input}
                         type="number"
-                        className="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"
+                        className={INPUT_CLASSES}
                         defaultValue={fprops.input.value}
-                        min={0}
-                        max={1}
-                        step="0.01"
+                        min={1}
+                        step={0.01}
                       />
                     </Field>
                   )}

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
@@ -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 (
     <>
       <Section className="relative flex flex-col space-y-4 overflow-hidden">

diff --git a/...ebar/scenario/grid-setup/features/target-spf/targets-spf-table/row-item/details/index.tsx b/...ebar/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,41 +30,52 @@ export const RowDetails = ({ item, onChange }): JSX.Element => {
       <div className="flex items-center space-x-2">
         <span>Target</span>
         <Input
-          className="w-[55px] rounded-md border-solid border-gray-600 py-1 text-center"
+          className={INPUT_CLASES}
           theme="dark"
           mode="dashed"
           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,
             }));
 
-            onChange(id, { target: Number(inputValue) });
+            onChange(id, { target: numericValue });
           }}
         />
         <span className="text-xs">%</span>
       </div>
       <div className="flex items-center space-x-2">
         <span>SPF</span>
         <Input
-          className="w-[55px] rounded border border-solid py-1 "
+          className={INPUT_CLASES}
           theme="dark"
           mode="dashed"
           type="number"
+          step={0.01}
+          min={0}
           defaultValue={values.spf}
           value={values.spf}
           disabled={!editable}
           onChange={({ target: { value: inputValue } }) => {
+            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 });
           }}
         />
       </div>