@lobb-js/studio 0.26.0 → 0.27.1

package/dist/components/detailView/utils.js

@@ -1,16 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import Mustache from "mustache";
-import { isRelationField } from "../../relations";
 import { getField } from "../dataTable/utils";
 export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
     return Object.fromEntries(fieldNames.map(function (fieldName) {
@@ -33,42 +21,17 @@ export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
         return [fieldName, value];
     }));
 }
-export function serializeEntry(ctx, collectionName, entry) {
-    entry = __assign({}, entry);
-    // extract FK object fields → ID
-    for (var _i = 0, _a = Object.entries(entry); _i < _a.length; _i++) {
-        var _b = _a[_i], fieldName = _b[0], fieldValue = _b[1];
-        var isRefrenceField = isRelationField(ctx, collectionName, fieldName);
-        if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
-            entry[fieldName] = fieldValue.id;
-        }
-    }
-    // extract polymorphic id_field objects → ID
-    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
-        var relation = _d[_c];
-        if (relation.type !== "polymorphic")
-            continue;
-        if (relation.from.collection !== collectionName)
-            continue;
-        var idField = relation.from.id_field;
-        var fieldValue = entry[idField];
-        if (fieldValue !== null && typeof fieldValue === "object" && fieldValue.id !== undefined) {
-            entry[idField] = fieldValue.id;
-        }
-    }
-    return entry;
-}
 export function buildChildren(ctx, collectionName, entry) {
     var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.type !== "polymorphic" && relation.to.collection === collectionName; });
     var children = {};
-    var _loop_1 = function (relation) {
+    for (var _i = 0, childrenRelations_1 = childrenRelations; _i < childrenRelations_1.length; _i++) {
+        var relation = childrenRelations_1[_i];
         var childCollection = relation.from.collection;
         var childEntries = entry[childCollection];
         if (!(childEntries === null || childEntries === void 0 ? void 0 : childEntries.length))
-            return "continue";
+            continue;
         var toCreate = childEntries
-            .filter(function (e) { return !e.id; })
-            .map(function (e) { return serializeEntry(ctx, childCollection, e); });
+            .filter(function (e) { return !e.id; });
         var toLink = childEntries
             .filter(function (e) { return e.id; })
             .map(function (e) { return e.id; });
@@ -79,54 +42,15 @@ export function buildChildren(ctx, collectionName, entry) {
             if (toLink.length)
                 children[childCollection].link = toLink;
         }
-    };
-    for (var _i = 0, childrenRelations_1 = childrenRelations; _i < childrenRelations_1.length; _i++) {
-        var relation = childrenRelations_1[_i];
-        _loop_1(relation);
     }
     return Object.keys(children).length ? children : undefined;
 }
-export function parseDetailViewValues(ctx, collectionName, values) {
-    var forignFieldNames = ctx.meta.relations
-        .filter(function (relation) { return relation.type !== "polymorphic" && relation.from.collection === collectionName; })
-        .map(function (relation) { return relation.from.field; });
-    var childCollectionNames = ctx.meta.relations
-        .filter(function (relation) { return relation.to.collection === collectionName; })
-        .map(function (relation) { return relation.from.collection; });
-    for (var _i = 0, _a = Object.entries(values); _i < _a.length; _i++) {
-        var _b = _a[_i], key = _b[0], value = _b[1];
-        if (forignFieldNames.includes(key)) {
-            if (typeof value === 'number') {
-                values[key] = {
-                    id: value,
-                };
-            }
-        }
-        else if (childCollectionNames.includes(key)) {
-            for (var index = 0; index < values[key].length; index++) {
-                parseDetailViewValues(ctx, key, values[key][index]);
-            }
-        }
-    }
-    // wrap polymorphic id_field scalar values into { id: value }
-    for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
-        var relation = _d[_c];
-        if (relation.type !== "polymorphic")
-            continue;
-        if (relation.from.collection !== collectionName)
-            continue;
-        var idField = relation.from.id_field;
-        if (idField in values && typeof values[idField] === 'number') {
-            values[idField] = { id: values[idField] };
-        }
-    }
-}
 export function getCollectionFields(ctx, collectionName) {
     var returnedData = [];
     var collectionFields = ctx.meta.collections[collectionName].fields;
     var isSingleton = ctx.meta.collections[collectionName].singleton;
     for (var _i = 0, _a = Object.entries(collectionFields); _i < _a.length; _i++) {
-        var _b = _a[_i], fieldName = _b[0], value = _b[1];
+        var fieldName = _a[_i][0];
         if (isSingleton && fieldName === "id") {
             continue;
         }

package/dist/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/dist/components/foreingKeyInput.svelte.d.ts

@@ -2,7 +2,7 @@ interface LocalProps {
     parentCollectionName: string;
     collectionName: string;
     fieldName: string;
-    value?: any;
+    value?: number | null;
     destructive?: boolean;
     entry: Record<string, any>;
 }

package/dist/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/dist/utils.js

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { isEqual } from "lodash";
 import { MediaQuery } from 'svelte/reactivity';
 export function cn() {
     var inputs = [];
@@ -26,7 +27,7 @@ export function getChangedProperties(oldObj, newObj) {
     var changes = {};
     for (var _i = 0, _a = Object.keys(newObj); _i < _a.length; _i++) {
         var key = _a[_i];
-        if (oldObj[key] !== newObj[key]) {
+        if (!isEqual(oldObj[key], newObj[key])) {
             changes[key] = newObj[key];
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.29.0",
+    "@lobb-js/core": "^0.31.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

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

@@ -1,3 +1,17 @@
+<script lang="ts" module>
+    export interface ParentContext {
+        collectionName: string;
+        recordId: string | number;
+    }
+
+    export type RecordOperation =
+        | { type: "link";   record: any }
+        | { type: "unlink"; id: string | number }
+        | { type: "delete"; id: string | number }
+        | { type: "create"; record: any }
+        | { type: "update"; id: string | number; data: any };
+</script>
+
 <script lang="ts">
     import _ from "lodash";
     import { getStudioContext } from "../../context";
@@ -5,7 +19,7 @@
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
-    import { Pencil, Trash } from "lucide-svelte";
+    import { Pencil, Trash, Unlink } from "lucide-svelte";
     import * as icons from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
@@ -26,8 +40,11 @@
         collectionName: string;
         filter?: any;
         searchParams?: Record<string, any>;
+        parentContext?: ParentContext;
+        onOperation?: (op: RecordOperation) => void;
         showHeader?: boolean;
         showFooter?: boolean;
+        showImport?: boolean;
         unifiedBgColor?: "bg-muted/30" | "bg-background";
         showDelete?: boolean;
         tableProps?: Partial<TableProps>;
@@ -38,8 +55,11 @@
         collectionName,
         filter,
         searchParams,
+        parentContext,
+        onOperation,
         showHeader = true,
         showFooter = true,
+        showImport = true,
         unifiedBgColor,
         showDelete = false,
         tableProps,
@@ -78,7 +98,7 @@
     let dataTableWidth: number = $state(0);
     const doesCollectionHasChildren = $derived(
         (ctx.meta.collections[collectionName]?.children ?? [])
-            .some((c: any) => c.type === "fk" || c.type === "m2m")
+            .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
 
     // requests the data from the server when the params is changed
@@ -109,14 +129,44 @@
         loading = false;
     }
 
+    // Internal handler: updates data optimistically then calls onOperation
+    function applyOperation(op: RecordOperation) {
+        if (op.type === "link") {
+            data = [...data, op.record];
+        } else if (op.type === "unlink" || op.type === "delete") {
+            data = data.filter((r: any) => String(r.id) !== String(op.id));
+        } else if (op.type === "create") {
+            data = [...data, { ...op.record, _pending: true }];
+        } else if (op.type === "update") {
+            data = data.map((r: any) => String(r.id) === String(op.id) ? { ...r, ...op.data } : r);
+        }
+        onOperation?.(op);
+    }
+
     async function handleDelete(entryId: string) {
-        const result = await showDialog(
-            "Are you sure?",
-            "This will delete the record you selected.",
-        );
+        const result = await showDialog("Are you sure?", "This will permanently delete the record.");
         if (result) {
-            await lobb.deleteOne(collectionName, entryId);
-            params = { ...params };
+            if (onOperation) {
+                applyOperation({ type: "delete", id: entryId });
+            } else if (parentContext) {
+                await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
+                params = { ...params };
+            } else {
+                await lobb.deleteOne(collectionName, entryId);
+                params = { ...params };
+            }
+        }
+    }
+
+    async function handleUnlink(entryId: string) {
+        const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
+        if (result) {
+            if (onOperation) {
+                applyOperation({ type: "unlink", id: entryId });
+            } else {
+                await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
+                params = { ...params };
+            }
         }
     }
 
@@ -159,7 +209,7 @@
     {/snippet}
 
     {#if showHeader}
-        <Header bind:params {collectionName} bind:selectedRecords>
+        <Header bind:params {collectionName} bind:selectedRecords {parentContext} {showImport} onOperation={onOperation ? applyOperation : undefined}>
             {#snippet left()}
                 {@render headerLeft?.()}
             {/snippet}
@@ -200,6 +250,16 @@
                                     params = { ...params };
                                 }}
                             ></UpdateDetailViewButton>
+                            {#if parentContext}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleUnlink(entry.id)}
+                                    Icon={Unlink}
+                                    title="Remove from this entry"
+                                ></Button>
+                            {/if}
                             {#if showDelete}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
@@ -207,6 +267,7 @@
                                     size="icon"
                                     onclick={() => handleDelete(entry.id)}
                                     Icon={Trash}
+                                    title="Delete permanently"
                                 ></Button>
                             {/if}
                             {#await getWorkflowTools($state.snapshot(entry))}

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

@@ -2,7 +2,7 @@
     import { getStudioContext } from "../../context";
 
     const { lobb, ctx } = getStudioContext();
-    import { Download, ListRestart, Plus, Trash } from "lucide-svelte";
+    import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
@@ -11,14 +11,19 @@
     import ImportButton from "../importButton.svelte";
     import { showDialog } from "../../actions";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import SelectRecord from "../selectRecord.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
     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;
+        showImport?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -26,9 +31,42 @@
         collectionName,
         params = $bindable(),
         selectedRecords = $bindable(),
+        parentContext,
+        onOperation,
+        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] } },
+            );
+            resetTable();
+        }
+    }
+
+    async function handleChildCreate(formData: any) {
+        if (!parentContext) return;
+        if (onOperation) {
+            onOperation({ type: "create", record: formData });
+        } else {
+            await lobb.updateOne(
+                parentContext.collectionName,
+                String(parentContext.recordId),
+                {},
+                { [collectionName]: { create: [formData] } },
+            );
+            resetTable();
+        }
+    }
+
     let headerWidth: number = $state(0);
     let headerIsSmall: boolean = $derived(headerWidth < 560);
 
@@ -138,34 +176,60 @@
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        <Tooltip.Provider delayDuration={0}>
-            <Tooltip.Root>
-                <Tooltip.Trigger>
-                    <ImportButton
-                        {collectionName}
-                        variant="outline"
-                        class="h-7 px-2 text-xs font-normal"
-                        Icon={Download}
-                        onSuccessfullSave={() => (params = { ...params })}
-                    />
-                </Tooltip.Trigger>
-                <Tooltip.Content>Import</Tooltip.Content>
-            </Tooltip.Root>
-        </Tooltip.Provider>
+        {#if showImport}
+            <Tooltip.Provider delayDuration={0}>
+                <Tooltip.Root>
+                    <Tooltip.Trigger>
+                        <ImportButton
+                            {collectionName}
+                            variant="outline"
+                            class="h-7 px-2 text-xs font-normal"
+                            Icon={Download}
+                            onSuccessfullSave={() => (params = { ...params })}
+                        />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Import</Tooltip.Content>
+                </Tooltip.Root>
+            </Tooltip.Provider>
+        {/if}
         <ExtensionsComponents
             name="listView.header.actions"
             utils={getExtensionUtils(lobb, ctx)}
             {collectionName}
             refresh={() => { params = { ...params }; }}
         />
-        <CreateDetailViewButton
-            {collectionName}
-            variant="default"
-            class="h-7 px-3 text-xs font-normal"
-            Icon={Plus}
-            onSuccessfullSave={() => (params = { ...params })}
-        >
-            {headerIsSmall ? "" : "Create"}
-        </CreateDetailViewButton>
+        {#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
+                {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"
+                class="h-7 px-3 text-xs font-normal"
+                Icon={Plus}
+                onSuccessfullSave={() => (params = { ...params })}
+            >
+                {headerIsSmall ? "" : "Create"}
+            </CreateDetailViewButton>
+        {/if}
     </div>
 </div>