@lobb-js/studio 0.28.5 → 0.29.0

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-
-    const { lobb, ctx } = getStudioContext();
+    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { ParentContext } from "./dataTable.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
@@ -15,14 +15,15 @@
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
-    import type { ParentContext, RecordOperation } from "./dataTable.svelte";
+
+    const { lobb, ctx } = getStudioContext();
 
     interface Props {
         collectionName: string;
         params: any;
         selectedRecords: string[];
         parentContext?: ParentContext;
-        onOperation?: (op: RecordOperation) => void;
+        changes?: ChildrenChanges;
         showImport?: boolean;
         left?: Snippet<[]>;
     }
@@ -32,37 +33,27 @@
         params = $bindable(),
         selectedRecords = $bindable(),
         parentContext,
-        onOperation,
+        changes,
         showImport = true,
         left
     }: Props = $props();
 
-    async function handleLink(selected: any) {
-        if (!parentContext) return;
-        if (onOperation) {
-            onOperation({ type: "link", record: selected });
-        } else {
-            await lobb.updateOne(
-                parentContext.collectionName,
-                String(parentContext.recordId),
-                {},
-                { [collectionName]: { link: [selected.id] } },
-            );
+    // 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);
+        } else if (parentContext) {
+            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { link: [record.id] } });
             resetTable();
         }
     }
 
-    async function handleChildCreate(formData: any) {
-        if (!parentContext) return;
-        if (onOperation) {
-            onOperation({ type: "create", record: formData });
+    async function handleCreateSuccess(snap: any) {
+        if (changes) {
+            changes.created.push({ data: snap.data });
         } else {
-            await lobb.updateOne(
-                parentContext.collectionName,
-                String(parentContext.recordId),
-                {},
-                { [collectionName]: { create: [formData] } },
-            );
             resetTable();
         }
     }
@@ -199,37 +190,25 @@
             refresh={() => { params = { ...params }; }}
         />
         {#if parentContext}
-            {#if parentContext}
-                <SelectRecord
-                    {collectionName}
-                    variant="outline"
-                    class="h-7 px-3 text-xs font-normal"
-                    Icon={Link}
-                    onSelect={handleLink}
-                >
-                    {headerIsSmall ? "" : "Link"}
-                </SelectRecord>
-            {/if}
-            <CreateDetailViewButton
+            <SelectRecord
                 {collectionName}
-                variant="default"
-                class="h-7 px-3 text-xs font-normal"
-                Icon={Plus}
-                rollback={true}
-                onSuccessfullSave={handleChildCreate}
-            >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
-        {:else}
-            <CreateDetailViewButton
-                {collectionName}
-                variant="default"
+                variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                Icon={Plus}
-                onSuccessfullSave={() => (params = { ...params })}
+                Icon={Link}
+                onSelect={handleLink}
             >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
+                {headerIsSmall ? "" : "Link"}
+            </SelectRecord>
         {/if}
+        <CreateDetailViewButton
+            {collectionName}
+            variant="default"
+            class="h-7 px-3 text-xs font-normal"
+            Icon={Plus}
+            changes={changes ? createChanges : undefined}
+            onSuccessfullSave={handleCreateSuccess}
+        >
+            {headerIsSmall ? "" : "Create"}
+        </CreateDetailViewButton>
     </div>
 </div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import * as _ from "lodash-es";
 
-    import * as Popover from "../../components/ui/popover/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
     import Label from "../ui/label/label.svelte";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Popover from "../../components/ui/popover/index.js";
+	import * as Popover from "../ui/popover/index.js";
 	import { ArrowDownWideNarrow } from "lucide-svelte";
-	import { buttonVariants } from "../../components/ui/button";
+	import { buttonVariants } from "../ui/button";
 	import Sort from "./sort.svelte";
 
 	interface Props {

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

@@ -2,7 +2,7 @@
     import { getStudioContext } from "../../../context";
     import { Link } from "lucide-svelte";
     import CreateManyView from "./createManyView.svelte";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
 
     const { ctx, lobb } = getStudioContext();

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

@@ -8,93 +8,128 @@
         collectionName: string;
         values?: Record<string, any>;
         showRelatedRecords?: boolean;
-        rollback?: boolean;
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
         onCancel?: () => Promise<void>;
+        changes?: import("../utils").Changes | undefined;
     }
 </script>
 
 <script lang="ts">
     import { ArrowLeft, Plus, X } from "lucide-svelte";
-    import Button from "../../../components/ui/button/button.svelte";
+    import Button from "../../ui/button/button.svelte";
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
+    import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
-    import {
-        buildChildren,
-        getDefaultEntry,
-    } from "../utils";
+    import { buildChildren, getDefaultEntry } from "../utils";
+    import type { Changes } from "../utils";
     import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
-    import { emitEvent } from "../../../eventSystem";
-    import Drawer from "../../../components/drawer.svelte";
+    import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
         values = {},
         showRelatedRecords = true,
-        rollback = false,
         onCancel,
         onSuccessfullSave,
         title,
         submitButton,
+        changes = $bindable<Changes | undefined>(undefined),
     }: CreateDetailViewProp = $props();
 
+    let _changes = $state<Changes>({ data: {}, children: {} });
+    const isRecordingMode = $derived(changes !== undefined);
+
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
     );
     const initialEntry = $state.snapshot(entry);
     let fieldsErrors: Record<string, any> = $state({});
-    const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
+
+    const childCollections = ctx.meta.relations
+        .filter((r) => r.to.collection === collectionName)
+        .map((r) => (r as any).from.collection);
+
+    const subCollections = childCollections;
     const subCollectionsValues: Record<string, any> = {};
-    for (let index = 0; index < subCollections.length; index++) {
-        const subCollection = subCollections[index];
-        if (values[subCollection]) {
-            subCollectionsValues[subCollection] = values[subCollection];
-        }
+    for (const col of subCollections) {
+        if (values[col]) subCollectionsValues[col] = values[col];
     }
 
-    async function handleSave() {
-        let localEntry = getChangedProperties(initialEntry, $state.snapshot(entry));
+    $effect(() => {
+        const snap = $state.snapshot(entry);
 
-        await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
-            collectionName,
-            entry: localEntry,
-        });
+        untrack(() => {
+            const target = changes ?? _changes;
+            const data: Record<string, any> = {};
+            const children: Record<string, any> = {};
 
-        // remove empty children records data
-        for (const [key, value] of Object.entries(localEntry)) {
-            if (Array.isArray(value) && !value.length) {
-                delete localEntry[key];
+            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 !== '') {
+                    data[key] = value;
+                }
             }
-        }
 
-        if (rollback) {
-            if (onSuccessfullSave) await onSuccessfullSave(localEntry);
-            onCancel?.();
-            return;
+            target.data = data;
+            target.children = children;
+
+            if (!isRecordingMode) {
+                console.log(`[${collectionName}] changes:`, $state.snapshot(target));
+            }
+        });
+    });
+
+    function handleCancel() {
+        if (changes !== undefined) {
+            changes.data = {};
+            changes.children = {};
         }
+        onCancel?.();
+    }
+
+    async function handleSave() {
+        const target = changes ?? _changes;
+        const snap = $state.snapshot(target);
 
-        const children = buildChildren(ctx, collectionName, localEntry);
-        const response = await lobb.createOne(collectionName, localEntry, children);
+        const children = buildChildren(ctx, collectionName, { ...snap.data, ...Object.fromEntries(
+            Object.entries(snap.children).map(([col, ops]) => [
+                col,
+                [
+                    ...(ops.created.map((c) => c.data)),
+                    ...(ops.linked.map((id) => ({ id }))),
+                ]
+            ])
+        )});
 
-        await emitEvent({ lobb, ctx }, "studio.collections.create", {
-            collectionName,
-            entry: localEntry,
-            response: response,
-        });
+        const response = await lobb.createOne(collectionName, snap.data, children, undefined, isRecordingMode);
+
+        if (response.status === 204) {
+            if (onSuccessfullSave) await onSuccessfullSave(snap);
+            toast.success(`The record was successfully created`);
+            handleCancel();
+            return;
+        }
 
         if (!response.bodyUsed) {
-            let result = await response.json();
+            const result = await response.json();
             if (response.status >= 400) {
                 if (result.message && result.details) {
                     fieldsErrors = result.details;
@@ -105,17 +140,17 @@
             }
         }
 
-        if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+        if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully created`);
         onCancel?.();
     }
 </script>
 
-<Drawer onHide={onCancel}>
+<Drawer onHide={handleCancel}>
     <div class="flex h-12 items-center gap-4 border-b px-4">
         <Button
             variant="outline"
-            onclick={onCancel}
+            onclick={handleCancel}
             class=" h-8 w-8 rounded-full text-xs font-normal"
             Icon={ArrowLeft}
         ></Button>
@@ -175,7 +210,7 @@
         <div class="flex gap-3">
             <Button
                 variant="outline"
-                onclick={onCancel}
+                onclick={handleCancel}
                 class="h-7 px-3 text-xs font-normal"
                 Icon={X}
             >

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CreateDetailViewProp } from "./createDetailView.svelte";
-	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
-	import Button from "../../../components/ui/button/button.svelte";
+	import type { ButtonProps } from "../../ui/button/button.svelte";
+	import Button from "../../ui/button/button.svelte";
 	import CreateDetailView from "./createDetailView.svelte";
 
 	interface LocalProp extends CreateDetailViewProp {

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

@@ -11,11 +11,15 @@
     import Table, { type TableProps } from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import CreateDetailViewButton from "./createDetailViewButton.svelte";
-    import { getCollectionColumns } from "../../../components/dataTable/utils";
-    import SelectRecord from "../../../components/selectRecord.svelte";
-    import FieldCell from "../../../components/dataTable/fieldCell.svelte";
+    import type { Changes } from "../utils";
+
+    let addChanges = $state<Changes>({ data: {}, children: {} });
+    let editChanges = $state<Changes>({ data: {}, children: {} });
+    import { getCollectionColumns } from "../../dataTable/utils";
+    import SelectRecord from "../../selectRecord.svelte";
+    import FieldCell from "../../dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ListViewChildren from "../../../components/dataTable/listViewChildren.svelte";
+    import ListViewChildren from "../../dataTable/listViewChildren.svelte";
     import { getStudioContext } from "../../../context";
 
     const { ctx } = getStudioContext();
@@ -141,7 +145,7 @@
                 class="h-7 px-2 font-normal text-xs"
                 Icon={Plus}
                 {collectionName}
-                rollback={true}
+                changes={addChanges}
                 showRelatedRecords={true}
                 onSuccessfullSave={onRecordAdd}
                 values={createValues}
@@ -197,7 +201,7 @@
                             class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
                             Icon={Pencil}
                             {collectionName}
-                            rollback={true}
+                            changes={editChanges}
                             showRelatedRecords={true}
                             onSuccessfullSave={(entry) =>
                                 onRecordOverride(entry, index)}

package/src/lib/components/detailView/fieldInput.svelte

@@ -6,7 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";

package/src/lib/components/detailView/fieldInputReplacement.svelte

@@ -2,7 +2,7 @@
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
   	import type { EntryField } from "./detailViewForm.svelte";
   	import type { Snippet } from "svelte";

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

@@ -1,43 +1,32 @@
 <script lang="ts">
-    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
+    import DataTable from "../../dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
     import { Table, Link } from "lucide-svelte";
 
     const { ctx } = getStudioContext();
 
-    type PendingOps = {
-        link?: (string | number)[];
-        unlink?: (string | number)[];
-        delete?: (string | number)[];
-        create?: any[];
-    };
+    import type { Changes, ChildrenChanges } from "../utils";
 
     interface LocalProp {
         collectionName: string;
         entry: any;
-        pendingChildren?: Record<string, PendingOps>;
+        activeChanges?: Changes;
     }
 
-    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
-
-    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);
-            }
-        };
-    }
+    let { collectionName, entry, activeChanges }: LocalProp = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    // Ensure all child collection slots exist before the template renders so bind:changes works
+    $effect.pre(() => {
+        if (!activeChanges) return;
+        for (const child of children) {
+            if (!activeChanges.children[child.collection]) {
+                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+            }
+        }
+    });
 </script>
 
 {#if children.length}
@@ -52,7 +41,7 @@
                     collectionName={child.collection}
                     searchParams={{ children_of: collectionName, parent_id: entry.id }}
                     parentContext={{ collectionName, recordId: entry.id }}
-                    onOperation={makeHandler(child.collection)}
+                    bind:changes={activeChanges!.children[child.collection]}
                     showImport={false}
                     showHeader={true}
                     showFooter={true}