admin ui: improved relation description

app/src/ui/client/schema/data/use-bknd-data.ts

@@ -89,13 +89,13 @@ const modals = {
          initialPath: ["entities", "entity"],
          initialState: { action: "entity" }
       }),
-   createRelation: (rel: { source?: string; target?: string; type?: string }) =>
+   createRelation: (entity?: string) =>
       bkndModals.open(bkndModals.ids.dataCreate, {
          initialPath: ["entities", "relation"],
          initialState: {
             action: "relation",
             relations: {
-               create: [rel as any]
+               create: [{ source: entity, type: "n:1" } as any]
             }
          }
       }),

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

@@ -111,10 +111,6 @@ export function StepCreate() {
                   <SummaryItem key={i} {...item} state={states[i]} />
                ))}
             </div>
-            {/*<div>{submitting ? "submitting" : "idle"}</div>
-            <div>
-               {states.length}/{items.length}
-            </div>*/}
          </ModalBody>
          <ModalFooter
             nextLabel="Create"

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

@@ -1,6 +1,7 @@
 import { typeboxResolver } from "@hookform/resolvers/typebox";
-import { Select, Switch, TextInput } from "@mantine/core";
+import { Switch, TextInput } from "@mantine/core";
 import { TypeRegistry } from "@sinclair/typebox";
+import { IconDatabase } from "@tabler/icons-react";
 import {
    type Static,
    StringEnum,
@@ -66,6 +67,7 @@ type ComponentCtx<T extends FieldValues = FieldValues> = {
 export function StepRelation() {
    const { config } = useBknd();
    const entities = config.data.entities;
+   const count = Object.keys(entities ?? {}).length;
    const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
    const {
       register,
@@ -79,7 +81,6 @@ export function StepRelation() {
       defaultValues: (state.relations?.create?.[0] ?? {}) as Static<typeof schema>
    });
    const data = watch();
-   console.log("data", { data, schema });
 
    function handleNext() {
       if (isValid) {
@@ -114,6 +115,11 @@ export function StepRelation() {
 
    return (
       <>
+         {count < 2 && (
+            <div className="px-5 py-4 bg-red-100 text-red-900">
+               Not enough entities to create a relation.
+            </div>
+         )}
          <form onSubmit={handleSubmit(handleNext)}>
             <ModalBody>
                <div className="grid grid-cols-3 gap-8">
@@ -226,6 +232,10 @@ function ManyToOne({ register, control, data: { source, target, config } }: Comp
          {source && target && config && (
             <Callout>
                <>
+                  <pre className="mb-2 opacity-70 flex flex-row items-center gap-2">
+                     <IconDatabase className="size-4" />
+                     {source}.{config.mappedBy || target}_id {"→"} {target}
+                  </pre>
                   <p>
                      Many <Pre>{source}</Pre> will each have one reference to <Pre>{target}</Pre>.
                   </p>
@@ -239,7 +249,7 @@ function ManyToOne({ register, control, data: { source, target, config } }: Comp
                   </p>
                   {config.sourceCardinality ? (
                      <p>
-                        <Pre>{source}</Pre> should not have more than{" "}
+                        <Pre>{target}</Pre> should not have more than{" "}
                         <Pre>{config.sourceCardinality}</Pre> referencing entr
                         {config.sourceCardinality === 1 ? "y" : "ies"} to <Pre>{source}</Pre>.
                      </p>
@@ -283,6 +293,10 @@ function OneToOne({
          {source && target && (
             <Callout>
                <>
+                  <pre className="mb-2 opacity-70 flex flex-row items-center gap-2">
+                     <IconDatabase className="size-4" />
+                     {source}.{mappedBy || target}_id {"↔"} {target}
+                  </pre>
                   <p>
                      A single entry of <Pre>{source}</Pre> will have a reference to{" "}
                      <Pre>{target}</Pre>.
@@ -341,6 +355,10 @@ function ManyToMany({ register, control, data: { source, target, config } }: Com
          {source && target && (
             <Callout>
                <>
+                  <pre className="mb-2 opacity-70 flex flex-row items-center gap-2">
+                     <IconDatabase className="size-4" />
+                     {source} {"→"} {table} {"←"} {target}
+                  </pre>
                   <p>
                      Many <Pre>{source}</Pre> will have many <Pre>{target}</Pre>.
                   </p>
@@ -383,6 +401,10 @@ function Polymorphic({ register, control, data: { type, source, target, config }
          {source && target && (
             <Callout>
                <>
+                  <pre className="mb-2 opacity-70 flex flex-row items-center gap-2">
+                     <IconDatabase className="size-4" />
+                     {source} {"←"} {target}
+                  </pre>
                   <p>
                      <Pre>{source}</Pre> will have many <Pre>{target}</Pre>.
                   </p>

app/src/ui/routes/data/_data.root.tsx

@@ -191,11 +191,7 @@ const EntityContextMenu = ({
             {
                icon: IconCirclesRelation,
                label: "Add relation",
-               onClick: () =>
+               onClick: () => $data.modals.createRelation(entity.name)
-                  $data.modals.createRelation({
-                     target: entity.name,
-                     type: "n:1"
-                  })
             },
             !$data.system(entity.name).media && {
                icon: IconPhoto,

app/src/ui/routes/data/data.schema.$entity.tsx

@@ -76,11 +76,7 @@ export function DataSchemaEntity({ params }) {
                         {
                            icon: TbCirclesRelation,
                            label: "Add relation",
-                           onClick: () =>
+                           onClick: () => $data.modals.createRelation(entity.name)
-                              $data.modals.createRelation({
-                                 target: entity.name,
-                                 type: "n:1"
-                              })
                         },
                         {
                            icon: TbPhoto,
@@ -207,10 +203,7 @@ const Fields = ({
                      onClick: () => {
                         switch (i.type) {
                            case "relation":
-                              $data.modals.createRelation({
+                              $data.modals.createRelation(entity.name);
-                                 target: entity.name,
-                                 type: "n:1"
-                              });
                               break;
                            case "media":
                               $data.modals.createMedia(entity.name);