admin ui: improved relation description

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>