Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 1x 1x 1x 1x 1x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 102x 7x 7x 7x 7x 102x 2x 2x 2x 102x 3x 3x 3x 102x 46x 46x 102x 16x 16x 16x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 102x 102x 102x 1x | import { Button, Form } from "react-bootstrap";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useBackend } from "main/utils/useBackend";
import CommonsSelect from "main/components/Commons/CommonsSelect";
function SetCowHealthForm({
submitAction = () => {},
testid = "SetCowHealthForm",
}) {
const localHealthValue = localStorage.getItem(`${testid}-health`);
const [healthValue, setHealthValue] = useState(localHealthValue || 100);
const { data: commons } = useBackend(
["/api/commons/all"],
{ url: "/api/commons/all" },
[],
);
const [selectedCommons, setSelectedCommons] = useState(null);
const [selectedCommonsName, setSelectedCommonsName] = useState(null);
const {
handleSubmit,
register,
formState: { errors },
} = useForm();
const handleHealthValueChange = (e) => {
const newValue = e.target.value;
setHealthValue(newValue);
localStorage.setItem(`${testid}-health`, newValue);
};
const handleCommonsSelection = (id, name) => {
setSelectedCommons(id);
setSelectedCommonsName(name);
};
const onSubmit = () => {
const params = { selectedCommons, healthValue, selectedCommonsName };
submitAction(params);
};
if (!commons || commons.length === 0) {
return <div>There are no commons on which to run this job.</div>;
}
if (selectedCommons === null) {
setSelectedCommons(commons[0].id);
setSelectedCommonsName(commons[0].name);
}
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Group className="mb-3">
<Form.Text htmlFor="description">
Set the cow health for all cows in a single commons.
</Form.Text>
</Form.Group>
<CommonsSelect
commons={commons}
selectedCommons={selectedCommons}
handleCommonsSelection={handleCommonsSelection}
testid={testid}
/>
<Form.Group className="mb-3">
<Form.Label htmlFor="healthValue">Health [0-100]</Form.Label>
<Form.Control
data-testid={`${testid}-healthValue`}
id="healthValue"
type="number"
step="1"
value={healthValue}
{...register("healthValue", {
required: "Health Value is required",
min: { value: 0, message: "Health Value must be ≥ 0" },
max: { value: 100, message: "Health Value must be ≤ 100" },
})}
onChange={handleHealthValueChange}
/>
<Form.Control.Feedback type="invalid">
{errors.healthValue?.message}
</Form.Control.Feedback>
</Form.Group>
<Button type="submit" data-testid="SetCowHealthForm-Submit-Button">
Set Cow Health
</Button>
</Form>
);
}
export default SetCowHealthForm;
|