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 98 99 100 101 102 103 | 1x 1x 1x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 1x | import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router";
function UCSBOrganizationForm({ initialContents, submitAction, buttonLabel = "Create" }) {
const {
register,
formState: { errors },
handleSubmit,
} = useForm({ defaultValues: initialContents || {} });
const navigate = useNavigate();
const testIdPrefix = "UCSBOrganizationForm";
return (
<Form onSubmit={handleSubmit(submitAction)}>
{/* Organization Code */}
<Form.Group className="mb-3">
<Form.Label htmlFor="orgCode">Organization Code</Form.Label>
<Form.Control
data-testid={testIdPrefix + "-orgCode"}
id="orgCode"
type="text"
isInvalid={Boolean(errors.orgCode)}
{...register("orgCode", {
required: "Organization Code is required.",
maxLength: {
value: 10,
message: "Max length 10 characters",
},
})}
disabled={Boolean(initialContents)}
/>
<Form.Control.Feedback type="invalid">
{errors.orgCode?.message}
</Form.Control.Feedback>
</Form.Group>
{/* Organization Short Translation */}
<Form.Group className="mb-3">
<Form.Label htmlFor="orgTranslationShort">Short Translation</Form.Label>
<Form.Control
data-testid={testIdPrefix + "-orgTranslationShort"}
id="orgTranslationShort"
type="text"
isInvalid={Boolean(errors.orgTranslationShort)}
{...register("orgTranslationShort", {
required: "Short Translation is required.",
maxLength: {
value: 30,
message: "Max length 30 characters",
},
})}
/>
<Form.Control.Feedback type="invalid">
{errors.orgTranslationShort?.message}
</Form.Control.Feedback>
</Form.Group>
{/* Organization Full Translation */}
<Form.Group className="mb-3">
<Form.Label htmlFor="orgTranslation">Full Translation</Form.Label>
<Form.Control
data-testid={testIdPrefix + "-orgTranslation"}
id="orgTranslation"
type="text"
isInvalid={Boolean(errors.orgTranslation)}
{...register("orgTranslation", {
required: "Full Translation is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.orgTranslation?.message}
</Form.Control.Feedback>
</Form.Group>
{/* Inactive Checkbox */}
<Form.Group className="mb-3">
<Form.Check
type="checkbox"
id="inactive"
label="Inactive"
data-testid={testIdPrefix + "-inactive"}
{...register("inactive")}
/>
</Form.Group>
{/* Buttons */}
<Button type="submit" data-testid={testIdPrefix + "-submit"}>
{buttonLabel}
</Button>
<Button
variant="secondary"
onClick={() => navigate(-1)}
data-testid={testIdPrefix + "-cancel"}
>
Cancel
</Button>
</Form>
);
}
export default UCSBOrganizationForm; |