@lobb-js/studio 0.28.6 → 0.29.1

package/dist/components/dataTable/dataTableTabs.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { CollectionTab } from "../../store.types";
 interface Props {
     collectionName: string;
     filter?: any;
+    tabs?: CollectionTab[];
     activeTabFilter?: any;
 }
 declare const DataTableTabs: import("svelte").Component<Props, {}, "activeTabFilter">;

package/dist/components/dataTable/filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import * as Popover from "../../components/ui/popover/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import Filter from "./filter.svelte";
     import {
         Plus,

package/dist/components/dataTable/filterButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Popover from "../../components/ui/popover/index.js";
+	import * as Popover from "../ui/popover/index.js";
 	import { ListFilter } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";

package/dist/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,15 +15,17 @@
     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;
+        showCreate?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -32,37 +34,28 @@
         params = $bindable(),
         selectedRecords = $bindable(),
         parentContext,
-        onOperation,
+        changes,
         showImport = true,
+        showCreate = false,
         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();
         }
     }
@@ -176,7 +169,7 @@
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        {#if showImport}
+        {#if showImport && showCreate}
             <Tooltip.Provider delayDuration={0}>
                 <Tooltip.Root>
                     <Tooltip.Trigger>
@@ -199,34 +192,24 @@
             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"
+                variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                Icon={Plus}
-                rollback={true}
-                onSuccessfullSave={handleChildCreate}
+                Icon={Link}
+                onSelect={handleLink}
             >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
-        {:else}
+                {headerIsSmall ? "" : "Link"}
+            </SelectRecord>
+        {/if}
+        {#if showCreate}
             <CreateDetailViewButton
                 {collectionName}
                 variant="default"
                 class="h-7 px-3 text-xs font-normal"
                 Icon={Plus}
-                onSuccessfullSave={() => (params = { ...params })}
+                changes={changes ? createChanges : undefined}
+                onSuccessfullSave={handleCreateSuccess}
             >
                 {headerIsSmall ? "" : "Create"}
             </CreateDetailViewButton>

package/dist/components/dataTable/header.svelte.d.ts

@@ -1,12 +1,14 @@
+import type { ChildrenChanges } from "../detailView/utils";
+import type { ParentContext } from "./dataTable.svelte";
 import type { Snippet } from "svelte";
-import type { ParentContext, RecordOperation } from "./dataTable.svelte";
 interface Props {
     collectionName: string;
     params: any;
     selectedRecords: string[];
     parentContext?: ParentContext;
-    onOperation?: (op: RecordOperation) => void;
+    changes?: ChildrenChanges;
     showImport?: boolean;
+    showCreate?: boolean;
     left?: Snippet<[]>;
 }
 declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params">;

package/dist/components/dataTable/listViewChildren.svelte

@@ -12,10 +12,9 @@
         collectionName: string;
         recordId: string;
         width: number;
-        unifiedBgColor?: "bg-muted/30" | "bg-background";
     }
 
-    let { collectionName, recordId, width, unifiedBgColor }: Props = $props();
+    let { collectionName, recordId, width }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
@@ -27,13 +26,13 @@
 
 <div class="flex" style="width: {width}px;">
     <div
-        class="flex justify-center border-r {unifiedBgColor ? unifiedBgColor : 'bg-background'}"
+        class="flex justify-center border-r bg-background"
         style="width: 40px"
     ></div>
     <div class="flex-1 flex flex-col">
         {#each children as child, index}
             {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden {unifiedBgColor ? unifiedBgColor : 'bg-background'}">
+            <div class="overflow-hidden bg-background">
                 <div
                     bind:clientWidth={tableHeaderWidth}
                     class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
@@ -75,7 +74,7 @@
                 {#if expandedRows[index]}
                     <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
                         <div
-                            class="border-r {unifiedBgColor ? unifiedBgColor : ''}"
+                            class="border-r"
                             style="width: 100vw; max-width: 40px"
                         ></div>
                         <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
@@ -92,7 +91,6 @@
                                         showHeader={false}
                                         showFooter={false}
                                         showDelete={child.type === "fk"}
-                                        {unifiedBgColor}
                                         tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
                                     />
                                 </ExtensionsComponents>

package/dist/components/dataTable/listViewChildren.svelte.d.ts

@@ -2,7 +2,6 @@ interface Props {
     collectionName: string;
     recordId: string;
     width: number;
-    unifiedBgColor?: "bg-muted/30" | "bg-background";
 }
 declare const ListViewChildren: import("svelte").Component<Props, {}, "">;
 type ListViewChildren = ReturnType<typeof ListViewChildren>;

package/dist/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/dist/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/dist/components/dataTable/table.svelte

@@ -38,7 +38,6 @@
 
 		// other
 		parentWidth?: number;
-		unifiedBgColor?: "bg-muted/30" | "bg-background";
 		select?: Select;
 		tableWidth?: number;
 	}
@@ -77,7 +76,6 @@
 		tools,
 		rowActions,
 		collapsible,
-		unifiedBgColor,
 		select,
 		tableWidth = $bindable(),
 	}: TableProps = $props();
@@ -184,7 +182,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 			"
 		>
 			<!-- collapsable toggle -->
@@ -209,7 +207,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -236,7 +234,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -251,7 +249,7 @@
 					class="
 						sticky left-0
 						flex items-center p-2.5 text-xs h-10
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						border-r gap-2
 					"
 				>
@@ -298,7 +296,7 @@
 					class="
 						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
 						{select ? 'cursor-pointer' : ''}
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 					"
 				>
@@ -315,7 +313,7 @@
 						sticky right-0 z-10
 						flex items-center p-2.5 text-xs h-10
 						border-l gap-2
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 					"
 				>
 					{@render rowActions?.(entry, index)}
@@ -336,8 +334,8 @@
 						{expandedRows[index] ? '' : 'height: 0px;'}
 					"
 					class="
-						sticky left-0 top-0 overflow-auto bg-muted/30
-						{unifiedBgColor ? unifiedBgColor : ''}
+						sticky left-0 top-0 overflow-auto bg-muted-soft
+						
 						{expandedRows[index] ? 'border-t' : ''}
 					"
 				>

package/dist/components/dataTable/table.svelte.d.ts

@@ -24,7 +24,6 @@ export interface TableProps {
     rowActions?: Snippet<[Entry, number]>;
     collapsible?: Snippet<[Entry, number]>;
     parentWidth?: number;
-    unifiedBgColor?: "bg-muted/30" | "bg-background";
     select?: Select;
     tableWidth?: number;
 }

package/dist/components/dataTableDrawer/dataTableDrawer.svelte

@@ -4,6 +4,7 @@
     import DataTable from "../dataTable/dataTable.svelte";
     import Drawer from "../drawer.svelte";
     import type { TableProps } from "../dataTable/table.svelte";
+    import type { CollectionTab } from "../../store.types";
 
     interface Props {
         collectionName: string;
@@ -13,6 +14,7 @@
         showFooter?: boolean;
         tableProps?: Partial<TableProps>;
         position?: "side" | "bottom";
+        tabs?: CollectionTab[];
         onClose?: () => void;
     }
 
@@ -24,6 +26,7 @@
         showFooter = true,
         tableProps,
         position = "side",
+        tabs,
         onClose,
     }: Props = $props();
 </script>
@@ -47,7 +50,7 @@
             {showHeader}
             {showFooter}
             {tableProps}
-            unifiedBgColor="bg-background"
+            {tabs}
         />
     </div>
 </Drawer>

package/dist/components/dataTableDrawer/dataTableDrawer.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TableProps } from "../dataTable/table.svelte";
+import type { CollectionTab } from "../../store.types";
 interface Props {
     collectionName: string;
     filter?: Record<string, any>;
@@ -7,6 +8,7 @@ interface Props {
     showFooter?: boolean;
     tableProps?: Partial<TableProps>;
     position?: "side" | "bottom";
+    tabs?: CollectionTab[];
     onClose?: () => void;
 }
 declare const DataTableDrawer: import("svelte").Component<Props, {}, "">;

package/dist/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();
@@ -37,7 +37,7 @@
                     parentCollectionName={collectionName}
                     collectionName={child.collection}
                     parentRecord={{ id: entry.id, collectionName }}
-                    class="bg-muted/30 border rounded-md overflow-hidden"
+                    class="bg-muted-soft border rounded-md overflow-hidden"
                     bind:value={entry[child.collection]}
                 >
                     <CreateManyView

package/dist/components/detailView/create/createDetailView.svelte

@@ -8,114 +8,142 @@
         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 DetailView from "../detailView.svelte";
+    import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
-        values = {},
+        values: passedValues = {} as Record<string, any>,
         showRelatedRecords = true,
-        rollback = false,
         onCancel,
         onSuccessfullSave,
         title,
         submitButton,
+        changes: passedChanges = $bindable<Changes | undefined>(undefined),
     }: CreateDetailViewProp = $props();
 
+    const isRecordingMode = passedChanges !== undefined;
+    if (!isRecordingMode) passedChanges = { data: {}, children: {} };
+    const changes = passedChanges as Changes;
+
     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 values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     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 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 childCollections) {
+        if (passedValues[col]) subCollectionsValues[col] = passedValues[col];
     }
 
-    async function handleSave() {
-        let localEntry = getChangedProperties(initialEntry, $state.snapshot(entry));
+    $effect(() => {
+        const snap = $state.snapshot(values);
 
-        await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
-            collectionName,
-            entry: localEntry,
-        });
+        untrack(() => {
+            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;
+            changes.data = data;
+            changes.children = children;
+
+            if (!isRecordingMode) {
+                console.log(`[${collectionName}] changes:`, $state.snapshot(changes));
+            }
+        });
+    });
+
+    function handleCancel() {
+        if (isRecordingMode) {
+            changes.data = {};
+            changes.children = {};
         }
+        onCancel?.();
+    }
 
-        const children = buildChildren(ctx, collectionName, localEntry);
-        const response = await lobb.createOne(collectionName, localEntry, children);
+    async function handleSave() {
+        const snap = $state.snapshot(changes);
 
-        await emitEvent({ lobb, ctx }, "studio.collections.create", {
-            collectionName,
-            entry: localEntry,
-            response: response,
-        });
+        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);
+
+        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;
                     return;
                 } else if (result.message) {
+                    toast.error(result.message);
                     return;
                 }
             }
         }
 
-        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>
@@ -131,51 +159,16 @@
         </div>
     </div>
     <div class="flex-1 overflow-y-auto">
-        <div class="flex flex-col gap-4 p-4">
-            {#each fieldNames as fieldName}
-                {#if !ctx.meta.collections[collectionName].fields[fieldName]?.ui?.hidden}
-                    {@const field = getField(ctx, fieldName, collectionName)}
-                    {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
-                    <div class="flex flex-col gap-2">
-                        <div class="flex flex-1 items-end justify-between gap-2 text-xs">
-                            <div class="flex gap-2">
-                                <div class="h-fit">{field.label}</div>
-                                <div class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground">
-                                    <FieldIcon size="12" />
-                                    {field.type}
-                                </div>
-                            </div>
-                            <div>
-                                <ExtensionsComponents
-                                    name="dvFields.topRight.{collectionName}.{fieldName}"
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                    bind:value={entry[fieldName]}
-                                />
-                            </div>
-                        </div>
-                        <FieldInput
-                            {collectionName}
-                            {fieldName}
-                            bind:value={
-                                () => entry[fieldName],
-                                (v) => (entry = { ...entry, [fieldName]: v })
-                            }
-                            bind:entry
-                            errorMessages={fieldsErrors[fieldName]}
-                        />
-                    </div>
-                {/if}
-            {/each}
-        </div>
+        <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
         {#if showRelatedRecords}
-            <Children {collectionName} values={subCollectionsValues} bind:entry />
+            <Children {collectionName} values={subCollectionsValues} bind:entry={values} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">
         <div class="flex gap-3">
             <Button
                 variant="outline"
-                onclick={onCancel}
+                onclick={handleCancel}
                 class="h-7 px-3 text-xs font-normal"
                 Icon={X}
             >