123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import type { HttpError } from "@refinedev/core";
|
|
import { Create, useAutocomplete } from "@refinedev/mui";
|
|
import Box from "@mui/material/Box";
|
|
import TextField from "@mui/material/TextField";
|
|
import Autocomplete from "@mui/material/Autocomplete";
|
|
import { useForm } from "@refinedev/react-hook-form";
|
|
|
|
import { Controller } from "react-hook-form";
|
|
|
|
import type { IPost, ICategory, IStatus, Nullable } from "../../interfaces";
|
|
|
|
export const PostCreate: React.FC = () => {
|
|
const {
|
|
saveButtonProps,
|
|
register,
|
|
control,
|
|
formState: { errors },
|
|
} = useForm<IPost, HttpError, Nullable<IPost>>();
|
|
|
|
const { autocompleteProps } = useAutocomplete<ICategory>({
|
|
resource: "categories",
|
|
});
|
|
|
|
return (
|
|
<Create saveButtonProps={saveButtonProps}>
|
|
<Box
|
|
component="form"
|
|
sx={{ display: "flex", flexDirection: "column" }}
|
|
autoComplete="off"
|
|
>
|
|
<TextField
|
|
{...register("title", {
|
|
required: "This field is required",
|
|
})}
|
|
error={!!errors.title}
|
|
helperText={errors.title?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
label="Title"
|
|
name="title"
|
|
autoFocus
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
name="status"
|
|
rules={{ required: "This field is required" }}
|
|
// eslint-disable-next-line
|
|
defaultValue={null as any}
|
|
render={({ field }) => (
|
|
<Autocomplete<IStatus>
|
|
options={["published", "draft", "rejected"]}
|
|
{...field}
|
|
onChange={(_, value) => {
|
|
field.onChange(value);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Status"
|
|
margin="normal"
|
|
variant="outlined"
|
|
error={!!errors.status}
|
|
helperText={errors.status?.message}
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
name="category"
|
|
rules={{ required: "This field is required" }}
|
|
// eslint-disable-next-line
|
|
defaultValue={null as any}
|
|
render={({ field }) => (
|
|
<Autocomplete
|
|
{...autocompleteProps}
|
|
{...field}
|
|
onChange={(_, value) => {
|
|
field.onChange(value);
|
|
}}
|
|
getOptionLabel={(item) => {
|
|
return (
|
|
autocompleteProps?.options?.find(
|
|
(p) => p?.id?.toString() === item?.id?.toString(),
|
|
)?.title ?? ""
|
|
);
|
|
}}
|
|
isOptionEqualToValue={(option, value) =>
|
|
value === undefined ||
|
|
option?.id?.toString() === (value?.id ?? value)?.toString()
|
|
}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Category"
|
|
margin="normal"
|
|
variant="outlined"
|
|
error={!!errors.category}
|
|
helperText={errors.category?.message}
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
<TextField
|
|
{...register("content", {
|
|
required: "This field is required",
|
|
})}
|
|
error={!!errors.content}
|
|
helperText={errors.content?.message}
|
|
margin="normal"
|
|
label="Content"
|
|
multiline
|
|
rows={4}
|
|
/>
|
|
</Box>
|
|
</Create>
|
|
);
|
|
};
|