@lobb-js/studio 0.20.0 → 0.22.0

package/dist/extensions/extensionUtils.js

@@ -45,6 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { toast } from "svelte-sonner";
 import { showDialog, openDataTableDrawer } from "../actions";
+import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -100,6 +101,7 @@ export function getExtensionUtils(lobb, ctx) {
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: function (props) { return openDataTableDrawer({ lobb: lobb, ctx: ctx }, props); },
+        emitEvent: function (eventName, input) { return emitEvent({ lobb: lobb, ctx: ctx }, eventName, input); },
         components: getComponents(),
         mediaQueries: mediaQueries,
         intlDate: intlDate,

package/dist/store.types.d.ts

@@ -5,12 +5,25 @@ interface CollectionTab {
     filter?: Record<string, any>;
     default?: boolean;
 }
+type CollectionChild = {
+    type: "fk";
+    collection: string;
+    field: string;
+} | {
+    type: "m2m";
+    collection: string;
+} | {
+    type: "polymorphic";
+    collection: string;
+};
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
     virtual?: boolean;
+    junction?: boolean;
+    children?: CollectionChild[];
     ui?: {
         icon?: string;
         tabs?: CollectionTab[];

package/package.json

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

package/src/lib/actions.ts

@@ -15,6 +15,7 @@ export interface OpenDataTableDrawerProps {
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;
+    position?: "side" | "bottom";
 }
 
 export function showDialog(title: string, description: string): Promise<boolean> {

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

@@ -113,24 +113,15 @@ export function getCollectionParamsFields(ctx: CTX, collectionName: string, allF
 		});
 
 	const columns = [];
-	for (let index = 0; index < foreignFields.length; index++) {
-		const foreignField = foreignFields[index];
-		if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) {
-			continue;
-		}
-		columns.push(`${foreignField.field}.id`);
+	for (const foreignField of foreignFields) {
+		if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) continue;
 
-		if (!allFields) {
-			const primaryField = getCollectionPrimaryField(ctx, foreignField.collection)
-			if (primaryField) {
-				columns.push(`${foreignField.field}.${primaryField}`);
-			}
+		if (allFields) {
+			columns.push(`${foreignField.field}.*`);
 		} else {
-			const fieldNames = Object.keys(ctx.meta.collections[foreignField.collection].fields);
-			for (let index = 0; index < fieldNames.length; index++) {
-				const fieldName = fieldNames[index];
-				columns.push(`${foreignField.field}.${fieldName}`);
-			}
+			columns.push(`${foreignField.field}.id`);
+			const primaryField = getCollectionPrimaryField(ctx, foreignField.collection);
+			if (primaryField) columns.push(`${foreignField.field}.${primaryField}`);
 		}
 	}
 

package/src/lib/components/dataTableDrawer/dataTableDrawer.svelte

@@ -12,6 +12,7 @@
         showHeader?: boolean;
         showFooter?: boolean;
         tableProps?: Partial<TableProps>;
+        position?: "side" | "bottom";
         onClose?: () => void;
     }
 
@@ -22,20 +23,23 @@
         showHeader = true,
         showFooter = true,
         tableProps,
+        position = "side",
         onClose,
     }: Props = $props();
 </script>
 
-<Drawer onHide={async () => onClose?.()}>
-    <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
-        <Button
-            variant="outline"
-            onclick={() => onClose?.()}
-            class="h-8 w-8 rounded-full text-xs font-normal"
-            Icon={ArrowLeft}
-        />
-        <div class="text-sm font-medium">{title ?? collectionName}</div>
-    </div>
+<Drawer onHide={async () => onClose?.()} {position}>
+    {#if position !== "bottom"} 
+        <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
+            <Button
+                variant="outline"
+                onclick={() => onClose?.()}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            />
+            <div class="text-sm font-medium">{title ?? collectionName}</div>
+        </div>
+    {/if}
     <div class="min-h-0 flex-1 overflow-auto">
         <DataTable
             {collectionName}

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

@@ -15,53 +15,36 @@
 
     let { collectionName, entry = $bindable(), values = {} }: LocalProp = $props();
 
-    const childrenRelations = ctx.meta.relations.filter(
-        (relation) => relation.to.collection === collectionName,
-    );
+    const fkChildren = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
 
-    // filling the children properties
-    for (let index = 0; index < childrenRelations.length; index++) {
-        const relation = childrenRelations[index];
-        const childCollection = relation.from.collection;
-        entry[childCollection] = [];
-        if (values[childCollection]) {
-            entry[childCollection] = [
-                ...entry[childCollection],
-                ...values[childCollection],
-            ];
-        }
+    for (const child of fkChildren) {
+        entry[child.collection] = values[child.collection] ? [...values[child.collection]] : [];
     }
 </script>
 
-{#if childrenRelations.length}
+{#if fkChildren.length}
     <div class="flex flex-col gap-4 border-t p-4">
         <div class="flex items-center gap-2">
             <Link size="17.5" />
             <div>Sub Records</div>
         </div>
         <div class="flex flex-col gap-4">
-            {#each childrenRelations as relation}
-                {@const childCollection = relation.from.collection}
+            {#each fkChildren as child}
                 <ExtensionsComponents
-                    name="detailView.create.subRecords.{childCollection}"
+                    name="detailView.create.subRecords.{child.collection}"
                     utils={getExtensionUtils(lobb, ctx)}
                     parentCollectionName={collectionName}
-                    collectionName={childCollection}
-                    parentRecord={{
-                        id: entry.id,
-                        collectionName: collectionName,
-                    }}
+                    collectionName={child.collection}
+                    parentRecord={{ id: entry.id, collectionName }}
                     class="bg-muted/30 border rounded-md overflow-hidden"
-                    bind:value={entry[childCollection]}
+                    bind:value={entry[child.collection]}
                 >
                     <CreateManyView
                         parentCollectionName={collectionName}
-                        collectionName={childCollection}
-                        parentRecord={{
-                            id: entry.id,
-                            collectionName: collectionName,
-                        }}
-                        bind:entries={entry[childCollection]}
+                        collectionName={child.collection}
+                        parentRecord={{ id: entry.id, collectionName }}
+                        bind:entries={entry[child.collection]}
                     />
                 </ExtensionsComponents>
             {/each}

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

@@ -28,7 +28,7 @@
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
     import {
-        generateTransactionBody,
+        buildChildren,
         getDefaultEntry,
         parseDetailViewValues,
         serializeEntry,
@@ -82,31 +82,15 @@
             }
         }
 
-        const serializedEntry = serializeEntry(
-            ctx,
-            collectionName,
-            localEntry,
-            rollback,
-        );
-
-        let transactionBody;
         if (rollback) {
-            transactionBody = [
-                {
-                    method: "createOne",
-                    props: { collectionName: collectionName, data: serializedEntry },
-                },
-            ];
-        } else {
-            transactionBody = generateTransactionBody(
-                ctx,
-                collectionName,
-                serializedEntry,
-            );
+            if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+            onCancel?.();
+            return;
         }
 
-        // create the record
-        let response = await lobb.transactions(transactionBody, rollback);
+        const serializedEntry = serializeEntry(ctx, collectionName, localEntry);
+        const children = buildChildren(ctx, collectionName, localEntry);
+        const response = await lobb.createOne(collectionName, serializedEntry, children);
 
         await emitEvent({ lobb, ctx }, "studio.collections.create", {
             collectionName,
@@ -126,15 +110,8 @@
             }
         }
 
-        // close detailView side bar
-        if (onSuccessfullSave) {
-            await onSuccessfullSave(localEntry);
-        }
-
-        if (!rollback) {
-            toast.success(`The record was successfully created`);
-        }
-
+        if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+        toast.success(`The record was successfully created`);
         onCancel?.();
     }
 </script>

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

@@ -1,10 +1,14 @@
 <script lang="ts">
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
-    import { Link, Plus, TableIcon } from "lucide-svelte";
+    import { Link, Plus, TableIcon, Unlink } from "lucide-svelte";
     import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import SelectRecord from "../../../components/selectRecord.svelte";
+    import { getCollectionColumns } from "../../dataTable/utils";
+    import Table from "../../../components/dataTable/table.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -15,67 +19,92 @@
 
     let { collectionName, entry }: LocalProp = $props();
 
-    const childrenRelations = ctx.meta.relations.filter(
-        (relation) => relation.to.collection === collectionName,
-    );
-    const refresh: boolean[] = $state(
-        new Array(childrenRelations.length).fill(true),
-    );
+    const allChildren = ctx.meta.collections[collectionName]?.children ?? [];
+    const fkChildren = allChildren.filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
+    const relationalChildren = allChildren.filter((c) => c.type === "m2m" || c.type === "polymorphic") as { type: string; collection: string }[];
+
+    const fkRefresh: boolean[] = $state(new Array(fkChildren.length).fill(true));
+
+    let relationalRecords: Record<string, any[]> = $state({});
+    let relationalLoading = $state(false);
+
+    async function fetchRelational() {
+        if (!relationalChildren.length || !entry?.id) return;
+        relationalLoading = true;
+        const childrenParam: Record<string, any> = {};
+        for (const child of relationalChildren) {
+            childrenParam[child.collection] = { fields: ["*"] };
+        }
+        const response = await lobb.findAll(collectionName, {
+            filter: { id: entry.id },
+            limit: 1,
+            children: childrenParam,
+        });
+        const result = await response.json();
+        const record = result.data?.[0];
+        if (record) {
+            for (const child of relationalChildren) {
+                relationalRecords[child.collection] = record[child.collection] ?? [];
+            }
+        }
+        relationalLoading = false;
+    }
+
+    async function linkRecord(childCollection: string, selected: any) {
+        await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { link: [selected.id] } });
+        await fetchRelational();
+    }
+
+    async function unlinkRecord(childCollection: string, id: any) {
+        await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { unlink: [id] } });
+        await fetchRelational();
+    }
+
+    $effect(() => {
+        fetchRelational();
+    });
 </script>
 
-{#if childrenRelations.length}
+{#if allChildren.length}
     <div class="flex flex-col gap-4 border-t p-4">
         <div class="flex items-center gap-2">
             <Link size="17.5" />
             <div>Sub Records</div>
         </div>
         <div class="flex flex-col gap-4">
-            {#each childrenRelations as relation, index}
-                {@const childCollection = relation.from.collection}
-                {@const childField = relation.from.field}
+
+            <!-- FK children -->
+            {#each fkChildren as child, index}
                 <ExtensionsComponents
-                    name="detailView.update.subRecords.{childCollection}"
+                    name="detailView.update.subRecords.{child.collection}"
                     utils={getExtensionUtils(lobb, ctx)}
-                    collectionName={childCollection}
-                    filter={{
-                        [childField]: entry.id,
-                    }}
+                    collectionName={child.collection}
+                    filter={{ [child.field]: entry.id }}
                     class="bg-muted/30 border rounded-md overflow-hidden"
                 >
                     <div class="border rounded-md overflow-clip">
-                        <div
-                            class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
-                        >
+                        <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
                             <div class="flex-1 flex h-full items-center gap-2">
-                                <TableIcon
-                                    class="text-muted-foreground"
-                                    size="17.5"
-                                />
-                                <div class="text-sm text-muted-foreground">
-                                    {childCollection}
-                                </div>
+                                <TableIcon class="text-muted-foreground" size="17.5" />
+                                <div class="text-sm text-muted-foreground">{child.collection}</div>
                             </div>
                             <div class="flex gap-2">
                                 <CreateDetailViewButton
                                     variant="ghost"
                                     class="h-7 px-2 font-normal text-xs"
                                     Icon={Plus}
-                                    collectionName={childCollection}
-                                    onSuccessfullSave={async () => {
-                                        refresh[index] = !refresh[index];
-                                    }}
+                                    collectionName={child.collection}
+                                    onSuccessfullSave={async () => { fkRefresh[index] = !fkRefresh[index]; }}
                                 >
                                     Create
                                 </CreateDetailViewButton>
                             </div>
                         </div>
                         <div class="max-h-72 overflow-auto rounded-md">
-                            {#key refresh[index]}
+                            {#key fkRefresh[index]}
                                 <DataTable
-                                    collectionName={childCollection}
-                                    filter={{
-                                        [childField]: entry.id,
-                                    }}
+                                    collectionName={child.collection}
+                                    filter={{ [child.field]: entry.id }}
                                     unifiedBgColor="bg-muted/30"
                                     showHeader={false}
                                     showFooter={false}
@@ -91,6 +120,64 @@
                     </div>
                 </ExtensionsComponents>
             {/each}
+
+            <!-- M2M and polymorphic children -->
+            {#each relationalChildren as child}
+                {@const columns = getCollectionColumns(ctx, child.collection)}
+                {@const linkedIds = new Set((relationalRecords[child.collection] ?? []).map((r: any) => String(r.id)))}
+                <div class="border rounded-md overflow-clip">
+                    <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
+                        <div class="flex-1 flex h-full items-center gap-2">
+                            <TableIcon class="text-muted-foreground" size="17.5" />
+                            <div class="text-sm text-muted-foreground">{child.collection}</div>
+                        </div>
+                        <div class="flex gap-2">
+                            <CreateDetailViewButton
+                                variant="ghost"
+                                class="h-7 px-2 font-normal text-xs"
+                                Icon={Plus}
+                                collectionName={child.collection}
+                                onSuccessfullSave={async (newEntry) => { await linkRecord(child.collection, newEntry); }}
+                            >
+                                Create & link
+                            </CreateDetailViewButton>
+                            <SelectRecord
+                                collectionName={child.collection}
+                                text="Link existing"
+                                onSelect={(selected) => linkRecord(child.collection, selected)}
+                                filter={{ id: { $nin: [...linkedIds] } }}
+                                variant="ghost"
+                                class="h-7 px-2 font-normal text-xs"
+                            />
+                        </div>
+                    </div>
+                    <div class="max-h-72 overflow-auto bg-muted/30">
+                        {#if relationalLoading}
+                            <div class="p-4 text-sm text-muted-foreground">Loading...</div>
+                        {:else}
+                            <Table
+                                data={relationalRecords[child.collection] ?? []}
+                                {columns}
+                                unifiedBgColor="bg-muted/30"
+                                showLastRowBorder={false}
+                                showLastColumnBorder={false}
+                                showCheckboxes={false}
+                            >
+                                {#snippet tools(record, _index)}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                        variant="ghost"
+                                        size="icon"
+                                        onclick={() => unlinkRecord(child.collection, record.id)}
+                                        Icon={Unlink}
+                                    />
+                                {/snippet}
+                            </Table>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+
         </div>
     </div>
 {/if}

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

@@ -30,12 +30,10 @@ export function serializeEntry(
         ctx: CTX,
         collectionName: string,
         entry: Record<string, any>,
-        rollback: boolean = false,
 ) {
-    // deep clone the object
     entry = { ...entry }
 
-    // serialize the foreign key field's value
+    // extract FK object fields → ID
     for (const [fieldName, fieldValue] of Object.entries(entry)) {
         const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
@@ -43,7 +41,7 @@ export function serializeEntry(
         }
     }
 
-    // serialize polymorphic id_field values ({ id: 5, title: "..." } → 5)
+    // extract polymorphic id_field objects → ID
     for (const relation of ctx.meta.relations) {
         if (relation.type !== "polymorphic") continue;
         if ((relation as any).from.collection !== collectionName) continue;
@@ -54,90 +52,40 @@ export function serializeEntry(
         }
     }
 
-    // check for related collections properties and serialize them too
-    if (!rollback) {
-        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
-        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
-        for (let index = 0; index < childrenCollectionNames.length; index++) {
-            const childrenCollectionName = childrenCollectionNames[index];
-            const childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (let index = 0; index < childrenEntries.length; index++) {
-                    childrenEntries[index] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index]);
-                }
-            }
-        }
-    }
-
     return entry;
 }
 
-export function generateTransactionBody(
+export function buildChildren(
         ctx: CTX,
         collectionName: string,
         entry: Record<string, any>,
-) {
-    entry = { ...entry }
-    function handleEntryRecursive(
-        transactionBody: any[],
-        collectionName: string,
-        entry: Record<string, any>,
-        parentTransactionIndex?: number,
-    ) {
-        const parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].props.collectionName : null;
-        const foreignKeyFieldName = ctx.meta.relations.find(relation => relation.from.collection === collectionName && relation.to.collection === parentCollectionName)?.from.field;
-        const collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-        const payload: any = {};
-        for (let index = 0; index < collectionFieldNames.length; index++) {
-            const fieldName = collectionFieldNames[index];
-            const isForeignKeyField = fieldName === foreignKeyFieldName;
-            if (isForeignKeyField) {
-                payload[fieldName] = `{{ responses[${parentTransactionIndex}].data.id }}`
-                continue;
-            }
+): Record<string, { create?: any[]; link?: any[] }> | undefined {
+    const childrenRelations = ctx.meta.relations.filter(
+        (relation) => relation.type !== "polymorphic" && relation.to.collection === collectionName,
+    );
 
-            payload[fieldName] = entry[fieldName];
-        }
+    const children: Record<string, { create?: any[]; link?: any[] }> = {};
 
-        const localTransactionIndex = transactionBody.length;
-        if (payload.id) {
-            const localPayload = {
-                [foreignKeyFieldName]: payload[foreignKeyFieldName],
-            };
-            transactionBody.push({
-                method: "updateMany",
-                props: {
-                    collectionName: collectionName,
-                    data: localPayload,
-                    filter: { id: payload.id },
-                },
-            });
-        } else {
-            transactionBody.push({
-                method: "createOne",
-                props: { collectionName: collectionName, data: payload },
-            });
-        }
+    for (const relation of childrenRelations) {
+        const childCollection = (relation as any).from.collection;
+        const childEntries: any[] = entry[childCollection];
+        if (!childEntries?.length) continue;
 
-        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
-        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
-        for (let index = 0; index < childrenCollectionNames.length; index++) {
-            const childrenCollectionName = childrenCollectionNames[index];
-            const childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (let index = 0; index < childrenEntries.length; index++) {
-                    const childrenEntry = childrenEntries[index];
-                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
-                }
-            }
+        const toCreate = childEntries
+            .filter((e) => !e.id)
+            .map((e) => serializeEntry(ctx, childCollection, e));
+        const toLink = childEntries
+            .filter((e) => e.id)
+            .map((e) => e.id);
+
+        if (toCreate.length || toLink.length) {
+            children[childCollection] = {};
+            if (toCreate.length) children[childCollection].create = toCreate;
+            if (toLink.length) children[childCollection].link = toLink;
         }
     }
 
-    const transactionBody: any[] = [];
-
-    handleEntryRecursive(transactionBody, collectionName, entry);
-
-    return transactionBody
+    return Object.keys(children).length ? children : undefined;
 }
 
 export function parseDetailViewValues(ctx: CTX, collectionName: string, values: Record<string, any>) {