@lobb-js/studio 0.25.0 → 0.27.0

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

@@ -2,7 +2,7 @@
     import { getStudioContext } from "../../context";
 
     const { lobb, ctx } = getStudioContext();
-    import { Download, ListRestart, Plus, Trash } from "lucide-svelte";
+    import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
@@ -11,14 +11,19 @@
     import ImportButton from "../importButton.svelte";
     import { showDialog } from "../../actions";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import SelectRecord from "../selectRecord.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
+    import type { ParentContext, RecordOperation } from "./dataTable.svelte";
 
     interface Props {
         collectionName: string;
         params: any;
         selectedRecords: string[];
+        parentContext?: ParentContext;
+        onOperation?: (op: RecordOperation) => void;
+        showImport?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -26,9 +31,42 @@
         collectionName,
         params = $bindable(),
         selectedRecords = $bindable(),
+        parentContext,
+        onOperation,
+        showImport = true,
         left
     }: Props = $props();
 
+    async function handleLink(selected: any) {
+        if (!parentContext) return;
+        if (onOperation) {
+            onOperation({ type: "link", record: selected });
+        } else {
+            await lobb.updateOne(
+                parentContext.collectionName,
+                String(parentContext.recordId),
+                {},
+                { [collectionName]: { link: [selected.id] } },
+            );
+            resetTable();
+        }
+    }
+
+    async function handleChildCreate(formData: any) {
+        if (!parentContext) return;
+        if (onOperation) {
+            onOperation({ type: "create", record: formData });
+        } else {
+            await lobb.updateOne(
+                parentContext.collectionName,
+                String(parentContext.recordId),
+                {},
+                { [collectionName]: { create: [formData] } },
+            );
+            resetTable();
+        }
+    }
+
     let headerWidth: number = $state(0);
     let headerIsSmall: boolean = $derived(headerWidth < 560);
 
@@ -138,34 +176,60 @@
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        <Tooltip.Provider delayDuration={0}>
-            <Tooltip.Root>
-                <Tooltip.Trigger>
-                    <ImportButton
-                        {collectionName}
-                        variant="outline"
-                        class="h-7 px-2 text-xs font-normal"
-                        Icon={Download}
-                        onSuccessfullSave={() => (params = { ...params })}
-                    />
-                </Tooltip.Trigger>
-                <Tooltip.Content>Import</Tooltip.Content>
-            </Tooltip.Root>
-        </Tooltip.Provider>
+        {#if showImport}
+            <Tooltip.Provider delayDuration={0}>
+                <Tooltip.Root>
+                    <Tooltip.Trigger>
+                        <ImportButton
+                            {collectionName}
+                            variant="outline"
+                            class="h-7 px-2 text-xs font-normal"
+                            Icon={Download}
+                            onSuccessfullSave={() => (params = { ...params })}
+                        />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Import</Tooltip.Content>
+                </Tooltip.Root>
+            </Tooltip.Provider>
+        {/if}
         <ExtensionsComponents
             name="listView.header.actions"
             utils={getExtensionUtils(lobb, ctx)}
             {collectionName}
             refresh={() => { params = { ...params }; }}
         />
-        <CreateDetailViewButton
-            {collectionName}
-            variant="default"
-            class="h-7 px-3 text-xs font-normal"
-            Icon={Plus}
-            onSuccessfullSave={() => (params = { ...params })}
-        >
-            {headerIsSmall ? "" : "Create"}
-        </CreateDetailViewButton>
+        {#if parentContext}
+            {#if parentContext}
+                <SelectRecord
+                    {collectionName}
+                    variant="outline"
+                    class="h-7 px-3 text-xs font-normal"
+                    Icon={Link}
+                    onSelect={handleLink}
+                >
+                    {headerIsSmall ? "" : "Link"}
+                </SelectRecord>
+            {/if}
+            <CreateDetailViewButton
+                {collectionName}
+                variant="default"
+                class="h-7 px-3 text-xs font-normal"
+                Icon={Plus}
+                rollback={true}
+                onSuccessfullSave={handleChildCreate}
+            >
+                {headerIsSmall ? "" : "Create"}
+            </CreateDetailViewButton>
+        {:else}
+            <CreateDetailViewButton
+                {collectionName}
+                variant="default"
+                class="h-7 px-3 text-xs font-normal"
+                Icon={Plus}
+                onSuccessfullSave={() => (params = { ...params })}
+            >
+                {headerIsSmall ? "" : "Create"}
+            </CreateDetailViewButton>
+        {/if}
     </div>
 </div>

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+    import { ChevronRight, Table, Plus, Link, ArrowLeftRight, GitFork } from "lucide-svelte";
+    import DataTable from "./dataTable.svelte";
+    import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+
+    const { ctx, lobb } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        recordId: string;
+        width: number;
+        unifiedBgColor?: "bg-muted/30" | "bg-background";
+    }
+
+    let { collectionName, recordId, width, unifiedBgColor }: 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);
+</script>
+
+<div class="flex" style="width: {width}px;">
+    <div
+        class="flex justify-center border-r {unifiedBgColor ? unifiedBgColor : '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 {unifiedBgColor ? unifiedBgColor : 'bg-background'}">
+                <div
+                    bind:clientWidth={tableHeaderWidth}
+                    class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
+                >
+                    <button
+                        class="flex gap-2 px-2 flex-1 h-full items-center"
+                        onclick={() => { expandedRows[index] = !expandedRows[index]; }}
+                    >
+                        <ChevronRight
+                            size="17.5"
+                            class="text-muted-foreground transition-transform"
+                            style={expandedRows[index] ? "transform: rotate(90deg);" : "transform: rotate(0deg);"}
+                        />
+                        <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"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Plus}
+                                values={{ [child.field]: { id: 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 {unifiedBgColor ? unifiedBgColor : ''}"
+                            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"}
+                                        {unifiedBgColor}
+                                        tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
+                                    />
+                                </ExtensionsComponents>
+                            {/key}
+                        </div>
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>

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

@@ -172,7 +172,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
+		grid-template-columns: minmax(auto, 10rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >

package/src/lib/components/detailView/create/createManyView.svelte

@@ -15,7 +15,7 @@
     import SelectRecord from "../../../components/selectRecord.svelte";
     import FieldCell from "../../../components/dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ChildRecords from "../../../components/dataTable/childRecords.svelte";
+    import ListViewChildren from "../../../components/dataTable/listViewChildren.svelte";
     import { getStudioContext } from "../../../context";
 
     const { ctx } = getStudioContext();
@@ -232,7 +232,7 @@
                 {/snippet}
                 {#snippet collapsible(entry, index)}
                     {#if entry.id}
-                        <ChildRecords
+                        <ListViewChildren
                             {collectionName}
                             recordId={entry.id}
                             width={tableWidth}

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Table, Link } from "lucide-svelte";
+
+    const { ctx } = getStudioContext();
+
+    type PendingOps = {
+        link?: (string | number)[];
+        unlink?: (string | number)[];
+        delete?: (string | number)[];
+        create?: any[];
+    };
+
+    interface LocalProp {
+        collectionName: string;
+        entry: any;
+        pendingChildren?: Record<string, PendingOps>;
+    }
+
+    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
+
+    function makeHandler(collection: string) {
+        return (op: RecordOperation) => {
+            if (!pendingChildren[collection]) pendingChildren[collection] = {};
+            const c = pendingChildren[collection];
+            if (op.type === "link") {
+                (c.link ??= []).push(op.record.id);
+            } else if (op.type === "unlink") {
+                (c.unlink ??= []).push(op.id);
+            } else if (op.type === "delete") {
+                (c.delete ??= []).push(op.id);
+            } else if (op.type === "create") {
+                (c.create ??= []).push(op.record);
+            }
+        };
+    }
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-3 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
+        </div>
+        {#each children as child}
+            <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <DataTable
+                    collectionName={child.collection}
+                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
+                    parentContext={{ collectionName, recordId: entry.id }}
+                    onOperation={makeHandler(child.collection)}
+                    showImport={false}
+                    showHeader={true}
+                    showFooter={true}
+                    showDelete={child.type === "fk" || child.type === "m2m"}
+                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
+                >
+                    {#snippet headerLeft()}
+                        <div class="flex items-center gap-2 px-1">
+                            <Table size="14" class="text-muted-foreground" />
+                            <span class="text-sm font-medium">{child.collection}</span>
+                        </div>
+                    {/snippet}
+                </DataTable>
+            </div>
+        {/each}
+    </div>
+{/if}

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

@@ -29,7 +29,7 @@
     const { lobb, ctx } = getStudioContext();
     import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
-    import Children from "../update/children.svelte";
+    import DetailViewChildren from "../update/detailViewChildren.svelte";
     import type { Snippet } from "svelte";
     import { getDefaultEntry, parseDetailViewValues, serializeEntry } from "../utils";
     import FieldInput from "../fieldInput.svelte";
@@ -57,15 +57,18 @@
         getChangedProperties(initialEntry, $state.snapshot(entry)),
     );
     let fieldsErrors: Record<string, any> = $state({});
+    let pendingChildren = $state<Record<string, any>>({});
 
     async function handleSave() {
         delete localEntry.id;
         localEntry = serializeEntry(ctx, collectionName, localEntry);
 
+        const children = Object.keys(pendingChildren).length ? pendingChildren : undefined;
         const response = await lobb.updateOne(
             collectionName,
             recordId,
             localEntry,
+            children,
         );
 
         if (!response.bodyUsed) {
@@ -145,7 +148,7 @@
             {/each}
         </div>
         {#if showRelatedRecords}
-            <Children {collectionName} {entry} />
+            <DetailViewChildren {collectionName} {entry} bind:pendingChildren />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">
@@ -163,7 +166,7 @@
                 class="h-7 px-3 text-xs font-normal"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
-                disabled={!Object.keys(localEntry).length}
+                disabled={!Object.keys(localEntry).length && !Object.keys(pendingChildren).length}
             >
                 {submitButton?.text ? submitButton.text : "Update"}
             </Button>

package/src/lib/components/routes/collections/collections.svelte

@@ -1,40 +1,61 @@
 <script lang="ts">
-    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
     import Sidebar from "../../../components/sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
     import Collection from "./collection.svelte";
 
     const { ctx } = getStudioContext();
-    import { Table } from "lucide-svelte";
+    import { Table, Cpu, LibraryBig } from "lucide-svelte";
+    import * as Icons from "lucide-svelte";
+
+    const directoryIcons: Record<string, any> = {
+        project: LibraryBig,
+        core: Cpu,
+    };
 
     let { collectionName } = $props();
 
     const collectionsList = $state(getCollectionsList());
 
-    function getCollectionsList() {
+    function getCollectionsList(): SideBarData {
         const collections = ctx.meta.collections;
-        let collectionsOwners: SideBarData = Object.entries(collections).map(
-            ([collectionName, collectionValue]) => {
-                return {
-                    name: collectionName,
-                    path: collectionValue.category ?? collectionValue.owner,
-                    icon: Table,
-                    href: `/studio/collections/${collectionName}`,
-                };
-            },
-        );
-
-        // updating the path from '__project' and '__core' to a more readable names
-        collectionsOwners = collectionsOwners.map((item) => {
-            if (item.path === "__project") {
-                item.path = "project";
-            } else if (item.path === "__core") {
-                item.path = "core";
+
+        const groups = new Map<string, SideBarNode[]>();
+
+        for (const [name, value] of Object.entries(collections)) {
+            let groupKey: string = (value as any).category ?? (value as any).owner;
+            if (groupKey === "__project") groupKey = "project";
+            else if (groupKey === "__core") groupKey = "core";
+
+            if (!groups.has(groupKey)) {
+                groups.set(groupKey, []);
             }
-            return item;
-        });
+            groups.get(groupKey)!.push({
+                type: "element",
+                name,
+                icon: Table,
+                href: `/studio/collections/${name}`,
+            });
+        }
+
+        const result: SideBarData = [];
+        for (const [groupKey, children] of groups) {
+            const extensionIconName = ctx.meta.extensions?.[groupKey]?.icon;
+            const isProject = groupKey === "project";
+            result.push({
+                type: "directory",
+                name: isProject ? "Collections" : groupKey,
+                icon: directoryIcons[groupKey] ?? (extensionIconName ? (Icons as any)[extensionIconName] : undefined),
+                collapsed: isProject ? false : true,
+                children,
+            });
+        }
 
-        return collectionsOwners;
+        return result.sort((a, b) => {
+            if ((a as any).name === "core") return 1;
+            if ((b as any).name === "core") return -1;
+            return 0;
+        });
     }
 </script>
 

package/src/lib/components/routes/data_model/dataModel.svelte

@@ -13,14 +13,8 @@
     title="Data Model"
     showSearch={false}
     data={[
-        {
-            name: "graph",
-            href: "/studio/datamodel/graph",
-        },
-        {
-            name: "query_editor",
-            href: "/studio/datamodel/query_editor",
-        },
+        { type: "element", name: "graph", href: "/studio/datamodel/graph" },
+        { type: "element", name: "query_editor", href: "/studio/datamodel/query_editor" },
     ]}
 >
     <div class="relative h-full w-full">

package/src/lib/components/routes/workflows/workflows.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
     import WorkflowEditor, {
         type WorkflowEntry,
     } from "../../../components/workflowEditor.svelte";
@@ -31,18 +31,31 @@
         const response = await lobb.findAll("core_workflows", {});
         const result = await response.json();
         const workflows: any[] = result.data;
-        sidebarData = workflows.map((workflow) => {
-            return {
+
+        const groups = new Map<string, SideBarNode[]>();
+        const nodes: SideBarData = [];
+
+        for (const workflow of workflows) {
+            const item: SideBarNode = {
+                type: "element",
                 name: workflow.name,
-                path: workflow.directory,
-                onclick: () => {
-                    location.navigate(`/studio/workflows/${workflow.name}`);
-                },
-                meta: {
-                    id: workflow.id,
-                },
+                onclick: () => location.navigate(`/studio/workflows/${workflow.name}`),
+                meta: { id: workflow.id },
             };
-        });
+
+            if (workflow.directory) {
+                if (!groups.has(workflow.directory)) {
+                    const children: SideBarNode[] = [];
+                    groups.set(workflow.directory, children);
+                    nodes.push({ type: "directory", name: workflow.directory, children });
+                }
+                groups.get(workflow.directory)!.push(item);
+            } else {
+                nodes.push(item);
+            }
+        }
+
+        sidebarData = nodes;
     }
 
     async function fetchWorkflowData(workflowName: string) {

package/src/lib/components/sidebar/sidebar.svelte

@@ -13,13 +13,12 @@
     import SidebarElements, {
         type SideBarData,
         type SideBarElement,
-        type SidebarElementsProps,
+        type SideBarNode,
     } from "./sidebarElements.svelte";
 
     interface Props {
         title: string;
         data: SideBarData | null;
-        sidebarElementsProps?: Partial<SidebarElementsProps>;
         showSearch?: boolean;
         children: Snippet<[]>;
         belowSearch?: Snippet;
@@ -29,7 +28,6 @@
     let {
         title,
         data,
-        sidebarElementsProps,
         showSearch = true,
         children,
         belowSearch,
@@ -67,7 +65,17 @@
     }
 
     function filterSidebarData(items: SideBarData, term: string): SideBarData {
-        return items.filter((item) => item.name.includes(term));
+        return items.reduce<SideBarData>((acc, node) => {
+            if (node.type === "directory") {
+                const filteredChildren = filterSidebarData(node.children, term);
+                if (filteredChildren.length > 0) {
+                    acc.push({ ...node, collapsed: false, children: filteredChildren });
+                }
+            } else if (node.name.toLowerCase().includes(term)) {
+                acc.push(node);
+            }
+            return acc;
+        }, []);
     }
 </script>
 
@@ -124,7 +132,6 @@
                     <SidebarElements
                         bind:data={visibleData}
                         {elementRightSide}
-                        {...sidebarElementsProps}
                     />
                 {/key}
             </div>