@lobb-js/studio 0.19.1 → 0.21.0

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { ExternalLink, Table } from "lucide-svelte";
+    import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
+
+    interface Props {
+        collectionField: string;
+        idField: string;
+        entry: Record<string, any>;
+        tableParams?: any;
+    }
+
+    let {
+        collectionField,
+        idField,
+        entry,
+        tableParams = $bindable(),
+    }: Props = $props();
+
+    const targetCollection = $derived(entry[collectionField] ?? null);
+    const targetId = $derived(entry[idField] ?? null);
+</script>
+
+{#if targetId && targetCollection}
+    <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1 border bg-muted px-2 py-1 rounded-md text-muted-foreground">
+            <Table size="11" />
+            {targetCollection}
+        </div>
+        <div>{targetId}</div>
+        <UpdateDetailViewButton
+            collectionName={targetCollection}
+            recordId={targetId}
+            variant="ghost"
+            class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+            Icon={ExternalLink}
+            onSuccessfullSave={async () => {
+                tableParams = { ...tableParams };
+            }}
+        />
+    </div>
+{:else}
+    <div class="text-muted-foreground">NULL</div>
+{/if}

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

@@ -1,5 +1,6 @@
 import type { TableProps } from "./table.svelte";
 import type { CTX } from "../../store.types";
+import { getFieldRelationTarget } from "../../relations";
 
 import {
     Binary,
@@ -10,15 +11,18 @@ import {
     Clock,
     Hash,
     Key,
+    Link,
     Text,
     Type,
 } from "lucide-svelte/icons";
+import { icons } from "lucide-svelte";
 
 export function getCollectionColumns(ctx: CTX, collectionName: string): TableProps['columns'] {
     const collectionFields = getFields(ctx, collectionName);
     const headers: TableProps['columns'] = [];
     for (const fieldName in collectionFields) {
         const field = collectionFields[fieldName];
+        if ((field as any).ui?.hidden) continue;
         headers.push({
             id: field.key,
             subtext: field.type,
@@ -30,6 +34,8 @@ export function getCollectionColumns(ctx: CTX, collectionName: string): TablePro
 
 export function getFieldIcon(ctx: CTX, fieldName: string, collectionName: string) {
 	const field = getField(ctx, fieldName, collectionName);
+	const uiIcon = (field as any).ui?.icon;
+	if (uiIcon && uiIcon in icons) return (icons as any)[uiIcon];
 	if (fieldName === "id") {
 		return Key;
 	} else if (field.type === "string") {
@@ -43,6 +49,12 @@ export function getFieldIcon(ctx: CTX, fieldName: string, collectionName: string
 	} else if (field.type === "bool") {
 		return Binary;
 	} else if (field.type === "integer") {
+		const target = getFieldRelationTarget(ctx, collectionName, fieldName);
+		if (target) {
+			const targetIcon = ctx.meta.collections[target]?.ui?.icon;
+			if (targetIcon && targetIcon in icons) return (icons as any)[targetIcon];
+			return Link;
+		}
 		return Hash;
 	} else if (field.type === "long") {
 		return Hash;
@@ -58,7 +70,7 @@ export function getFieldIcon(ctx: CTX, fieldName: string, collectionName: string
 		return Clock;
 	}
 
-	throw new Error(`(${field.type}) doesnt have an icon`);
+	return Braces;
 }
 
 export function getFields(ctx: CTX, collectionName: string) {
@@ -91,7 +103,7 @@ export function getCollectionParamsFields(ctx: CTX, collectionName: string, allF
 	const relations = ctx.meta.relations;
 	const foreignFields = relations
 		.filter((relation) => {
-			return relation.from.collection === collectionName
+			return relation.type !== "polymorphic" && relation.from.collection === collectionName;
 		})
 		.map((relation) => {
 			return {
@@ -101,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/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>
@@ -161,46 +138,38 @@
     <div class="flex-1 overflow-y-auto">
         <div class="flex flex-col gap-4 p-4">
             {#each fieldNames as fieldName}
-                {@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}
+                {#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>
-                        <div>
-                            <ExtensionsComponents
-                                name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils(lobb, ctx)}
-                                bind:value={entry[fieldName]}
-                            />
-                        </div>
+                        <FieldInput
+                            {collectionName}
+                            {fieldName}
+                            bind:value={
+                                () => entry[fieldName],
+                                (v) => (entry = { ...entry, [fieldName]: v })
+                            }
+                            bind:entry
+                            errorMessages={fieldsErrors[fieldName]}
+                        />
                     </div>
-                    <FieldInput
-                        {collectionName}
-                        {fieldName}
-                        bind:value={
-                            () => entry[fieldName],
-                            (v) =>
-                                (entry = {
-                                    ...entry,
-                                    [fieldName]: v,
-                                })
-                        }
-                        {entry}
-                        errorMessages={fieldsErrors[fieldName]}
-                    />
-                </div>
+                {/if}
             {/each}
         </div>
         {#if showRelatedRecords}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getStudioContext } from "../../context";
-	import { getFieldRelation } from "../../utils";
+	import { getFieldRelationTarget, getPolymorphicRelation } from "../../relations";
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import { getField } from "../dataTable/utils";
 	import Button from "../ui/button/button.svelte";
@@ -11,6 +11,7 @@
 	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
+	import PolymorphicInput from "../polymorphicInput.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
 
@@ -29,7 +30,7 @@
 		fieldName,
 		value = $bindable(),
 		errorMessages = [],
-		entry,
+		entry = $bindable(),
 	}: Props = $props();
 
 	const ui_input =
@@ -37,10 +38,11 @@
 	const ui =
 		ctx.meta.collections[collectionName].fields[fieldName].ui;
 	const field = getField(ctx, fieldName, collectionName);
-	const fieldRelation = getFieldRelation(ctx, collectionName, fieldName);
+	const fieldRelationTarget = getFieldRelationTarget(ctx, collectionName, fieldName);
+	const polymorphicRelation = getPolymorphicRelation(ctx, collectionName, fieldName);
 	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
 	const disabledClasses = "pointer-events-none opacity-50";
-	const destructive: boolean = $derived(Boolean(errorMessages.length));
+	const destructive: boolean = $derived(!isDisabled && Boolean(errorMessages.length));
 
 </script>
 
@@ -53,13 +55,27 @@
 		style="flex: 2;"
 	>
 		<Button
-			onclick={() => (value = null)}
+			onclick={() => {
+				value = null;
+				if (polymorphicRelation && entry) {
+					entry[polymorphicRelation.from.collection_field] = null;
+					entry[polymorphicRelation.from.id_field] = null;
+				}
+			}}
 			variant="outline"
 			class="absolute right-0 top-0 z-10 mr-1.5 mt-1.5 aspect-square h-6 w-6 p-0"
 			Icon={Ban}
 			tabindex={-1}
 		></Button>
-		{#if ui_input}
+		{#if polymorphicRelation && entry}
+			<PolymorphicInput
+				collectionField={polymorphicRelation.from.collection_field}
+				idField={polymorphicRelation.from.id_field}
+				targetCollections={polymorphicRelation.to}
+				bind:entry
+				{destructive}
+			/>
+		{:else if ui_input}
 			<FieldCustomInput
 				bind:value
 				type={ui_input.type}
@@ -73,12 +89,12 @@
 				class="bg-muted/30 text-xs"
 				bind:value
 			/>
-		{:else if fieldRelation && entry}
+		{:else if fieldRelationTarget && entry}
 			<ExtensionsComponents
-				name="detailView.fields.foreignKey.{fieldRelation.to.collection}"
+				name="detailView.fields.foreignKey.{fieldRelationTarget}"
 				utils={getExtensionUtils(lobb, ctx)}
 				parentCollectionName={collectionName}
-				collectionName={fieldRelation.to.collection}
+				collectionName={fieldRelationTarget}
 				bind:value
 				{entry}
 				fieldName={field.key}
@@ -86,7 +102,7 @@
 			>
 				<ForeingKeyInput
 					parentCollectionName={collectionName}
-					collectionName={fieldRelation.to.collection}
+					collectionName={fieldRelationTarget}
 					bind:value
 					{entry}
 					fieldName={field.key}
@@ -263,7 +279,7 @@
 				bind:value
 			/>
 		{/if}
-		{#if errorMessages}
+		{#if !isDisabled && errorMessages}
 			{#each errorMessages as message}
 				<div class="flex gap-1 text-destructive">
 					<CircleAlert size="15" class="translate-y-[0.025rem]" />

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

@@ -113,39 +113,35 @@
     <div class="flex-1 overflow-y-auto">
         <div class="flex flex-col gap-4 p-4">
             {#each fieldNames as fieldName}
-                {@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}
+                {#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>
-                        <div>
-                            <ExtensionsComponents
-                                name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils(lobb, ctx)}
-                                bind:value={entry[fieldName]}
-                            />
-                        </div>
+                        <FieldInput
+                            {collectionName}
+                            {fieldName}
+                            bind:value={entry[fieldName]}
+                            bind:entry
+                            errorMessages={fieldsErrors[fieldName]}
+                        />
                     </div>
-                    <FieldInput
-                        {collectionName}
-                        {fieldName}
-                        bind:value={entry[fieldName]}
-                        {entry}
-                        errorMessages={fieldsErrors[fieldName]}
-                    />
-                </div>
+                {/if}
             {/each}
         </div>
         {#if showRelatedRecords}

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

@@ -1,6 +1,6 @@
 import Mustache from "mustache";
 import type { CTX } from "../../store.types";
-import { getFieldRelation } from "../../utils";
+import { isRelationField } from "../../relations";
 import { getField } from "../dataTable/utils";
 import type { DetailFormField } from "./detailViewForm.svelte";
 
@@ -30,108 +30,67 @@ 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 = Boolean(getFieldRelation(ctx, collectionName, fieldName));
+        const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
             entry[fieldName] = fieldValue.id;
         }
     }
 
-    // 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]);
-                }
-            }
+    // 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;
+        const idField = (relation as any).from.id_field;
+        const fieldValue = entry[idField];
+        if (fieldValue !== null && typeof fieldValue === "object" && fieldValue.id !== undefined) {
+            entry[idField] = fieldValue.id;
         }
     }
 
     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>) {
     const forignFieldNames = ctx.meta.relations
-        .filter((relation) => relation.from.collection === collectionName)
+        .filter((relation) => relation.type !== "polymorphic" && relation.from.collection === collectionName)
         .map((relation) => relation.from.field);
     const childCollectionNames = ctx.meta.relations
         .filter((relation) => relation.to.collection === collectionName)
@@ -150,6 +109,16 @@ export function parseDetailViewValues(ctx: CTX, collectionName: string, values:
             }
         }
     }
+
+    // wrap polymorphic id_field scalar values into { id: value }
+    for (const relation of ctx.meta.relations) {
+        if (relation.type !== "polymorphic") continue;
+        if ((relation as any).from.collection !== collectionName) continue;
+        const idField = (relation as any).from.id_field;
+        if (idField in values && typeof values[idField] === 'number') {
+            values[idField] = { id: values[idField] };
+        }
+    }
 }
 
 export function getCollectionFields(ctx: CTX, collectionName: string) {