@lobb-js/studio 0.41.0 → 0.43.0

package/src/lib/components/foreingKeyInput.svelte

@@ -2,10 +2,12 @@
     import { onMount } from "svelte";
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.svelte";
-    import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
+    import UpdateDetailView from "./detailView/update/updateDetailView.svelte";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ExternalLink } from "lucide-svelte";
+    import { Plus, Link, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
+    import Button from "./ui/button/button.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -13,7 +15,7 @@
         parentCollectionName: string;
         collectionName: string;
         fieldName: string;
-        value?: number | null;
+        value?: any;
         destructive?: boolean;
         entry: Record<string, any>;
     }
@@ -27,79 +29,198 @@
         entry,
     }: LocalProps = $props();
 
-    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;
+    let createDrawerOpen = $state(false);
+    let editDrawerOpen = $state(false);
+    let editValues: Record<string, any> | undefined = $state(undefined);
+    let originalId = $state<number | null>(null);
+    let initialValue = $state<any>(undefined);
+    let unlinked = $state(false);
+
+    onMount(() => { initialValue = value; });
+
+    // Derived state from value
+    const isPendingCreate = $derived(value && typeof value === 'object' && value.create);
+    const isPendingEdit   = $derived(value && typeof value === 'object' && value.id && value.update);
+    const isStagedDelete  = $derived(value && typeof value === 'object' && value.delete === true);
+    const isStagedUnlink  = $derived(unlinked);
+    const hasRealId       = $derived(value != null && typeof value === 'number');
+    const isNewLink       = $derived(hasRealId && initialValue !== undefined && initialValue == null && value !== initialValue);
+    const isReplaced      = $derived(hasRealId && initialValue !== undefined && initialValue != null && value !== initialValue);
+    const isEmpty         = $derived((value == null || value === 0) && !unlinked);
+    const isZeroPlaceholder = $derived(value === 0);
+
+    const bgClass = $derived(
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40'   :
+        isNewLink       ? '!bg-blue-500/5 border-blue-500/40'     :
+        isReplaced      ? '!bg-orange-500/5 border-orange-500/40' :
+        isPendingEdit   ? '!bg-orange-500/5 border-orange-500/40' :
+        isStagedUnlink  ? '!bg-slate-500/5 border-slate-500/40'   :
+        isStagedDelete  ? '!bg-red-500/5 border-red-500/40'       :
+        ''
+    );
+
+    const displayId = $derived(
+        isPendingEdit  ? (value as any).id :
+        isStagedUnlink ? originalId        :
+        isStagedDelete ? originalId        :
+        hasRealId      ? value             :
+        null
+    );
+
+    async function handleCreated(record: any) {
+        // dry-run result has no id — store as pending create
+        if (!record.id) {
+            value = { create: record };
+        } else {
+            value = record.id;
         }
-    });
+    }
 
-    $effect(() => {
-        if (value == null) displayName = null;
-    });
+    async function openEdit() {
+        const res = await lobb.findAll(collectionName, { filter: { id: value }, limit: 1 });
+        const result = await res.json();
+        editValues = result.data[0];
+        editDrawerOpen = true;
+    }
+
+    function handleEditChanges(changes: import('./detailView/utils').Changes) {
+        if (Object.keys(changes.data).length === 0) {
+            value = (editValues as any)?.id ?? value;
+        } else {
+            value = { id: (editValues as any)?.id ?? value, update: changes.data };
+        }
+    }
 
     function handleSelect(selectedEntry: any) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
         value = selectedEntry.id;
-        displayName = primaryFieldName ? String(selectedEntry[primaryFieldName]) : null;
     }
 
-    const idIsZero = $derived(value === 0);
+    function handleUnlink() {
+        if (hasRealId) {
+            originalId = value as number;
+            unlinked = true;
+            value = null;
+        }
+    }
+
+    async function handleDelete() {
+        if (hasRealId) {
+            originalId = value as number;
+            value = { delete: true };
+        }
+    }
+
+    function handleRevert() {
+        if (originalId != null) {
+            value = originalId;
+            originalId = null;
+        } else {
+            value = null;
+        }
+        unlinked = false;
+    }
 </script>
 
-{#if !idIsZero}
+{#if !isZeroPlaceholder}
     <div class="relative">
-        <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}
+        <!-- Action buttons overlay on the right -->
+        <div class="flex gap-1 absolute right-0 top-0 mr-9 h-full items-center text-xs">
+            {#if isStagedUnlink || isStagedDelete || isPendingCreate || isPendingEdit}
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
                     variant="ghost"
-                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                    Icon={ExternalLink}
-                ></UpdateDetailViewButton>
-            {/if}
-            {#if displayName}
-                <div class="flex items-center bg-background rounded-full border h-6 px-3 shadow-sm">
-                    {displayName}
-                </div>
+                    Icon={RotateCcw}
+                    onclick={handleRevert}
+                    title="Revert"
+                ></Button>
+            {:else if hasRealId}
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Trash}
+                    onclick={handleDelete}
+                    title="Delete record"
+                ></Button>
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Unlink}
+                    onclick={handleUnlink}
+                    title="Unlink"
+                ></Button>
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Pencil}
+                    onclick={openEdit}
+                    title="Edit record"
+                ></Button>
+                <SelectRecord
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    {collectionName}
+                    onSelect={handleSelect}
+                    additionalFilter={{ id: { $ne: value } }}
+                    title="Replace"
+                    {entry}
+                >
+                    {#snippet children()}<RefreshCw size="13" />{/snippet}
+                </SelectRecord>
+            {:else if isEmpty}
+                <Button
+                    class="h-6 px-2 font-normal text-xs"
+                    variant="outline"
+                    Icon={Plus}
+                    onclick={() => (createDrawerOpen = true)}
+                >
+                    Create
+                </Button>
+                <SelectRecord
+                    class="h-6 px-2 font-normal text-xs"
+                    variant="outline"
+                    {parentCollectionName}
+                    {collectionName}
+                    {fieldName}
+                    onSelect={handleSelect}
+                    text="Link"
+                    {entry}
+                />
             {/if}
-            <SelectRecord
-                class="h-6 px-2 font-normal text-xs"
-                variant="outline"
-                {parentCollectionName}
-                {collectionName}
-                {fieldName}
-                onSelect={handleSelect}
-                {entry}
-            />
         </div>
+
+        <!-- Input field colored by state -->
         <Input
-            placeholder={"NULL"}
+            placeholder={isEmpty ? "NULL" : ""}
             type="number"
-            class="
-                bg-muted text-xs
-                {destructive ? 'border-destructive bg-destructive/10' : ''}
-            "
+            class="bg-muted text-xs {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}"
+            disabled={isPendingCreate || isPendingEdit}
             bind:value={
-                () => value ?? "",
-                (v) => (value = (v === "" || v == null) ? null : Number(v))
+                () => displayId ?? "",
+                (v) => { if (hasRealId || isEmpty) value = (v === "" || v == null) ? null : Number(v); }
             }
         />
     </div>
 {:else}
     <div class="relative z-10">
-        <Input
-            placeholder={"PARENT ID"}
-            class="bg-muted text-xs"
-            disabled={true}
-        />
+        <Input placeholder="PARENT ID" class="bg-muted text-xs" disabled={true} />
     </div>
 {/if}
+
+{#if createDrawerOpen}
+    <CreateDetailView
+        collectionName={collectionName}
+        onCreated={handleCreated}
+        onChanges={() => {}}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}
+
+{#if editDrawerOpen && editValues}
+    <UpdateDetailView
+        collectionName={collectionName}
+        recordId={String(editValues.id)}
+        values={editValues}
+        onChanges={handleEditChanges}
+        onCancel={async () => { editDrawerOpen = false; editValues = undefined; }}
+    />
+{/if}

package/src/lib/components/polymorphicInput.svelte

@@ -4,15 +4,17 @@
     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";
+    import { ArrowLeft, Link, ChevronDown, Plus, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
+    import UpdateDetailView from "./detailView/update/updateDetailView.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
     interface Props {
         collectionField: string;
         idField: string;
+        virtualField: string;
         targetCollections: string[];
         entry: Record<string, any>;
         destructive?: boolean;
@@ -21,38 +23,52 @@
     let {
         collectionField,
         idField,
+        virtualField,
         targetCollections,
         entry = $bindable(),
         destructive,
     }: Props = $props();
 
+
     const selectedCollection = $derived(entry[collectionField] ?? null);
-    const selectedId = $derived(entry[idField] ?? null);
+    const selectedId         = $derived(entry[idField] ?? null);
+    const virtualVal         = $derived(entry[virtualField] ?? null);
 
-    let displayName = $state<string | null>(null);
-    let collectionPopoverOpen = $state(false);
-    let recordDrawerOpen = $state(false);
+    let initialId = $state<number | null | undefined>(undefined);
+    let unlinked = $state(false);
+    onMount(() => { initialId = entry[idField] ?? null; });
 
-    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;
-        }
-    });
+    // State derived from virtual field and real fields
+    const isPendingCreate  = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.create);
+    const isPendingEdit    = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.update);
+    const isStagedUnlink   = $derived(unlinked);
+    const isStagedDelete   = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.delete === true);
+    const hasRealValue     = $derived(selectedId != null && !isPendingCreate && !isPendingEdit && !isStagedUnlink && !isStagedDelete);
+    const isNewLink        = $derived(hasRealValue && initialId !== undefined && initialId == null && selectedId !== initialId);
+    const isReplaced       = $derived(hasRealValue && initialId !== undefined && initialId != null && selectedId !== initialId);
+    const isEmpty          = $derived(!unlinked && (!selectedCollection || (selectedId == null && !isPendingCreate && !isPendingEdit && !isStagedDelete)));
 
-    $effect(() => {
-        if (entry[idField] == null) displayName = null;
-    });
+    const bgClass = $derived(
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40'   :
+        isNewLink       ? '!bg-blue-500/5 border-blue-500/40'     :
+        isReplaced      ? '!bg-orange-500/5 border-orange-500/40'   :
+        isPendingEdit   ? '!bg-orange-500/5 border-orange-500/40'   :
+        isStagedUnlink  ? '!bg-slate-500/5 border-slate-500/40' :
+        isStagedDelete  ? '!bg-red-500/5 border-red-500/40'       :
+        ''
+    );
+
+    let collectionPopoverOpen = $state(false);
+    let recordDrawerOpen = $state(false);
+    let createDrawerOpen = $state(false);
+    let editDrawerOpen = $state(false);
+    let editValues: Record<string, any> | undefined = $state(undefined);
+    let originalSnapshot: { collection: string; id: number } | null = $state(null);
 
     function onCollectionChange(col: string) {
         collectionPopoverOpen = false;
         if (entry[collectionField] !== col) {
-            entry = { ...entry, [collectionField]: col, [idField]: null };
+            entry = { ...entry, [collectionField]: col, [idField]: null, [virtualField]: undefined };
         }
     }
 
@@ -63,14 +79,60 @@
     }
 
     function onRecordSelect(record: any) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
-        entry = { ...entry, [idField]: record.id };
-        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+        entry = { ...entry, [idField]: record.id, [virtualField]: undefined };
         recordDrawerOpen = false;
     }
+
+    async function onPolyCreated(record: any) {
+        if (!record.id) {
+            entry = { ...entry, [virtualField]: { collection: selectedCollection, create: record }, [collectionField]: selectedCollection, [idField]: null };
+        } else {
+            entry = { ...entry, [idField]: record.id, [virtualField]: undefined };
+        }
+    }
+
+    async function openEdit() {
+        const res = await lobb.findAll(selectedCollection!, { filter: { id: selectedId }, limit: 1 });
+        const result = await res.json();
+        editValues = result.data[0];
+        editDrawerOpen = true;
+    }
+
+    function handleEditChanges(changes: import('./detailView/utils').Changes) {
+        if (Object.keys(changes.data).length === 0) {
+            entry = { ...entry, [virtualField]: undefined };
+        } else {
+            entry = { ...entry, [virtualField]: { collection: selectedCollection, id: selectedId, update: changes.data } };
+        }
+    }
+
+    function handleUnlink() {
+        if (hasRealValue) {
+            originalSnapshot = { collection: selectedCollection!, id: selectedId! };
+            unlinked = true;
+            entry = { ...entry, [collectionField]: null, [idField]: null, [virtualField]: undefined };
+        }
+    }
+
+    async function handleDelete() {
+        if (hasRealValue) {
+            originalSnapshot = { collection: selectedCollection!, id: selectedId! };
+            entry = { ...entry, [virtualField]: { delete: true } };
+        }
+    }
+
+    function handleRevert() {
+        if (originalSnapshot) {
+            entry = { ...entry, [collectionField]: originalSnapshot.collection, [idField]: originalSnapshot.id, [virtualField]: undefined };
+            originalSnapshot = null;
+        } else {
+            entry = { ...entry, [collectionField]: null, [idField]: null, [virtualField]: undefined };
+        }
+        unlinked = 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 {destructive ? 'border-destructive bg-destructive/10' : ''}">
+<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}">
     <!-- Collection picker -->
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>
@@ -99,31 +161,32 @@
         </Popover.Content>
     </Popover.Root>
 
-    <!-- Transparent id input -->
+    <!-- ID input (only editable when real value or empty) -->
     <input
         placeholder="NULL"
         type="number"
         class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
-        value={selectedId ?? ""}
+        value={isStagedUnlink || isStagedDelete ? (virtualVal?.id ?? '') : (selectedId ?? "")}
+        disabled={isPendingCreate || isPendingEdit}
         oninput={onIdChange}
     />
 
-    <!-- Primary field badge -->
-    {#if displayName}
-        <div class="flex shrink-0 items-center bg-background rounded-full border h-6 px-3 shadow-sm">
-            {displayName}
-        </div>
-    {/if}
-
-    <!-- Select record button -->
-    {#if selectedCollection}
-        <Button
-            class="h-6 shrink-0 px-2 font-normal text-xs"
-            variant="outline"
-            onclick={() => (recordDrawerOpen = true)}
-        >
+    <!-- Action buttons -->
+    {#if isStagedUnlink || isStagedDelete || isPendingCreate || isPendingEdit}
+        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={RotateCcw} onclick={handleRevert} title="Revert"></Button>
+    {:else if hasRealValue}
+        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={Trash} onclick={handleDelete} title="Delete record"></Button>
+        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={Unlink} onclick={handleUnlink} title="Unlink"></Button>
+        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={Pencil} onclick={openEdit} title="Edit record"></Button>
+        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={RefreshCw} onclick={() => (recordDrawerOpen = true)} title="Replace"></Button>
+    {:else if selectedCollection && !isPendingCreate}
+        <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (createDrawerOpen = true)}>
+            <Plus size="13" />
+            Create
+        </Button>
+        <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (recordDrawerOpen = true)}>
             <Link size="13" />
-            Select Record
+            Link
         </Button>
     {/if}
 </div>
@@ -131,27 +194,37 @@
 {#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}
-            />
+            <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>
+                <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 },
-                }}
+                filter={selectedId != null ? { id: { $ne: selectedId } } : undefined}
+                tableProps={{ showCheckboxes: false, select: { onSelect: onRecordSelect } }}
             />
         </div>
     </Drawer>
 {/if}
+
+{#if createDrawerOpen && selectedCollection}
+    <CreateDetailView
+        collectionName={selectedCollection}
+        onCreated={onPolyCreated}
+        onChanges={() => {}}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}
+
+{#if editDrawerOpen && editValues && selectedCollection}
+    <UpdateDetailView
+        collectionName={selectedCollection}
+        recordId={String(editValues.id)}
+        values={editValues}
+        onChanges={handleEditChanges}
+        onCancel={async () => { editDrawerOpen = false; editValues = undefined; }}
+    />
+{/if}