@lobb-js/studio 0.1.31

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { ctx } from "$lib/store.svelte";
+    import { Link } from "lucide-svelte";
+    import CreateManyView from "./createManyView.svelte";
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../../extensions/extensionUtils";
+
+    interface LocalProp {
+        collectionName: string;
+        entry: any;
+        values?: Record<string, any>;
+    }
+
+    let { collectionName, entry = $bindable(), values = {} }: LocalProp = $props();
+
+    const childrenRelations = ctx.meta.relations.filter(
+        (relation) => relation.to.collection === collectionName,
+    );
+
+    // filling the children properties
+    for (let index = 0; index < childrenRelations.length; index++) {
+        const relation = childrenRelations[index];
+        const childCollection = relation.from.collection;
+        entry[childCollection] = [];
+        if (values[childCollection]) {
+            entry[childCollection] = [
+                ...entry[childCollection],
+                ...values[childCollection],
+            ];
+        }
+    }
+</script>
+
+{#if childrenRelations.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 childrenRelations as relation}
+                {@const childCollection = relation.from.collection}
+                <ExtensionsComponents
+                    name="detailView.create.subRecords.{childCollection}"
+                    utils={getExtensionUtils()}
+                    parentCollectionName={collectionName}
+                    collectionName={childCollection}
+                    parentRecord={{
+                        id: entry.id,
+                        collectionName: collectionName,
+                    }}
+                    class="bg-soft border rounded-md overflow-hidden"
+                    bind:value={entry[childCollection]}
+                >
+                    <CreateManyView
+                        parentCollectionName={collectionName}
+                        collectionName={childCollection}
+                        parentRecord={{
+                            id: entry.id,
+                            collectionName: collectionName,
+                        }}
+                        bind:entries={entry[childCollection]}
+                    />
+                </ExtensionsComponents>
+            {/each}
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,226 @@
+<script lang="ts" module>
+    interface SubmitButton {
+        text: string;
+        icon: any;
+    }
+
+    export interface CreateDetailViewProp {
+        collectionName: string;
+        values?: Record<string, any>;
+        showRelatedRecords?: boolean;
+        rollback?: boolean;
+        submitButton?: SubmitButton;
+        title?: Snippet<[string]>;
+        onSuccessfullSave?: (entry: any) => Promise<void>;
+        onCancel?: () => Promise<void>;
+    }
+</script>
+
+<script lang="ts">
+    import { ArrowLeft, Plus, X } from "lucide-svelte";
+    import Button from "$lib/components/ui/button/button.svelte";
+    import { lobb } from "$lib";
+    import { toast } from "svelte-sonner";
+    import { ctx } from "$lib/store.svelte";
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../../extensions/extensionUtils";
+    import { getField, getFieldIcon } from "../../dataTable/utils";
+    import Children from "./children.svelte";
+    import {
+        generateTransactionBody,
+        getDefaultEntry,
+        parseDetailViewValues,
+        serializeEntry,
+    } from "../utils";
+    import type { Snippet } from "svelte";
+    import FieldInput from "../fieldInput.svelte";
+    import { emitEvent } from "$lib/eventSystem";
+    import Drawer from "$lib/components/drawer.svelte";
+
+    let {
+        collectionName,
+        values = {},
+        showRelatedRecords = true,
+        rollback = false,
+        onCancel,
+        onSuccessfullSave,
+        title,
+        submitButton,
+    }: CreateDetailViewProp = $props();
+
+    parseDetailViewValues(collectionName, values)
+
+    const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+    let entry: Record<string, any> = $state(
+        getDefaultEntry(fieldNames, collectionName, values),
+    );
+    let fieldsErrors: Record<string, any> = $state({});
+    const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
+    const subCollectionsValues: Record<string, any> = {};
+    for (let index = 0; index < subCollections.length; index++) {
+        const subCollection = subCollections[index];
+        if (values[subCollection]) {
+            subCollectionsValues[subCollection] = values[subCollection];
+        }
+    }
+
+    async function handleSave() {
+        let localEntry = $state.snapshot(entry);
+
+        await emitEvent("studio.collections.preCreate", {
+            collectionName,
+            entry: localEntry,
+        });
+
+        // remove empty children records data
+        for (const [key, value] of Object.entries(localEntry)) {
+            if (Array.isArray(value) && !value.length) {
+                delete localEntry[key];
+            }
+        }
+
+        const serializedEntry = serializeEntry(
+            collectionName,
+            localEntry,
+            rollback,
+        );
+
+        let transactionBody;
+        if (rollback) {
+            transactionBody = [
+                {
+                    collection: collectionName,
+                    method: "createOne",
+                    args: [serializedEntry],
+                },
+            ];
+        } else {
+            transactionBody = generateTransactionBody(
+                collectionName,
+                serializedEntry,
+            );
+        }
+
+        // create the record
+        let response = await lobb.transactions(transactionBody, rollback);
+
+        await emitEvent("studio.collections.create", {
+            collectionName,
+            entry: localEntry,
+            response: response,
+        });
+
+        if (!response.bodyUsed) {
+            let result = await response.json();
+            if (response.status >= 400) {
+                if (result.message && result.details) {
+                    fieldsErrors = result.details;
+                    return;
+                } else if (result.message) {
+                    return;
+                }
+            }
+        }
+
+        // close detailView side bar
+        if (onSuccessfullSave) {
+            await onSuccessfullSave(localEntry);
+        }
+
+        if (!rollback) {
+            toast.success(`The record was successfully created`);
+        }
+
+        onCancel?.();
+    }
+</script>
+
+<Drawer onHide={onCancel}>
+    <div class="flex h-12 items-center gap-4 border-b px-4">
+        <Button
+            variant="outline"
+            onclick={onCancel}
+            class=" h-8 w-8 rounded-full text-xs font-normal"
+            Icon={ArrowLeft}
+        ></Button>
+        <div class="flex items-center gap-2 text-sm">
+            {#if title}
+                {@render title(collectionName)}
+            {:else}
+                <div>Create new record to</div>
+                <div class="rounded-md border bg-muted px-2 py-0.5">
+                    {collectionName}
+                </div>
+            {/if}
+        </div>
+    </div>
+    <div class="flex-1 overflow-y-auto">
+        <div class="flex flex-col gap-4 p-4">
+            {#each fieldNames as fieldName}
+                {@const field = getField(fieldName, collectionName)}
+                {@const FieldIcon = getFieldIcon(fieldName, collectionName)}
+                <div
+                    class="flex flex-col gap-2"
+                >
+                    <div
+                        class="flex flex-1 items-end justify-between gap-2 text-xs"
+                    >
+                        <div class="flex gap-2">
+                            <div class="h-fit">{field.label}</div>
+                            <div
+                                class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground"
+                            >
+                                <FieldIcon size="12" />
+                                {field.type}
+                            </div>
+                        </div>
+                        <div>
+                            <ExtensionsComponents
+                                name="dvFields.topRight.{collectionName}.{fieldName}"
+                                utils={getExtensionUtils()}
+                                bind:value={entry[fieldName]}
+                            />
+                        </div>
+                    </div>
+                    <FieldInput
+                        {collectionName}
+                        {fieldName}
+                        bind:value={
+                            () => entry[fieldName],
+                            (v) =>
+                                (entry = {
+                                    ...entry,
+                                    [fieldName]: v,
+                                })
+                        }
+                        {entry}
+                        errorMessages={fieldsErrors[fieldName]}
+                    />
+                </div>
+            {/each}
+        </div>
+        {#if showRelatedRecords}
+            <Children {collectionName} values={subCollectionsValues} bind:entry />
+        {/if}
+    </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={onCancel}
+                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={submitButton?.icon ? submitButton.icon : Plus}
+                onclick={handleSave}
+            >
+                {submitButton?.text ? submitButton.text : "Create"}
+            </Button>
+        </div>
+    </div>
+</Drawer>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { CreateDetailViewProp } from "./createDetailView.svelte";
+	import type { ButtonProps } from "$lib/components/ui/button/button.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+    import { openCreateDetailView } from "../store.svelte";
+
+	interface LocalProp extends CreateDetailViewProp {
+		variant?: ButtonProps["variant"];
+		class?: ButtonProps["class"];
+		Icon?: ButtonProps["Icon"];
+		children?: ButtonProps["children"];
+	}
+
+	let props: LocalProp = $props();
+	let entry: Record<string, any> | undefined = $state();
+</script>
+
+<Button
+	variant={props.variant}
+	class={props.class}
+	Icon={props.Icon}
+	onclick={() => {
+		openCreateDetailView({
+			values: entry,
+			...props
+		});
+	}}
+>
+	{#if props.children}
+		{@render props.children()}
+	{/if}
+</Button>

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

@@ -0,0 +1,250 @@
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import {
+        ChevronRight,
+        Pencil,
+        Plus,
+        Replace,
+        Table as TableIcon,
+        X,
+    } from "lucide-svelte";
+    import Table, { type TableProps } from "../../dataTable/table.svelte";
+    import Button from "../../ui/button/button.svelte";
+    import CreateDetailViewButton from "./createDetailViewButton.svelte";
+    import { getCollectionColumns } from "$lib/components/dataTable/utils";
+    import SelectRecord from "$lib/components/selectRecord.svelte";
+    import FieldCell from "$lib/components/dataTable/fieldCell.svelte";
+    import SubRecords from "./subRecords.svelte";
+    import ChildRecords from "$lib/components/dataTable/childRecords.svelte";
+    import { ctx } from "$lib/store.svelte";
+
+    interface ParentRecord {
+        id: string;
+        collectionName: string;
+    }
+
+    interface LocalProp {
+        parentCollectionName: string;
+        collectionName: string;
+        entries: any[];
+        parentRecord?: ParentRecord;
+        class?: HTMLAttributes<HTMLDivElement>["class"];
+        expanded?: boolean;
+    }
+
+    let {
+        parentCollectionName,
+        collectionName,
+        entries = $bindable(),
+        class: className,
+        expanded = true,
+        parentRecord,
+    }: LocalProp = $props();
+
+    let tableWidth: number = $state(0);
+    const doesCollectionHasChildren = Boolean(
+        ctx.meta.relations.find(
+            (relation) => relation.to.collection === collectionName,
+        ),
+    );
+    const columns: TableProps["columns"] = getCollectionColumns(collectionName);
+    const refrenceFieldName = ctx.meta.relations.find(
+        (relation) =>
+            relation.from.collection === collectionName &&
+            relation.to.collection === parentRecord?.collectionName,
+    )?.from.field;
+    const createValues = {
+        [refrenceFieldName]: {
+            id: 0,
+        },
+    };
+    let selectedRecordsIds: string[] = $derived(
+        entries.filter((entry) => entry.id).map((entry) => entry.id),
+    );
+    let selectRecordFilter: Record<string, any> = $state({});
+
+    $effect(() => {
+        if (selectedRecordsIds.length) {
+            selectRecordFilter = {
+                id: {
+                    $nin: selectedRecordsIds,
+                },
+            };
+        } else {
+            selectRecordFilter = {};
+        }
+    });
+
+    async function onRecordAdd(entry: any) {
+        delete entry.id;
+        entries.unshift(entry);
+    }
+
+    async function onRecordOverride(entry: any, index: number) {
+        delete entry.id;
+        entries[index] = entry;
+    }
+
+    async function onRecordSelect(entry: any) {
+        entries.unshift(entry);
+    }
+
+    async function onRecordSelectReplace(entry: any, index: number) {
+        entries[index] = entry;
+    }
+
+    async function onRecordRemove(entry: any, index: number) {
+        entries.splice(index, 1);
+    }
+</script>
+
+<div
+    class="
+        flex flex-col border rounded-md overflow-clip
+        {className ? className : ''}
+    "
+>
+    <div
+        class="
+            flex items-center justify-between px-2 h-10 bg-soft
+            {expanded ? 'border-b' : ''}
+        "
+    >
+        <button
+            onclick={() => (expanded = !expanded)}
+            class="flex-1 flex h-full items-center gap-2"
+        >
+            <ChevronRight
+                class="text-muted-foreground transition-transform"
+                style={expanded
+                    ? "transform: rotate(90deg);"
+                    : "transform: rotate(0deg);"}
+                size="17.5"
+            />
+            <TableIcon class="text-muted-foreground" size="17.5" />
+            <div class="text-sm text-muted-foreground">{collectionName}</div>
+        </button>
+        <div class="flex gap-2">
+            <SelectRecord
+                {parentCollectionName}
+                {collectionName}
+                text="Select existing"
+                onSelect={onRecordSelect}
+                filter={selectRecordFilter}
+                class="h-7 px-2 font-normal text-xs"
+                variant="ghost"
+            />
+            <CreateDetailViewButton
+                variant="ghost"
+                class="h-7 px-2 font-normal text-xs"
+                Icon={Plus}
+                {collectionName}
+                rollback={true}
+                showRelatedRecords={true}
+                onSuccessfullSave={onRecordAdd}
+                values={createValues}
+                submitButton={{
+                    text: "Add",
+                    icon: Plus,
+                }}
+            >
+                {#snippet title(collectionName)}
+                    <div>Add record to</div>
+                    <div class="rounded-md border bg-muted px-2 py-0.5">
+                        {collectionName}
+                    </div>
+                {/snippet}
+                Add
+            </CreateDetailViewButton>
+        </div>
+    </div>
+    {#if expanded}
+        <div bind:clientWidth={tableWidth} class="bg-soft overflow-auto">
+            <Table
+                data={entries}
+                {columns}
+                selectByColumn="id"
+                showCollapsible={doesCollectionHasChildren}
+                unifiedBgColor="bg-soft"
+            >
+                {#snippet tools(entry, index)}
+                    <Button
+                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                        variant="ghost"
+                        size="icon"
+                        onclick={() => onRecordRemove(entry, index)}
+                        Icon={X}
+                    ></Button>
+                    {#if entry.id}
+                        <!-- TODO: remove this. I think its totally unneccessary.
+                            its the replace record button. there is no need for that.
+                            that can just delete and add a new one -->
+                        <!-- <SelectRecord
+                            {collectionName}
+                            onSelect={(entry) =>
+                                onRecordSelectReplace(entry, index)}
+                            filter={selectRecordFilter}
+                            class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
+                            variant="ghost"
+                        >
+                            <Replace size="17.5" />
+                        </SelectRecord> -->
+                    {:else}
+                        <CreateDetailViewButton
+                            variant="ghost"
+                            class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
+                            Icon={Pencil}
+                            {collectionName}
+                            rollback={true}
+                            showRelatedRecords={true}
+                            onSuccessfullSave={(entry) =>
+                                onRecordOverride(entry, index)}
+                            values={entry}
+                            submitButton={{
+                                text: "Edit",
+                                icon: Pencil,
+                            }}
+                        >
+                            {#snippet title(collectionName)}
+                                <div>Update record of</div>
+                                <div
+                                    class="rounded-md border bg-muted px-2 py-0.5"
+                                >
+                                    {collectionName}
+                                </div>
+                            {/snippet}
+                        </CreateDetailViewButton>
+                    {/if}
+                {/snippet}
+                {#snippet overrideCell(value, column)}
+                    {#if column.id === "id" && !value}
+                        <div class="text-muted-foreground">AUTO GENERATED</div>
+                    {:else}
+                        <FieldCell
+                            {collectionName}
+                            fieldName={column.id}
+                            {value}
+                            entry={column}
+                        />
+                    {/if}
+                {/snippet}
+                {#snippet collapsible(entry, index)}
+                    {#if entry.id}
+                        <ChildRecords
+                            {collectionName}
+                            recordId={entry.id}
+                            width={tableWidth}
+                            unifiedBgColor="bg-soft"
+                        />
+                    {:else}
+                        <SubRecords
+                            {collectionName}
+                            bind:parentEntry={entries[index]}
+                            width={tableWidth}
+                        />
+                    {/if}
+                {/snippet}
+            </Table>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { ctx } from "$lib/store.svelte";
+    import CreateManyView from "./createManyView.svelte";
+
+    interface Props {
+        collectionName: string;
+        parentEntry: any;
+        width: number;
+    }
+
+    let { collectionName, width, parentEntry = $bindable() }: Props = $props();
+
+    const childrenRelations = ctx.meta.relations.filter(
+        (relation) => relation.to.collection === collectionName,
+    );
+
+    // filling the children properties
+    for (let index = 0; index < childrenRelations.length; index++) {
+        const relation = childrenRelations[index];
+        const childCollection = relation.from.collection;
+        if (!parentEntry[childCollection]) {
+            parentEntry[childCollection] = [];
+        }
+    }
+</script>
+
+<div class="flex">
+    <div class="flex justify-center border-r" style="width: 40px;"></div>
+    <div class="flex flex-col" style="width: {width - 40}px;">
+        {#each childrenRelations as relation, index}
+            {@const lastRow = childrenRelations.length - 1 === index}
+            {@const fromCollection = relation.from.collection}
+            {@const fromField = relation.from.field}
+            <div class="overflow-hidden">
+                <CreateManyView
+                    collectionName={fromCollection}
+                    bind:entries={parentEntry[fromCollection]}
+                    parentRecord={{
+                        id: parentEntry.id,
+                        collectionName: collectionName,
+                    }}
+                    class="border-none"
+                    expanded={false}
+                />
+            </div>
+        {/each}
+    </div>
+</div>