@lobb-js/studio 0.7.1 → 0.7.3

package/src/lib/components/combobox.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import CheckIcon from "@lucide/svelte/icons/check";
+    import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+    import { tick } from "svelte";
+    import * as Command from "../components/ui/command/index.js";
+    import * as Popover from "../components/ui/popover/index.js";
+    import { Button } from "../components/ui/button/index.js";
+    import { cn } from "../utils.js";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+
+    interface Option {
+        value: string;
+        label: string;
+    }
+
+    interface Props {
+        placeholder: string;
+        searchPlaceholder: string;
+        options: Option[];
+        value: string;
+        buttonClass?: HTMLButtonAttributes["class"];
+    }
+
+    let {
+        placeholder,
+        searchPlaceholder,
+        options,
+        value = $bindable(),
+        buttonClass,
+    }: Props = $props();
+
+    let open = $state(false);
+    let triggerRef = $state<HTMLButtonElement>(null!);
+
+    const selectedValue = $derived(
+        options.find((option) => option.value === value)?.label,
+    );
+
+    // We want to refocus the trigger button when the user selects
+    // an item from the list so users can continue navigating the
+    // rest of the form with the keyboard.
+    function closeAndFocusTrigger() {
+        open = false;
+        tick().then(() => {
+            triggerRef.focus();
+        });
+    }
+</script>
+
+<Popover.Root bind:open>
+    <Popover.Trigger bind:ref={triggerRef}>
+        {#snippet child({ props })}
+            <Button
+                variant="outline"
+                class="w-full justify-between {buttonClass}"
+                {...props}
+                role="combobox"
+                aria-expanded={open}
+            >
+                {selectedValue || placeholder}
+                <ChevronsUpDownIcon class="opacity-50" />
+            </Button>
+        {/snippet}
+    </Popover.Trigger>
+    <Popover.Content class="w-[320px] p-0" align="start">
+        <Command.Root>
+            <Command.Input placeholder={searchPlaceholder} />
+            <Command.List>
+                <Command.Empty>No result found.</Command.Empty>
+                <Command.Group value="frameworks">
+                    {#each options as option (option.value)}
+                        <Command.Item
+                            value={option.value}
+                            onSelect={() => {
+                                value = option.value;
+                                closeAndFocusTrigger();
+                            }}
+                        >
+                            <CheckIcon
+                                class={cn(
+                                    value !== option.value &&
+                                        "text-transparent",
+                                )}
+                            />
+                            {option.label}
+                        </Command.Item>
+                    {/each}
+                </Command.Group>
+            </Command.List>
+        </Command.Root>
+    </Popover.Content>
+</Popover.Root>

package/src/lib/components/confirmationDialog/confirmationDialog.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import * as AlertDialog from "../../components/ui/alert-dialog/index";
+	import { Check, X } from "lucide-svelte";
+	import Button from "../ui/button/button.svelte";
+
+	interface DialogProps {
+		title: string;
+		description: string;
+		onDecision: (result: boolean) => void;
+	}
+
+	const { title, description, onDecision }: DialogProps = $props();
+
+</script>
+
+<AlertDialog.Root open={true}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{title}</AlertDialog.Title>
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<Button variant="outline" Icon={X} onclick={() => onDecision(false)}>
+				Cancel
+			</Button>
+			<Button Icon={Check} onclick={() => onDecision(true)}>
+				Continue
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/src/lib/components/confirmationDialog/store.svelte.ts

@@ -0,0 +1,28 @@
+import { mount, unmount } from "svelte";
+import ConfirmationDialog from "./confirmationDialog.svelte";
+
+export function showDialog(title: string, description: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        const targetElement = document.querySelector('main');
+
+        if (!targetElement) {
+            throw new Error("main html element doesn't exist for some reason");
+        }
+
+        const mountedElement = mount(ConfirmationDialog, {
+            target: targetElement,
+            props: {
+                title,
+                description,
+                onDecision: async (result: boolean) => {
+                    resolve(result);
+                    await unmount(mountedElement, {
+                        outro: true
+                    });
+                }
+            },
+        });
+
+        console.log("the dialog is mounted man")
+    });
+}

package/src/lib/components/createManyButton.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { fade, fly } from "svelte/transition";
+	import { ArrowLeft, Plus, X } from "lucide-svelte";
+	import Button, { type ButtonProps } from "./ui/button/button.svelte";
+	import { toast } from "svelte-sonner";
+	import CodeEditor from "./codeEditor.svelte";
+	import { getStudioContext } from "../context";
+	import { calculateDrawerWidth } from "../utils";
+
+	const { lobb } = getStudioContext();
+  import Drawer from "./drawer.svelte";
+
+	interface LocalProps extends ButtonProps {
+		collectionName: string;
+		onSuccessfullSave?: () => Promise<void>;
+	}
+
+	let { collectionName, onSuccessfullSave, ...rest }: LocalProps = $props();
+
+	let openDrawer = $state(false);
+	let createManyPayload = $state("");
+
+	async function handleCreateMany() {
+		const res = await lobb.createMany(
+			collectionName,
+			JSON.parse(createManyPayload),
+		);
+		if (res.status >= 400) {
+			return;
+		}
+		if (onSuccessfullSave) {
+			await onSuccessfullSave();
+		}
+		hideDrawer();
+	}
+
+	function showDrawer() {
+		if (!collectionName) {
+			toast.error("No collection is selected");
+			return;
+		}
+		openDrawer = true;
+	}
+
+	function hideDrawer() {
+		openDrawer = false;
+		createManyPayload = "";
+	}
+</script>
+
+<!-- THE SELECT BUTTON -->
+<Button
+	variant={rest.variant}
+	class={rest.class}
+	Icon={rest.Icon}
+	onclick={showDrawer}
+>
+	{#if rest.children}
+		{@render rest.children()}
+	{/if}
+</Button>
+
+<!-- THE SELECT DRAWER -->
+{#if openDrawer}
+	<Drawer onHide={async () => hideDrawer()}>
+		<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">Create Many On</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">
+			<CodeEditor
+				name={collectionName}
+				type="json"
+				bind:value={createManyPayload}
+				class="h-full border-0"
+			/>
+		</div>
+		<div class="flex h-12 items-center justify-end gap-2 border-t px-4">
+			<div class="flex gap-3">
+				<Button
+					variant="outline"
+					onclick={() => hideDrawer()}
+					class="h-7 px-3 text-xs font-normal"
+					Icon={X}
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="default"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={Plus}
+					onclick={handleCreateMany}
+				>
+					Create Many
+				</Button>
+			</div>
+		</div>
+	</Drawer>
+{/if}

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

@@ -0,0 +1,142 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+    import { ChevronRight, Plus, Smartphone, Table } 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 relations = ctx.meta.relations.filter(
+        (relation) => relation.to.collection === collectionName,
+    );
+    let expandedRows: boolean[] = $state(
+        new Array(relations.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 relations as relation, index}
+            {@const lastRow = relations.length - 1 === index}
+            {@const fromCollection = relation.from.collection}
+            {@const fromField = relation.from.field}
+            <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">
+                            {relation.from.collection}
+                        </div>
+                    </button>
+                    <div class="flex items-center px-2">
+                        <CreateDetailViewButton
+                            collectionName={relation.from.collection}
+                            variant="ghost"
+                            class="h-7 px-3 text-xs font-normal"
+                            Icon={Plus}
+                            values={{
+                                [fromField]: {
+                                    id: recordId,
+                                },
+                            }}
+                            onSuccessfullSave={async () => {
+                                refreshDataTable = !refreshDataTable;
+                            }}
+                        >
+                            Create
+                        </CreateDetailViewButton>
+                    </div>
+                </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.{fromCollection}"
+                                    collectionName={fromCollection}
+                                    filter={{
+                                        [fromField]: recordId,
+                                    }}
+                                    utils={getExtensionUtils(lobb, ctx)}
+                                >
+                                    <DataTable
+                                        collectionName={fromCollection}
+                                        filter={{
+                                            [fromField]: recordId,
+                                        }}
+                                        showHeader={false}
+                                        showFooter={false}
+                                        showDelete={true}
+                                        {unifiedBgColor}
+                                        tableProps={{
+                                            showLastRowBorder: false,
+                                            showLastColumnBorder: false,
+                                            showCheckboxes: false,
+                                        }}
+                                    />
+                                </ExtensionsComponents>
+                            {/key}
+                        </div>
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+    import _ from "lodash";
+    import { getStudioContext } from "../../context";
+    import Footer from "./footer.svelte";
+    import Header from "./header.svelte";
+    import Table, { type TableProps } from "./table.svelte";
+    import { getCollectionColumns, getCollectionParamsFields } from "./utils";
+    import { Pencil, Trash } from "lucide-svelte";
+    import * as icons from "lucide-svelte";
+    import ChildRecords from "./childRecords.svelte";
+    import FieldCell from "./fieldCell.svelte";
+    import Skeleton from "../ui/skeleton/skeleton.svelte";
+    import Button from "../ui/button/button.svelte";
+    import { showDialog } from "../confirmationDialog/store.svelte";
+    import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
+    import { emitEvent } from "../../eventSystem";
+    import type { Snippet } from "svelte";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        filter?: any;
+        showHeader?: boolean;
+        showFooter?: boolean;
+        unifiedBgColor?: "bg-muted/30" | "bg-background";
+        showDelete?: boolean;
+        tableProps?: Partial<TableProps>;
+        headerLeft?: Snippet<[]>;
+    }
+
+    let {
+        collectionName,
+        filter,
+        showHeader = true,
+        showFooter = true,
+        unifiedBgColor,
+        showDelete = false,
+        tableProps,
+        headerLeft,
+    }: Props = $props();
+
+    const fields = getCollectionParamsFields(ctx, collectionName);
+    let params = $state({
+        fields: fields,
+        filter: filter ?? {},
+        sort: {},
+        limit: "100",
+        page: 1,
+    });
+
+    let selectedRecords = $state([]);
+    let totalCount = $state(0);
+    let data: TableProps["data"] = $state([]);
+    let loading = $state(true);
+    const columns: TableProps["columns"] = $state(
+        getCollectionColumns(ctx, collectionName),
+    );
+    let dataTableContainerWidth: number = $state(0);
+    let dataTableWidth: number = $state(0);
+    const doesCollectionHasChildren = Boolean(
+        ctx.meta.relations.find(
+            (relation) => relation.to.collection === collectionName,
+        ),
+    );
+
+    // requests the data from the server when the params is changed
+    $effect(() => {
+        loadData(params);
+    });
+
+    async function loadData(params: any) {
+        // parsing sort before sending the request
+        const paramsCopy = $state.snapshot(params);
+        const sort: TableProps["sort"] = paramsCopy.sort;
+        const sortStrings: string[] = [];
+        if (sort) {
+            for (const [key, value] of Object.entries(sort)) {
+                sortStrings.push(`${value === "asc" ? "" : "-"}${key}`);
+            }
+        }
+        paramsCopy.sort = sortStrings.join(",");
+
+        // sending the request
+        const response = await lobb.findAll(collectionName, paramsCopy);
+        const res = await response.json();
+
+        data = res.data;
+        totalCount = res.meta.totalCount;
+
+        loading = false;
+    }
+
+    async function handleDelete(entryId: string) {
+        const result = await showDialog(
+            "Are you sure?",
+            "This will delete the record you selected.",
+        );
+        if (result) {
+            await lobb.deleteOne(collectionName, entryId);
+            params = { ...params };
+        }
+    }
+
+    async function getWorkflowTools(
+        entry: Record<string, any>,
+    ): Promise<any[]> {
+        // TODO: instead of firing the events like this. get them all the fire them one by one to get their results
+        const eventResult = await emitEvent(
+            { lobb, ctx },
+            "studio.collections.listView.tools",
+            {
+                collectionName,
+                entry,
+            },
+        );
+
+        if (eventResult) {
+            return eventResult.tools;
+        }
+
+        return [];
+    }
+</script>
+
+<div
+    bind:clientWidth={dataTableContainerWidth}
+    class="
+        flex flex-col overflow-auto h-full w-full
+        {unifiedBgColor ? unifiedBgColor : ''}
+    "
+>
+    {#if showHeader}
+        <Header bind:params {collectionName} bind:selectedRecords>
+            {#snippet left()}
+                {@render headerLeft?.()}
+            {/snippet}
+        </Header>
+    {/if}
+    <div class="relative flex-1 overflow-auto w-full">
+        {#if loading}
+            <div class="flex flex-col gap-2 p-2 w-full">
+                <Skeleton class="h-8 w-full" />
+                <Skeleton class="h-8 w-[80%]" />
+                <Skeleton class="h-8 w-[60%]" />
+            </div>
+        {:else}
+            <Table
+                {data}
+                {columns}
+                showCollapsible={doesCollectionHasChildren}
+                selectByColumn="id"
+                showLastRowBorder={true}
+                showLastColumnBorder={true}
+                bind:sort={params.sort}
+                bind:selectedRecords
+                {unifiedBgColor}
+                bind:tableWidth={dataTableWidth}
+                {...tableProps}
+            >
+                {#snippet tools(entry)}
+                    <UpdateDetailViewButton
+                        {collectionName}
+                        recordId={entry.id}
+                        variant="ghost"
+                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                        Icon={Pencil}
+                        onSuccessfullSave={async () => {
+                            params = { ...params };
+                        }}
+                    ></UpdateDetailViewButton>
+                    {#if showDelete}
+                        <Button
+                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                            variant="ghost"
+                            size="icon"
+                            onclick={() => handleDelete(entry.id)}
+                            Icon={Trash}
+                        ></Button>
+                    {/if}
+                    {#await getWorkflowTools($state.snapshot(entry))}
+                        <div></div>
+                    {:then workflowTools}
+                        {#each workflowTools as workflowTool}
+                            <Button
+                                variant="ghost"
+                                class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                Icon={icons[
+                                    workflowTool.icon as keyof typeof icons
+                                ]}
+                                onclick={workflowTool.onclick}
+                            ></Button>
+                        {/each}
+                    {/await}
+                {/snippet}
+                {#snippet overrideCell(value, column, entry)}
+                    <FieldCell
+                        {collectionName}
+                        fieldName={column.id}
+                        {value}
+                        {entry}
+                        tableParams={params}
+                    />
+                {/snippet}
+                {#snippet collapsible(entry)}
+                    <ChildRecords
+                        {collectionName}
+                        recordId={entry.id}
+                        width={dataTableWidth > dataTableContainerWidth
+                            ? dataTableContainerWidth
+                            : dataTableWidth}
+                        unifiedBgColor={unifiedBgColor ?? "bg-background"}
+                    />
+                {/snippet}
+            </Table>
+        {/if}
+    </div>
+    {#if showFooter}
+        <Footer
+            bind:currentPage={params.page}
+            bind:limit={params.limit}
+            {totalCount}
+        />
+    {/if}
+</div>