fix edit for /media route
				
					
				
			This commit is contained in:
		| @@ -23,7 +23,7 @@ export const CountryCreate = () => { | |||||||
|           fullWidth |           fullWidth | ||||||
|           InputLabelProps={{shrink: true}} |           InputLabelProps={{shrink: true}} | ||||||
|           type="text" |           type="text" | ||||||
|           label={'Code'} |           label={'Код'} | ||||||
|           name="code" |           name="code" | ||||||
|         /> |         /> | ||||||
|         <TextField |         <TextField | ||||||
| @@ -36,7 +36,7 @@ export const CountryCreate = () => { | |||||||
|           fullWidth |           fullWidth | ||||||
|           InputLabelProps={{shrink: true}} |           InputLabelProps={{shrink: true}} | ||||||
|           type="text" |           type="text" | ||||||
|           label={'Name'} |           label={'Название'} | ||||||
|           name="name" |           name="name" | ||||||
|         /> |         /> | ||||||
|       </Box> |       </Box> | ||||||
|   | |||||||
| @@ -1,16 +1,32 @@ | |||||||
| import {Box, TextField, Button, Typography} from '@mui/material' | import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material' | ||||||
| import {Edit} from '@refinedev/mui' | import {Edit} from '@refinedev/mui' | ||||||
| import {useForm} from '@refinedev/react-hook-form' | import {useForm} from '@refinedev/react-hook-form' | ||||||
| import {useState, useEffect} from 'react' | import {useState, useEffect} from 'react' | ||||||
| import {useShow} from '@refinedev/core' | import {useShow} from '@refinedev/core' | ||||||
|  |  | ||||||
|  | import {MEDIA_TYPES} from '../../lib/constants' | ||||||
|  |  | ||||||
|  | type MediaFormValues = { | ||||||
|  |   filename: string | ||||||
|  |   media_type: number | ||||||
|  |   file?: File | ||||||
|  | } | ||||||
|  |  | ||||||
| export const MediaEdit = () => { | export const MediaEdit = () => { | ||||||
|   const { |   const { | ||||||
|     saveButtonProps, |     saveButtonProps, | ||||||
|  |     refineCore: {onFinish}, | ||||||
|     register, |     register, | ||||||
|     formState: {errors}, |     formState: {errors}, | ||||||
|     setValue, |     setValue, | ||||||
|   } = useForm({}) |     handleSubmit, | ||||||
|  |   } = useForm<MediaFormValues>({ | ||||||
|  |     defaultValues: { | ||||||
|  |       filename: '', | ||||||
|  |       media_type: '', | ||||||
|  |       file: undefined, | ||||||
|  |     }, | ||||||
|  |   }) | ||||||
|  |  | ||||||
|   const {query} = useShow() |   const {query} = useShow() | ||||||
|   const {data} = query |   const {data} = query | ||||||
| @@ -22,8 +38,10 @@ export const MediaEdit = () => { | |||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     if (record?.id) { |     if (record?.id) { | ||||||
|       setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`) |       setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`) | ||||||
|  |       setValue('filename', record?.filename || '') | ||||||
|  |       setValue('media_type', record?.media_type) | ||||||
|     } |     } | ||||||
|   }, [record]) |   }, [record, setValue]) | ||||||
|  |  | ||||||
|   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { |   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||||||
|     const file = event.target.files?.[0] |     const file = event.target.files?.[0] | ||||||
| @@ -39,7 +57,19 @@ export const MediaEdit = () => { | |||||||
|   } |   } | ||||||
|  |  | ||||||
|   return ( |   return ( | ||||||
|     <Edit saveButtonProps={saveButtonProps}> |     <Edit | ||||||
|  |       saveButtonProps={{ | ||||||
|  |         ...saveButtonProps, | ||||||
|  |         onClick: handleSubmit((data) => { | ||||||
|  |           const formData = { | ||||||
|  |             filename: data.filename, | ||||||
|  |             type: Number(data.media_type), | ||||||
|  |           } | ||||||
|  |  | ||||||
|  |           onFinish(formData) | ||||||
|  |         }), | ||||||
|  |       }} | ||||||
|  |     > | ||||||
|       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off"> |       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off"> | ||||||
|         <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}> |         <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}> | ||||||
|           <Box display="flex" alignItems="center" gap={2}> |           <Box display="flex" alignItems="center" gap={2}> | ||||||
| @@ -76,20 +106,30 @@ export const MediaEdit = () => { | |||||||
|           name="filename" |           name="filename" | ||||||
|         /> |         /> | ||||||
|  |  | ||||||
|         <TextField |         <FormControl fullWidth margin="normal" error={!!errors.media_type}> | ||||||
|           {...register('media_type', { |           <InputLabel id="media-type-label">Тип</InputLabel> | ||||||
|             required: 'Это поле является обязательным', |           <Select | ||||||
|             valueAsNumber: true, |             labelId="media-type-label" | ||||||
|           })} |             label="Тип" | ||||||
|           error={!!(errors as any)?.media_type} |             {...register('media_type', { | ||||||
|           helperText={(errors as any)?.media_type?.message} |               required: 'Это поле является обязательным', | ||||||
|           margin="normal" |               valueAsNumber: true, | ||||||
|           fullWidth |             })} | ||||||
|           InputLabelProps={{shrink: true}} |             defaultValue="" | ||||||
|           type="number" |           > | ||||||
|           label="Тип" |             {MEDIA_TYPES.map((option) => ( | ||||||
|           name="media_type" |               <MenuItem key={option.value} value={option.value}> | ||||||
|         /> |                 {option.label} | ||||||
|  |               </MenuItem> | ||||||
|  |             ))} | ||||||
|  |           </Select> | ||||||
|  |  | ||||||
|  |           {errors.media_type && ( | ||||||
|  |             <Typography variant="caption" color="error"> | ||||||
|  |               {(errors as any)?.message} | ||||||
|  |             </Typography> | ||||||
|  |           )} | ||||||
|  |         </FormControl> | ||||||
|       </Box> |       </Box> | ||||||
|     </Edit> |     </Edit> | ||||||
|   ) |   ) | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user