63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { CircularProgress } from "@mui/material";
|
|
import { useForm } from "@refinedev/core";
|
|
import { UiSchema } from "@rjsf/utils";
|
|
import { jsonschemaProvider } from "../providers/jsonschema-provider";
|
|
import { BaseForm } from "./base-form";
|
|
|
|
type CrudFormProps = {
|
|
schemaName: string,
|
|
uiSchema?: UiSchema,
|
|
resourceBasePath?: string,
|
|
resource: string,
|
|
id?: string,
|
|
onSuccess?: (data: any) => void,
|
|
defaultValue?: any
|
|
}
|
|
|
|
export const CrudForm: React.FC<CrudFormProps> = (props) => {
|
|
const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue } = props;
|
|
|
|
const { onFinish, query, formLoading } = useForm({
|
|
resource: resourceBasePath == "" ? resource : `${resourceBasePath}/${resource}`,
|
|
action: id === undefined ? "create" : "edit",
|
|
redirect: "show",
|
|
id,
|
|
onMutationSuccess: (data: any) => { if (onSuccess) { onSuccess(data) } },
|
|
});
|
|
|
|
const [schema, setSchema] = useState({});
|
|
const [schemaLoading, setSchemaLoading] = useState(true);
|
|
useEffect(() => {
|
|
const fetchSchema = async () => {
|
|
try {
|
|
const schemaFullName = id === undefined ? `${schemaName}Create` : `${schemaName}Update`;
|
|
const resourceSchema = await jsonschemaProvider.getResourceSchema(schemaFullName);
|
|
setSchema(resourceSchema);
|
|
setSchemaLoading(false);
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
setSchemaLoading(false);
|
|
}
|
|
};
|
|
fetchSchema();
|
|
}, []);
|
|
|
|
if(formLoading || schemaLoading) {
|
|
return <CircularProgress />
|
|
}
|
|
|
|
const record = query?.data?.data || defaultValue;
|
|
return (
|
|
<BaseForm
|
|
schema={schema}
|
|
uiSchema={uiSchema}
|
|
formData={record}
|
|
resourceBasePath={resourceBasePath}
|
|
onSubmit={
|
|
(data: any) => onFinish(data)
|
|
}
|
|
/>
|
|
)
|
|
}
|