@lobb-js/studio 0.43.0 → 0.44.0

package/src/lib/components/foreingKeyInput.svelte

@@ -3,14 +3,9 @@
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.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 { Plus, Link, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
+    import { Plus } from "lucide-svelte";
     import Button from "./ui/button/button.svelte";
 
-    const { lobb, ctx } = getStudioContext();
-
     interface LocalProps {
         parentCollectionName: string;
         collectionName: string;
@@ -30,45 +25,23 @@
     }: LocalProps = $props();
 
     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 isEmpty         = $derived(value == null || value === 0);
     const isZeroPlaceholder = $derived(value === 0);
+    const isChanged       = $derived(initialValue !== undefined && value !== initialValue && !isPendingCreate);
 
     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'       :
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40' :
+        isChanged       ? '!bg-orange-500/5'                    :
         ''
     );
 
-    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 {
@@ -76,127 +49,41 @@
         }
     }
 
-    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) {
         value = selectedEntry.id;
     }
-
-    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 !isZeroPlaceholder}
     <div class="relative">
-        <!-- 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"
-                    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}
+            <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}
+            />
         </div>
 
-        <!-- Input field colored by state -->
         <Input
-            placeholder={isEmpty ? "NULL" : ""}
+            placeholder={isPendingCreate ? "AUTO GENERATED" : isEmpty ? "NULL" : ""}
             type="number"
             class="bg-muted text-xs {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}"
-            disabled={isPendingCreate || isPendingEdit}
             bind:value={
-                () => displayId ?? "",
-                (v) => { if (hasRealId || isEmpty) value = (v === "" || v == null) ? null : Number(v); }
+                () => hasRealId ? value : "",
+                (v) => { value = (v === "" || v == null) ? null : Number(v); }
             }
         />
     </div>
@@ -214,13 +101,3 @@
         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,12 +4,8 @@
     import DataTable from "./dataTable/dataTable.svelte";
     import Drawer from "./drawer.svelte";
     import * as Popover from "./ui/popover/index";
-    import { getStudioContext } from "../context";
-    import { ArrowLeft, Link, ChevronDown, Plus, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
+    import { ArrowLeft, Link, ChevronDown, Plus } 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;
@@ -29,41 +25,33 @@
         destructive,
     }: Props = $props();
 
-
     const selectedCollection = $derived(entry[collectionField] ?? null);
     const selectedId         = $derived(entry[idField] ?? null);
     const virtualVal         = $derived(entry[virtualField] ?? null);
 
     let initialId = $state<number | null | undefined>(undefined);
-    let unlinked = $state(false);
-    onMount(() => { initialId = entry[idField] ?? 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)));
+    let initialCollection = $state<string | null | undefined>(undefined);
+    onMount(() => {
+        initialId = entry[idField] ?? null;
+        initialCollection = entry[collectionField] ?? null;
+    });
+
+    const isPendingCreate = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.create);
+    const isChanged       = $derived(
+        initialId !== undefined &&
+        !isPendingCreate &&
+        (selectedId !== initialId || selectedCollection !== initialCollection)
+    );
 
     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'       :
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40' :
+        isChanged       ? '!bg-orange-500/5'                    :
         ''
     );
 
     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;
@@ -75,7 +63,7 @@
     function onIdChange(e: Event) {
         const raw = (e.target as HTMLInputElement).value;
         const id = raw === "" ? null : Number(raw);
-        entry = { ...entry, [idField]: id };
+        entry = { ...entry, [idField]: id, [virtualField]: undefined };
     }
 
     function onRecordSelect(record: any) {
@@ -90,50 +78,9 @@
             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 {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}">
-    <!-- Collection picker -->
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>
             {#snippet child({ props })}
@@ -161,25 +108,15 @@
         </Popover.Content>
     </Popover.Root>
 
-    <!-- ID input (only editable when real value or empty) -->
     <input
-        placeholder="NULL"
+        placeholder={isPendingCreate ? "AUTO GENERATED" : "NULL"}
         type="number"
         class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
-        value={isStagedUnlink || isStagedDelete ? (virtualVal?.id ?? '') : (selectedId ?? "")}
-        disabled={isPendingCreate || isPendingEdit}
+        value={selectedId ?? ""}
         oninput={onIdChange}
     />
 
-    <!-- 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}
+    {#if selectedCollection}
         <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (createDrawerOpen = true)}>
             <Plus size="13" />
             Create
@@ -218,13 +155,3 @@
         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}