mirror of
https://github.com/Growstuff/growstuff.git
synced 2026-09-25 15:34:55 -04:00
328 lines
14 KiB
React
328 lines
14 KiB
React
import React, {useEffect, useState} from 'react';
|
|
|
|
import {getJson, postJson} from '../api';
|
|
import {formatDate} from '../dates';
|
|
import Modal from './Modal';
|
|
import PlantPartPicker from './PlantPartPicker';
|
|
import Steps from './Steps';
|
|
|
|
const STEPS = ['Choose a part', 'How much?', 'When?', 'Any notes?'];
|
|
const WHEN_CHOICES = [['today', 'Today'], ['yesterday', 'Yesterday'], ['other', 'Enter date']];
|
|
|
|
function humanize(field) {
|
|
return field.replace(/_/g, ' ').replace(/^./, (c) => c.toUpperCase());
|
|
}
|
|
|
|
function errorMessages(status, data) {
|
|
if (status === 422 && data && data.errors) {
|
|
const messages = Object.entries(data.errors).flatMap(([field, list]) => list.map((m) => `${humanize(field)} ${m}`));
|
|
if (messages.length > 0) return messages;
|
|
}
|
|
if (status === 401) return ['Please sign in again to record this harvest.'];
|
|
return ['Something went wrong saving that. Please try again.'];
|
|
}
|
|
|
|
// "2026-09-21" a number of days earlier (or later, if negative), as
|
|
// "2026-09-20". Worked out in UTC so the browser's time zone can't shift it.
|
|
function daysBefore(iso, days) {
|
|
const [year, month, day] = iso.split('-').map(Number);
|
|
return new Date(Date.UTC(year, month - 1, day - days)).toISOString().slice(0, 10);
|
|
}
|
|
|
|
// Recording a harvest from a garden card, as a dialog over the list, in steps
|
|
// like the Add planting dialog: which part of the plant you harvested, how
|
|
// much, when (today unless you say otherwise), then any notes, and save. The
|
|
// crop is the planting's.
|
|
// It loads that, and the choices, from /plantings/:slug/harvests/new.json, saves
|
|
// with POST /harvests.json, and hands the refreshed garden card to onSaved, so
|
|
// the planting's badges follow and the page is never left.
|
|
export default function RecordHarvestModal({planting, iconUrl, onClose, onSaved}) {
|
|
const [form, setForm] = useState(null); // {planting_id, plant_parts, plant_part_id (the usual one), units, weight_units, ...}
|
|
const [values, setValues] = useState(null);
|
|
const [part, setPart] = useState(null); // step 1's answer
|
|
const [step, setStep] = useState(1);
|
|
const [when, setWhen] = useState('today'); // today, yesterday, or other (a date you enter)
|
|
const [loadError, setLoadError] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [errors, setErrors] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
(async () => {
|
|
try {
|
|
const {ok, data} = await getJson(`${planting.url}/harvests/new.json`, {signal: controller.signal});
|
|
if (!ok) throw new Error('load failed');
|
|
setForm(data);
|
|
setValues({
|
|
custom_date: '',
|
|
quantity: '',
|
|
unit: data.units[0].value,
|
|
weight_quantity: '',
|
|
weight_unit: data.weight_units[0].value,
|
|
description: '',
|
|
});
|
|
} catch (error) {
|
|
if (error.name !== 'AbortError') setLoadError(true);
|
|
}
|
|
})();
|
|
return () => controller.abort();
|
|
}, [planting.url]);
|
|
|
|
const set = (field) => (event) => setValues((current) => ({...current, [field]: event.target.value}));
|
|
|
|
// The server's "today" is the one that counts, not the browser's.
|
|
const today = form && form.harvested_at;
|
|
const harvestedAt = {today, yesterday: today && daysBefore(today, 1), other: values && values.custom_date}[when];
|
|
|
|
// A harvest has to come after the planting (the server checks), so there is
|
|
// nothing to offer before that: no Yesterday for a planting made yesterday
|
|
// or today, and the date box starts the day after it was planted.
|
|
const plantedOn = planting.planted_at;
|
|
const choices = WHEN_CHOICES.filter(([choice]) => choice !== 'yesterday' || !plantedOn || (today && daysBefore(today, 1) > plantedOn));
|
|
const earliest = plantedOn ? daysBefore(plantedOn, -1) : undefined;
|
|
|
|
function choosePart(chosen) {
|
|
setPart(chosen);
|
|
setStep(2);
|
|
}
|
|
|
|
function chooseWhen(choice) {
|
|
setWhen(choice);
|
|
if (choice === 'other' && !values.custom_date) setValues((current) => ({...current, custom_date: today}));
|
|
}
|
|
|
|
function amount() {
|
|
const unit = form.units.find((candidate) => candidate.value === values.unit);
|
|
const parts = [
|
|
values.quantity && `${values.quantity} ${unit ? unit.label : values.unit}`,
|
|
values.weight_quantity && `${values.weight_quantity} ${values.weight_unit}`,
|
|
].filter(Boolean);
|
|
return parts.length > 0 ? parts.join(' · ') : 'Not entered';
|
|
}
|
|
|
|
// "Today, 21 Sep", or just the date when you entered one.
|
|
function whenLabel() {
|
|
const date = formatDate(harvestedAt);
|
|
return when === 'other' ? date : `${WHEN_CHOICES.find(([value]) => value === when)[1]}, ${date}`;
|
|
}
|
|
|
|
// Each step's button goes on to the next; the last one saves.
|
|
async function save(event) {
|
|
event.preventDefault();
|
|
if (step < STEPS.length) {
|
|
setStep(step + 1);
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
setErrors([]);
|
|
try {
|
|
const {custom_date: customDate, ...fields} = values;
|
|
const {ok, status, data} = await postJson('/harvests.json', {
|
|
harvest: {planting_id: form.planting_id, plant_part_id: part.id, harvested_at: harvestedAt, ...fields},
|
|
});
|
|
if (ok) {
|
|
onSaved(data.garden); // closes this dialog
|
|
return;
|
|
}
|
|
setErrors(errorMessages(status, data));
|
|
} catch (error) {
|
|
setErrors(['Couldn\'t reach the server. Please try again.']);
|
|
}
|
|
setSaving(false);
|
|
}
|
|
|
|
const title = (
|
|
<>
|
|
{iconUrl && <img src={iconUrl} alt="" className="modal-title-icon" />}
|
|
Record a harvest of {planting.crop.name}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<Modal title={title} titleId={`record-harvest-title-${planting.id}`} onClose={onClose}>
|
|
{loadError && (
|
|
<div className="modal-body">
|
|
<div className="alert alert-danger mb-0" role="alert">Couldn’t load the harvest form. Please close this and try again.</div>
|
|
</div>
|
|
)}
|
|
{!loadError && !values && (
|
|
<div className="modal-body" role="status"><i className="fa fa-spinner fa-spin" aria-hidden="true" /> Loading…</div>
|
|
)}
|
|
{values && step === 1 && (
|
|
<div className="modal-body plant-dialog-body">
|
|
<Steps steps={STEPS} current={1} />
|
|
<PlantPartPicker id="record-harvest-part" parts={form.plant_parts} suggestedId={form.plant_part_id} onChoose={choosePart} />
|
|
</div>
|
|
)}
|
|
{values && step > 1 && (
|
|
<form onSubmit={save}>
|
|
<div className="modal-body plant-dialog-body">
|
|
<Steps steps={STEPS} current={step} />
|
|
{errors.length > 0 && (
|
|
<div className="alert alert-danger" role="alert">
|
|
<i className="fa fa-exclamation-triangle" aria-hidden="true" />{' '}
|
|
<strong>That didn’t save.</strong>
|
|
<ul className="mb-0">{errors.map((message) => <li key={message}>{message}</li>)}</ul>
|
|
<span>What you entered is kept, so you can press Save harvest to try again.</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="crop-confirm mb-4">
|
|
<dl className="crop-confirm-details">
|
|
<dt>Crop</dt>
|
|
<dd>{planting.crop.name}</dd>
|
|
<dt>Part</dt>
|
|
<dd className={step === 2 ? 'crop-confirm-name' : undefined}>
|
|
{part.name}
|
|
<button type="button" className="btn btn-sm btn-outline-secondary ms-3" onClick={() => setStep(1)} disabled={saving}>
|
|
<i className="fa fa-edit" aria-hidden="true" /> Change<span className="visually-hidden"> plant part</span>
|
|
</button>
|
|
</dd>
|
|
{step > 2 && (
|
|
<>
|
|
<dt>Amount</dt>
|
|
<dd>
|
|
{amount()}
|
|
<button type="button" className="btn btn-sm btn-outline-secondary ms-3" onClick={() => setStep(2)} disabled={saving}>
|
|
<i className="fa fa-edit" aria-hidden="true" /> Change<span className="visually-hidden"> amount</span>
|
|
</button>
|
|
</dd>
|
|
</>
|
|
)}
|
|
{step > 3 && (
|
|
<>
|
|
<dt>When</dt>
|
|
<dd>
|
|
{whenLabel()}
|
|
<button type="button" className="btn btn-sm btn-outline-secondary ms-3" onClick={() => setStep(3)} disabled={saving}>
|
|
<i className="fa fa-edit" aria-hidden="true" /> Change<span className="visually-hidden"> when</span>
|
|
</button>
|
|
</dd>
|
|
</>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
|
|
{step === 2 && (
|
|
<>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-4">
|
|
<label className="form-label" htmlFor="record-harvest-quantity">How many?</label>
|
|
<input
|
|
id="record-harvest-quantity"
|
|
type="number"
|
|
min="0"
|
|
step="any"
|
|
className="form-control"
|
|
value={values.quantity}
|
|
onChange={set('quantity')}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="col-md-8">
|
|
<label className="form-label" htmlFor="record-harvest-unit">Counted as</label>
|
|
<select id="record-harvest-unit" className="form-select" value={values.unit} onChange={set('unit')}>
|
|
{form.units.map((unit) => <option key={unit.value} value={unit.value}>{unit.label}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-4">
|
|
<label className="form-label" htmlFor="record-harvest-weight">Weighing (in total)</label>
|
|
<input
|
|
id="record-harvest-weight"
|
|
type="number"
|
|
min="0"
|
|
step="any"
|
|
className="form-control"
|
|
value={values.weight_quantity}
|
|
onChange={set('weight_quantity')}
|
|
/>
|
|
</div>
|
|
<div className="col-md-8">
|
|
<label className="form-label" htmlFor="record-harvest-weight-unit">Weighed in</label>
|
|
<select id="record-harvest-weight-unit" className="form-select" value={values.weight_unit} onChange={set('weight_unit')}>
|
|
{form.weight_units.map((unit) => <option key={unit.value} value={unit.value}>{unit.label}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<fieldset>
|
|
<legend className="crop-picker-label step-legend">When did you harvest it?</legend>
|
|
<div className="pill-choices">
|
|
{choices.map(([choice, label]) => (
|
|
<React.Fragment key={choice}>
|
|
<input
|
|
type="radio"
|
|
className="visually-hidden"
|
|
name="record-harvest-when"
|
|
id={`record-harvest-when-${choice}`}
|
|
checked={when === choice}
|
|
onChange={() => chooseWhen(choice)}
|
|
autoFocus={choice === 'today'}
|
|
/>
|
|
<label className="pill-choice" htmlFor={`record-harvest-when-${choice}`}>{label}</label>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
{when === 'other' ? (
|
|
<div className="mt-3">
|
|
<label className="form-label" htmlFor="record-harvest-date">Date</label>
|
|
<input
|
|
id="record-harvest-date"
|
|
type="date"
|
|
className="form-control when-date"
|
|
value={values.custom_date}
|
|
min={earliest}
|
|
onChange={set('custom_date')}
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className="step-hint">{harvestedAt && formatDate(harvestedAt)}</p>
|
|
)}
|
|
</fieldset>
|
|
)}
|
|
|
|
{step === 4 && (
|
|
<div>
|
|
<label className="crop-picker-label" htmlFor="record-harvest-notes">Any notes?</label>
|
|
<textarea
|
|
id="record-harvest-notes"
|
|
className="form-control"
|
|
rows="3"
|
|
placeholder="Optional. How did it go?"
|
|
value={values.description}
|
|
onChange={set('description')}
|
|
// Enter is a new line here, so Ctrl or Cmd with Enter saves.
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
|
|
event.preventDefault();
|
|
event.currentTarget.form.requestSubmit();
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="modal-footer">
|
|
{step > 2 && <button type="button" className="btn btn-link" onClick={() => setStep(step - 1)} disabled={saving}>Back</button>}
|
|
{step < STEPS.length && <button type="submit" className="btn btn-success btn-plant">Next</button>}
|
|
{step === STEPS.length && (
|
|
<button type="submit" className="btn btn-success btn-plant" disabled={saving || !harvestedAt} aria-busy={saving}>
|
|
{saving ? <><i className="fa fa-spinner fa-spin" aria-hidden="true" /> Saving…</> : 'Save harvest'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|