diff --git a/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx b/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx index 80124e9..cd864eb 100644 --- a/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx +++ b/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx @@ -1,6 +1,7 @@ import { typeboxResolver } from "@hookform/resolvers/typebox"; +import type { Static } from "core/utils"; import { type TAppDataEntityFields, entitiesSchema } from "data/data-schema"; -import { useRef, useState } from "react"; +import { useRef } from "react"; import { useForm } from "react-hook-form"; import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect"; import { useEvent } from "ui/hooks/use-event"; @@ -11,31 +12,33 @@ import { import { ModalBody, ModalFooter, type TCreateModalSchema, useStepContext } from "./CreateModal"; const schema = entitiesSchema; +type Schema = Static; export function StepEntityFields() { const { nextStep, stepBack, state, setState } = useStepContext(); const entity = state.entities?.create?.[0]!; const defaultFields = { id: { type: "primary", name: "id" } } as const; const ref = useRef(null); + const initial = entity + ? entity + : { + fields: defaultFields, + config: { + sort_field: "id", + sort_dir: "asc" + } + }; const { control, formState: { isValid, errors }, getValues, handleSubmit, watch, - register, setValue } = useForm({ mode: "onTouched", resolver: typeboxResolver(schema), - defaultValues: { - ...entity, - fields: defaultFields, - config: { - sort_field: "id", - sort_dir: "asc" - } - } + defaultValues: initial as NonNullable }); const values = watch(); @@ -74,7 +77,11 @@ export function StepEntityFields() { Add fields to {entity.name}:

- +
@@ -82,7 +89,7 @@ export function StepEntityFields() {
name.length > 0)} + data={Object.keys(values.fields ?? {}).filter((name) => name.length > 0)} placeholder="Select field" name="config.sort_field" allowDeselect={false} @@ -102,7 +109,7 @@ export function StepEntityFields() {
{Object.entries(errors).map(([key, value]) => (

- {key}: {value.message} + {key}: {(value as any).message}

))}
diff --git a/app/src/ui/routes/data/forms/entity.fields.form.tsx b/app/src/ui/routes/data/forms/entity.fields.form.tsx index 2de36e2..3f70848 100644 --- a/app/src/ui/routes/data/forms/entity.fields.form.tsx +++ b/app/src/ui/routes/data/forms/entity.fields.form.tsx @@ -72,22 +72,16 @@ export const EntityFieldsForm = forwardRef< name, field })); - /*const entityFields = entity.fields.map((field) => ({ - name: field.name, - field: field.toJSON() - }));*/ const { control, formState: { isValid, errors }, getValues, - handleSubmit, watch, register, setValue, setError, - reset, - clearErrors + reset } = useForm({ mode: "all", resolver: typeboxResolver(schema), @@ -114,7 +108,6 @@ export const EntityFieldsForm = forwardRef< props?.onChange?.(toCleanValues(data)); }); } - //props?.onChange?.() }, []); useImperativeHandle(ref, () => ({ @@ -122,25 +115,9 @@ export const EntityFieldsForm = forwardRef< getValues: () => getValues(), getData: () => { return toCleanValues(getValues()); - /*return Object.fromEntries( - getValues().fields.map((field) => [field.name, objectCleanEmpty(field.field)]) - );*/ }, isValid: () => isValid })); - console.log("errors", errors.fields); - - /*useEffect(() => { - console.log("change", values); - onSubmit(values); - }, [values]);*/ - - function onSubmit(data: TFieldsFormSchema) { - console.log("submit", isValid, data, errors); - } - function onSubmitInvalid(a, b) { - console.log("submit invalid", a, b); - } function handleAppend(_type: keyof typeof fieldsSchemaObject) { const newField = { @@ -151,7 +128,6 @@ export const EntityFieldsForm = forwardRef< config: {} } }; - console.log("handleAppend", _type, newField); append(newField); } @@ -165,10 +141,7 @@ export const EntityFieldsForm = forwardRef< }; return ( <> -
+
{sortable ? ( @@ -220,9 +193,7 @@ export const EntityFieldsForm = forwardRef<
-
); });