fix /media route

src/pages/media/edit.tsx

@@ -1,8 +1,9 @@
-import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material'
+import {Box, TextField, Button, Typography, Autocomplete} from '@mui/material'
 import {Edit} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {useEffect} from 'react'
 import {useShow} from '@refinedev/core'
+import {Controller} from 'react-hook-form'
 
 import {MEDIA_TYPES} from '../../lib/constants'
 import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
@@ -24,6 +25,7 @@ export const MediaEdit = () => {
     watch,
     setError,
     clearErrors,
+    control,
   } = useForm<MediaFormValues>({
     defaultValues: {
       filename: '',
@@ -68,7 +70,47 @@ export const MediaEdit = () => {
       }}
     >
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
+        <Controller
+          control={control}
+          name="media_type"
+          rules={{
+            required: 'Это поле является обязательным',
+          }}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              options={MEDIA_TYPES}
+              value={MEDIA_TYPES.find((option) => option.value === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.value || null)
+                handleMediaTypeChange(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.media_type} helperText={(errors as any)?.media_type?.message} required />}
+            />
+          )}
+        />
+
+        <TextField
+          {...register('filename', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.filename}
+          helperText={(errors as any)?.filename?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label="Название"
+          name="filename"
+        />
+
+        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={4}>
           <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
             <Button variant="contained" component="label" disabled={!selectedMediaType}>
               {selectedFile ? 'Изменить файл' : 'Загрузить файл'}
@@ -90,48 +132,10 @@ export const MediaEdit = () => {
 
           {previewUrl && (
             <Box mt={2} display="flex" justifyContent="center">
-              <img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
+              <img src={previewUrl} alt="Preview" style={{maxWidth: '300px', objectFit: 'contain'}} />
             </Box>
           )}
         </Box>
-
-        <FormControl fullWidth margin="normal" error={!!errors.media_type}>
-          <InputLabel id="media-type-label">Тип</InputLabel>
-          <Select
-            labelId="media-type-label"
-            label="Тип"
-            {...register('media_type', {
-              required: 'Это поле является обязательным',
-              valueAsNumber: true,
-            })}
-            onChange={handleMediaTypeChange}
-          >
-            {MEDIA_TYPES.map((type) => (
-              <MenuItem key={type.value} value={type.value}>
-                {type.label}
-              </MenuItem>
-            ))}
-          </Select>
-          {errors.media_type && (
-            <Typography variant="caption" color="error">
-              {(errors as any)?.media_type?.message}
-            </Typography>
-          )}
-        </FormControl>
-
-        <TextField
-          {...register('filename', {
-            required: 'Это поле является обязательным',
-          })}
-          error={!!(errors as any)?.filename}
-          helperText={(errors as any)?.filename?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label="Название"
-          name="filename"
-        />
       </Box>
     </Edit>
   )