fix edit for /media route

This commit is contained in:
maxim 2025-03-16 16:10:40 +03:00
parent 80bc179b69
commit 03aee7a232
2 changed files with 60 additions and 20 deletions

View File

@ -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>

View File

@ -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}>
<InputLabel id="media-type-label">Тип</InputLabel>
<Select
labelId="media-type-label"
label="Тип"
{...register('media_type', { {...register('media_type', {
required: 'Это поле является обязательным', required: 'Это поле является обязательным',
valueAsNumber: true, valueAsNumber: true,
})} })}
error={!!(errors as any)?.media_type} defaultValue=""
helperText={(errors as any)?.media_type?.message} >
margin="normal" {MEDIA_TYPES.map((option) => (
fullWidth <MenuItem key={option.value} value={option.value}>
InputLabelProps={{shrink: true}} {option.label}
type="number" </MenuItem>
label="Тип" ))}
name="media_type" </Select>
/>
{errors.media_type && (
<Typography variant="caption" color="error">
{(errors as any)?.message}
</Typography>
)}
</FormControl>
</Box> </Box>
</Edit> </Edit>
) )