@lobb-js/studio 0.26.0 → 0.27.1

package/src/lib/components/dataTable/listViewChildren.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import { ChevronRight, Table, Plus } from "lucide-svelte";
+    import { ChevronRight, Table, Plus, Link, ArrowLeftRight, GitFork } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -18,7 +18,7 @@
     let { collectionName, recordId, width, unifiedBgColor }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
-        .filter((c: any) => c.type === "fk" || c.type === "m2m");
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
 
     let expandedRows: boolean[] = $state(new Array(children.length).fill(false));
     let refreshDataTable = $state(true);
@@ -49,6 +49,13 @@
                         />
                         <Table size="17.5" class="text-muted-foreground" />
                         <div class="text-muted-foreground">{child.collection}</div>
+                        {#if child.type === "fk"}
+                            <span title="Direct (FK)"><Link size="13" class="text-muted-foreground/50" /></span>
+                        {:else if child.type === "m2m"}
+                            <span title="Many to Many"><ArrowLeftRight size="13" class="text-muted-foreground/50" /></span>
+                        {:else if child.type === "polymorphic"}
+                            <span title="Polymorphic"><GitFork size="13" class="text-muted-foreground/50" /></span>
+                        {/if}
                     </button>
                     {#if child.type === "fk"}
                         <div class="flex items-center px-2">
@@ -57,7 +64,7 @@
                                 variant="ghost"
                                 class="h-7 px-3 text-xs font-normal"
                                 Icon={Plus}
-                                values={{ [child.field]: { id: recordId } }}
+                                values={{ [child.field]: recordId }}
                                 onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}
                             >
                                 Create

package/src/lib/components/dataTable/table.svelte

@@ -172,7 +172,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
+		grid-template-columns: minmax(auto, 10rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >

package/src/lib/components/detailView/create/createDetailView.svelte

@@ -30,8 +30,6 @@
     import {
         buildChildren,
         getDefaultEntry,
-        parseDetailViewValues,
-        serializeEntry,
     } from "../utils";
     import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
@@ -50,8 +48,6 @@
         submitButton,
     }: CreateDetailViewProp = $props();
 
-    parseDetailViewValues(ctx, collectionName, values)
-
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
@@ -88,9 +84,8 @@
             return;
         }
 
-        const serializedEntry = serializeEntry(ctx, collectionName, localEntry);
         const children = buildChildren(ctx, collectionName, localEntry);
-        const response = await lobb.createOne(collectionName, serializedEntry, children);
+        const response = await lobb.createOne(collectionName, localEntry, children);
 
         await emitEvent({ lobb, ctx }, "studio.collections.create", {
             collectionName,

package/src/lib/components/detailView/update/detailViewChildren.svelte

@@ -1,77 +1,72 @@
 <script lang="ts">
-    import DataTable from "../../../components/dataTable/dataTable.svelte";
+    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
-    import { Link, Plus, TableIcon } from "lucide-svelte";
-    import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { Table, Link } from "lucide-svelte";
 
-    const { ctx, lobb } = getStudioContext();
+    const { ctx } = getStudioContext();
+
+    type PendingOps = {
+        link?: (string | number)[];
+        unlink?: (string | number)[];
+        delete?: (string | number)[];
+        create?: any[];
+    };
 
     interface LocalProp {
         collectionName: string;
         entry: any;
+        pendingChildren?: Record<string, PendingOps>;
     }
 
-    let { collectionName, entry }: LocalProp = $props();
+    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
 
-    const children = (ctx.meta.collections[collectionName]?.children ?? [])
-        .filter((c: any) => c.type === "fk" || c.type === "m2m");
+    function makeHandler(collection: string) {
+        return (op: RecordOperation) => {
+            if (!pendingChildren[collection]) pendingChildren[collection] = {};
+            const c = pendingChildren[collection];
+            if (op.type === "link") {
+                (c.link ??= []).push(op.record.id);
+            } else if (op.type === "unlink") {
+                (c.unlink ??= []).push(op.id);
+            } else if (op.type === "delete") {
+                (c.delete ??= []).push(op.id);
+            } else if (op.type === "create") {
+                (c.create ??= []).push(op.record);
+            }
+        };
+    }
 
-    const refresh: boolean[] = $state(new Array(children.length).fill(true));
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
 </script>
 
 {#if children.length}
-    <div class="flex flex-col gap-4 border-t p-4">
+    <div class="flex flex-col gap-3 border-t p-4">
         <div class="flex items-center gap-2">
-            <Link size="17.5" />
-            <div>Sub Records</div>
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
         </div>
-        <div class="flex flex-col gap-4">
-            {#each children as child, index}
-                <ExtensionsComponents
-                    name="detailView.update.subRecords.{child.collection}"
-                    utils={getExtensionUtils(lobb, ctx)}
+        {#each children as child}
+            <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <DataTable
                     collectionName={child.collection}
                     searchParams={{ children_of: collectionName, parent_id: entry.id }}
-                    class="bg-muted/30 border rounded-md overflow-hidden"
+                    parentContext={{ collectionName, recordId: entry.id }}
+                    onOperation={makeHandler(child.collection)}
+                    showImport={false}
+                    showHeader={true}
+                    showFooter={true}
+                    showDelete={child.type === "fk" || child.type === "m2m"}
+                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
                 >
-                    <div class="border rounded-md overflow-clip">
-                        <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
-                            <div class="flex-1 flex h-full items-center gap-2">
-                                <TableIcon class="text-muted-foreground" size="17.5" />
-                                <div class="text-sm text-muted-foreground">{child.collection}</div>
-                            </div>
-                            {#if child.type === "fk"}
-                                <div class="flex gap-2">
-                                    <CreateDetailViewButton
-                                        variant="ghost"
-                                        class="h-7 px-2 font-normal text-xs"
-                                        Icon={Plus}
-                                        collectionName={child.collection}
-                                        onSuccessfullSave={async () => { refresh[index] = !refresh[index]; }}
-                                    >
-                                        Create
-                                    </CreateDetailViewButton>
-                                </div>
-                            {/if}
-                        </div>
-                        <div class="max-h-72 overflow-auto rounded-md">
-                            {#key refresh[index]}
-                                <DataTable
-                                    collectionName={child.collection}
-                                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
-                                    unifiedBgColor="bg-muted/30"
-                                    showHeader={false}
-                                    showFooter={false}
-                                    showDelete={child.type === "fk"}
-                                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: false, showCheckboxes: false }}
-                                />
-                            {/key}
+                    {#snippet headerLeft()}
+                        <div class="flex items-center gap-2 px-1">
+                            <Table size="14" class="text-muted-foreground" />
+                            <span class="text-sm font-medium">{child.collection}</span>
                         </div>
-                    </div>
-                </ExtensionsComponents>
-            {/each}
-        </div>
+                    {/snippet}
+                </DataTable>
+            </div>
+        {/each}
     </div>
 {/if}

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -31,7 +31,7 @@
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import DetailViewChildren from "../update/detailViewChildren.svelte";
     import type { Snippet } from "svelte";
-    import { getDefaultEntry, parseDetailViewValues, serializeEntry } from "../utils";
+    import { getDefaultEntry } from "../utils";
     import FieldInput from "../fieldInput.svelte";
   import Drawer from "../../../components/drawer.svelte";
 
@@ -46,8 +46,6 @@
         recordId,
     }: UpdateDetailViewProp = $props();
 
-    parseDetailViewValues(ctx, collectionName, values)
-
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
@@ -57,15 +55,17 @@
         getChangedProperties(initialEntry, $state.snapshot(entry)),
     );
     let fieldsErrors: Record<string, any> = $state({});
+    let pendingChildren = $state<Record<string, any>>({});
 
     async function handleSave() {
         delete localEntry.id;
-        localEntry = serializeEntry(ctx, collectionName, localEntry);
 
+        const children = Object.keys(pendingChildren).length ? pendingChildren : undefined;
         const response = await lobb.updateOne(
             collectionName,
             recordId,
             localEntry,
+            children,
         );
 
         if (!response.bodyUsed) {
@@ -145,7 +145,7 @@
             {/each}
         </div>
         {#if showRelatedRecords}
-            <DetailViewChildren {collectionName} {entry} />
+            <DetailViewChildren {collectionName} {entry} bind:pendingChildren />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">
@@ -163,7 +163,7 @@
                 class="h-7 px-3 text-xs font-normal"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
-                disabled={!Object.keys(localEntry).length}
+                disabled={!Object.keys(localEntry).length && !Object.keys(pendingChildren).length}
             >
                 {submitButton?.text ? submitButton.text : "Update"}
             </Button>

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -4,7 +4,6 @@
 	import Button from "../../../components/ui/button/button.svelte";
 	import UpdateDetailView from "./updateDetailView.svelte";
 	import { getStudioContext } from "../../../context";
-	import { getCollectionParamsFields } from "../../dataTable/utils";
 
 	interface LocalProp extends UpdateDetailViewProp {
 		variant?: ButtonProps["variant"];
@@ -17,11 +16,11 @@
 	let open = $state(false);
 	let values: Record<string, any> | undefined = $state(undefined);
 
-	const { lobb, ctx } = getStudioContext();
+	const { lobb } = getStudioContext();
 
 	async function openView() {
 		const params = {
-			fields: getCollectionParamsFields(ctx, props.collectionName, true),
+			fields: "*",
 			filter: { id: props.recordId },
 			limit: 1,
 		};

package/src/lib/components/detailView/utils.ts

@@ -1,6 +1,5 @@
 import Mustache from "mustache";
 import type { CTX } from "../../store.types";
-import { isRelationField } from "../../relations";
 import { getField } from "../dataTable/utils";
 import type { DetailFormField } from "./detailViewForm.svelte";
 
@@ -26,34 +25,6 @@ export function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName:
     );
 }
 
-export function serializeEntry(
-        ctx: CTX,
-        collectionName: string,
-        entry: Record<string, any>,
-) {
-    entry = { ...entry }
-
-    // extract FK object fields → ID
-    for (const [fieldName, fieldValue] of Object.entries(entry)) {
-        const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
-        if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
-            entry[fieldName] = fieldValue.id;
-        }
-    }
-
-    // extract polymorphic id_field objects → ID
-    for (const relation of ctx.meta.relations) {
-        if (relation.type !== "polymorphic") continue;
-        if ((relation as any).from.collection !== collectionName) continue;
-        const idField = (relation as any).from.id_field;
-        const fieldValue = entry[idField];
-        if (fieldValue !== null && typeof fieldValue === "object" && fieldValue.id !== undefined) {
-            entry[idField] = fieldValue.id;
-        }
-    }
-
-    return entry;
-}
 
 export function buildChildren(
         ctx: CTX,
@@ -72,8 +43,7 @@ export function buildChildren(
         if (!childEntries?.length) continue;
 
         const toCreate = childEntries
-            .filter((e) => !e.id)
-            .map((e) => serializeEntry(ctx, childCollection, e));
+            .filter((e) => !e.id);
         const toLink = childEntries
             .filter((e) => e.id)
             .map((e) => e.id);
@@ -88,45 +58,13 @@ export function buildChildren(
     return Object.keys(children).length ? children : undefined;
 }
 
-export function parseDetailViewValues(ctx: CTX, collectionName: string, values: Record<string, any>) {
-    const forignFieldNames = ctx.meta.relations
-        .filter((relation) => relation.type !== "polymorphic" && relation.from.collection === collectionName)
-        .map((relation) => relation.from.field);
-    const childCollectionNames = ctx.meta.relations
-        .filter((relation) => relation.to.collection === collectionName)
-        .map((relation) => relation.from.collection);
-
-    for (const [key, value] of Object.entries(values)) {
-        if (forignFieldNames.includes(key)) {
-            if (typeof value === 'number') {
-                values[key] = {
-                    id: value,
-                }
-            }
-        } else if (childCollectionNames.includes(key)) {
-            for (let index = 0; index < values[key].length; index++) {
-                parseDetailViewValues(ctx, key, values[key][index]);
-            }
-        }
-    }
-
-    // wrap polymorphic id_field scalar values into { id: value }
-    for (const relation of ctx.meta.relations) {
-        if (relation.type !== "polymorphic") continue;
-        if ((relation as any).from.collection !== collectionName) continue;
-        const idField = (relation as any).from.id_field;
-        if (idField in values && typeof values[idField] === 'number') {
-            values[idField] = { id: values[idField] };
-        }
-    }
-}
 
 export function getCollectionFields(ctx: CTX, collectionName: string) {
     let returnedData: DetailFormField[] = [];
 
     const collectionFields = ctx.meta.collections[collectionName].fields;
     const isSingleton = ctx.meta.collections[collectionName].singleton;
-    for (const [fieldName, value] of Object.entries(collectionFields)) {
+    for (const [fieldName] of Object.entries(collectionFields)) {
 
         if (isSingleton && fieldName === "id") {
             continue;

package/src/lib/components/foreingKeyInput.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.svelte";
     import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
+    import { getCollectionPrimaryField } from "./dataTable/utils";
+    import { getStudioContext } from "../context";
     import { ExternalLink } from "lucide-svelte";
 
+    const { lobb, ctx } = getStudioContext();
+
     interface LocalProps {
         parentCollectionName: string;
         collectionName: string;
         fieldName: string;
-        value?: any;
+        value?: number | null;
         destructive?: boolean;
         entry: Record<string, any>;
     }
@@ -22,31 +27,48 @@
         entry,
     }: LocalProps = $props();
 
-    const idIsZero = $derived(value?.id === 0);
-    const refrenceId = $derived(value ? value.id : null);
-    const primaryField = $derived(value ? Object.values(value)[1] : null);
+    let displayName = $state<string | null>(null);
+
+    onMount(async () => {
+        if (value == null) return;
+        try {
+            const res = await lobb.findOne(collectionName, value);
+            const record = (await res.json()).data;
+            const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
+            displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+        } catch {
+            displayName = null;
+        }
+    });
+
+    $effect(() => {
+        if (value == null) displayName = null;
+    });
+
+    function handleSelect(selectedEntry: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
+        value = selectedEntry.id;
+        displayName = primaryFieldName ? String(selectedEntry[primaryFieldName]) : null;
+    }
+
+    const idIsZero = $derived(value === 0);
 </script>
 
-<!-- THE SELECT BUTTON -->
 {#if !idIsZero}
     <div class="relative">
-        <div
-            class="flex gap-2 absolute right-0 top-0 mr-9 h-full items-center text-xs"
-        >
-            {#if value !== null}
+        <div class="flex gap-2 absolute right-0 top-0 mr-9 h-full items-center text-xs">
+            {#if value != null}
                 <UpdateDetailViewButton
                     collectionName={collectionName}
-                    recordId={value.id}
+                    recordId={value}
                     variant="ghost"
                     class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
                     Icon={ExternalLink}
                 ></UpdateDetailViewButton>
             {/if}
-            {#if primaryField}
-                <div
-                    class="flex items-center bg-background rounded-full border h-6 px-3 shadow-sm"
-                >
-                    {primaryField}
+            {#if displayName}
+                <div class="flex items-center bg-background rounded-full border h-6 px-3 shadow-sm">
+                    {displayName}
                 </div>
             {/if}
             <SelectRecord
@@ -55,7 +77,7 @@
                 {parentCollectionName}
                 {collectionName}
                 {fieldName}
-                bind:value
+                onSelect={handleSelect}
                 {entry}
             />
         </div>
@@ -66,7 +88,10 @@
                 bg-muted/30 text-xs
                 {destructive ? 'border-destructive bg-destructive/10' : ''}
             "
-            bind:value={() => refrenceId, (v) => (value.id = v)}
+            bind:value={
+                () => value ?? "",
+                (v) => (value = (v === "" || v == null) ? null : Number(v))
+            }
         />
     </div>
 {:else}

package/src/lib/components/polymorphicInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import Button from "./ui/button/button.svelte";
     import DataTable from "./dataTable/dataTable.svelte";
     import Drawer from "./drawer.svelte";
@@ -7,7 +8,7 @@
     import { getStudioContext } from "../context";
     import { ArrowLeft, Link, ChevronDown } from "lucide-svelte";
 
-    const { ctx } = getStudioContext();
+    const { ctx, lobb } = getStudioContext();
 
     interface Props {
         collectionField: string;
@@ -26,12 +27,28 @@
     }: Props = $props();
 
     const selectedCollection = $derived(entry[collectionField] ?? null);
-    const selectedId = $derived(entry[idField]?.id ?? entry[idField] ?? null);
-    const primaryField = $derived(entry[idField] ? Object.values(entry[idField])[1] : null);
+    const selectedId = $derived(entry[idField] ?? null);
 
+    let displayName = $state<string | null>(null);
     let collectionPopoverOpen = $state(false);
     let recordDrawerOpen = $state(false);
 
+    onMount(async () => {
+        if (selectedCollection == null || selectedId == null) return;
+        try {
+            const res = await lobb.findOne(selectedCollection, selectedId);
+            const record = await res.json();
+            const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection);
+            displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+        } catch {
+            displayName = null;
+        }
+    });
+
+    $effect(() => {
+        if (entry[idField] == null) displayName = null;
+    });
+
     function onCollectionChange(col: string) {
         collectionPopoverOpen = false;
         if (entry[collectionField] !== col) {
@@ -42,14 +59,13 @@
     function onIdChange(e: Event) {
         const raw = (e.target as HTMLInputElement).value;
         const id = raw === "" ? null : Number(raw);
-        entry = { ...entry, [idField]: id === null ? null : { id } };
+        entry = { ...entry, [idField]: id };
     }
 
     function onRecordSelect(record: any) {
         const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
-        const value: any = { id: record.id };
-        if (primaryFieldName) value[primaryFieldName] = record[primaryFieldName];
-        entry = { ...entry, [idField]: value };
+        entry = { ...entry, [idField]: record.id };
+        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
         recordDrawerOpen = false;
     }
 </script>
@@ -93,9 +109,9 @@
     />
 
     <!-- Primary field badge -->
-    {#if primaryField}
+    {#if displayName}
         <div class="flex shrink-0 items-center bg-background rounded-full border h-6 px-3 shadow-sm">
-            {primaryField}
+            {displayName}
         </div>
     {/if}
 

package/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { isEqual } from "lodash";
 
 import { MediaQuery } from 'svelte/reactivity';
 
@@ -34,7 +35,7 @@ export function calculateDrawerWidth() {
 export function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>) {
     const changes: Record<string, any> = {};
     for (const key of Object.keys(newObj)) {
-        if (oldObj[key] !== newObj[key]) {
+        if (!isEqual(oldObj[key], newObj[key])) {
             changes[key] = newObj[key];
         }
     }