Skip to content

Commit

Permalink
hide save protected areas button if threshold slider is not dirty
Browse files Browse the repository at this point in the history
  • Loading branch information
@anamontiaga
anamontiaga committed Dec 15, 2023
1 parent fa16ff4 commit 4bc55cc
Showing 1 changed file with 114 additions and 112 deletions.
226 changes: 114 additions & 112 deletions app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export const WDPAThreshold = ({ onGoBack }: { onGoBack: () => void }): JSX.Eleme
level: 'success',
}
);
onGoBack();
},
onError: () => {
addToast(
Expand Down Expand Up @@ -206,127 +205,130 @@ export const WDPAThreshold = ({ onGoBack }: { onGoBack: () => void }): JSX.Eleme
</h3>
</div>
<FormRFF onSubmit={handleSubmit} initialValues={INITIAL_VALUES}>
{({ values, handleSubmit: RFFhandleSubmit }) => (
<form
onSubmit={RFFhandleSubmit}
autoComplete="off"
className="relative flex w-full flex-grow flex-col overflow-hidden"
>
<Loading
visible={submitting}
className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
iconClassName="w-10 h-10 text-white"
/>

<div className="relative flex flex-grow flex-col overflow-hidden">
<div className="relative overflow-y-auto overflow-x-visible px-0.5">
<div className="py-6">
{/* WDPA */}
<div>
<FieldRFF
name="wdpaThreshold"
validate={composeValidators([{ presence: true }])}
>
{(flprops) => (
<Field id="scenario-wdpaThreshold" {...flprops}>
<div className="mb-3 flex items-center">
<Label ref={labelRef} theme="dark" className="mr-3 uppercase">
Set the threshold for protected areas
</Label>
<InfoButton>
<div>
<h4 className="mb-2.5 font-heading text-lg">
Threshold for Protected Areas
</h4>
<div className="space-y-2">
<p>
Refers to what percentage of a planning unit must be covered by
a protected area to be considered &quot;protected&quot; by
Marxan.
</p>
<p>
The following image shows an example setting a threshold of 50%:
</p>
{({ values, handleSubmit: RFFhandleSubmit, form }) => {
return (
<form
onSubmit={RFFhandleSubmit}
autoComplete="off"
className="relative flex w-full flex-grow flex-col overflow-hidden"
>
<Loading
visible={submitting}
className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
iconClassName="w-10 h-10 text-white"
/>

<div className="relative flex flex-grow flex-col overflow-hidden">
<div className="relative overflow-y-auto overflow-x-visible px-0.5">
<div className="py-6">
{/* WDPA */}
<div>
<FieldRFF
name="wdpaThreshold"
validate={composeValidators([{ presence: true }])}
>
{(flprops) => (
<Field id="scenario-wdpaThreshold" {...flprops}>
<div className="mb-3 flex items-center">
<Label ref={labelRef} theme="dark" className="mr-3 uppercase">
Set the threshold for protected areas
</Label>
<InfoButton>
<div>
<h4 className="mb-2.5 font-heading text-lg">
Threshold for Protected Areas
</h4>
<div className="space-y-2">
<p>
Refers to what percentage of a planning unit must be covered
by a protected area to be considered &quot;protected&quot; by
Marxan.
</p>
<p>
The following image shows an example setting a threshold of
50%:
</p>
</div>

<img src={THRESHOLD_IMG} alt="Threshold" />
</div>

<img src={THRESHOLD_IMG} alt="Threshold" />
</div>
</InfoButton>
</div>

<p className="mb-3 text-sm text-gray-400">
Refers to what percentage of a planning unit must be covered by a
protected area to be considered “protected”.
</p>

<Slider
labelRef={labelRef}
theme="dark"
defaultValue={values.wdpaThreshold}
formatOptions={{
style: 'percent',
}}
maxValue={1}
minValue={0.01}
step={0.01}
disabled={!editable}
onChange={(s) => {
flprops.input.onChange(s);
dispatch(setWDPAThreshold(s));
}}
/>
</Field>
)}
</FieldRFF>
</InfoButton>
</div>

<p className="mb-3 text-sm text-gray-400">
Refers to what percentage of a planning unit must be covered by a
protected area to be considered “protected”.
</p>

<Slider
labelRef={labelRef}
theme="dark"
defaultValue={values.wdpaThreshold}
formatOptions={{
style: 'percent',
}}
maxValue={1}
minValue={0.01}
step={0.01}
disabled={!editable}
onChange={(s) => {
flprops.input.onChange(s);
dispatch(setWDPAThreshold(s));
}}
/>
</Field>
)}
</FieldRFF>
</div>

{areGlobalPAreasSelected && (
<ProtectedAreasSelected
options={GLOBAL_PA_OPTIONS}
title="Selected protected areas:"
isView
wdpaIucnCategories={wdpaCategories.wdpaIucnCategories}
/>
)}

{areProjectPAreasSelected && (
<ProtectedAreasSelected
options={PROJECT_PA_OPTIONS}
title="Uploaded protected areas:"
isView
wdpaIucnCategories={wdpaCategories.wdpaIucnCategories}
/>
)}
</div>

{areGlobalPAreasSelected && (
<ProtectedAreasSelected
options={GLOBAL_PA_OPTIONS}
title="Selected protected areas:"
isView
wdpaIucnCategories={wdpaCategories.wdpaIucnCategories}
/>
)}

{areProjectPAreasSelected && (
<ProtectedAreasSelected
options={PROJECT_PA_OPTIONS}
title="Uploaded protected areas:"
isView
wdpaIucnCategories={wdpaCategories.wdpaIucnCategories}
/>
)}
</div>
</div>
</div>

<div className="mt-5 flex justify-center space-x-4">
<Button
theme="secondary"
size="lg"
type="button"
className="relative px-20 md:px-9 lg:px-16 xl:px-20"
disabled={submitting}
onClick={onGoBack}
>
<span>Back</span>
</Button>

{editable && (

<div className="mt-5 flex justify-center space-x-4">
<Button
theme="primary"
theme="secondary"
size="lg"
type="submit"
type="button"
className="relative px-20 md:px-9 lg:px-16 xl:px-20"
disabled={submitting}
onClick={onGoBack}
>
<span>Save</span>
<span>Back</span>
</Button>
)}
</div>
</form>
)}

{editable && form.getFieldState('wdpaThreshold')?.dirty && (
<Button
theme="primary"
size="lg"
type="submit"
className="relative px-20 md:px-9 lg:px-16 xl:px-20"
disabled={submitting}
>
<span>Save</span>
</Button>
)}
</div>
</form>
);
}}
</FormRFF>
</Section>
);
Expand Down

0 comments on commit 4bc55cc

Please sign in to comment.