shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 12:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix active sidebar active item, added error boundaries for relational form fields, fixed schema diagram for m:n relations

Browse Source
This commit is contained in:
dswbx
2025-03-03 07:13:04 +01:00
parent 3bf3bb32a4
commit 5ca21b6c01
8 changed files with 100 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/src/ui/modules/data/components/EntityForm.tsx
View File

@@ -17,6 +17,8 @@ import { Media } from "ui/elements";
import { useEvent } from "ui/hooks/use-event";
import { EntityJsonSchemaFormField } from "./fields/EntityJsonSchemaFormField";
import { EntityRelationalFormField } from "./fields/EntityRelationalFormField";
import ErrorBoundary from "ui/components/display/ErrorBoundary";
import { Alert } from "ui/components/display/Alert";
type EntityFormProps = {
entity: Entity;
@@ -94,20 +96,28 @@ export function EntityForm({
const _key = `${entity.name}-${field.name}-${key}`;
return (
<Form.Field
<ErrorBoundary
key={_key}
name={field.name}
children={(props) => (
<EntityFormField
field={field}
fieldApi={props}
disabled={fieldsDisabled}
tabIndex={key + 1}
action={action}
data={data}
/>
)}
/>
fallback={
<Alert.Exception className="font-mono">
Field error: {field.name}
</Alert.Exception>
}
>
<Form.Field
name={field.name}
children={(props) => (
<EntityFormField
field={field}
fieldApi={props}
disabled={fieldsDisabled}
tabIndex={key + 1}
action={action}
data={data}
/>
)}
/>
</ErrorBoundary>
);
})}
</div>

7
app/src/ui/modules/data/components/EntityTable2.tsx
View File

@@ -1,5 +1,6 @@
import type { Entity, EntityData } from "data";
import { CellValue, DataTable, type DataTableProps } from "ui/components/table/DataTable";
import ErrorBoundary from "ui/components/display/ErrorBoundary";
type EntityTableProps<Data extends EntityData = EntityData> = Omit<
DataTableProps<Data>,
@@ -41,7 +42,11 @@ export function EntityTable2({ entity, select, ...props }: EntityTableProps) {
);
}
return <CellValue value={_value} property={property} />;
return (
<ErrorBoundary fallback={String(_value)}>
<CellValue value={_value} property={property} />
</ErrorBoundary>
);
}
return (

24
app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx
View File

@@ -22,7 +22,27 @@ function entitiesToNodes(entities: AppDataConfig["entities"]): Node<TAppDataEnti
}
function relationsToEdges(relations: AppDataConfig["relations"]) {
return Object.entries(relations ?? {}).map(([name, relation]) => {
return Object.entries(relations ?? {}).flatMap(([name, relation]) => {
if (relation.type === "m:n") {
const conn_table = `${relation.source}_${relation.target}`;
return [
{
id: name,
target: relation.source,
source: conn_table,
targetHandle: `${relation.source}:id`,
sourceHandle: `${conn_table}:${relation.source}_id`,
},
{
id: `${name}-2`,
target: relation.target,
source: conn_table,
targetHandle: `${relation.target}:id`,
sourceHandle: `${conn_table}:${relation.target}_id`,
},
];
}
let sourceHandle = relation.source + `:${relation.target}`;
if (relation.config?.mappedBy) {
sourceHandle = `${relation.source}:${relation.config?.mappedBy}`;
@@ -65,6 +85,8 @@ export function DataSchemaCanvas() {
},
}));
console.log("-", data, { nodes, edges });
const nodeLayout = layoutWithDagre({
nodes: nodes.map((n) => ({
id: n.id,

13
app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx
View File

@@ -14,6 +14,8 @@ import { routes } from "ui/lib/routes";
import { useLocation } from "wouter";
import { EntityTable, type EntityTableProps } from "../EntityTable";
import type { ResponseObject } from "modules/ModuleApi";
import ErrorBoundary from "ui/components/display/ErrorBoundary";
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
// @todo: allow clear if not required
export function EntityRelationalFormField({
@@ -151,8 +153,13 @@ export function EntityRelationalFormField({
<span className="opacity-60 text-nowrap">
{field.getLabel()}:
</span>{" "}
{_value !== null && typeof value !== "undefined" ? (
<span className="text-nowrap truncate">{_value}</span>
{_value !== null && typeof _value !== "undefined" ? (
<ErrorBoundary
fallback={JSON.stringify(_value)}
suppressError
>
<span className="text-nowrap truncate">{_value}</span>
</ErrorBoundary>
) : (
<span className="opacity-30 text-nowrap font-mono mt-0.5">
null
@@ -219,7 +226,7 @@ const PopoverTable = ({
return (
<div>
<EntityTable
<EntityTable2
classNames={{ value: "line-clamp-1 truncate max-w-52 text-nowrap" }}
data={container ?? []}
entity={entity}