95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import {Autocomplete, Box, TextField} from '@mui/material'
|
|
import {Edit, useAutocomplete} from '@refinedev/mui'
|
|
import {useForm} from '@refinedev/react-hook-form'
|
|
import {Controller} from 'react-hook-form'
|
|
|
|
import {VEHICLE_TYPES} from '../../lib/constants'
|
|
|
|
type VehicleFormValues = {
|
|
tail_number: number
|
|
type: number
|
|
city_id: number
|
|
}
|
|
|
|
export const VehicleEdit = () => {
|
|
const {
|
|
saveButtonProps,
|
|
register,
|
|
control,
|
|
formState: {errors},
|
|
} = useForm<VehicleFormValues>({})
|
|
|
|
const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
|
|
resource: 'city',
|
|
})
|
|
|
|
return (
|
|
<Edit saveButtonProps={saveButtonProps}>
|
|
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
|
<TextField
|
|
{...register('tail_number', {
|
|
required: 'Это поле является обязательным',
|
|
valueAsNumber: true,
|
|
})}
|
|
error={!!(errors as any)?.tail_number}
|
|
helperText={(errors as any)?.tail_number?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{shrink: true}}
|
|
type="number"
|
|
label="Бортовой номер"
|
|
name="tail_number"
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="type"
|
|
rules={{
|
|
required: 'Это поле является обязательным',
|
|
}}
|
|
defaultValue={null}
|
|
render={({field}) => (
|
|
<Autocomplete
|
|
options={VEHICLE_TYPES}
|
|
value={VEHICLE_TYPES.find((option) => option.value === field.value) || null}
|
|
onChange={(_, value) => {
|
|
field.onChange(value?.value || null)
|
|
}}
|
|
getOptionLabel={(item) => {
|
|
return item ? item.label : ''
|
|
}}
|
|
isOptionEqualToValue={(option, value) => {
|
|
return option.value === value?.value
|
|
}}
|
|
renderInput={(params) => <TextField {...params} label="Выберите тип" margin="normal" variant="outlined" error={!!errors.type} helperText={(errors as any)?.type?.message} required />}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="city_id"
|
|
rules={{required: 'Это поле является обязательным'}}
|
|
defaultValue={null}
|
|
render={({field}) => (
|
|
<Autocomplete
|
|
{...cityAutocompleteProps}
|
|
value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
|
|
onChange={(_, value) => {
|
|
field.onChange(value?.id || '')
|
|
}}
|
|
getOptionLabel={(item) => {
|
|
return item ? item.name : ''
|
|
}}
|
|
isOptionEqualToValue={(option, value) => {
|
|
return option.id === value?.id
|
|
}}
|
|
renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
</Edit>
|
|
)
|
|
}
|