diff --git a/app/src/client/app/ModelsPage.tsx b/app/src/client/app/ModelsPage.tsx index 5d89c7f..65e6b09 100644 --- a/app/src/client/app/ModelsPage.tsx +++ b/app/src/client/app/ModelsPage.tsx @@ -44,6 +44,10 @@ const ModelsPage = () => { ); if (foundSchema) { dispatch({ type: ModelsActionType.UPDATE_EXISTING_MODEL, payload: selectedModel }); + dispatch({ + type: ModelsActionType.SELECT_MODEL, + payload: { json_schema: foundSchema.json_schema, name: foundSchema.name }, + }); } } }; diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx index d0724f9..136b7db 100644 --- a/app/src/client/components/DynamicFormBuilder.tsx +++ b/app/src/client/components/DynamicFormBuilder.tsx @@ -24,7 +24,10 @@ const DynamicFormBuilder: React.FC = ({ onSuccessCallback, onCancelCallback, }) => { - const { formData, handleChange, formErrors, setFormErrors } = useForm(jsonSchema); + const { formData, handleChange, formErrors, setFormErrors } = useForm({ + jsonSchema, + defaultValues: updateExistingModel, + }); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (event: React.FormEvent) => { @@ -44,11 +47,7 @@ const DynamicFormBuilder: React.FC = ({ <>
{Object.entries(jsonSchema.properties).map(([key, property]) => { - const inputValue = - updateExistingModel && updateExistingModel.hasOwnProperty(key) - ? // @ts-ignore - updateExistingModel[key] || '' - : formData[key] || ''; + const inputValue = formData[key] || ''; return property?.enum?.length === 1 ? null : (
diff --git a/app/src/client/hooks/useForm.ts b/app/src/client/hooks/useForm.ts index cd37dec..050fc00 100644 --- a/app/src/client/hooks/useForm.ts +++ b/app/src/client/hooks/useForm.ts @@ -1,23 +1,31 @@ import { useState, useEffect } from 'react'; -import { JsonSchema } from '../interfaces/ModelInterfaces'; +import { JsonSchema, Model } from '../interfaces/ModelInterfaces'; -export const useForm = (jsonSchema: JsonSchema) => { +interface UseFormProps { + jsonSchema: JsonSchema; + defaultValues?: Model | null; +} +interface FormData { + [key: string]: any; +} + +function getValueFromModel(model: Model, key: keyof Model): string | undefined { + return model[key]; +} + +export const useForm = ({ jsonSchema, defaultValues }: UseFormProps) => { const [formData, setFormData] = useState<{ [key: string]: any }>({}); const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({}); useEffect(() => { - const initialValues: { [key: string]: any } = {}; + const initialFormData: FormData = {}; Object.keys(jsonSchema.properties).forEach((key) => { - const property = jsonSchema.properties[key]; - if (property.enum && property.enum.length === 1) { - initialValues[key] = property.enum[0]; - } else { - initialValues[key] = property.default ?? ''; - } + initialFormData[key] = + defaultValues && defaultValues.hasOwnProperty(key) ? getValueFromModel(defaultValues, key as keyof Model) : ''; }); - setFormData(initialValues); + setFormData(initialFormData); setFormErrors({}); // Reset errors on schema change - }, [jsonSchema]); + }, [jsonSchema, defaultValues]); const handleChange = (key: string, value: any) => { setFormData((prev) => ({ ...prev, [key]: value }));