@lobb-js/studio 0.41.0 → 0.43.0

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

@@ -14,8 +14,10 @@
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import CanAccess from "../canAccess.svelte";
-    import { Pencil, Trash, Unlink } from "lucide-svelte";
+    import { Pencil, Trash, Unlink, RotateCcw, Network } from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
+    import Drawer from "../drawer.svelte";
+    import { ArrowLeft } from "lucide-svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -76,37 +78,80 @@
     let localChanges = $state<ChildrenChanges>(
         untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
     );
+    // Counter for temporary IDs assigned to locally-created pending records so they
+    // can be individually targeted by handleDelete before being committed to the DB.
+    let nextTempId = -1;
 
 
     // Derives the displayed rows by applying localChanges on top of server data.
+    // Deleted/unlinked rows stay visible but carry _recordingState so the table
+    // can render them with visual staging indicators.
     const data = $derived.by(() => {
         if (!isRecordingMode) return serverData;
 
-        const removedIds = new Set([
-            ...localChanges.deleted.map((r: any) => String(r.id)),
-            ...localChanges.unlinked.map((r: any) => String(r.id)),
-        ]);
-
-        let result = serverData.filter((r: any) => !removedIds.has(String(r.id)));
-
-        result = result.map((r: any) => {
-            const update = localChanges.updated.find((u) => String(u.id) === String(r.id));
-            return update && Object.keys(update.changes.data).length ? { ...r, ...update.changes.data } : r;
+        const deletedIds = new Set(localChanges.deleted.map((r: any) => String(r.id)));
+        const unlinkedIds = new Set(localChanges.unlinked.map((r: any) => String(r.id)));
+
+        let result = serverData.map((r: any) => {
+            const id = String(r.id);
+            const update = localChanges.updated.find((u) => String(u.id) === id);
+            const hasUpdate = update && (
+                Object.keys(update.changes.data).length > 0 ||
+                Object.values(update.changes.children).some((ch: any) =>
+                    ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length
+                )
+            );
+
+            let state: string | undefined;
+            if (deletedIds.has(id)) state = 'deleted';
+            else if (unlinkedIds.has(id)) state = 'unlinked';
+            else if (hasUpdate) state = 'updated';
+
+            return {
+                ...(hasUpdate ? { ...r, ...update!.changes.data } : r),
+                ...(state ? { _recordingState: state } : {}),
+            };
         });
 
         for (const record of localChanges.linked) {
             if (!result.some((r: any) => String(r.id) === String(record.id))) {
-                result = [...result, record];
+                result = [...result, { ...record, _recordingState: 'linked' }];
             }
         }
 
         for (const item of localChanges.created) {
-            result = [...result, { ...item.data, _pending: true }];
+            result = [...result, { ...item.data, id: (item as any)._tempId, _recordingState: 'created' }];
         }
 
         return result;
     });
 
+    // IDs to exclude from the Link picker — records already present in this table
+    const excludeIds = $derived([
+        ...serverData.map((r: any) => r.id),
+        ...localChanges.linked.map((r: any) => r.id),
+    ]);
+
+    function onCellClass(entry: any, cellIndex: number): string {
+        if (!isRecordingMode) return '';
+        const state = entry._recordingState;
+        const border = cellIndex === 0 ? {
+            deleted:  'border-l-2 border-l-red-500',
+            unlinked: 'border-l-2 border-l-slate-500',
+            created:  'border-l-2 border-l-green-500',
+            linked:   'border-l-2 border-l-blue-500',
+            updated:  'border-l-2 border-l-orange-500',
+        }[state as string] ?? '' : '';
+        const bg: Record<string, string> = {
+            deleted:  '!bg-red-500/5',
+            unlinked: '!bg-slate-500/5',
+            created:  '!bg-green-500/5',
+            linked:   '!bg-blue-500/5',
+            updated:  '!bg-orange-500/5',
+        };
+        return `${bg[state as string] ?? ''} ${border}`.trim();
+    }
+
     const hasRowActions = $derived(
         loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
     );
@@ -177,6 +222,7 @@
         (ctx.meta.collections[collectionName]?.children ?? [])
             .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
+    let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
     // requests the data from the server when the params is changed
     $effect(() => {
@@ -204,16 +250,24 @@
     }
 
     async function handleDelete(entryId: string) {
-        const result = await showDialog("Are you sure?", "This will permanently delete the record.");
-        if (!result) return;
+        if (!isRecordingMode) {
+            const result = await showDialog("Are you sure?", "This will permanently delete the record.");
+            if (!result) return;
+        }
         if (isRecordingMode) {
             // If the record was locally linked (not yet in DB), just cancel the link instead of marking for deletion.
             const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
             if (linkedIdx !== -1) {
                 localChanges.linked.splice(linkedIdx, 1);
             } else {
-                const record = serverData.find((r: any) => String(r.id) === String(entryId));
-                if (record) localChanges.deleted.push($state.snapshot(record));
+                // If it's a locally-created pending record (has a negative tempId), remove it from created.
+                const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === String(entryId));
+                if (createdIdx !== -1) {
+                    localChanges.created.splice(createdIdx, 1);
+                } else {
+                    const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                    if (record) localChanges.deleted.push($state.snapshot(record));
+                }
             }
             onChanges?.($state.snapshot(localChanges));
         } else if (parentContext) {
@@ -228,8 +282,10 @@
     }
 
     async function handleUnlink(entryId: string) {
-        const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
-        if (!result) return;
+        if (!isRecordingMode) {
+            const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
+            if (!result) return;
+        }
         if (isRecordingMode) {
             // If the record was locally linked this session, just cancel the link — net effect is no change.
             const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
@@ -265,14 +321,63 @@
     });
 
     function handleCreate(changes: import("../detailView/utils").Changes) {
-        localChanges.created.push({ data: changes.data });
+        (localChanges.created as any[]).push({ data: changes.data, _tempId: nextTempId-- });
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    const hasAnyChanges = $derived(
+        localChanges.created.length > 0 ||
+        localChanges.updated.length > 0 ||
+        localChanges.deleted.length > 0 ||
+        localChanges.linked.length > 0 ||
+        localChanges.unlinked.length > 0
+    );
+
+    function handleRevertRow(entryId: string) {
+        const id = String(entryId);
+        const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === id);
+        if (createdIdx !== -1) localChanges.created.splice(createdIdx, 1);
+        const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === id);
+        if (linkedIdx !== -1) localChanges.linked.splice(linkedIdx, 1);
+        const deletedIdx = localChanges.deleted.findIndex((r: any) => String(r.id) === id);
+        if (deletedIdx !== -1) localChanges.deleted.splice(deletedIdx, 1);
+        const unlinkedIdx = localChanges.unlinked.findIndex((r: any) => String(r.id) === id);
+        if (unlinkedIdx !== -1) localChanges.unlinked.splice(unlinkedIdx, 1);
+        const updatedIdx = localChanges.updated.findIndex((u: any) => String(u.id) === id);
+        if (updatedIdx !== -1) localChanges.updated.splice(updatedIdx, 1);
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleRevertAll() {
+        localChanges.created = [];
+        localChanges.updated = [];
+        localChanges.deleted = [];
+        localChanges.linked = [];
+        localChanges.unlinked = [];
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleEditPending(tempId: string, editChanges: import("../detailView/utils").Changes) {
+        const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === tempId);
+        if (createdIdx !== -1) {
+            localChanges.created[createdIdx] = {
+                ...localChanges.created[createdIdx],
+                data: { ...localChanges.created[createdIdx].data, ...editChanges.data },
+            };
+        }
         onChanges?.($state.snapshot(localChanges));
     }
 
     function handleUpdate(id: string, editChanges: import("../detailView/utils").Changes) {
-        const existing = localChanges.updated.find((u) => String(u.id) === id);
-        if (existing) {
-            existing.changes = editChanges;
+        const isEmpty = Object.keys(editChanges.data).length === 0 &&
+            Object.values(editChanges.children).every((ch: any) =>
+                !ch.created.length && !ch.updated.length && !ch.deleted.length && !ch.linked.length && !ch.unlinked.length
+            );
+        const existingIdx = localChanges.updated.findIndex((u) => String(u.id) === id);
+        if (isEmpty) {
+            if (existingIdx !== -1) localChanges.updated.splice(existingIdx, 1);
+        } else if (existingIdx !== -1) {
+            localChanges.updated[existingIdx].changes = editChanges;
         } else {
             localChanges.updated.push({ id, changes: editChanges });
         }
@@ -306,9 +411,22 @@
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
+            {excludeIds}
         >
             {#snippet left()}
                 {@render headerLeft?.()}
+                {#if isRecordingMode && hasAnyChanges}
+                    <Button
+                        class="h-6 px-2 font-normal text-xs text-muted-foreground"
+                        variant="ghost"
+                        size="sm"
+                        Icon={RotateCcw}
+                        onclick={handleRevertAll}
+                        title="Revert all changes"
+                    >
+                        Revert all
+                    </Button>
+                {/if}
             {/snippet}
         </Header>
     {/if}
@@ -338,7 +456,6 @@
                     <Table
                         {data}
                         {columns}
-                        showCollapsible={doesCollectionHasChildren}
                         selectByColumn="id"
                         showLastRowBorder={true}
                         showLastColumnBorder={true}
@@ -346,40 +463,70 @@
                         bind:selectedRecords
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
-                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
-                        {#snippet tools(entry)}
-                            {#if showEdit}
-                                <CanAccess collection={collectionName} action="update">
-                                    <UpdateDetailViewButton
-                                        {collectionName}
-                                        recordId={entry.id}
-                                        variant="ghost"
-                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                        Icon={Pencil}
-                                        changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
-                                        onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
-                                        onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
-                                    ></UpdateDetailViewButton>
-                                </CanAccess>
-                            {/if}
-                            {#if parentContext}
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}
+                        onCellClass={isRecordingMode ? onCellClass : undefined}>
+                        {#snippet preTools(entry)}
+                            {#if doesCollectionHasChildren}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
                                     variant="ghost"
                                     size="icon"
-                                    onclick={() => handleUnlink(entry.id)}
-                                    Icon={Unlink}
-                                    title="Remove from this entry"
+                                    onclick={() => { childrenDrawerEntry = entry; }}
+                                    Icon={Network}
+                                    title="Show children"
+                                    aria-label={`Show children of record ${entry.id}`}
                                 ></Button>
                             {/if}
-                            {#if showDelete}
+                        {/snippet}
+                        {#snippet tools(entry)}
+                            {#if entry._recordingState !== 'deleted' && entry._recordingState !== 'unlinked'}
+                                {#if showEdit}
+                                    {@const isPending = entry._recordingState === 'created'}
+                                    <CanAccess collection={collectionName} action="update">
+                                        <UpdateDetailViewButton
+                                            {collectionName}
+                                            recordId={entry.id}
+                                            variant="ghost"
+                                            class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                            Icon={Pencil}
+                                            aria-label={`Edit record ${entry.id}`}
+                                            values={isPending ? entry : undefined}
+                                            changes={isRecordingMode && !isPending ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
+                                            onChanges={isPending ? (c) => handleEditPending(String(entry.id), c) : isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
+                                            onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
+                                        ></UpdateDetailViewButton>
+                                    </CanAccess>
+                                {/if}
+                                {#if parentContext}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                        variant="ghost"
+                                        size="icon"
+                                        onclick={() => handleUnlink(entry.id)}
+                                        Icon={Unlink}
+                                        title="Remove from this entry"
+                                    ></Button>
+                                {/if}
+                                {#if showDelete}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                        variant="ghost"
+                                        size="icon"
+                                        onclick={() => handleDelete(entry.id)}
+                                        Icon={Trash}
+                                        title="Delete permanently"
+                                    ></Button>
+                                {/if}
+                            {/if}
+                            {#if isRecordingMode && entry._recordingState}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
                                     variant="ghost"
                                     size="icon"
-                                    onclick={() => handleDelete(entry.id)}
-                                    Icon={Trash}
-                                    title="Delete permanently"
+                                    onclick={() => handleRevertRow(entry.id)}
+                                    Icon={RotateCcw}
+                                    title="Revert changes"
+                                    aria-label={`Revert changes for record ${entry.id}`}
                                 ></Button>
                             {/if}
                         {/snippet}
@@ -392,15 +539,6 @@
                                 refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
-                        {#snippet collapsible(entry)}
-                            <ListViewChildren
-                                {collectionName}
-                                recordId={entry.id}
-                                width={dataTableWidth > dataTableContainerWidth
-                                    ? dataTableContainerWidth
-                                    : dataTableWidth}
-                            />
-                        {/snippet}
                     </Table>
                 {/if}
             </div>
@@ -414,3 +552,23 @@
         />
     {/if}
 </div>
+
+{#if childrenDrawerEntry}
+    <Drawer position="bottom" onHide={async () => { childrenDrawerEntry = null; }}>
+        <div class="flex h-12 items-center gap-4 border-b px-4 shrink-0">
+            <Button
+                variant="outline"
+                onclick={() => { childrenDrawerEntry = null; }}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            ></Button>
+            <div class="flex items-center gap-2 text-sm">
+                <span>Children of</span>
+                <span class="rounded-md border bg-muted px-2 py-0.5">{collectionName} #{childrenDrawerEntry.id}</span>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto">
+            <ListViewChildren {collectionName} recordId={String(childrenDrawerEntry.id)} />
+        </div>
+    </Drawer>
+{/if}

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

@@ -28,6 +28,7 @@
         showFilter?: boolean;
         loading?: boolean;
         left?: Snippet<[]>;
+        excludeIds?: (string | number)[];
     }
 
     let {
@@ -40,7 +41,8 @@
         showImport = true,
         showFilter = true,
         loading = false,
-        left
+        left,
+        excludeIds = [],
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -169,13 +171,14 @@
             {collectionName}
             refresh={() => { params = { ...params }; }}
         />
-        {#if parentContext}
+        {#if parentContext || onLink}
             <SelectRecord
                 {collectionName}
                 variant="outline"
                 size="sm"
                 Icon={Link}
                 onSelect={handleLink}
+                additionalFilter={excludeIds.length > 0 ? { $and: excludeIds.map(id => ({ id: { $ne: id } })) } : {}}
             >
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import { ChevronRight, Table, Plus, Link, ArrowLeftRight, GitFork } from "lucide-svelte";
+    import { Table, Plus } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -11,93 +11,76 @@
     interface Props {
         collectionName: string;
         recordId: string;
-        width: number;
+        width?: number;
     }
 
-    let { collectionName, recordId, width }: Props = $props();
+    let { collectionName, recordId, width = 0 }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
 
-    let expandedRows: boolean[] = $state(new Array(children.length).fill(false));
-    let refreshDataTable = $state(true);
-    let tableHeaderWidth = $state(0);
+    let activeTab = $state(children[0]?.collection ?? '');
+    let refreshKey = $state(0);
+    let counts = $state<Record<string, number>>({});
+
+    const activeChild = $derived(children.find((c: any) => c.collection === activeTab));
 </script>
 
-<div class="flex" style="width: {width}px;">
-    <div
-        class="flex justify-center border-r bg-background"
-        style="width: 40px"
-    ></div>
-    <div class="flex-1 flex flex-col">
-        {#each children as child, index}
-            {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden bg-background">
-                <div
-                    bind:clientWidth={tableHeaderWidth}
-                    class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
+<div class="flex flex-col h-full overflow-hidden">
+    <!-- Tab bar -->
+    <div class="flex border-b shrink-0 overflow-x-auto">
+        {#each children as child}
+            <button
+                class="flex items-center gap-1.5 px-4 h-10 text-xs font-medium whitespace-nowrap border-b-2 transition-colors
+                    {activeTab === child.collection
+                        ? 'border-foreground text-foreground'
+                        : 'border-transparent text-muted-foreground hover:text-foreground'}"
+                onclick={() => { activeTab = child.collection; }}
+            >
+                <Table size="11" class="opacity-50" />
+                {child.collection}
+                {#if counts[child.collection] !== undefined}
+                    <span class="rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">{counts[child.collection]}</span>
+                {/if}
+            </button>
+        {/each}
+        <!-- Create button for FK children -->
+        {#if activeChild?.type === "fk"}
+            <div class="ml-auto flex items-center px-2">
+                <CreateDetailViewButton
+                    collectionName={activeChild.collection}
+                    variant="ghost"
+                    size="sm"
+                    Icon={Plus}
+                    values={{ [activeChild.field]: recordId }}
+                    onSuccessfullSave={async () => { refreshKey++; }}
                 >
-                    <button
-                        class="flex gap-2 px-2 flex-1 h-full items-center"
-                        onclick={() => { expandedRows[index] = !expandedRows[index]; }}
+                    Create
+                </CreateDetailViewButton>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Tab content — render all but hide inactive so counts load for all tabs -->
+    <div class="flex-1 overflow-hidden relative">
+        {#each children as child}
+            <div class="absolute inset-0 {activeTab === child.collection ? '' : 'invisible pointer-events-none'}">
+                {#key refreshKey}
+                    <ExtensionsComponents
+                        name="listView.entry.children.{child.collection}"
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: recordId }}
+                        utils={getExtensionUtils(lobb, ctx)}
                     >
-                        <ChevronRight
-                            size="17.5"
-                            class="text-muted-foreground transition-transform"
-                            style={expandedRows[index] ? "transform: rotate(90deg);" : "transform: rotate(0deg);"}
+                        <DataTable
+                            collectionName={child.collection}
+                            searchParams={{ children_of: collectionName, parent_id: recordId }}
+                            showDelete={child.type === "fk" || child.type === "m2m"}
+                            tableProps={{ showLastRowBorder: true, showLastColumnBorder: true }}
+                            onDataLoad={(total) => { counts[child.collection] = total; }}
                         />
-                        <Table size="17.5" class="text-muted-foreground" />
-                        <div class="text-muted-foreground">{child.collection}</div>
-                        {#if child.type === "fk"}
-                            <span title="Direct (FK)"><Link size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "m2m"}
-                            <span title="Many to Many"><ArrowLeftRight size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "polymorphic"}
-                            <span title="Polymorphic"><GitFork size="13" class="text-muted-foreground/50" /></span>
-                        {/if}
-                    </button>
-                    {#if child.type === "fk"}
-                        <div class="flex items-center px-2">
-                            <CreateDetailViewButton
-                                collectionName={child.collection}
-                                variant="ghost"
-                                size="sm"
-                                Icon={Plus}
-                                values={{ [child.field]: recordId }}
-                                onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}
-                            >
-                                Create
-                            </CreateDetailViewButton>
-                        </div>
-                    {/if}
-                </div>
-                {#if expandedRows[index]}
-                    <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
-                        <div
-                            class="border-r"
-                            style="width: 100vw; max-width: 40px"
-                        ></div>
-                        <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
-                            {#key refreshDataTable}
-                                <ExtensionsComponents
-                                    name="listView.entry.children.{child.collection}"
-                                    collectionName={child.collection}
-                                    searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                >
-                                    <DataTable
-                                        collectionName={child.collection}
-                                        searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                        showHeader={false}
-                                        showFooter={false}
-                                        showDelete={child.type === "fk"}
-                                        tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
-                                    />
-                                </ExtensionsComponents>
-                            {/key}
-                        </div>
-                    </div>
-                {/if}
+                    </ExtensionsComponents>
+                {/key}
             </div>
         {/each}
     </div>