@lobb-js/studio 0.7.2 → 0.8.0

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { getFieldRelation } from "../../utils";
+    import { ExternalLink } from "lucide-svelte";
+    import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
+    import { getField } from "./utils";
+    import _ from "lodash";
+    import { getStudioContext } from "../../context";
+
+    const { ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        fieldName: string;
+        value: any;
+        entry: Record<string, any>;
+        tableParams?: any;
+    }
+
+    let {
+        collectionName,
+        fieldName,
+        value,
+        entry,
+        tableParams = $bindable(),
+    }: Props = $props();
+
+    const field = getField(ctx, fieldName, collectionName);
+    const relation = getFieldRelation(ctx, collectionName, fieldName);
+    const isRefrenceField = Boolean(
+        getFieldRelation(ctx, collectionName, fieldName),
+    );
+</script>
+
+{#if value === ""}
+    <div class="text-muted-foreground">EMPTY STRING</div>
+{:else if value === null || value === undefined}
+    <div class="text-muted-foreground">NULL</div>
+{:else if isRefrenceField}
+    {#if value.id !== 0}
+        {@const primaryField = Object.values(value)[1]}
+        {#if value.id}
+            <div class="flex items-center gap-2">
+                <div>{value.id}</div>
+                {#if primaryField}
+                    <div class="border bg-muted px-3 py-1 rounded-full">
+                        {primaryField}
+                    </div>
+                {/if}
+                <UpdateDetailViewButton
+                    collectionName={relation.to.collection}
+                    recordId={value.id}
+                    variant="ghost"
+                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                    Icon={ExternalLink}
+                    onSuccessfullSave={async () => {
+                        tableParams = { ...tableParams };
+                    }}
+                ></UpdateDetailViewButton>
+            </div>
+        {:else}
+            <div class="text-muted-foreground">NULL</div>
+        {/if}
+    {:else}
+        <div class="text-muted-foreground">PARENT ID</div>
+    {/if}
+{:else if field.type === "datetime"}
+    {@const date = new Date(value).toLocaleDateString()}
+    {@const time = new Date(value).toLocaleTimeString()}
+    <div>{date}, {time}</div>
+{:else if field.type === "date"}
+    {@const date = new Date(value).toLocaleDateString()}
+    <div>{date}</div>
+{:else if field.type === "time"}
+    <div>{value}</div>
+{:else}
+    {value}
+{/if}

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

@@ -0,0 +1,284 @@
+<script lang="ts">
+    import * as Popover from "../../components/ui/popover/index.js";
+    import Filter from "./filter.svelte";
+    import {
+        Plus,
+        Boxes,
+        CircleOff,
+        ListFilter,
+        Diamond,
+        Trash,
+    } from "lucide-svelte";
+    import { buttonVariants } from "../ui/button";
+    import _ from "lodash";
+    import { getStudioContext } from "../../context";
+    import Button from "../ui/button/button.svelte";
+
+    const { ctx } = getStudioContext();
+
+    interface Props {
+        filter: any;
+        collectionName: string;
+        isFirst?: boolean;
+        deleteFilter?: () => void;
+    }
+
+    let {
+        filter = $bindable({}),
+        collectionName,
+        isFirst = false,
+        deleteFilter,
+    }: Props = $props();
+
+    let firstPopover = $state(false);
+    let secondPopover = $state(false);
+
+    $effect.pre(() => {
+        // convert direct values to { $eq: (value) }
+        for (let index = 0; index < Object.keys(filter).length; index++) {
+            const key = Object.keys(filter)[index];
+            const value = filter[key];
+            if (key !== "$and" && key !== "$or") {
+                if (!_.isPlainObject(value)) {
+                    filter[key] = {
+                        $eq: value,
+                    };
+                }
+            }
+        }
+    });
+
+    function groupAddingHandler(filter: any, key: string) {
+        if (key === "$and" || key === "$or") {
+            filter[key] = [];
+        } else {
+            filter[key] = {};
+        }
+    }
+
+    function getGroupOptions(filter: any) {
+        const collectionFieldNames = Object.keys(
+            ctx.meta.collections[collectionName].fields,
+        );
+        const options = ["$and", "$or", ...collectionFieldNames];
+        const existingPropertiesNames = Object.keys(filter);
+        const filteredOptions = _.difference(options, existingPropertiesNames);
+        return filteredOptions;
+    }
+
+    function getOperatorOptions(filter: any) {
+        const operators = ctx.meta.filter.operators;
+        const existingPropertiesNames = Object.keys(filter);
+        const filteredOptions = _.difference(
+            operators,
+            existingPropertiesNames,
+        );
+        return filteredOptions;
+    }
+
+    function operatorAddingHandler(filter: any, key: string) {
+        filter[key] = "";
+    }
+</script>
+
+{#snippet filterAddButton(filter: any)}
+    <Popover.Root bind:open={firstPopover}>
+        <Popover.Trigger
+            class={buttonVariants({
+                variant: "ghost",
+                class: "h-7 px-2 text-xs font-normal text-muted-foreground",
+            })}
+        >
+            <Plus />
+        </Popover.Trigger>
+        <Popover.Content class="flex w-48 flex-col p-2 max-h-60 overflow-auto">
+            {#each getGroupOptions(filter) as fieldName}
+                <button
+                    onclick={() => {
+                        groupAddingHandler(filter, fieldName);
+                        firstPopover = false;
+                    }}
+                    class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                    <div>{fieldName}</div>
+                </button>
+            {/each}
+        </Popover.Content>
+    </Popover.Root>
+{/snippet}
+
+<div class="flex flex-col rounded-md {isFirst ? '' : 'border'}">
+    <div class="flex justify-between items-center gap-2 border-b p-2 h-10">
+        <div class="flex text-xs font-semibold text-muted-foreground gap-2">
+            <ListFilter size="17.5" />
+            <div>Filter</div>
+        </div>
+        <div>
+            {@render filterAddButton(filter)}
+            {#if deleteFilter}
+                <Button
+                    class="text-muted-foreground px-2 h-7"
+                    variant="ghost"
+                    size="icon"
+                    Icon={Trash}
+                    onclick={deleteFilter}
+                ></Button>
+            {/if}
+        </div>
+    </div>
+    <div
+        class="flex flex-col gap-2 p-2 {isFirst
+            ? 'max-h-100 overflow-auto'
+            : ''}"
+    >
+        {#if Object.entries(filter).length}
+            {#each Object.entries(filter) as [key, value]}
+                {@const collectionFields =
+                    ctx.meta.collections[collectionName].fields}
+                {#if key === "$and" || key === "$or"}
+                    <div class="flex flex-col rounded-md border">
+                        <div
+                            class="flex justify-between items-center gap-2 text-xs font-semibold text-muted-foreground p-2 border-b h-10"
+                        >
+                            <div class="flex gap-2">
+                                <Boxes size="17.5" />
+                                {key === "$and" ? "AND" : "OR"}
+                            </div>
+                            <div>
+                                <Button
+                                    class="text-muted-foreground px-2 h-7"
+                                    variant="ghost"
+                                    size="icon"
+                                    Icon={Plus}
+                                    onclick={() =>
+                                        (filter[key] = [...filter[key], {}])}
+                                ></Button>
+                                <Button
+                                    class="text-muted-foreground px-2 h-7"
+                                    variant="ghost"
+                                    size="icon"
+                                    Icon={Trash}
+                                    onclick={() => {
+                                        delete filter[key];
+                                    }}
+                                ></Button>
+                            </div>
+                        </div>
+                        {#if Object.keys(filter[key]).length}
+                            <div class="flex flex-col gap-2 p-2">
+                                {#each filter[key] as _, index}
+                                    <Filter
+                                        bind:filter={filter[key][index]}
+                                        {collectionName}
+                                        deleteFilter={() => {
+                                            filter[key].splice(index, 1);
+                                        }}
+                                    />
+                                {/each}
+                            </div>
+                        {:else}
+                            <div
+                                class="flex justify-center gap-2 text-xs text-muted-foreground text-center p-4"
+                            >
+                                <CircleOff size="17.5" />
+                                No rules defined
+                            </div>
+                        {/if}
+                    </div>
+                {:else}
+                    <div class="flex flex-col gap-2 rounded-md border">
+                        <div
+                            class="flex gap-2 justify-between items-center text-xs font-semibold text-muted-foreground p-2 border-b h-10"
+                        >
+                            <div class="flex gap-2">
+                                <Diamond size="17.5" />
+                                {key}
+                            </div>
+                            <div>
+                                <Popover.Root bind:open={secondPopover}>
+                                    <Popover.Trigger
+                                        class={buttonVariants({
+                                            variant: "ghost",
+                                            class: "h-7 px-2 text-xs font-normal",
+                                        })}
+                                    >
+                                        <Plus />
+                                    </Popover.Trigger>
+                                    <Popover.Content
+                                        class="flex w-48 flex-col p-2 max-h-60 overflow-auto"
+                                    >
+                                        {#each getOperatorOptions(filter[key]) as fieldName}
+                                            <button
+                                                onclick={() => {
+                                                    operatorAddingHandler(
+                                                        filter[key],
+                                                        fieldName,
+                                                    );
+                                                    secondPopover = false;
+                                                }}
+                                                class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+                                            >
+                                                <div>{fieldName}</div>
+                                            </button>
+                                        {/each}
+                                    </Popover.Content>
+                                </Popover.Root>
+                                <Button
+                                    class="text-muted-foreground px-2 h-7"
+                                    variant="ghost"
+                                    size="icon"
+                                    Icon={Trash}
+                                    onclick={() => {
+                                        delete filter[key];
+                                    }}
+                                ></Button>
+                            </div>
+                        </div>
+                        {#if Object.entries(value as any).length}
+                            <div
+                                class="gap-2 p-2"
+                                style="display: grid; grid-template-columns: auto 1fr auto;"
+                            >
+                                {#each Object.entries(value as any) as [ruleKey, ruleValue]}
+                                    <div
+                                        class="rounded-md bg-muted border text-xs text-muted-foreground py-1 px-2"
+                                    >
+                                        {ruleKey}
+                                    </div>
+                                    <input
+                                        class="w-full rounded-md bg-muted border text-xs text-muted-foreground py-1 px-2"
+                                        type="text"
+                                        bind:value={filter[key][ruleKey]}
+                                    />
+                                    <Button
+                                        class="text-muted-foreground px-2 h-7"
+                                        variant="ghost"
+                                        size="icon"
+                                        Icon={Trash}
+                                        onclick={() => {
+                                            delete filter[key][ruleKey];
+                                        }}
+                                    ></Button>
+                                {/each}
+                            </div>
+                        {:else}
+                            <div
+                                class="flex justify-center gap-2 text-xs text-muted-foreground text-center rounded-md p-2"
+                            >
+                                <CircleOff size="17.5" />
+                                No rules defined
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+            {/each}
+        {:else}
+            <div
+                class="flex justify-center gap-2 text-xs text-muted-foreground text-center rounded-md p-2"
+            >
+                <CircleOff size="17.5" />
+                No rules defined
+            </div>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Popover from "../../components/ui/popover/index.js";
+	import { ListFilter } from "lucide-svelte";
+	import { buttonVariants } from "../ui/button";
+	import Filter from "./filter.svelte";
+
+	interface Props {
+		filter: any;
+		collectionName: string;
+		showText?: boolean;
+	}
+
+	let {
+		filter = $bindable({}),
+		showText = true,
+		collectionName,
+	}: Props = $props();
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={buttonVariants({
+			variant: "ghost",
+			class: "h-7 px-3 text-xs font-normal",
+		})}
+	>
+		<ListFilter />
+		{#if showText}
+			{#if Object.keys(filter).length}
+				Filtered by {Object.keys(filter).length} rules
+			{:else}
+				Filter
+			{/if}
+		{/if}
+	</Popover.Trigger>
+	<Popover.Content class="w-screen max-w-100 p-0">
+		<Filter bind:filter {collectionName} isFirst={true} />
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { ArrowLeft, ArrowRight } from "lucide-svelte";
+    import Button from "../ui/button/button.svelte";
+    import Input from "../ui/input/input.svelte";
+    import * as Select from "../ui/select";
+
+    interface Props {
+        limit: string;
+        totalCount: number;
+        currentPage: number;
+    }
+
+    let {
+        limit = $bindable("100"),
+        currentPage = $bindable(1),
+        totalCount,
+    }: Props = $props();
+
+    let pageCount: number = $derived(Math.ceil(totalCount / Number(limit)));
+    let footerWidth: number = $state(0);
+    let footerIsSmall: boolean = $derived(footerWidth < 560);
+
+    function gotoPage(pageNumber: number) {
+        currentPage = pageNumber;
+    }
+</script>
+
+<div
+    bind:clientWidth={footerWidth}
+    class="flex justify-between box-content border-t bg-background px-2 h-10"
+>
+    <div class="flex items-center gap-2">
+        <Button
+            disabled={Number(currentPage) <= 1}
+            onclick={() => gotoPage(currentPage - 1)}
+            variant="outline"
+            class="h-7 w-7 p-0"
+            Icon={ArrowLeft}
+        ></Button>
+        {#if !footerIsSmall}
+            <div class="text-xs text-muted-foreground">Page</div>
+        {/if}
+        <Input bind:value={currentPage} class="h-7 w-14 bg-muted" />
+        <div class="text-xs text-muted-foreground">
+            {footerIsSmall ? "/" : "of"}
+            {pageCount}
+        </div>
+        <Button
+            disabled={Number(currentPage) >= pageCount}
+            onclick={() => gotoPage(currentPage + 1)}
+            variant="outline"
+            class="h-7 w-7 p-0"
+            Icon={ArrowRight}
+        ></Button>
+    </div>
+    <div class="flex h-10 items-center gap-2">
+        <Select.Root type="single" name="limit" bind:value={limit}>
+            <Select.Trigger class="h-7 {footerIsSmall ? 'w-20' : 'w-28'}"
+                >{limit}
+                {footerIsSmall ? "" : "rows"}</Select.Trigger
+            >
+            <Select.Content>
+                <Select.Group>
+                    <Select.Item
+                        value="100"
+                        label="100 {footerIsSmall ? '' : 'rows'}"
+                    />
+                    <Select.Item
+                        value="500"
+                        label="500 {footerIsSmall ? '' : 'rows'}"
+                    />
+                    <Select.Item
+                        value="1000"
+                        label="1000 {footerIsSmall ? '' : 'rows'}"
+                    />
+                </Select.Group>
+            </Select.Content>
+        </Select.Root>
+        <div class="text-xs text-muted-foreground">
+            {totalCount}
+            {footerIsSmall ? "" : "records"}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
+    import { ListRestart, Plus, SquareStack, Trash } from "lucide-svelte";
+    import LlmButton from "../LlmButton.svelte";
+    import FilterButton from "./filterButton.svelte";
+    import SortButton from "./sortButton.svelte";
+    import Button from "../ui/button/button.svelte";
+    import CreateManyButton from "../createManyButton.svelte";
+    import { showDialog } from "../confirmationDialog/store.svelte";
+    import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        collectionName: string;
+        params: any;
+        selectedRecords: string[];
+        left?: Snippet<[]>;
+    }
+
+    let {
+        collectionName,
+        params = $bindable(),
+        selectedRecords = $bindable(),
+        left
+    }: Props = $props();
+
+    let headerWidth: number = $state(0);
+    let headerIsSmall: boolean = $derived(headerWidth < 560);
+
+    async function handleDeleteButton() {
+        const result = await showDialog(
+            "Are you sure?",
+            "This will delete all the records you selected.",
+        );
+        if (result) {
+            const res = await lobb.deleteMany(collectionName, {
+                id: {
+                    $in: selectedRecords,
+                },
+            });
+            if (res.status >= 400) {
+                const json = await res.json();
+                if (json.message === 'Record has children and cannot be deleted') {
+                    const result = await showDialog(
+                        "Delete record and all its children?",
+                        "This record has related child entries. Deleting it will also remove all its children permanently. This action cannot be undone."
+                    );
+                    if (result) {
+                        await lobb.deleteMany(
+                            collectionName,
+                            {
+                                id: {
+                                    $in: selectedRecords,
+                                },
+                            },
+                            true,
+                        );
+                        resetTable();
+                    }
+                }
+                return;
+            }
+            resetTable();
+        }
+    }
+    
+    function resetTable() {
+        params = { ...params };
+        selectedRecords = [];
+    }
+</script>
+
+<div
+    class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10"
+    bind:clientWidth={headerWidth}
+>
+    <div class="flex items-center gap-1">
+        {@render left?.()}
+        {#if selectedRecords.length}
+            <Button
+                Icon={Trash}
+                onclick={handleDeleteButton}
+                variant="outline"
+                class="h-7 px-3 text-xs font-normal"
+            >
+                Delete {selectedRecords.length}
+                {selectedRecords.length > 1 ? "records" : "record"}
+            </Button>
+        {:else}
+            <FilterButton
+                bind:filter={params.filter}
+                showText={!headerIsSmall}
+                {collectionName}
+            />
+            <SortButton
+                {collectionName}
+                bind:sort={params.sort}
+                showText={!headerIsSmall}
+            />
+            <LlmButton
+                variant="outline"
+                title="Filter table with AI"
+                description="Tell the AI how do you want to filter the table"
+                class="h-7 px-3 text-xs font-normal"
+                format={{
+                    type: "json_object",
+                }}
+                messages={[
+                    {
+                        role: "system",
+                        content: [
+                            "You will receive natural language queries from a user describing how they want to filter a table list view.",
+                            "Your task is to generate a filter object based on the user's prompt.",
+                            `This is the schema of the filter json: ${JSON.stringify(ctx.meta.filter.filter_schema)}`,
+                            `This is the schema of the current collection: ${JSON.stringify(ctx.meta.collections[collectionName])}`,
+                        ].join(" "),
+                    },
+                ]}
+                onApiResponseComplete={async (res) => {
+                    params.filter = JSON.parse(res);
+                }}
+            >
+                {headerIsSmall ? "" : "Filter with AI"}
+            </LlmButton>
+        {/if}
+    </div>
+    <div>
+        <Button
+            variant="ghost"
+            class="h-7 px-2 font-normal text-muted-foreground"
+            Icon={ListRestart}
+            onclick={() => (params = { ...params })}
+        >
+            {headerIsSmall ? "" : "Refresh"}
+        </Button>
+        <CreateManyButton
+            {collectionName}
+            variant="outline"
+            class="h-7 px-2 text-xs font-normal"
+            Icon={SquareStack}
+            onSuccessfullSave={() => (params = { ...params })}
+        ></CreateManyButton>
+        <CreateDetailViewButton
+            {collectionName}
+            variant="default"
+            class="h-7 px-3 text-xs font-normal"
+            Icon={Plus}
+            onSuccessfullSave={() => (params = { ...params })}
+        >
+            {headerIsSmall ? "" : "Create"}
+        </CreateDetailViewButton>
+    </div>
+</div>