31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { TextField } from '@mui/material'
|
|
import type { Person } from './api.ts'
|
|
import { personProblems } from './person.ts'
|
|
|
|
/** The first name, last name and e-mail fields; with emailOnly, of a Manager-only account, only the e-mail field, optional. */
|
|
export default function PersonFields(props: { person: Person; onChange: (person: Person) => void; autoFocus?: boolean; emailOnly?: boolean }) {
|
|
const problems = personProblems(props.person)
|
|
const field = (key: keyof Person, label: string, type = 'text', help = '') => (
|
|
<TextField
|
|
label={label}
|
|
type={type}
|
|
value={props.person[key]}
|
|
autoFocus={props.autoFocus && key === (props.emailOnly ? 'email' : 'first_name')}
|
|
autoComplete="off"
|
|
error={problems[key] !== ''}
|
|
helperText={problems[key] || help}
|
|
onChange={(event) => props.onChange({ ...props.person, [key]: event.target.value })}
|
|
/>
|
|
)
|
|
if (props.emailOnly) {
|
|
return field('email', 'E-mail', 'email', 'Optional, for notifications.')
|
|
}
|
|
return (
|
|
<>
|
|
{field('first_name', 'First name')}
|
|
{field('last_name', 'Last name')}
|
|
{field('email', 'E-mail', 'email')}
|
|
</>
|
|
)
|
|
}
|