@lobb-js/studio 0.25.0 → 0.26.0

package/dist/components/sidebar/sidebarElements.svelte

@@ -1,24 +1,32 @@
 <script lang="ts" module>
     export interface SideBarElement {
+        type: "element";
         name: string;
         onclick?: () => Promise<void> | void;
         href?: string;
         icon?: any;
-        path?: string;
         meta?: Record<string, any>;
     }
 
-    export type SideBarData = Array<SideBarElement>;
+    export interface SideBarDirectory {
+        type: "directory";
+        name: string;
+        icon?: any;
+        collapsed?: boolean;
+        children: SideBarNode[];
+    }
+
+    export type SideBarNode = SideBarElement | SideBarDirectory;
+    export type SideBarData = SideBarNode[];
 
     export interface SidebarElementsProps {
         data: SideBarData;
-        path?: string[];
         elementRightSide?: Snippet<[SideBarElement]>;
     }
 </script>
 
 <script lang="ts">
-    import { Ban } from "lucide-svelte";
+    import { Ban, ChevronDown, Folder } from "lucide-svelte";
     import type { Snippet } from "svelte";
     import SidebarElements from "./sidebarElements.svelte";
     import Button from "../ui/button/button.svelte";
@@ -26,117 +34,84 @@
 
     let {
         data = $bindable(),
-        path = [],
         elementRightSide,
     }: SidebarElementsProps = $props();
 
-    const elementsToShow = data.reduce<Array<string | SideBarElement>>(
-        (acc, item, index) => {
-            const firstPath = item.path?.split("/")[0];
-            if (firstPath && item.path && !acc.includes(firstPath)) {
-                acc.push(firstPath);
-            } else if (!item.path) {
-                acc.push(item);
-            }
-            return acc;
-        },
-        [],
+    let expandedHeights: number[] = $state(Array(data.length).fill(0));
+    let collapsedDirs: boolean[] = $state(
+        data.map((node) => node.type === "directory" ? (node.collapsed ?? false) : false)
     );
 
-    let expandedHeights: number[] = $state(Array(data?.length).fill(0));
+    function toggleDir(index: number) {
+        collapsedDirs[index] = !collapsedDirs[index];
+    }
 
     async function handleElementClick(element: SideBarElement) {
         if (element.onclick) {
             await element.onclick();
         }
     }
-
-    function getDirElements(dirName: string) {
-        let elements = data.filter((item) => item.path?.startsWith(dirName));
-        elements = elements.map((item) => {
-            return {
-                ...item,
-                path: item.path?.split("/").slice(1).join("/"),
-            };
-        });
-        return elements;
-    }
 </script>
 
 <div class="flex flex-col">
-    {#if elementsToShow.length}
-        {#each elementsToShow as element, index}
-            {#if typeof element === "string"}
-                {@const directoryName = element.split("/")[0]}
+    {#if data.length}
+        {#each data as node, index}
+            {#if node.type === "directory"}
                 <button
-                    class="
-						flex items-center justify-between p-2 gap-2 text-muted-foreground
-						rounded-md cursor-default
-					"
+                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted/30 cursor-pointer"
+                    onclick={() => toggleDir(index)}
                 >
                     <div class="flex items-center gap-2">
-                        <div class="text-xs">
-                            {directoryName}
-                        </div>
+                        {#if node.icon}
+                            <node.icon size="17.5" />
+                        {:else}
+                            <Folder size="17.5" />
+                        {/if}
+                        <div class="text-xs">{node.name}</div>
                     </div>
+                    <ChevronDown
+                        size="14"
+                        class="transition-transform duration-200 {collapsedDirs[index] ? '-rotate-90' : ''}"
+                    />
                 </button>
-                {#if getDirElements(directoryName)}
-                    <div
-                        class="overflow-hidden"
-                        style="
-						height: {true ? expandedHeights[index] : 0}px;
-					"
-                    >
-                        <div
-                            bind:clientHeight={expandedHeights[index]}
-                            class="border-l ml-4 pl-2"
-                        >
-                            <SidebarElements
-                                data={getDirElements(element)}
-                                path={[...path, element]}
-                                {elementRightSide}
-                            />
-                        </div>
+                <div
+                    class="overflow-hidden transition-[height] duration-200"
+                    style="height: {collapsedDirs[index] ? 0 : expandedHeights[index]}px;"
+                >
+                    <div bind:clientHeight={expandedHeights[index]} class="border-l ml-4 pl-2">
+                        <SidebarElements data={node.children} {elementRightSide} />
                     </div>
-                {/if}
+                </div>
             {:else}
-                {@const elementPath = [...path, element]}
-                {@const isselected = location.url.pathname === element.href}
+                {@const isselected = location.url.pathname === node.href}
                 <Button
-                    onclick={() => handleElementClick(element)}
-                    href={element.href}
+                    onclick={() => handleElementClick(node)}
+                    href={node.href}
                     variant="ghost"
                     class="
 						flex items-center justify-between p-2 gap-2 hover:bg-muted/30 text-muted-foreground
 						rounded-md {isselected ? 'bg-muted' : ''}
 					"
-                    title={element.name}
+                    title={node.name}
                 >
                     <div class="flex items-center gap-2 truncate">
-                        {#if element.icon}
-                            <element.icon size="17.5" />
+                        {#if node.icon}
+                            <node.icon size="17.5" />
                         {/if}
-                        <div
-                            class="
-								text-xs
-								{isselected ? 'text-primary font-medium' : ''}
-							"
-                        >
-                            {element.name}
+                        <div class="text-xs {isselected ? 'text-primary font-medium' : ''}">
+                            {node.name}
                         </div>
                     </div>
                     <div class="flex gap-2 items-center">
                         {#if elementRightSide}
-                            {@render elementRightSide(element)}
+                            {@render elementRightSide(node)}
                         {/if}
                     </div>
                 </Button>
             {/if}
         {/each}
     {:else}
-        <div
-            class="flex justify-center items-center gap-2 text-muted-foreground"
-        >
+        <div class="flex justify-center items-center gap-2 text-muted-foreground">
             <Ban size="17.5" />
             <div class="text-xs text-center">No result</div>
         </div>

package/dist/components/sidebar/sidebarElements.svelte.d.ts

@@ -1,15 +1,22 @@
 export interface SideBarElement {
+    type: "element";
     name: string;
     onclick?: () => Promise<void> | void;
     href?: string;
     icon?: any;
-    path?: string;
     meta?: Record<string, any>;
 }
-export type SideBarData = Array<SideBarElement>;
+export interface SideBarDirectory {
+    type: "directory";
+    name: string;
+    icon?: any;
+    collapsed?: boolean;
+    children: SideBarNode[];
+}
+export type SideBarNode = SideBarElement | SideBarDirectory;
+export type SideBarData = SideBarNode[];
 export interface SidebarElementsProps {
     data: SideBarData;
-    path?: string[];
     elementRightSide?: Snippet<[SideBarElement]>;
 }
 import type { Snippet } from "svelte";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.28.0",
+    "@lobb-js/core": "^0.29.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

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

@@ -7,7 +7,7 @@
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import { Pencil, Trash } from "lucide-svelte";
     import * as icons from "lucide-svelte";
-    import ChildRecords from "./childRecords.svelte";
+    import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -25,6 +25,7 @@
     interface Props {
         collectionName: string;
         filter?: any;
+        searchParams?: Record<string, any>;
         showHeader?: boolean;
         showFooter?: boolean;
         unifiedBgColor?: "bg-muted/30" | "bg-background";
@@ -36,6 +37,7 @@
     let {
         collectionName,
         filter,
+        searchParams,
         showHeader = true,
         showFooter = true,
         unifiedBgColor,
@@ -57,6 +59,7 @@
         sort: {},
         limit: "100",
         page: 1,
+        ...searchParams,
     });
 
     $effect(() => {
@@ -73,10 +76,9 @@
     );
     let dataTableContainerWidth: number = $state(0);
     let dataTableWidth: number = $state(0);
-    const doesCollectionHasChildren = Boolean(
-        ctx.meta.relations.find(
-            (relation) => relation.to.collection === collectionName,
-        ),
+    const doesCollectionHasChildren = $derived(
+        (ctx.meta.collections[collectionName]?.children ?? [])
+            .some((c: any) => c.type === "fk" || c.type === "m2m")
     );
 
     // requests the data from the server when the params is changed
@@ -232,7 +234,7 @@
                             />
                         {/snippet}
                         {#snippet collapsible(entry)}
-                            <ChildRecords
+                            <ListViewChildren
                                 {collectionName}
                                 recordId={entry.id}
                                 width={dataTableWidth > dataTableContainerWidth

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+    import { ChevronRight, Table, Plus } 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");
+
+    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>
+                    </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/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,77 @@
+<script lang="ts">
+    import DataTable from "../../../components/dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Link, Plus, TableIcon } from "lucide-svelte";
+    import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+
+    const { ctx, lobb } = getStudioContext();
+
+    interface LocalProp {
+        collectionName: string;
+        entry: any;
+    }
+
+    let { collectionName, entry }: LocalProp = $props();
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m");
+
+    const refresh: boolean[] = $state(new Array(children.length).fill(true));
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-4 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="17.5" />
+            <div>Sub Records</div>
+        </div>
+        <div class="flex flex-col gap-4">
+            {#each children as child, index}
+                <ExtensionsComponents
+                    name="detailView.update.subRecords.{child.collection}"
+                    utils={getExtensionUtils(lobb, ctx)}
+                    collectionName={child.collection}
+                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
+                    class="bg-muted/30 border rounded-md overflow-hidden"
+                >
+                    <div class="border rounded-md overflow-clip">
+                        <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
+                            <div class="flex-1 flex h-full items-center gap-2">
+                                <TableIcon class="text-muted-foreground" size="17.5" />
+                                <div class="text-sm text-muted-foreground">{child.collection}</div>
+                            </div>
+                            {#if child.type === "fk"}
+                                <div class="flex gap-2">
+                                    <CreateDetailViewButton
+                                        variant="ghost"
+                                        class="h-7 px-2 font-normal text-xs"
+                                        Icon={Plus}
+                                        collectionName={child.collection}
+                                        onSuccessfullSave={async () => { refresh[index] = !refresh[index]; }}
+                                    >
+                                        Create
+                                    </CreateDetailViewButton>
+                                </div>
+                            {/if}
+                        </div>
+                        <div class="max-h-72 overflow-auto rounded-md">
+                            {#key refresh[index]}
+                                <DataTable
+                                    collectionName={child.collection}
+                                    searchParams={{ children_of: collectionName, parent_id: entry.id }}
+                                    unifiedBgColor="bg-muted/30"
+                                    showHeader={false}
+                                    showFooter={false}
+                                    showDelete={child.type === "fk"}
+                                    tableProps={{ showLastColumnBorder: false, showLastRowBorder: false, showCheckboxes: false }}
+                                />
+                            {/key}
+                        </div>
+                    </div>
+                </ExtensionsComponents>
+            {/each}
+        </div>
+    </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";
@@ -145,7 +145,7 @@
             {/each}
         </div>
         {#if showRelatedRecords}
-            <Children {collectionName} {entry} />
+            <DetailViewChildren {collectionName} {entry} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">

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) {