@lobb-js/studio 0.31.0 → 0.32.0

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

@@ -21,11 +21,11 @@
     import { showDialog } from "../../actions";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import type { Snippet } from "svelte";
-    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { ChildrenChanges } from "../detailView/utils";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
     import { emitEvent } from "../../eventSystem";
-    import { onMount } from "svelte";
+    import { onMount, untrack } from "svelte";
     import Tabs from "./dataTableTabs.svelte";
     import { fade } from "svelte/transition";
     import type { CollectionTab } from "../../store.types";
@@ -37,11 +37,14 @@
         filter?: any;
         searchParams?: Record<string, any>;
         parentContext?: ParentContext;
+        onChanges?: (changes: ChildrenChanges) => void;
         changes?: ChildrenChanges;
         showHeader?: boolean;
         showFooter?: boolean;
         showImport?: boolean;
         showDelete?: boolean;
+        showEdit?: boolean;
+        onDataLoad?: (total: number) => void;
         tableProps?: Partial<TableProps>;
         tabs?: CollectionTab[];
         headerLeft?: Snippet<[]>;
@@ -52,16 +55,24 @@
         filter,
         searchParams,
         parentContext,
-        changes = $bindable<ChildrenChanges | undefined>(undefined),
+        onChanges,
+        changes,
         showHeader = true,
         showFooter = true,
         showImport = true,
         showDelete = false,
+        showEdit = true,
+        onDataLoad,
         tableProps,
         tabs,
         headerLeft,
     }: Props = $props();
 
+    const isRecordingMode = onChanges !== undefined;
+    let localChanges = $state<ChildrenChanges>(
+        untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
+    );
+
     // Gate row/header buttons by the current user's permissions:
     // - showUpdate → per-row edit button
     // - showCreate → header's Create + Import buttons (passed to Header)
@@ -76,40 +87,29 @@
         showCreate = create === true;
     });
 
-    function getOrCreateUpdatedSlot(recordId: string): Changes | undefined {
-        if (!changes) return undefined;
-        let slot = changes.updated.find((u) => String(u.id) === String(recordId));
-        if (!slot) {
-            slot = { id: recordId, data: {}, children: {} };
-            changes.updated.push(slot);
-        }
-        return slot;
-    }
-
-    // Derives the displayed rows by applying changes on top of server data.
-    // This is the single place responsible for optimistic UI — no handler touches data directly.
+    // Derives the displayed rows by applying localChanges on top of server data.
     const data = $derived.by(() => {
-        if (!changes) return serverData;
+        if (!isRecordingMode) return serverData;
 
         const removedIds = new Set([
-            ...changes.deleted.map((r) => String(r.id)),
-            ...changes.unlinked.map((r) => String(r.id)),
+            ...localChanges.deleted.map((r: any) => String(r.id)),
+            ...localChanges.unlinked.map((r: any) => String(r.id)),
         ]);
 
         let result = serverData.filter((r: any) => !removedIds.has(String(r.id)));
 
         result = result.map((r: any) => {
-            const update = changes.updated.find((u) => String(u.id) === String(r.id));
-            return update && Object.keys(update.data).length ? { ...r, ...update.data } : r;
+            const update = localChanges.updated.find((u) => String(u.id) === String(r.id));
+            return update && Object.keys(update.changes.data).length ? { ...r, ...update.changes.data } : r;
         });
 
-        for (const record of changes.linked) {
+        for (const record of localChanges.linked) {
             if (!result.some((r: any) => String(r.id) === String(record.id))) {
                 result = [...result, record];
             }
         }
 
-        for (const item of changes.created) {
+        for (const item of localChanges.created) {
             result = [...result, { ...item.data, _pending: true }];
         }
 
@@ -189,18 +189,26 @@
         const res = await response.json();
         serverData = res.data;
         totalCount = res.meta.totalCount;
+        onDataLoad?.(totalCount);
         loading = false;
     }
 
     async function handleDelete(entryId: string) {
         const result = await showDialog("Are you sure?", "This will permanently delete the record.");
         if (!result) return;
-        if (changes) {
-            const record = data.find((r: any) => String(r.id) === String(entryId));
-            if (record) changes.deleted.push($state.snapshot(record));
+        if (isRecordingMode) {
+            // If the record was locally linked (not yet in DB), just cancel the link instead of marking for deletion.
+            const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
+            if (linkedIdx !== -1) {
+                localChanges.linked.splice(linkedIdx, 1);
+            } else {
+                const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                if (record) localChanges.deleted.push($state.snapshot(record));
+            }
+            onChanges?.($state.snapshot(localChanges));
         } else if (parentContext) {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
-            await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
+            await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), { data: {}, children: { [collectionName]: { delete: [entryId] } } });
             params = { ...params };
         } else {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
@@ -212,16 +220,55 @@
     async function handleUnlink(entryId: string) {
         const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
         if (!result) return;
-        if (changes) {
-            const record = data.find((r: any) => String(r.id) === String(entryId));
-            if (record) changes.unlinked.push($state.snapshot(record));
+        if (isRecordingMode) {
+            // If the record was locally linked this session, just cancel the link — net effect is no change.
+            const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
+            if (linkedIdx !== -1) {
+                localChanges.linked.splice(linkedIdx, 1);
+            } else {
+                const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                if (record) localChanges.unlinked.push($state.snapshot(record));
+            }
+            onChanges?.($state.snapshot(localChanges));
         } else {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
-            await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
+            await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), { data: {}, children: { [collectionName]: { unlink: [entryId] } } });
             params = { ...params };
         }
     }
 
+    function handleLink(record: any) {
+        // If the record was locally unlinked this session, just cancel the unlink — net effect is no change.
+        const unlinkedIdx = localChanges.unlinked.findIndex((r: any) => String(r.id) === String(record.id));
+        if (unlinkedIdx !== -1) {
+            localChanges.unlinked.splice(unlinkedIdx, 1);
+        } else if (!localChanges.linked.some((r: any) => String(r.id) === String(record.id))) {
+            localChanges.linked.push(record);
+        }
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    $effect(() => {
+        if (isRecordingMode) {
+            console.log(`[DataTable:${collectionName}] localChanges:`, $state.snapshot(localChanges));
+        }
+    });
+
+    function handleCreate(changes: import("../detailView/utils").Changes) {
+        localChanges.created.push({ data: changes.data });
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleUpdate(id: string, editChanges: import("../detailView/utils").Changes) {
+        const existing = localChanges.updated.find((u) => String(u.id) === id);
+        if (existing) {
+            existing.changes = editChanges;
+        } else {
+            localChanges.updated.push({ id, changes: editChanges });
+        }
+        onChanges?.($state.snapshot(localChanges));
+    }
+
 </script>
 
 <div
@@ -246,7 +293,8 @@
             {showImport}
             {showCreate}
             {parentContext}
-            {changes}
+            onLink={isRecordingMode ? handleLink : undefined}
+            onCreate={isRecordingMode ? handleCreate : undefined}
         >
             {#snippet left()}
                 {@render headerLeft?.()}
@@ -277,17 +325,16 @@
                         {...tableProps}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                         {#snippet tools(entry)}
-                            {#if showUpdate}
+                            {#if showUpdate && showEdit}
                                 <UpdateDetailViewButton
                                     {collectionName}
                                     recordId={entry.id}
                                     variant="ghost"
                                     class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
                                     Icon={Pencil}
-                                    changes={getOrCreateUpdatedSlot(String(entry.id))}
-                                    onSuccessfullSave={async () => {
-                                        params = { ...params };
-                                    }}
+                                    changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
+                                    onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
+                                    onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
                                 ></UpdateDetailViewButton>
                             {/if}
                             {#if parentContext}
@@ -317,7 +364,7 @@
                                 fieldName={column.id}
                                 {value}
                                 {entry}
-                                tableParams={params}
+                                refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
                         {#snippet collapsible(entry)}

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

@@ -17,7 +17,7 @@
         fieldName: string;
         value: any;
         entry: Record<string, any>;
-        tableParams?: any;
+        refresh?: () => void;
     }
 
     let {
@@ -25,7 +25,7 @@
         fieldName,
         value,
         entry,
-        tableParams = $bindable(),
+        refresh,
     }: Props = $props();
 
     const field = getField(ctx, fieldName, collectionName);
@@ -49,7 +49,7 @@
                 collectionField={polymorphicRelation.from.collection_field}
                 idField={polymorphicRelation.from.id_field}
                 {entry}
-                bind:tableParams
+                {refresh}
             />
         {:else if isRefrenceField}
             {#if value?.id && value.id !== 0}
@@ -67,7 +67,7 @@
                         class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
                         Icon={ExternalLink}
                         onSuccessfullSave={async () => {
-                            tableParams = { ...tableParams };
+                            refresh?.();
                         }}
                     />
                 </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
@@ -23,7 +23,8 @@
         params: any;
         selectedRecords: string[];
         parentContext?: ParentContext;
-        changes?: ChildrenChanges;
+        onLink?: (record: any) => void;
+        onCreate?: (changes: Changes) => void;
         showImport?: boolean;
         showCreate?: boolean;
         left?: Snippet<[]>;
@@ -34,27 +35,25 @@
         params = $bindable(),
         selectedRecords = $bindable(),
         parentContext,
-        changes,
+        onLink,
+        onCreate,
         showImport = true,
         showCreate = false,
         left
     }: Props = $props();
 
-    // Local changes object for the create form (recording mode only)
-    let createChanges = $state<Changes>({ data: {}, children: {} });
-
     function handleLink(record: any) {
-        if (changes) {
-            changes.linked.push(record);
+        if (onLink) {
+            onLink(record);
         } else if (parentContext) {
-            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { link: [record.id] } });
+            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), { data: {}, children: { [collectionName]: { link: [record.id] } } });
             resetTable();
         }
     }
 
-    async function handleCreateSuccess(snap: any) {
-        if (changes) {
-            changes.created.push({ data: snap.data });
+    async function handleCreate(snap: any) {
+        if (onCreate) {
+            onCreate(snap);
         } else {
             resetTable();
         }
@@ -208,8 +207,8 @@
                 variant="default"
                 class="h-7 px-3 text-xs font-normal"
                 Icon={Plus}
-                changes={changes ? createChanges : undefined}
-                onSuccessfullSave={handleCreateSuccess}
+                onChanges={onCreate ? handleCreate : undefined}
+                onSuccessfullSave={onCreate ? undefined : handleCreate}
             >
                 {headerIsSmall ? "" : "Create"}
             </CreateDetailViewButton>

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

@@ -6,14 +6,14 @@
         collectionField: string;
         idField: string;
         entry: Record<string, any>;
-        tableParams?: any;
+        refresh?: () => void;
     }
 
     let {
         collectionField,
         idField,
         entry,
-        tableParams = $bindable(),
+        refresh,
     }: Props = $props();
 
     const targetCollection = $derived(entry[collectionField] ?? null);
@@ -34,7 +34,7 @@
             class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
             Icon={ExternalLink}
             onSuccessfullSave={async () => {
-                tableParams = { ...tableParams };
+                refresh?.();
             }}
         />
     </div>

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

@@ -1,4 +1,7 @@
 <script lang="ts" module>
+    import type { Changes } from "../utils";
+    import type { Snippet } from "svelte";
+
     interface SubmitButton {
         text: string;
         icon: any;
@@ -12,7 +15,7 @@
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
         onCancel?: () => Promise<void>;
-        changes?: import("../utils").Changes | undefined;
+        onChanges?: (changes: Changes) => void;
     }
 </script>
 
@@ -24,11 +27,8 @@
     import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import Children from "./children.svelte";
-    import { buildChildren, getDefaultEntry } from "../utils";
-    import type { Changes } from "../utils";
-    import { getChangedProperties } from "../../../utils";
-    import type { Snippet } from "svelte";
+    import CreateDetailViewChildren from "./createDetailViewChildren.svelte";
+    import { getDefaultEntry } from "../utils";
     import DetailView from "../detailView.svelte";
     import Drawer from "../../drawer.svelte";
 
@@ -40,80 +40,53 @@
         onSuccessfullSave,
         title,
         submitButton,
-        changes: passedChanges = $bindable<Changes | undefined>(undefined),
+        onChanges,
     }: CreateDetailViewProp = $props();
 
-    const isRecordingMode = passedChanges !== undefined;
-    if (!isRecordingMode) passedChanges = { data: {}, children: {} };
-    const changes = passedChanges as Changes;
+    const isRecordingMode = onChanges !== undefined;
+    let changes = $state<Changes>({ data: {}, children: {} });
 
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
 
-    const childCollections = ctx.meta.relations
-        .filter((r) => r.to.collection === collectionName)
-        .map((r) => (r as any).from.collection);
-
-    const subCollectionsValues: Record<string, any> = {};
-    for (const col of childCollections) {
-        if (passedValues[col]) subCollectionsValues[col] = passedValues[col];
-    }
-
     $effect(() => {
         const snap = $state.snapshot(values);
-
         untrack(() => {
             const data: Record<string, any> = {};
-            const children: Record<string, any> = {};
-
             for (const [key, value] of Object.entries(snap)) {
-                if (childCollections.includes(key) && Array.isArray(value)) {
-                    children[key] = {
-                        created: (value as any[]).filter((r) => !r.id).map((r) => ({ data: r })),
-                        updated: [],
-                        deleted: [],
-                        linked: (value as any[]).filter((r) => r.id).map((r) => r.id),
-                        unlinked: [],
-                    };
-                } else if (value !== null && value !== undefined && value !== '') {
+                if (value !== null && value !== undefined && value !== '') {
                     data[key] = value;
                 }
             }
-
             changes.data = data;
-            changes.children = children;
-
-            if (!isRecordingMode) {
-                console.log(`[${collectionName}] changes:`, $state.snapshot(changes));
-            }
         });
     });
 
-    function handleCancel() {
-        if (isRecordingMode) {
-            changes.data = {};
-            changes.children = {};
+    function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
+        const result: Record<string, any> = {};
+        for (const [collection, ops] of Object.entries(changes.children)) {
+            const hasOps = ops.created.length || ops.linked.length;
+            if (!hasOps) continue;
+            result[collection] = {
+                ...(ops.created.length ? { create: ops.created.map((op) => op.data) } : {}),
+                ...(ops.linked.length ? { link: ops.linked.map((r) => r.id) } : {}),
+            };
         }
+        const children = Object.keys(result).length ? result : undefined;
+        return { data: changes.data, ...(children ? { children } : {}) };
+    }
+
+    function handleCancel() {
         onCancel?.();
     }
 
     async function handleSave() {
         const snap = $state.snapshot(changes);
-
-        const children = buildChildren(ctx, collectionName, { ...snap.data, ...Object.fromEntries(
-            Object.entries(snap.children).map(([col, ops]) => [
-                col,
-                [
-                    ...(ops.created.map((op) => op.data)),
-                    ...(ops.linked.map((id) => ({ id }))),
-                ]
-            ])
-        )});
-
-        const response = await lobb.createOne(collectionName, snap.data, children, undefined, isRecordingMode);
+        const response = await lobb.createOne(collectionName, buildPayload(snap), undefined, isRecordingMode);
 
         if (response.status === 204) {
+            onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
             toast.success(`The record was successfully created`);
             handleCancel();
@@ -133,6 +106,7 @@
             }
         }
 
+        onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully created`);
         onCancel?.();
@@ -161,7 +135,7 @@
     <div class="flex-1 overflow-y-auto">
         <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
         {#if showRelatedRecords}
-            <Children {collectionName} values={subCollectionsValues} bind:entry={values} />
+            <CreateDetailViewChildren {collectionName} {changes} onChanges={(children) => { changes.children = children; }} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import DataTable from "../../dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Table, Link, Plus } from "lucide-svelte";
+    import { untrack } from "svelte";
+    import CreateDetailViewButton from "./createDetailViewButton.svelte";
+    import SelectRecord from "../../selectRecord.svelte";
+
+    const { ctx } = getStudioContext();
+
+    import type { Changes, ChildrenChanges } from "../utils";
+
+    interface LocalProp {
+        collectionName: string;
+        changes?: Changes;
+        onChanges?: (children: Changes["children"]) => void;
+    }
+
+    let { collectionName, changes, onChanges }: LocalProp = $props();
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    let localChildren = $state<Changes["children"]>(untrack(() => changes?.children ?? {}));
+
+    function handleChildChanges(collection: string, updated: ChildrenChanges) {
+        localChildren[collection] = updated;
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyCreate(collection: string, c: Changes) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].created.push({ data: c.data });
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyLink(collection: string, record: any) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].linked.push(record);
+        onChanges?.($state.snapshot(localChildren));
+    }
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-3 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
+        </div>
+        {#each children as child}
+            {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
+            {#if localAdditions === 0}
+                <div class="rounded-lg border bg-muted-soft overflow-hidden flex flex-col">
+                    <div class="flex flex-col items-center justify-center gap-3 py-6 px-4">
+                        <div class="flex flex-col items-center gap-2 text-center">
+                            <div class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                                <span>No records in</span>
+                                <span class="rounded-md border bg-muted px-2 py-0.5 text-xs font-normal">{child.collection}</span>
+                            </div>
+                            <span class="text-xs text-muted-foreground/70">Create a new record or link an existing one.</span>
+                        </div>
+                        <div class="flex gap-2">
+                            <SelectRecord
+                                collectionName={child.collection}
+                                variant="outline"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Link}
+                                onSelect={(r) => handleEmptyLink(child.collection, r)}
+                            >
+                                Link
+                            </SelectRecord>
+                            <CreateDetailViewButton
+                                collectionName={child.collection}
+                                variant="default"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Plus}
+                                onChanges={(c) => handleEmptyCreate(child.collection, c)}
+                            >
+                                Create
+                            </CreateDetailViewButton>
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <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: -1 }}
+                        onChanges={(updated) => handleChildChanges(child.collection, updated)}
+                        changes={localChildren[child.collection]}
+                        showImport={false}
+                        showHeader={true}
+                        showFooter={false}
+                        showDelete={false}
+                        showEdit={false}
+                        tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
+                    >
+                        {#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>
+                        {/snippet}
+                    </DataTable>
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}

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

@@ -145,7 +145,7 @@
                 class="h-7 px-2 font-normal text-xs"
                 Icon={Plus}
                 {collectionName}
-                changes={addChanges}
+                onChanges={(updated) => { addChanges = updated; }}
                 showRelatedRecords={true}
                 onSuccessfullSave={onRecordAdd}
                 values={createValues}
@@ -200,7 +200,7 @@
                             class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
                             Icon={Pencil}
                             {collectionName}
-                            changes={editChanges}
+                            onChanges={(updated) => { editChanges = updated; }}
                             showRelatedRecords={true}
                             onSuccessfullSave={(entry) =>
                                 onRecordOverride(entry, index)}