added easier access points to modify schema + added relation flip in dialog

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -9,6 +9,7 @@ import { useBknd } from "ui/client/bknd";
 import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
 import { Popover } from "ui/components/overlay/Popover";
+import { Link } from "ui/components/wouter/Link";
 import { routes } from "ui/lib/routes";
 import { useLocation } from "wouter";
 import { EntityTable } from "../EntityTable";
@@ -82,7 +83,9 @@ export function EntityRelationalFormField({
 
    return (
       <Formy.Group>
-         <Formy.Label htmlFor={fieldApi.name}>{field.getLabel()}</Formy.Label>
+         <Formy.Label htmlFor={fieldApi.name}>
+            {field.getLabel({ fallback: false }) ?? entity.label}
+         </Formy.Label>
          <div
             data-disabled={fetching || disabled ? 1 : undefined}
             className="data-[disabled]:opacity-70 data-[disabled]:pointer-events-none"
@@ -152,9 +155,11 @@ export function EntityRelationalFormField({
                                  );
                               })}
                         </div>
-                        <Button IconLeft={TbEye} onClick={handleViewItem} size="small">
-                           View
-                        </Button>
+                        <Link to={routes.data.entity.edit(entity.name, _value.id as any)}>
+                           <Button IconLeft={TbEye} size="small">
+                              View
+                           </Button>
+                        </Link>
                      </>
                   ) : (
                      <div className="pl-2">- Select -</div>

app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx

@@ -39,6 +39,7 @@ export type TFieldCreate = Static<typeof createFieldSchema>;
 const createModalSchema = Type.Object(
    {
       action: schemaAction,
+      initial: Type.Optional(Type.Any()),
       entities: Type.Optional(
          Type.Object({
             create: Type.Optional(Type.Array(entitySchema))

app/src/ui/modules/data/components/schema/create-modal/step.create.tsx

@@ -10,6 +10,7 @@ import { ucFirst } from "core/utils";
 import { useEffect, useState } from "react";
 import { TbCirclesRelation, TbSettings } from "react-icons/tb";
 import { twMerge } from "tailwind-merge";
+import { useBknd } from "ui/client/bknd";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
 import { IconButton, type IconType } from "ui/components/buttons/IconButton";
 import { JsonViewer } from "ui/components/code/JsonViewer";
@@ -26,6 +27,7 @@ export function StepCreate() {
    const [states, setStates] = useState<(boolean | string)[]>([]);
    const [submitting, setSubmitting] = useState(false);
    const $data = useBkndData();
+   const b = useBknd();
 
    const items: ActionItem[] = [];
    if (state.entities?.create) {
@@ -90,7 +92,8 @@ export function StepCreate() {
          states.every((s) => s === true)
       );
       if (items.length === states.length && states.every((s) => s === true)) {
-         close();
+         b.actions.reload().then(close);
+         //close();
       } else {
          setSubmitting(false);
       }

app/src/ui/modules/data/components/schema/create-modal/step.relation.tsx

@@ -9,12 +9,15 @@ import {
    registerCustomTypeboxKinds
 } from "core/utils";
 import { ManyToOneRelation, type RelationType, RelationTypes } from "data";
-import { type ReactNode, useEffect } from "react";
+import { type ReactNode, startTransition, useEffect } from "react";
 import { type Control, type FieldValues, type UseFormRegister, useForm } from "react-hook-form";
+import { TbRefresh } from "react-icons/tb";
 import { useBknd } from "ui/client/bknd";
+import { Button } from "ui/components/buttons/Button";
 import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
 import { useStepContext } from "ui/components/steps/Steps";
+import { useEvent } from "ui/hooks/use-event";
 import { ModalBody, ModalFooter, type TCreateModalSchema } from "./CreateModal";
 
 // @todo: check if this could become an issue
@@ -63,7 +66,7 @@ type ComponentCtx<T extends FieldValues = FieldValues> = {
 export function StepRelation() {
    const { config } = useBknd();
    const entities = config.data.entities;
-   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
+   const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
    const {
       register,
       handleSubmit,
@@ -93,6 +96,22 @@ export function StepRelation() {
       }
    }
 
+   const flip = useEvent(() => {
+      const { source, target } = data;
+      if (source && target) {
+         setValue("source", target);
+         setValue("target", source);
+      } else {
+         if (source) {
+            setValue("target", source);
+            setValue("source", null as any);
+         } else {
+            setValue("source", target);
+            setValue("target", null as any);
+         }
+      }
+   });
+
    return (
       <>
          <form onSubmit={handleSubmit(handleNext)}>
@@ -109,14 +128,23 @@ export function StepRelation() {
                         disabled: data.target === name
                      }))}
                   />
-                  <MantineSelect
-                     control={control}
-                     name="type"
-                     onChange={() => setValue("config", {})}
-                     label="Relation Type"
-                     data={Relations.map((r) => ({ value: r.type, label: r.label }))}
-                     allowDeselect={false}
-                  />
+                  <div className="flex flex-col gap-1">
+                     <MantineSelect
+                        control={control}
+                        name="type"
+                        onChange={() => setValue("config", {})}
+                        label="Relation Type"
+                        data={Relations.map((r) => ({ value: r.type, label: r.label }))}
+                        allowDeselect={false}
+                     />
+                     {data.type && (
+                        <div className="flex justify-center mt-1">
+                           <Button size="small" IconLeft={TbRefresh} onClick={flip}>
+                              Flip entities
+                           </Button>
+                        </div>
+                     )}
+                  </div>
                   <MantineSelect
                      control={control}
                      allowDeselect={false}
@@ -146,7 +174,7 @@ export function StepRelation() {
                   onClick: handleNext
                }}
                prev={{ onClick: stepBack }}
-               debug={{ state, data }}
+               debug={{ state, path, data }}
             />
          </form>
       </>

app/src/ui/modules/data/components/schema/create-modal/templates/media/template.media.component.tsx

@@ -31,7 +31,7 @@ const schema = Type.Object({
 type TCreateModalMediaSchema = Static<typeof schema>;
 
 export function TemplateMediaComponent() {
-   const { stepBack, setState, state, nextStep } = useStepContext<TCreateModalSchema>();
+   const { stepBack, setState, state, path, nextStep } = useStepContext<TCreateModalSchema>();
    const {
       register,
       handleSubmit,
@@ -41,7 +41,7 @@ export function TemplateMediaComponent() {
       control
    } = useForm({
       resolver: typeboxResolver(schema),
-      defaultValues: Default(schema, {}) as TCreateModalMediaSchema
+      defaultValues: Default(schema, state.initial ?? {}) as TCreateModalMediaSchema
    });
 
    const { config } = useBknd();
@@ -134,7 +134,7 @@ export function TemplateMediaComponent() {
                prev={{
                   onClick: stepBack
                }}
-               debug={{ state, data }}
+               debug={{ state, path, data }}
             />
          </form>
       </>