WhiteNightsAdminPanel/src/pages/carrier/edit.tsx

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'

export const CarrierEdit = () => {
  const {
    saveButtonProps,
    register,
    control,
    formState: {errors},
  } = useForm()

  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
    resource: 'city',
    onSearch: (value) => [
      {
        field: 'name',
        operator: 'contains',
        value,
      },
    ],
  })

  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
    resource: 'media',
    onSearch: (value) => [
      {
        field: 'filename',
        operator: 'contains',
        value,
      },
    ],
  })

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
        <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
              }}
              filterOptions={(options, {inputValue}) => {
                return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
              }}
              renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
            />
          )}
        />

        <TextField
          {...register('full_name', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.full_name}
          helperText={(errors as any)?.full_name?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Полное имя'}
          name="full_name"
        />

        <TextField
          {...register('short_name', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.short_name}
          helperText={(errors as any)?.short_name?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Короткое имя'}
          name="short_name"
        />

        <TextField
          {...register('main_color', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.main_color}
          helperText={(errors as any)?.main_color?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="color"
          label={'Основной цвет'}
          name="main_color"
          sx={{
            '& input': {
              height: '50px',
              paddingBlock: '14px',
              paddingInline: '14px',
              cursor: 'pointer',
            },
          }}
        />

        <TextField
          {...register('left_color', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.left_color}
          helperText={(errors as any)?.left_color?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="color"
          label={'Цвет левого виджета'}
          name="left_color"
          sx={{
            '& input': {
              height: '50px',
              paddingBlock: '14px',
              paddingInline: '14px',
              cursor: 'pointer',
            },
          }}
        />
        <TextField
          {...register('right_color', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.right_color}
          helperText={(errors as any)?.right_color?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="color"
          label={'Цвет правого виджета'}
          name="right_color"
          sx={{
            '& input': {
              height: '50px',
              paddingBlock: '14px',
              paddingInline: '14px',
              cursor: 'pointer',
            },
          }}
        />

        <TextField
          {...register('slogan', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.slogan}
          helperText={(errors as any)?.slogan?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Слоган'}
          name="slogan"
        />

        <Controller
          control={control}
          name="logo"
          rules={{required: 'Это поле является обязательным'}}
          defaultValue={null}
          render={({field}) => (
            <Autocomplete
              {...mediaAutocompleteProps}
              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
              onChange={(_, value) => {
                field.onChange(value?.id || '')
              }}
              getOptionLabel={(item) => {
                return item ? item.filename : ''
              }}
              isOptionEqualToValue={(option, value) => {
                return option.id === value?.id
              }}
              filterOptions={(options, {inputValue}) => {
                return options.filter((option) => option.filename.toLowerCase().includes(inputValue.toLowerCase()))
              }}
              renderInput={(params) => <TextField {...params} label="Выберите логотип" margin="normal" variant="outlined" error={!!errors.logo} helperText={(errors as any)?.logo?.message} required />}
            />
          )}
        />
      </Box>
    </Edit>
  )
}