fix create, edit of /route route

src/pages/route/create.tsx

@@ -1,5 +1,5 @@
-import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
+import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Create} from '@refinedev/mui'
+import {Create, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
 
@@ -16,23 +16,36 @@ export const RouteCreate = () => {
     },
   })
 
+  const {autocompleteProps: carrierAutocompleteProps} = useAutocomplete({
+    resource: 'carrier',
+  })
+
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
+        <Controller
-          {...register('carrier_id', {
+          control={control}
-            required: 'Это поле является обязательным',
-            valueAsNumber: true,
-          })}
-          error={!!(errors as any)?.carrier_id}
-          helperText={(errors as any)?.carrier_id?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="number"
-          label={'ID перевозчика'}
           name="carrier_id"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...carrierAutocompleteProps}
+              value={carrierAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.short_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 />}
+            />
+          )}
         />
+
         <TextField
           {...register('route_number', {
             required: 'Это поле является обязательным',

src/pages/route/edit.tsx

@@ -1,5 +1,5 @@
-import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
+import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Edit} from '@refinedev/mui'
+import {Edit, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
 
@@ -11,23 +11,36 @@ export const RouteEdit = () => {
     formState: {errors},
   } = useForm({})
 
+  const {autocompleteProps: carrierAutocompleteProps} = useAutocomplete({
+    resource: 'carrier',
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
+        <Controller
-          {...register('carrier_id', {
+          control={control}
-            required: 'Это поле является обязательным',
-            valueAsNumber: true,
-          })}
-          error={!!(errors as any)?.carrier_id}
-          helperText={(errors as any)?.carrier_id?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="number"
-          label={'ID перевозчика'}
           name="carrier_id"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...carrierAutocompleteProps}
+              value={carrierAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.short_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 />}
+            />
+          )}
         />
+
         <TextField
           {...register('route_number', {
             required: 'Это поле является обязательным',
@@ -55,7 +68,6 @@ export const RouteEdit = () => {
 
         <TextField
           {...register('path', {
-            required: 'Это поле является обязательным',
             setValueAs: (value) => String(value),
           })}
           error={!!(errors as any)?.path}