From 0e380ad5e8d608192b83e6c54fd4ddba063a46f8 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Mon, 17 Mar 2025 01:42:43 +0300
Subject: [PATCH] fix `create, edit` of `/route` route

---
 src/pages/route/create.tsx | 41 ++++++++++++++++++++++++-------------
 src/pages/route/edit.tsx   | 42 ++++++++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/pages/route/create.tsx b/src/pages/route/create.tsx
index 1dc99f9..6bebaca 100644
--- a/src/pages/route/create.tsx
+++ b/src/pages/route/create.tsx
@@ -1,5 +1,5 @@
-import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Create} from '@refinedev/mui'
+import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
+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
-          {...register('carrier_id', {
-            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 перевозчика'}
+        <Controller
+          control={control}
           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: 'Это поле является обязательным',
diff --git a/src/pages/route/edit.tsx b/src/pages/route/edit.tsx
index 32afad0..4491bf3 100644
--- a/src/pages/route/edit.tsx
+++ b/src/pages/route/edit.tsx
@@ -1,5 +1,5 @@
-import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Edit} from '@refinedev/mui'
+import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
+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
-          {...register('carrier_id', {
-            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 перевозчика'}
+        <Controller
+          control={control}
           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}