fix edit
for /media
route
This commit is contained in:
parent
80bc179b69
commit
03aee7a232
@ -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>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user