137 lines
3.9 KiB
TypeScript
137 lines
3.9 KiB
TypeScript
import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material'
|
||
import {Edit} from '@refinedev/mui'
|
||
import {useForm} from '@refinedev/react-hook-form'
|
||
import {useState, useEffect} from 'react'
|
||
import {useShow} from '@refinedev/core'
|
||
|
||
import {MEDIA_TYPES} from '../../lib/constants'
|
||
|
||
type MediaFormValues = {
|
||
filename: string
|
||
media_type: number
|
||
file?: File
|
||
}
|
||
|
||
export const MediaEdit = () => {
|
||
const {
|
||
saveButtonProps,
|
||
refineCore: {onFinish},
|
||
register,
|
||
formState: {errors},
|
||
setValue,
|
||
handleSubmit,
|
||
} = useForm<MediaFormValues>({
|
||
defaultValues: {
|
||
filename: '',
|
||
media_type: '',
|
||
file: undefined,
|
||
},
|
||
})
|
||
|
||
const {query} = useShow()
|
||
const {data} = query
|
||
const record = data?.data
|
||
|
||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||
const [previewUrl, setPreviewUrl] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
if (record?.id) {
|
||
setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`)
|
||
setValue('filename', record?.filename || '')
|
||
setValue('media_type', record?.media_type)
|
||
}
|
||
}, [record, setValue])
|
||
|
||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0]
|
||
if (file) {
|
||
setValue('file', file)
|
||
setSelectedFile(file)
|
||
|
||
if (file.type.startsWith('image/')) {
|
||
const url = URL.createObjectURL(file)
|
||
setPreviewUrl(url)
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<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 display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
|
||
<Box display="flex" alignItems="center" gap={2}>
|
||
<Button variant="contained" component="label">
|
||
{selectedFile ? 'Изменить файл' : 'Загрузить файл'}
|
||
<input type="file" hidden onChange={handleFileChange} />
|
||
</Button>
|
||
|
||
{selectedFile && (
|
||
<Typography variant="body2" color="text.secondary">
|
||
{selectedFile.name}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
|
||
{previewUrl && (
|
||
<Box mt={2} display="flex" justifyContent="center">
|
||
<img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
|
||
<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"
|
||
/>
|
||
|
||
<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,
|
||
})}
|
||
defaultValue=""
|
||
>
|
||
{MEDIA_TYPES.map((option) => (
|
||
<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>
|
||
</Edit>
|
||
)
|
||
}
|