Merge pull request #28 from bknd-io/fix/admin-ui-fixes

Admin UI fixes

app/src/ui/components/canvas/layouts/index.ts

@@ -25,12 +25,6 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
    const dagreGraph = new Dagre.graphlib.Graph();
    dagreGraph.setDefaultEdgeLabel(() => ({}));
    dagreGraph.setGraph(graph || {});
-   /*dagreGraph.setGraph({
-      rankdir: "LR",
-      align: "UR",
-      nodesep: NODE_SEP,
-      ranksep: RANK_SEP
-   });*/
 
    nodes.forEach((node) => {
       dagreGraph.setNode(node.id, {
@@ -48,7 +42,11 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => {
    return {
       nodes: nodes.map((node) => {
          const position = dagreGraph.node(node.id);
-         return { ...node, x: position.x, y: position.y };
+         return {
+            ...node,
+            x: position.x - (node.width ?? 0) / 2,
+            y: position.y - (node.height ?? 0) / 2
+         };
       }),
       edges
    };

app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx

@@ -69,15 +69,13 @@ export function DataSchemaCanvas() {
    const nodeLayout = layoutWithDagre({
       nodes: nodes.map((n) => ({
          id: n.id,
-         ...EntityTableNode.getSize(n)
+         ...EntityTableNode.getSize(n.data)
       })),
       edges,
       graph: {
          rankdir: "LR",
-         //align: "UR",
-         ranker: "network-simplex",
-         nodesep: 350,
-         ranksep: 50
+         marginx: 50,
+         marginy: 50
       }
    });
 
@@ -88,12 +86,6 @@ export function DataSchemaCanvas() {
       }
    });
 
-   /*const _edges = edges.map((e) => ({
-      ...e,
-      source: e.source + `-${e.target}_id`,
-      target: e.target + "-id"
-   }));*/
-
    return (
       <ReactFlowProvider>
          <Canvas

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<typeof schema>;
 
 export function StepEntityFields() {
    const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
    const entity = state.entities?.create?.[0]!;
    const defaultFields = { id: { type: "primary", name: "id" } } as const;
    const ref = useRef<EntityFieldsFormRef>(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<Schema>
    });
 
    const values = watch();
@@ -74,7 +77,11 @@ export function StepEntityFields() {
                      Add fields to <strong>{entity.name}</strong>:
                   </p>
                   <div className="flex flex-col gap-1">
-                     <EntityFieldsForm ref={ref} fields={defaultFields} onChange={updateListener} />
+                     <EntityFieldsForm
+                        ref={ref}
+                        fields={initial.fields as any}
+                        onChange={updateListener}
+                     />
                   </div>
                </div>
                <div className="flex flex-col gap-3">
@@ -82,7 +89,7 @@ export function StepEntityFields() {
                   <div className="flex flex-row gap-2">
                      <MantineSelect
                         label="Field"
-                        data={Object.keys(values.fields).filter((name) => 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() {
                <div>
                   {Object.entries(errors).map(([key, value]) => (
                      <p key={key}>
-                        {key}: {value.message}
+                        {key}: {(value as any).message}
                      </p>
                   ))}
                </div>

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 (
       <>
-         <form
-            onSubmit={handleSubmit(onSubmit as any, onSubmitInvalid)}
-            className="flex flex-col gap-6"
-         >
+         <div className="flex flex-col gap-6">
             <div className="flex flex-col gap-3">
                <div className="flex flex-col gap-4">
                   {sortable ? (
@@ -220,9 +193,7 @@ export const EntityFieldsForm = forwardRef<
                   </Popover>
                </div>
             </div>
-            <button type="submit" className="hidden" />
-            {/*<Debug watch={watch} errors={errors} />*/}
-         </form>
+         </div>
       </>
    );
 });