Merge pull request #1690 from Vizzuality/chore/feature-bulk-modes

feature bulking: added edition modes
Vizzuality · Sep 10, 2024 · e9389b9 · e9389b9
2 parents 481218f + bedab07
commit e9389b9
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 56 deletions.
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
@@ -10,14 +10,22 @@ import { useToasts } from 'hooks/toast';
 import Button from 'components/button';
 import Field from 'components/forms/field';
 import Label from 'components/forms/label';
+import Radio from 'components/forms/radio';
 import { composeValidators } from 'components/forms/validations';
 import { Feature } from 'types/api/feature';
 
 export type FormValues = {
   target: number;
   spf: number;
+  mode: 'all' | 'only-target' | 'only-spf';
 };
 
+const EDITION_MODES = [
+  { value: 'all', label: 'Target & SPF' },
+  { value: 'only-target', label: 'Target' },
+  { value: 'only-spf', label: 'SPF' },
+];
+
 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';
 
@@ -75,7 +83,7 @@ const EditModal = ({
 
   const onEditSubmit = useCallback(
     (values: FormValues) => {
-      const { target, spf = 1 } = values;
+      const { target, spf = 1, mode } = values;
 
       const data = {
         status: 'created',
@@ -117,14 +125,34 @@ const EditModal = ({
             };
           }
 
+          let newMarxanSettings = sf.marxanSettings;
+
+          if (mode === 'only-target') {
+            newMarxanSettings = {
+              ...newMarxanSettings,
+              prop: target / 100,
+            };
+          }
+
+          if (mode === 'only-spf') {
+            newMarxanSettings = {
+              ...newMarxanSettings,
+              fpf: +spf,
+            };
+          }
+
+          if (mode === 'all') {
+            newMarxanSettings = {
+              prop: target / 100,
+              fpf: +spf,
+            };
+          }
+
           return {
             featureId,
             kind,
             marxanSettings: selectedFeatures.find((f) => f.id === featureId)
-              ? {
-                  prop: target / 100 || 0.5,
-                  fpf: +spf,
-                }
+              ? newMarxanSettings
               : sf.marxanSettings,
           };
         }),
@@ -181,73 +209,103 @@ const EditModal = ({
   return (
     <FormRFF<FormValues>
       initialValues={{
+        mode: 'all',
         target:
-          (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.prop) || 50,
-        spf: (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.fpf) || 1,
+          (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.prop) ||
+          undefined,
+        spf:
+          (selectedFeatures?.length === 1 && selectedFeatures?.[0]?.marxanSettings?.fpf) ||
+          undefined,
       }}
-      ref={formRef}
       onSubmit={onEditSubmit}
       render={({ form, handleSubmit }) => {
         formRef.current = form;
 
+        const currentMode = form?.getState()?.values?.mode;
+
         return (
           <form onSubmit={handleSubmit} className="relative">
             <div className="flex flex-col space-y-5 px-8 py-1">
               <h2 className="font-heading font-bold text-black">Edit selected features</h2>
 
+              <div className="flex space-x-2">
+                {EDITION_MODES.map(({ value, label }) => {
+                  return (
+                    <FieldRFF key={value} name="mode" type="radio" value={value}>
+                      {(fprops) => (
+                        <div className="flex space-x-2">
+                          <Radio theme="light" id={value} {...fprops.input} />
+                          <Label theme="light" id={value} className="ml-2">
+                            {label}
+                          </Label>
+                        </div>
+                      )}
+                    </FieldRFF>
+                  );
+                })}
+              </div>
+
               <div className="flex w-full space-x-2">
-                <FieldRFF<FormValues['target']>
-                  name="target"
-                  validate={composeValidators([{ presence: true }])}
-                >
-                  {(fprops) => (
-                    <Field id="target" {...fprops} className="flex-1">
-                      <Label theme="light" className="mb-3 text-xs font-semibold uppercase">
-                        Target (%)
-                      </Label>
-
-                      <input
-                        {...fprops.input}
-                        type="number"
-                        className={INPUT_CLASSES}
-                        defaultValue={fprops.input.value}
-                        min={0}
-                        max={100}
-                        step={0.01}
-                      />
-                    </Field>
-                  )}
-                </FieldRFF>
-
-                <FieldRFF<FormValues['spf']>
-                  name="spf"
-                  validate={composeValidators([{ presence: true }])}
-                >
-                  {(fprops) => (
-                    <Field id="spf" {...fprops} className="flex-1">
-                      <Label theme="light" className="mb-3 text-xs font-semibold uppercase">
-                        SPF
-                      </Label>
-
-                      <input
-                        {...fprops.input}
-                        type="number"
-                        className={INPUT_CLASSES}
-                        defaultValue={fprops.input.value}
-                        min={1}
-                        step={0.01}
-                      />
-                    </Field>
-                  )}
-                </FieldRFF>
+                {['only-target', 'all'].includes(currentMode) && (
+                  <FieldRFF<FormValues['target']>
+                    name="target"
+                    validate={composeValidators([{ presence: true }])}
+                  >
+                    {(fprops) => (
+                      <Field id="target" {...fprops} className="flex-1">
+                        <Label theme="light" className="mb-3 text-xs font-semibold uppercase">
+                          Target (%)
+                        </Label>
+
+                        <input
+                          {...fprops.input}
+                          type="number"
+                          className={INPUT_CLASSES}
+                          defaultValue={fprops.input.value}
+                          min={0}
+                          max={100}
+                          step={0.01}
+                        />
+                      </Field>
+                    )}
+                  </FieldRFF>
+                )}
+                {['only-spf', 'all'].includes(currentMode) && (
+                  <FieldRFF<FormValues['spf']>
+                    name="spf"
+                    validate={composeValidators([{ presence: true }])}
+                  >
+                    {(fprops) => (
+                      <Field id="spf" {...fprops} className="flex-1">
+                        <Label theme="light" className="mb-3 text-xs font-semibold uppercase">
+                          SPF
+                        </Label>
+
+                        <input
+                          {...fprops.input}
+                          type="number"
+                          className={INPUT_CLASSES}
+                          defaultValue={fprops.input.value}
+                          min={1}
+                          step={0.01}
+                        />
+                      </Field>
+                    )}
+                  </FieldRFF>
+                )}
               </div>
 
               <div className="mt-16 flex justify-center space-x-6">
                 <Button theme="secondary" size="xl" onClick={() => handleModal('edit', false)}>
                   Cancel
                 </Button>
 
-                <Button theme="primary" size="xl" type="submit">
+                <Button
+                  theme="primary"
+                  size="xl"
+                  type="submit"
+                  disabled={formRef.current?.getState().invalid}
+                >
                   Save
                 </Button>
               </div>

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
@@ -24,6 +24,7 @@ import TargetsSPFTable from 'layout/project/sidebar/scenario/grid-setup/features
 import ActionsMenu from 'layout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/actions-menu';
 import Section from 'layout/section';
 import { Feature } from 'types/api/feature';
+import { toFixedWithoutZeros } from 'utils/numbers';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
@@ -103,7 +104,7 @@ const TargetAndSPFFeatures = (): JSX.Element => {
           splitted: true,
           marxanSettings: {
             ...splitFeature.marxanSettings,
-            prop: splitFeature.marxanSettings?.prop * 100,
+            prop: toFixedWithoutZeros(splitFeature.marxanSettings?.prop * 100),
             ...(featureValues[`${feature.id}-${splitFeature.name}`]?.target && {
               prop: featureValues[`${feature.id}-${splitFeature.name}`].target,
             }),
@@ -127,7 +128,7 @@ const TargetAndSPFFeatures = (): JSX.Element => {
             type: featureMetadata?.tag,
             marxanSettings: {
               ...feature.marxanSettings,
-              prop: feature.marxanSettings?.prop * 100,
+              prop: toFixedWithoutZeros(feature.marxanSettings?.prop * 100),
               ...(featureValues[feature.id]?.target && {
                 prop: featureValues[feature.id].target,
               }),
@@ -424,7 +425,7 @@ const TargetAndSPFFeatures = (): JSX.Element => {
         return {
           ...acc,
           [featureId]: {
-            target: marxanSettings?.prop * 100,
+            target: toFixedWithoutZeros(marxanSettings?.prop * 100),
             spf: marxanSettings?.fpf,
           },
         };

diff --git a/...ayout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/index.tsx b/...ayout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/index.tsx
@@ -57,6 +57,7 @@ const TargetsSPFTable = ({
                   theme="light"
                   className="block h-4 w-4 checked:bg-blue-500"
                   onChange={onSelectAll}
+                  checked={selectedIds.length === data.length}
                   disabled={noDataCustom}
                 />
               </th>

diff --git a/app/utils/numbers.ts b/app/utils/numbers.ts
@@ -0,0 +1,3 @@
+export function toFixedWithoutZeros(num: number, decimalPlaces = 2): number {
+  return Number(num.toFixed(decimalPlaces).replace(/\.?0+$/, ''));
+}