Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature bulking: added edition modes [MRXNM-58] #1690

Merged
merged 4 commits into from
Sep 10, 2024
Merged

feature bulking: added edition modes [MRXNM-58] #1690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bead9ce
feature bulking: added edition modes
andresgnlez Sep 4, 2024
8b2d587
avoids floating point
andresgnlez Sep 10, 2024
f4f9c14
empty fields for bulk edition by default. submit button disabled unti…
andresgnlez Sep 10, 2024
bedab07
fixes checkbox after submitting changes
andresgnlez Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 111 additions & 53 deletions ...ct/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/modals/edit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
};
}),
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
}),
Expand All @@ -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,
}),
Expand Down Expand Up @@ -424,7 +425,7 @@ const TargetAndSPFFeatures = (): JSX.Element => {
return {
...acc,
[featureId]: {
target: marxanSettings?.prop * 100,
target: toFixedWithoutZeros(marxanSettings?.prop * 100),
spf: marxanSettings?.fpf,
},
};
Expand Down
1 change: 1 addition & 0 deletions ...ayout/project/sidebar/scenario/grid-setup/features/target-spf/targets-spf-table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions app/utils/numbers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function toFixedWithoutZeros(num: number, decimalPlaces = 2): number {
return Number(num.toFixed(decimalPlaces).replace(/\.?0+$/, ''));
}
Loading