@lobb-js/studio 0.19.1 → 0.20.0

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";
 
@@ -37,12 +37,23 @@ export function serializeEntry(
 
     // serialize the foreign key field's value
     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;
         }
     }
 
+    // serialize polymorphic id_field values ({ id: 5, title: "..." } → 5)
+    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;
+        }
+    }
+
     // check for related collections properties and serialize them too
     if (!rollback) {
         const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
@@ -131,7 +142,7 @@ export function generateTransactionBody(
 
 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 +161,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) {

package/src/lib/components/polymorphicInput.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import Button from "./ui/button/button.svelte";
+    import DataTable from "./dataTable/dataTable.svelte";
+    import Drawer from "./drawer.svelte";
+    import * as Popover from "./ui/popover/index";
+    import { getCollectionPrimaryField } from "./dataTable/utils";
+    import { getStudioContext } from "../context";
+    import { ArrowLeft, Link, ChevronDown } from "lucide-svelte";
+
+    const { ctx } = getStudioContext();
+
+    interface Props {
+        collectionField: string;
+        idField: string;
+        targetCollections: string[];
+        entry: Record<string, any>;
+        destructive?: boolean;
+    }
+
+    let {
+        collectionField,
+        idField,
+        targetCollections,
+        entry = $bindable(),
+        destructive,
+    }: 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);
+
+    let collectionPopoverOpen = $state(false);
+    let recordDrawerOpen = $state(false);
+
+    function onCollectionChange(col: string) {
+        collectionPopoverOpen = false;
+        if (entry[collectionField] !== col) {
+            entry = { ...entry, [collectionField]: col, [idField]: null };
+        }
+    }
+
+    function onIdChange(e: Event) {
+        const raw = (e.target as HTMLInputElement).value;
+        const id = raw === "" ? null : Number(raw);
+        entry = { ...entry, [idField]: id === null ? null : { 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 };
+        recordDrawerOpen = false;
+    }
+</script>
+
+<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted/30 {destructive ? 'border-destructive bg-destructive/10' : ''}">
+    <!-- Collection picker -->
+    <Popover.Root bind:open={collectionPopoverOpen}>
+        <Popover.Trigger>
+            {#snippet child({ props })}
+                <button
+                    {...props}
+                    class="flex shrink-0 items-center gap-1 h-6 px-2 rounded-sm border bg-muted text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                    {selectedCollection ?? "NULL"}
+                    <ChevronDown size="11" />
+                </button>
+            {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class="w-48 p-2">
+            <div class="flex flex-col gap-1">
+                {#each targetCollections as col}
+                    <Button
+                        variant={selectedCollection === col ? "default" : "ghost"}
+                        class="justify-start text-xs font-normal h-7 px-2"
+                        onclick={() => onCollectionChange(col)}
+                    >
+                        {col}
+                    </Button>
+                {/each}
+            </div>
+        </Popover.Content>
+    </Popover.Root>
+
+    <!-- Transparent id input -->
+    <input
+        placeholder="NULL"
+        type="number"
+        class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
+        value={selectedId ?? ""}
+        oninput={onIdChange}
+    />
+
+    <!-- Primary field badge -->
+    {#if primaryField}
+        <div class="flex shrink-0 items-center bg-background rounded-full border h-6 px-3 shadow-sm">
+            {primaryField}
+        </div>
+    {/if}
+
+    <!-- Select record button -->
+    {#if selectedCollection}
+        <Button
+            class="h-6 shrink-0 px-2 font-normal text-xs"
+            variant="outline"
+            onclick={() => (recordDrawerOpen = true)}
+        >
+            <Link size="13" />
+            Select Record
+        </Button>
+    {/if}
+</div>
+
+{#if recordDrawerOpen}
+    <Drawer onHide={async () => { recordDrawerOpen = false }}>
+        <div class="flex h-12 items-center gap-4 border-b px-4">
+            <Button
+                variant="outline"
+                onclick={() => (recordDrawerOpen = false)}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            />
+            <div class="flex items-center gap-2">
+                <div class="text-sm">Select record from</div>
+                <span class="rounded-md border bg-muted px-2 py-0.5 text-sm">
+                    {selectedCollection}
+                </span>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto bg-muted">
+            <DataTable
+                collectionName={selectedCollection!}
+                tableProps={{
+                    showCheckboxes: false,
+                    select: { onSelect: onRecordSelect },
+                }}
+            />
+        </div>
+    </Drawer>
+{/if}

package/src/lib/relations.ts

@@ -0,0 +1,52 @@
+import type { CTX } from "./store.types";
+
+function getFieldRelation(ctx: CTX, collectionName: string, fieldName: string) {
+    const relations = ctx.meta.relations;
+    for (let index = 0; index < relations.length; index++) {
+        const relation = relations[index];
+        if (relation.type === "polymorphic") continue;
+        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+};
+
+export function isRelationField(ctx: CTX, collectionName: string, fieldName: string): boolean {
+    return Boolean(getFieldRelation(ctx, collectionName, fieldName));
+};
+
+export function getFieldRelationTarget(ctx: CTX, collectionName: string, fieldName: string): string | null {
+    return getFieldRelation(ctx, collectionName, fieldName)?.to.collection ?? null;
+};
+
+export function getPolymorphicRelation(ctx: CTX, collectionName: string, fieldName: string) {
+    const relations = ctx.meta.relations;
+    for (let index = 0; index < relations.length; index++) {
+        const relation = relations[index];
+        if (
+            relation.type === "polymorphic" &&
+            relation.from.collection === collectionName &&
+            relation.from.virtual_field === fieldName
+        ) {
+            return relation as {
+                type: "polymorphic";
+                from: { collection: string; virtual_field: string; collection_field: string; id_field: string };
+                to: string[];
+            };
+        }
+    }
+    return null;
+};
+
+
+export function recordHasChildrean(ctx: CTX, collectionName: string) {
+    for (let index = 0; index < ctx.meta.relations.length; index++) {
+        const relation = ctx.meta.relations[index];
+        if (relation.type === "polymorphic") continue;
+        if (relation.to.collection === collectionName) {
+            return true;
+        }
+    }
+    return false;
+};

package/src/lib/store.types.ts

@@ -14,6 +14,7 @@ interface Collection {
     singleton: boolean;
     virtual?: boolean;
     ui?: {
+        icon?: string;
         tabs?: CollectionTab[];
     };
 }

package/src/lib/utils.ts

@@ -2,7 +2,6 @@ import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 import { MediaQuery } from 'svelte/reactivity';
-import type { CTX } from "./store.types";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -24,26 +23,6 @@ export const mediaQueries = {
     '2xl': new MediaQuery('min-width: 1536px'),
 }
 
-export function getFieldRelation(ctx: CTX, collectionName: string, fieldName: string) {
-    const relations = ctx.meta.relations;
-    for (let index = 0; index < relations.length; index++) {
-        const relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-};
-
-export function recordHasChildrean(ctx: CTX, collectionName: string) {
-    for (let index = 0; index < ctx.meta.relations.length; index++) {
-        const relation = ctx.meta.relations[index];
-        if (relation.to.collection === collectionName) {
-            return true;
-        }
-    }
-    return false;
-};
 
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");