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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 1x 1x 1x 1x 1x 1x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 1x | import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router";
// A course-scoped form for adding/editing a single staff member. courseId
// is not a field on this form: the caller (a course's own admin page)
// already knows which course it's operating on, and merges courseId into
// the submitted data itself (see StaffTabComponent). See issue #251.
function StaffForm({
initialContents,
submitAction,
buttonLabel = "Create",
cancelDisabled = false,
}) {
// Stryker disable all
const {
register,
formState: { errors },
handleSubmit,
} = useForm({ defaultValues: initialContents || {} });
// Stryker restore all
const navigate = useNavigate();
const testIdPrefix = "StaffForm";
return (
<Form onSubmit={handleSubmit(submitAction)}>
{initialContents?.id != null && (
<Form.Group className="mb-3">
<Form.Label htmlFor="id">Id</Form.Label>
<Form.Control
// Stryker disable next-line all
data-testid={testIdPrefix + "-id"}
id="id"
type="text"
{...register("id")}
value={initialContents.id}
disabled
/>
</Form.Group>
)}
<Form.Group className="mb-3">
<Form.Label htmlFor="lastName">Last Name</Form.Label>
<Form.Control
// Stryker disable next-line all
data-testid={testIdPrefix + "-lastName"}
id="lastName"
type="text"
isInvalid={Boolean(errors.lastName)}
{...register("lastName", {
required: "Last name is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.lastName && "Last name is required."}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="firstMiddleName">First/Middle Name</Form.Label>
<Form.Control
// Stryker disable next-line all
data-testid={testIdPrefix + "-firstMiddleName"}
id="firstMiddleName"
type="text"
isInvalid={Boolean(errors.firstMiddleName)}
{...register("firstMiddleName", {
required: "First/Middle name is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.firstMiddleName && "First/Middle name is required."}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="email">Email</Form.Label>
<Form.Control
// Stryker disable next-line all
data-testid={testIdPrefix + "-email"}
id="email"
type="text"
isInvalid={Boolean(errors.email)}
{...register("email", {
required: "Email is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.email && "Email is required."}
</Form.Control.Feedback>
</Form.Group>
<Button
type="submit"
// Stryker disable next-line all
data-testid={testIdPrefix + "-submit"}
>
{buttonLabel}
</Button>
{!cancelDisabled && (
<Button
variant="Secondary"
onClick={() => navigate(-1)}
// Stryker disable next-line all
data-testid={testIdPrefix + "-cancel"}
>
Cancel
</Button>
)}
</Form>
);
}
export default StaffForm;
|