abstract urls
This commit is contained in:
@ -1,26 +1,36 @@
|
||||
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 {
|
||||
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'
|
||||
import {TOKEN_KEY} from '../../authProvider'
|
||||
import { MEDIA_TYPES } from "../../lib/constants";
|
||||
import {
|
||||
ALLOWED_IMAGE_TYPES,
|
||||
ALLOWED_VIDEO_TYPES,
|
||||
useMediaFileUpload,
|
||||
} from "../../components/media/MediaFormUtils";
|
||||
import { TOKEN_KEY } from "../../authProvider";
|
||||
|
||||
type MediaFormValues = {
|
||||
media_name: string
|
||||
media_type: number
|
||||
file?: File
|
||||
}
|
||||
media_name: string;
|
||||
media_type: number;
|
||||
file?: File;
|
||||
};
|
||||
|
||||
export const MediaEdit = () => {
|
||||
const {
|
||||
saveButtonProps,
|
||||
refineCore: {onFinish},
|
||||
refineCore: { onFinish },
|
||||
register,
|
||||
formState: {errors},
|
||||
formState: { errors },
|
||||
setValue,
|
||||
handleSubmit,
|
||||
watch,
|
||||
@ -29,32 +39,42 @@ export const MediaEdit = () => {
|
||||
control,
|
||||
} = useForm<MediaFormValues>({
|
||||
defaultValues: {
|
||||
media_name: '',
|
||||
media_type: '',
|
||||
media_name: "",
|
||||
media_type: "",
|
||||
file: undefined,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const {query} = useShow()
|
||||
const {data} = query
|
||||
const record = data?.data
|
||||
const { query } = useShow();
|
||||
const { data } = query;
|
||||
const record = data?.data;
|
||||
|
||||
const selectedMediaType = watch('media_type')
|
||||
const selectedMediaType = watch("media_type");
|
||||
|
||||
const {selectedFile, previewUrl, setPreviewUrl, handleFileChange, handleMediaTypeChange} = useMediaFileUpload({
|
||||
const {
|
||||
selectedFile,
|
||||
previewUrl,
|
||||
setPreviewUrl,
|
||||
handleFileChange,
|
||||
handleMediaTypeChange,
|
||||
} = useMediaFileUpload({
|
||||
selectedMediaType,
|
||||
setError,
|
||||
clearErrors,
|
||||
setValue,
|
||||
})
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (record?.id) {
|
||||
setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download?token=${localStorage.getItem(TOKEN_KEY)}`)
|
||||
setValue('media_name', record?.media_name || '')
|
||||
setValue('media_type', record?.media_type)
|
||||
setPreviewUrl(
|
||||
`${import.meta.env.VITE_KRBL_MEDIA}${
|
||||
record.id
|
||||
}/download?token=${localStorage.getItem(TOKEN_KEY)}`
|
||||
);
|
||||
setValue("media_name", record?.media_name || "");
|
||||
setValue("media_type", record?.media_type);
|
||||
}
|
||||
}, [record, setValue, setPreviewUrl])
|
||||
}, [record, setValue, setPreviewUrl]);
|
||||
|
||||
return (
|
||||
<Edit
|
||||
@ -66,57 +86,98 @@ export const MediaEdit = () => {
|
||||
media_name: data.media_name,
|
||||
filename: selectedFile?.name || record?.filename,
|
||||
type: Number(data.media_type),
|
||||
}
|
||||
onFinish(formData)
|
||||
};
|
||||
onFinish(formData);
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
||||
<Box
|
||||
component="form"
|
||||
sx={{ display: "flex", flexDirection: "column" }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="media_type"
|
||||
rules={{
|
||||
required: 'Это поле является обязательным',
|
||||
required: "Это поле является обязательным",
|
||||
}}
|
||||
defaultValue={null}
|
||||
render={({field}) => (
|
||||
render={({ field }) => (
|
||||
<Autocomplete
|
||||
options={MEDIA_TYPES}
|
||||
value={MEDIA_TYPES.find((option) => option.value === field.value) || null}
|
||||
value={
|
||||
MEDIA_TYPES.find((option) => option.value === field.value) ||
|
||||
null
|
||||
}
|
||||
onChange={(_, value) => {
|
||||
field.onChange(value?.value || null)
|
||||
handleMediaTypeChange(value?.value || null)
|
||||
field.onChange(value?.value || null);
|
||||
handleMediaTypeChange(value?.value || null);
|
||||
}}
|
||||
getOptionLabel={(item) => {
|
||||
return item ? item.label : ''
|
||||
return item ? item.label : "";
|
||||
}}
|
||||
isOptionEqualToValue={(option, value) => {
|
||||
return option.value === value?.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 />}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Тип"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
error={!!errors.media_type}
|
||||
helperText={(errors as any)?.media_type?.message}
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
{...register('media_name', {
|
||||
required: 'Это поле является обязательным',
|
||||
{...register("media_name", {
|
||||
required: "Это поле является обязательным",
|
||||
})}
|
||||
error={!!(errors as any)?.media_name}
|
||||
helperText={(errors as any)?.media_name?.message}
|
||||
margin="normal"
|
||||
fullWidth
|
||||
InputLabelProps={{shrink: true}}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type="text"
|
||||
label="Название *"
|
||||
name="media_name"
|
||||
/>
|
||||
|
||||
<Box display="flex" flexDirection="column-reverse" alignItems="center" gap={4} style={{marginTop: 10}}>
|
||||
<Box display="flex" flexDirection="column" alignItems="center" gap={2}>
|
||||
<Button variant="contained" component="label" disabled={!selectedMediaType}>
|
||||
{selectedFile ? 'Изменить файл' : 'Загрузить файл'}
|
||||
<input type="file" hidden onChange={handleFileChange} accept={selectedMediaType === 1 ? ALLOWED_IMAGE_TYPES.join(',') : ALLOWED_VIDEO_TYPES.join(',')} />
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column-reverse"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
disabled={!selectedMediaType}
|
||||
>
|
||||
{selectedFile ? "Изменить файл" : "Загрузить файл"}
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
onChange={handleFileChange}
|
||||
accept={
|
||||
selectedMediaType === 1
|
||||
? ALLOWED_IMAGE_TYPES.join(",")
|
||||
: ALLOWED_VIDEO_TYPES.join(",")
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{selectedFile && (
|
||||
@ -134,11 +195,15 @@ export const MediaEdit = () => {
|
||||
|
||||
{previewUrl && selectedMediaType === 1 && (
|
||||
<Box mt={2} display="flex" justifyContent="center">
|
||||
<img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Preview"
|
||||
style={{ maxWidth: "200px", borderRadius: 8 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Edit>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user