@lobb-js/studio 0.7.2 → 0.8.0

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

@@ -0,0 +1,40 @@
+<script>
+    import Button from "../../components/ui/button/button.svelte";
+    import { getStudioContext } from "../../context";
+    import { location } from "@wjfe/n-savant";
+
+    const { ctx } = getStudioContext();
+    import { ArrowRight } from "lucide-svelte";
+</script>
+
+<div class="flex flex-col">
+    <div
+        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+    >
+        <div class="flex flex-col items-center justify-center p-4">
+            <div class="text-3xl">Welcome to Lobb!</div>
+            <div class="text-xs text-center">
+                Your journey starts here. Explore and make the most of your
+                experience.
+            </div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+            <Button
+                Icon={ArrowRight}
+                variant="outline"
+                class="h-7 px-3 text-xs font-normal"
+                onclick={() => location.navigate("/studio/collections")}
+            >
+                Go to collections
+            </Button>
+        </div>
+    </div>
+    <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
+        <div class="flex flex-col text-end">
+            {#if ctx.studioVersion}
+                <div>studio: v{ctx.studioVersion}</div>
+            {/if}
+            <div>core: v{ctx.meta.version}</div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import WorkflowEditor, {
+        type WorkflowEntry,
+    } from "../../../components/workflowEditor.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { lobb, ctx } = getStudioContext();
+    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
+    import { location } from "@wjfe/n-savant";
+    import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
+    import { onMount } from "svelte";
+    import { showDialog } from "../../../components/confirmationDialog/store.svelte";
+    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+
+    let { workflowName } = $props();
+
+    let sidebarData: SideBarData | null = $state(null);
+    let workflowEntry: WorkflowEntry | null = $state(null);
+
+    onMount(async () => {
+        getSidebarData();
+    });
+
+    $effect(() => {
+        fetchWorkflowData(workflowName);
+    });
+
+    async function getSidebarData() {
+        const response = await lobb.findAll("core_workflows", {});
+        const result = await response.json();
+        const workflows: any[] = result.data;
+        sidebarData = workflows.map((workflow) => {
+            return {
+                name: workflow.name,
+                path: workflow.directory,
+                onclick: () => {
+                    location.navigate(`/studio/workflows/${workflow.name}`);
+                },
+                meta: {
+                    id: workflow.id,
+                },
+            };
+        });
+    }
+
+    async function fetchWorkflowData(workflowName: string) {
+        if (workflowName && workflowName !== "new") {
+            const response = await lobb.findAll("core_workflows", {
+                filter: {
+                    name: workflowName,
+                },
+            });
+            const result = await response.json();
+            const workflow = result.data[0];
+            workflowEntry = workflow;
+        } else {
+            const workflowHandlerDefaultValue =
+                ctx.meta.collections.core_workflows.fields.handler
+                    .pre_processors.default;
+            workflowEntry = {
+                name: "",
+                event_name: "",
+                handler: workflowHandlerDefaultValue,
+                directory: "",
+            };
+        }
+    }
+
+    async function handleWorkflowDelete(
+        workflowName: string,
+        workflowId: string,
+    ) {
+        const result = await showDialog(
+            "Are you sure?",
+            "This will delete the Workflow you selected.",
+        );
+        if (result) {
+            await lobb.deleteOne("core_workflows", workflowId);
+            getSidebarData();
+            if (workflowEntry && workflowName === workflowEntry.name) {
+                location.navigate("/studio/workflows");
+            }
+        }
+    }
+</script>
+
+<Sidebar title="Workflows" data={sidebarData}>
+    {#snippet belowSearch()}
+        <div class="pb-4 px-2">
+            <Button
+                class="h-7 px-3 text-xs font-normal w-full"
+                variant="outline"
+                onclick={() => location.navigate("/studio/workflows/new")}
+                Icon={Plus}
+            >
+                Create a Workflow
+            </Button>
+        </div>
+    {/snippet}
+    {#snippet elementRightSide(element)}
+        <Button
+            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+            variant="ghost"
+            size="icon"
+            onclick={() => handleWorkflowDelete(element.name, element.meta?.id)}
+            Icon={Trash2}
+        ></Button>
+    {/snippet}
+    <div class="relative h-full w-full">
+        {#if workflowName === undefined}
+            <div
+                class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+            >
+                <CircleSlash2 class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>No workflow selected</div>
+                    <div class="text-xs">
+                        Select a workflow to edit it or create new ones
+                    </div>
+                </div>
+            </div>
+        {:else if workflowEntry}
+            {#key workflowEntry}
+                <WorkflowEditor
+                    bind:workflow={workflowEntry}
+                    refreshSidebar={getSidebarData}
+                />
+            {/key}
+        {/if}
+        <div class="absolute top-0 left-0 p-2.5">
+            <SidebarTrigger />
+        </div>
+    </div>
+</Sidebar>

package/src/lib/components/selectRecord.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { ArrowLeft, Link } from "lucide-svelte";
+	import Button, { type ButtonProps } from "./ui/button/button.svelte";
+	import DataTable from "./dataTable/dataTable.svelte";
+	import { getCollectionPrimaryField } from "./dataTable/utils";
+	import { emitEvent } from "../eventSystem";
+	import { getStudioContext } from "../context";
+  import Drawer from "./drawer.svelte";
+
+	const { ctx, lobb } = getStudioContext();
+
+	interface LocalProps extends ButtonProps {
+		collectionName: string;
+		parentCollectionName?: string;
+		fieldName?: string;
+		value?: any;
+		onSelect?: (entry: any) => void;
+		filter?: Record<string, any>;
+		additionalFilter?: Record<string, any>;
+		text?: string;
+		entry?: Record<string, any>;
+	}
+
+	let {
+		parentCollectionName,
+		collectionName,
+		fieldName,
+		value = $bindable(),
+		onSelect,
+		filter = {},
+		additionalFilter = {},
+		text,
+		entry,
+		...restProps
+	}: LocalProps = $props();
+
+	let openDrawer = $state(false);
+
+	async function handleButtonClick() {
+		try {
+			const eventResult = await emitEvent(
+				{ lobb, ctx },
+				"studio.collections.preForeignKeySelect",
+				{
+					parentCollectionName,
+					collectionName,
+					fieldName,
+					entry,
+				},
+			);
+			if (eventResult.filter) {
+				additionalFilter = eventResult.filter;
+			}
+
+			openDrawer = true;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	async function onSelectHandler(entry: any) {
+		const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
+		const localValue: any = {
+			id: entry.id,
+		};
+		if (primaryFieldName) {
+			const primaryFieldValue = entry[primaryFieldName];
+			localValue[primaryFieldName] = primaryFieldValue;
+		}
+		value = localValue;
+
+		// calling the onSelect callback function
+		if (onSelect) {
+			onSelect(entry);
+		}
+
+		// closing the drawer
+		openDrawer = false;
+	}
+</script>
+
+<!-- THE SELECT BUTTON -->
+<Button onclick={handleButtonClick} {...restProps}>
+	{#if restProps.children}
+		{@render restProps.children()}
+	{:else}
+		<Link size="13" />
+		{#if text}
+			{text}
+		{:else}
+			Select record
+		{/if}
+	{/if}
+</Button>
+
+<!-- THE SELECT DRAWER -->
+{#if openDrawer}
+	<Drawer onHide={async () => { openDrawer = false }}>
+		<div class="flex h-12 items-center gap-4 border-b px-4">
+			<Button
+				variant="outline"
+				onclick={() => (openDrawer = false)}
+				class=" h-8 w-8 rounded-full text-xs font-normal"
+				Icon={ArrowLeft}
+			></Button>
+			<div class="flex items-center gap-2">
+				<div class="text-sm">Select record from</div>
+				<span
+					class="rounded-md border bg-muted px-2 py-0.5 text-sm"
+				>
+					{collectionName}
+				</span>
+			</div>
+		</div>
+		<div class="flex-1 overflow-y-auto bg-muted">
+			<DataTable
+				{collectionName}
+				tableProps={{
+					showCheckboxes: false,
+					select: {
+						onSelect: onSelectHandler,
+					},
+				}}
+				filter={{
+					$and: [filter, additionalFilter],
+				}}
+			/>
+		</div>
+	</Drawer>
+{/if}

package/src/lib/components/setServerPage.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { toast } from "svelte-sonner";
+	import Button from "./ui/button/button.svelte";
+	import { getStudioContext } from "../context";
+	import { Input } from "../components/ui/input";
+
+	const { ctx } = getStudioContext();
+
+	let formData = {
+		server: "",
+	};
+
+	async function handleClick(e: Event) {
+		if (!formData.server) {
+			toast.error("Please fill the server url");
+			return;
+		}
+		try {
+			await fetch(formData.server);
+		} catch (error) {
+			toast.error(`Couldn't connect to the (${formData.server}) server`);
+			return;
+		}
+		localStorage.setItem("lobb_url", formData.server);
+		ctx.lobbUrl = formData.server;
+	}
+</script>
+
+<div
+	class="fixed left-0 top-0 flex h-screen w-screen items-center justify-center bg-muted"
+>
+	<div class="flex w-full max-w-100 flex-col gap-6 p-6">
+		<div>
+			<div class="text-4xl">Welcome back</div>
+			<div>Sign in to your account</div>
+		</div>
+		<div class="flex flex-col gap-6 rounded-md border bg-white p-6">
+			<div class="flex flex-col gap-2">
+				<div>
+					<div class="mb-1 text-sm font-medium">Server</div>
+					<Input
+						bind:value={formData.server}
+						placeholder="http://example.lobb.com"
+					/>
+				</div>
+			</div>
+			<Button onclick={handleClick}>Save & Connect</Button>
+		</div>
+	</div>
+</div>

package/src/lib/components/sidebar/index.ts

@@ -0,0 +1,4 @@
+import Sidebar from "./sidebar.svelte";
+import SidebarTrigger from "./sidebarTrigger.svelte";
+
+export { Sidebar, SidebarTrigger }

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

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+    export interface SidebarProperties {
+        collapsed: boolean;
+    }
+</script>
+
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte";
+
+    import { mediaQueries } from "../../utils";
+    import Skeleton from "../ui/skeleton/skeleton.svelte";
+    import { Search } from "lucide-svelte";
+    import SidebarElements, {
+        type SideBarData,
+        type SideBarElement,
+        type SidebarElementsProps,
+    } from "./sidebarElements.svelte";
+
+    interface Props {
+        title: string;
+        data: SideBarData | null;
+        sidebarElementsProps?: Partial<SidebarElementsProps>;
+        showSearch?: boolean;
+        children: Snippet<[]>;
+        belowSearch?: Snippet;
+        elementRightSide?: Snippet<[SideBarElement]>;
+    }
+
+    let {
+        title,
+        data,
+        sidebarElementsProps,
+        showSearch = true,
+        children,
+        belowSearch,
+        elementRightSide,
+    }: Props = $props();
+
+    let visibleData = $derived(data ? [...data] : null);
+    const sidebarProperties: SidebarProperties = $state({
+        collapsed: false,
+    });
+    setContext("sidebarProperties", sidebarProperties);
+
+    $effect(() => {
+        if (mediaQueries.lg.current) {
+            sidebarProperties.collapsed = false;
+        } else {
+            sidebarProperties.collapsed = true;
+        }
+    });
+
+    let searchTerm = $state("");
+
+    const sidebarWidth = 275;
+    let sidebarContainerHeight = $state(0);
+    let sidebarContainerWidth = $state(0);
+    let sidebarHeaderHeight = $state(0);
+    let sidebarBodyHeight = $derived(
+        sidebarContainerHeight - sidebarHeaderHeight,
+    );
+
+    function handleSearch() {
+        if (data) {
+            visibleData = filterSidebarData(data, searchTerm.toLowerCase());
+        }
+    }
+
+    function filterSidebarData(items: SideBarData, term: string): SideBarData {
+        return items.filter((item) => item.name.includes(term));
+    }
+</script>
+
+<div
+    class="flex h-full transition-[grid-template-columns]"
+    style="
+		display: grid;
+		grid-template-columns: {sidebarProperties.collapsed ? 0 : sidebarWidth}px 1fr;
+	"
+    bind:clientHeight={sidebarContainerHeight}
+    bind:clientWidth={sidebarContainerWidth}
+>
+    <div
+        class="
+			bg-background border-r overflow-hidden
+		"
+        style="
+			{sidebarProperties.collapsed ? 'border-right-width: 0px; padding: 0px;' : ''}
+			height: {sidebarContainerHeight}px;
+		"
+    >
+        {#if visibleData !== null}
+            <div bind:clientHeight={sidebarHeaderHeight} class="p-2 pb-0!">
+                <div
+                    class="relative flex justify-between items-center p-2 font-medium"
+                >
+                    {title}
+                </div>
+                {#if showSearch}
+                    <div class="p-2">
+                        <div
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted/30 border rounded-md"
+                        >
+                            <input
+                                type="text"
+                                class="w-full bg-transparent text-sm focus:outline-none"
+                                oninput={handleSearch}
+                                bind:value={searchTerm}
+                                placeholder="Search"
+                            />
+                            <Search size="20" />
+                        </div>
+                    </div>
+                {/if}
+            </div>
+            <div
+                class="
+					text-primary p-2 overflow-y-auto overflow-x-clip
+				"
+                style="max-height: {sidebarBodyHeight}px;"
+            >
+                {@render belowSearch?.()}
+                {#key visibleData}
+                    <SidebarElements
+                        bind:data={visibleData}
+                        {elementRightSide}
+                        {...sidebarElementsProps}
+                    />
+                {/key}
+            </div>
+        {:else}
+            <div class="flex flex-col gap-2 p-2">
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+            </div>
+        {/if}
+    </div>
+    <div
+        class="overflow-auto h-full"
+        style="
+			max-height: {sidebarContainerHeight}px;
+		"
+    >
+        {@render children()}
+    </div>
+</div>

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

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+    export interface SideBarElement {
+        name: string;
+        onclick?: () => Promise<void> | void;
+        href?: string;
+        icon?: any;
+        path?: string;
+        meta?: Record<string, any>;
+    }
+
+    export type SideBarData = Array<SideBarElement>;
+
+    export interface SidebarElementsProps {
+        data: SideBarData;
+        path?: string[];
+        elementRightSide?: Snippet<[SideBarElement]>;
+    }
+</script>
+
+<script lang="ts">
+    import { Ban } from "lucide-svelte";
+    import type { Snippet } from "svelte";
+    import SidebarElements from "./sidebarElements.svelte";
+    import Button from "../ui/button/button.svelte";
+    import { location } from "@wjfe/n-savant";
+
+    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));
+
+    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]}
+                <button
+                    class="
+						flex items-center justify-between p-2 gap-2 text-muted-foreground
+						rounded-md cursor-default
+					"
+                >
+                    <div class="flex items-center gap-2">
+                        <div class="text-xs">
+                            {directoryName}
+                        </div>
+                    </div>
+                </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>
+                {/if}
+            {:else}
+                {@const elementPath = [...path, element]}
+                {@const isselected = location.url.pathname === element.href}
+                <Button
+                    onclick={() => handleElementClick(element)}
+                    href={element.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}
+                >
+                    <div class="flex items-center gap-2 truncate">
+                        {#if element.icon}
+                            <element.icon size="17.5" />
+                        {/if}
+                        <div
+                            class="
+								text-xs
+								{isselected ? 'text-primary font-medium' : ''}
+							"
+                        >
+                            {element.name}
+                        </div>
+                    </div>
+                    <div class="flex gap-2 items-center">
+                        {#if elementRightSide}
+                            {@render elementRightSide(element)}
+                        {/if}
+                    </div>
+                </Button>
+            {/if}
+        {/each}
+    {:else}
+        <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>
+    {/if}
+</div>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { SidebarProperties } from "./sidebar.svelte";
+    import { PanelLeftClose, PanelLeftOpen } from "lucide-svelte";
+    import { getContext } from "svelte";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+
+    interface Props {
+        class?: HTMLButtonAttributes["class"];
+    }
+
+    let { class: className }: Props = $props();
+
+    const sidebarProperties: SidebarProperties =
+        getContext("sidebarProperties");
+</script>
+
+{#if sidebarProperties.collapsed}
+    <PanelLeftOpen
+        class="text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground {className}"
+        size="18"
+        onclick={() => {
+            sidebarProperties.collapsed = !sidebarProperties.collapsed;
+        }}
+    />
+{:else}
+    <PanelLeftClose
+        class="text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground {className}"
+        size="18"
+        onclick={() => {
+            sidebarProperties.collapsed = !sidebarProperties.collapsed;
+        }}
+    />
+{/if}