453 lines
15 KiB
TypeScript
453 lines
15 KiB
TypeScript
import { Switch, TextInput } from "@mantine/core";
|
|
import { IconDatabase } from "@tabler/icons-react";
|
|
import {
|
|
DEFAULT_RELATION_CASCADE,
|
|
ManyToOneRelation,
|
|
type RelationType,
|
|
RelationCascades,
|
|
RelationTypes,
|
|
} from "data/relations";
|
|
import type { ReactNode } 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 } from "./CreateModal";
|
|
import type { TCreateModalSchema } from "./schema";
|
|
import { s, stringIdentifier } from "bknd/utils";
|
|
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
|
|
|
|
const Relations: {
|
|
type: RelationType;
|
|
label: string;
|
|
component: (props: ComponentCtx<any>) => ReactNode;
|
|
}[] = [
|
|
{
|
|
type: RelationTypes.ManyToOne,
|
|
label: "Many to One",
|
|
component: ManyToOne,
|
|
},
|
|
{
|
|
type: RelationTypes.OneToOne,
|
|
label: "One to One",
|
|
component: OneToOne,
|
|
},
|
|
{
|
|
type: RelationTypes.ManyToMany,
|
|
label: "Many to Many",
|
|
component: ManyToMany,
|
|
},
|
|
{
|
|
type: RelationTypes.Polymorphic,
|
|
label: "Polymorphic",
|
|
component: Polymorphic,
|
|
},
|
|
];
|
|
|
|
const schema = s.strictObject({
|
|
type: s.string({ enum: Relations.map((r) => r.type) }),
|
|
source: stringIdentifier,
|
|
target: stringIdentifier,
|
|
config: s.object({
|
|
on_delete: s.string({ enum: RelationCascades }).optional(),
|
|
}),
|
|
});
|
|
|
|
type ComponentCtx<T extends FieldValues = FieldValues> = {
|
|
register: UseFormRegister<T>;
|
|
control: Control<T>;
|
|
data: T;
|
|
};
|
|
|
|
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,
|
|
handleSubmit,
|
|
formState: { isValid },
|
|
setValue,
|
|
watch,
|
|
control,
|
|
} = useForm({
|
|
resolver: standardSchemaResolver(schema),
|
|
defaultValues: (state.relations?.create?.[0] ?? {}) as s.Static<typeof schema>,
|
|
});
|
|
const data = watch();
|
|
|
|
function handleNext() {
|
|
if (isValid) {
|
|
setState((prev) => {
|
|
return {
|
|
...prev,
|
|
relations: {
|
|
create: [data],
|
|
},
|
|
};
|
|
});
|
|
console.log("data", data);
|
|
nextStep("create")();
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<>
|
|
{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">
|
|
<MantineSelect
|
|
control={control}
|
|
name="source"
|
|
label="Source"
|
|
allowDeselect={false}
|
|
data={Object.entries(entities ?? {}).map(([name, entity]) => ({
|
|
value: name,
|
|
label: entity.config?.name ?? name,
|
|
disabled: data.target === name,
|
|
}))}
|
|
/>
|
|
<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}
|
|
name="target"
|
|
label="Target"
|
|
data={Object.entries(entities ?? {}).map(([name, entity]) => ({
|
|
value: name,
|
|
label: entity.config?.name ?? name,
|
|
disabled: data.source === name,
|
|
}))}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
{data.type &&
|
|
Relations.find((r) => r.type === data.type)?.component({
|
|
register,
|
|
control,
|
|
data,
|
|
})}
|
|
</div>
|
|
</ModalBody>
|
|
<ModalFooter
|
|
next={{
|
|
type: "submit",
|
|
disabled: !isValid,
|
|
onClick: handleNext,
|
|
}}
|
|
prev={{ onClick: stepBack }}
|
|
debug={{ state, path, data }}
|
|
/>
|
|
</form>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const Pre = ({ children }: { children: ReactNode }) => (
|
|
<b className="font-mono select-text">{children}</b>
|
|
);
|
|
|
|
const Callout = ({ children }: { children: ReactNode }) => (
|
|
<div className="bg-primary/5 py-4 px-5 rounded-lg mt-10">{children}</div>
|
|
);
|
|
|
|
function OnDelete({
|
|
control,
|
|
label = "On target delete",
|
|
}: {
|
|
control: Control<any>;
|
|
label?: string;
|
|
}) {
|
|
return (
|
|
<MantineSelect
|
|
control={control}
|
|
name="config.on_delete"
|
|
label={label}
|
|
allowDeselect={false}
|
|
defaultValue={DEFAULT_RELATION_CASCADE}
|
|
data={RelationCascades.map((cascade) => ({ value: cascade, label: cascade }))}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function ManyToOne({ register, control, data: { source, target, config } }: ComponentCtx) {
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-8">
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Target mapping"
|
|
{...register("config.mappedBy")}
|
|
placeholder={target}
|
|
/>
|
|
|
|
<MantineNumberInput
|
|
label="Cardinality"
|
|
name="config.sourceCardinality"
|
|
control={control}
|
|
placeholder="n"
|
|
/>
|
|
<MantineNumberInput
|
|
label="WITH limit"
|
|
name="config.with_limit"
|
|
control={control}
|
|
placeholder={String(ManyToOneRelation.DEFAULTS.with_limit)}
|
|
/>
|
|
<OnDelete control={control} />
|
|
</div>
|
|
<div />
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Source mapping"
|
|
{...register("config.inversedBy")}
|
|
placeholder={source}
|
|
/>
|
|
<Switch label="Required" {...register("config.required")} />
|
|
</div>
|
|
</div>
|
|
{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>
|
|
<p>
|
|
A property <Pre>{config.mappedBy || target}_id</Pre> will be added to{" "}
|
|
<Pre>{source}</Pre> (which references <Pre>{target}</Pre>).
|
|
</p>
|
|
<p>
|
|
When creating <Pre>{source}</Pre>, a reference to <Pre>{target}</Pre> is{" "}
|
|
<i>{config.required ? "required" : "optional"}</i>.
|
|
</p>
|
|
<p>
|
|
If a <Pre>{target}</Pre> entry is deleted, the reference is{" "}
|
|
<i>{config.on_delete ?? DEFAULT_RELATION_CASCADE}</i>.
|
|
</p>
|
|
{config.sourceCardinality ? (
|
|
<p>
|
|
<Pre>{target}</Pre> should not have more than{" "}
|
|
<Pre>{config.sourceCardinality}</Pre> referencing entr
|
|
{config.sourceCardinality === 1 ? "y" : "ies"} to <Pre>{source}</Pre>.
|
|
</p>
|
|
) : null}
|
|
</Callout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function OneToOne({
|
|
register,
|
|
control,
|
|
data: {
|
|
source,
|
|
target,
|
|
config: { mappedBy, required, on_delete },
|
|
},
|
|
}: ComponentCtx) {
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-8">
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Target mapping"
|
|
{...register("config.mappedBy")}
|
|
placeholder={target}
|
|
/>
|
|
<Switch label="Required" {...register("config.required")} />
|
|
<OnDelete control={control} />
|
|
</div>
|
|
<div />
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Source mapping"
|
|
{...register("config.inversedBy")}
|
|
placeholder={source}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{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>
|
|
.
|
|
</p>
|
|
<p>
|
|
A property <Pre>{mappedBy || target}_id</Pre> will be added to <Pre>{source}</Pre>{" "}
|
|
(which references <Pre>{target}</Pre>).
|
|
</p>
|
|
<p>
|
|
When creating <Pre>{source}</Pre>, a reference to <Pre>{target}</Pre> is{" "}
|
|
<i>{required ? "required" : "optional"}</i>.
|
|
</p>
|
|
<p>
|
|
If a <Pre>{target}</Pre> entry is deleted, the reference is{" "}
|
|
<i>{on_delete ?? DEFAULT_RELATION_CASCADE}</i>.
|
|
</p>
|
|
</Callout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ManyToMany({ register, control, data: { source, target, config } }: ComponentCtx) {
|
|
const table = config.connectionTable
|
|
? config.connectionTable
|
|
: source && target
|
|
? `${source}_${target}`
|
|
: "";
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-8">
|
|
<div className="flex flex-col gap-4">
|
|
{/*<TextInput
|
|
label="Target mapping"
|
|
{...register("config.mappedBy")}
|
|
placeholder={target}
|
|
/>*/}
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Connection Table"
|
|
{...register("config.connectionTable")}
|
|
placeholder={table}
|
|
/>
|
|
<TextInput
|
|
label="Connection Mapping"
|
|
{...register("config.connectionTableMappedName")}
|
|
placeholder={table}
|
|
/>
|
|
<OnDelete control={control} label="On delete (both references)" />
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
{/*<TextInput
|
|
label="Source mapping"
|
|
{...register("config.inversedBy")}
|
|
placeholder={source}
|
|
/>*/}
|
|
</div>
|
|
</div>
|
|
{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>
|
|
<p>
|
|
A connection table <Pre>{table}</Pre> will be created to store the relations.
|
|
</p>
|
|
<p>
|
|
If an entry of <Pre>{source}</Pre> or <Pre>{target}</Pre> is deleted, the
|
|
connection is <i>{config.on_delete ?? DEFAULT_RELATION_CASCADE}</i>.
|
|
</p>
|
|
</Callout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Polymorphic({ register, control, data: { type, source, target, config } }: ComponentCtx) {
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-3 gap-8" key={type}>
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Target mapping"
|
|
{...register("config.mappedBy")}
|
|
placeholder={target}
|
|
/>
|
|
</div>
|
|
<div />
|
|
<div className="flex flex-col gap-4">
|
|
<TextInput
|
|
label="Source mapping"
|
|
{...register("config.inversedBy")}
|
|
placeholder={source}
|
|
/>
|
|
<MantineNumberInput
|
|
label="Cardinality"
|
|
name="config.targetCardinality"
|
|
control={control}
|
|
placeholder="n"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{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>
|
|
<p>
|
|
<Pre>{target}</Pre> will get additional properties <Pre>reference</Pre> and{" "}
|
|
<Pre>entity_id</Pre> to make the (polymorphic) reference.
|
|
</p>
|
|
{config.targetCardinality ? (
|
|
<p>
|
|
<Pre>{source}</Pre> should not have more than{" "}
|
|
<Pre>{config.targetCardinality}</Pre> reference
|
|
{config.targetCardinality === 1 ? "" : "s"} to <Pre>{target}</Pre>.
|
|
</p>
|
|
) : null}
|
|
</Callout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|