adds validation for target and spf fields

Vizzuality · Mar 12, 2024 · 5631f79 · 5631f79
1 parent 27ca4f3
commit 5631f79
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 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
@@ -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/...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,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 = ({
                       <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>
                   )}
@@ -228,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/...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>