@lobb-js/studio 0.7.2 → 0.8.0

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

@@ -0,0 +1,96 @@
+<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 childrenRelations = ctx.meta.relations.filter(
+        (relation) => relation.to.collection === collectionName,
+    );
+    const refresh: boolean[] = $state(
+        new Array(childrenRelations.length).fill(true),
+    );
+</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, index}
+                {@const childCollection = relation.from.collection}
+                {@const childField = relation.from.field}
+                <ExtensionsComponents
+                    name="detailView.update.subRecords.{childCollection}"
+                    utils={getExtensionUtils(lobb, ctx)}
+                    collectionName={childCollection}
+                    filter={{
+                        [childField]: 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">
+                                    {childCollection}
+                                </div>
+                            </div>
+                            <div class="flex gap-2">
+                                <CreateDetailViewButton
+                                    variant="ghost"
+                                    class="h-7 px-2 font-normal text-xs"
+                                    Icon={Plus}
+                                    collectionName={childCollection}
+                                    onSuccessfullSave={async () => {
+                                        refresh[index] = !refresh[index];
+                                    }}
+                                >
+                                    Create
+                                </CreateDetailViewButton>
+                            </div>
+                        </div>
+                        <div class="max-h-72 overflow-auto rounded-md">
+                            {#key refresh[index]}
+                                <DataTable
+                                    collectionName={childCollection}
+                                    filter={{
+                                        [childField]: entry.id,
+                                    }}
+                                    unifiedBgColor="bg-muted/30"
+                                    showHeader={false}
+                                    showFooter={false}
+                                    showDelete={true}
+                                    tableProps={{
+                                        showLastColumnBorder: false,
+                                        showLastRowBorder: false,
+                                        showCheckboxes: false,
+                                    }}
+                                />
+                            {/key}
+                        </div>
+                    </div>
+                </ExtensionsComponents>
+            {/each}
+        </div>
+    </div>
+{/if}

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" module>
+    interface SubmitButton {
+        text: string;
+        icon: any;
+    }
+
+    export interface UpdateDetailViewProp {
+        collectionName: string;
+        recordId: 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, Pencil, X } from "lucide-svelte";
+    import Button from "../../../components/ui/button/button.svelte";
+    import { fade, fly } from "svelte/transition";
+    import { getStudioContext } from "../../../context";
+    import { toast } from "svelte-sonner";
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+
+    const { lobb, ctx } = getStudioContext();
+    import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
+    import { getField, getFieldIcon } from "../../dataTable/utils";
+    import Children from "../update/children.svelte";
+    import type { Snippet } from "svelte";
+    import { getDefaultEntry, parseDetailViewValues, serializeEntry } from "../utils";
+    import FieldInput from "../fieldInput.svelte";
+  import Drawer from "../../../components/drawer.svelte";
+
+    let {
+        collectionName,
+        values = {},
+        showRelatedRecords = true,
+        onCancel,
+        onSuccessfullSave,
+        title,
+        submitButton,
+        recordId,
+    }: UpdateDetailViewProp = $props();
+
+    parseDetailViewValues(ctx, collectionName, values)
+
+    const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+    let entry: Record<string, any> = $state(
+        getDefaultEntry(ctx, fieldNames, collectionName, values),
+    );
+    const initialEntry = $state.snapshot(entry);
+    let localEntry = $derived(
+        getChangedProperties(initialEntry, $state.snapshot(entry)),
+    );
+    let fieldsErrors: Record<string, any> = $state({});
+
+    async function handleSave() {
+        delete localEntry.id;
+        localEntry = serializeEntry(ctx, collectionName, localEntry);
+
+        const response = await lobb.updateOne(
+            collectionName,
+            recordId,
+            localEntry,
+        );
+
+        if (!response.bodyUsed) {
+            const 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);
+        }
+
+        toast.success(`The record was successfully updated`);
+
+        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>Update record of</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(ctx, fieldName, collectionName)}
+                {@const FieldIcon = getFieldIcon(ctx, 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(lobb, ctx)}
+                                bind:value={entry[fieldName]}
+                            />
+                        </div>
+                    </div>
+                    <FieldInput
+                        {collectionName}
+                        {fieldName}
+                        bind:value={entry[fieldName]}
+                        {entry}
+                        errorMessages={fieldsErrors[fieldName]}
+                    />
+                </div>
+            {/each}
+        </div>
+        {#if showRelatedRecords}
+            <Children {collectionName} {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 : Pencil}
+                onclick={handleSave}
+                disabled={!Object.keys(localEntry).length}
+            >
+                {submitButton?.text ? submitButton.text : "Update"}
+            </Button>
+        </div>
+    </div>
+</Drawer>

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
+	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+	import Button from "../../../components/ui/button/button.svelte";
+	import UpdateDetailView from "./updateDetailView.svelte";
+	import { getStudioContext } from "../../../context";
+	import { getCollectionParamsFields } from "../../dataTable/utils";
+
+	interface LocalProp extends UpdateDetailViewProp {
+		variant?: ButtonProps["variant"];
+		class?: ButtonProps["class"];
+		Icon?: ButtonProps["Icon"];
+		children?: ButtonProps["children"];
+	}
+
+	let props: LocalProp = $props();
+	let open = $state(false);
+	let values: Record<string, any> | undefined = $state(undefined);
+
+	const { lobb, ctx } = getStudioContext();
+
+	async function openView() {
+		const params = {
+			fields: getCollectionParamsFields(ctx, props.collectionName, true),
+			filter: { id: props.recordId },
+			limit: 1,
+		};
+		const response = await lobb.findAll(props.collectionName, params);
+		const result = await response.json();
+		values = result.data[0];
+		open = true;
+	}
+</script>
+
+<Button
+	variant={props.variant}
+	class={props.class}
+	Icon={props.Icon}
+	onclick={openView}
+>
+	{#if props.children}
+		{@render props.children()}
+	{/if}
+</Button>
+
+{#if open && values}
+	<UpdateDetailView
+		{...props}
+		{values}
+		onCancel={async () => {
+			open = false;
+			values = undefined;
+			await props.onCancel?.();
+		}}
+	/>
+{/if}

package/src/lib/components/detailView/utils.ts

@@ -0,0 +1,176 @@
+import Mustache from "mustache";
+import type { CTX } from "../../store.types";
+import { getFieldRelation } from "../../utils";
+import { getField } from "../dataTable/utils";
+import type { DetailFormField } from "./detailViewForm.svelte";
+
+export function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>) {
+    return Object.fromEntries(
+        fieldNames.map((fieldName) => {
+            let value = null;
+            const field = getField(ctx, fieldName, collectionName);
+            if (values && values[fieldName] !== undefined) {
+                value = values[fieldName];
+            } else if (field.pre_processors?.default) {
+                const defualtValue = field.pre_processors.default;
+                if (typeof defualtValue === "string") {
+                    value = Mustache.render(defualtValue, {
+                        now: new Date().toISOString(),
+                    });
+                } else {
+                    value = defualtValue;
+                }
+            }
+            return [fieldName, value];
+        }),
+    );
+}
+
+export function serializeEntry(
+        ctx: CTX,
+        collectionName: string,
+        entry: Record<string, any>,
+        rollback: boolean = false,
+) {
+    // deep clone the object
+    entry = { ...entry }
+
+    // serialize the foreign key field's value
+    for (const [fieldName, fieldValue] of Object.entries(entry)) {
+        const isRefrenceField = Boolean(getFieldRelation(ctx, collectionName, fieldName));
+        if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
+            entry[fieldName] = fieldValue.id;
+        }
+    }
+
+    // check for related collections properties and serialize them too
+    if (!rollback) {
+        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
+        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
+        for (let index = 0; index < childrenCollectionNames.length; index++) {
+            const childrenCollectionName = childrenCollectionNames[index];
+            const childrenEntries = entry[childrenCollectionName];
+            if (childrenEntries) {
+                for (let index = 0; index < childrenEntries.length; index++) {
+                    childrenEntries[index] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index]);
+                }
+            }
+        }
+    }
+
+    return entry;
+}
+
+export function generateTransactionBody(
+        ctx: CTX,
+        collectionName: string,
+        entry: Record<string, any>,
+) {
+    entry = { ...entry }
+    function handleEntryRecursive(
+        transactionBody: any[],
+        collectionName: string,
+        entry: Record<string, any>,
+        parentTransactionIndex?: number,
+    ) {
+        const parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].props.collectionName : null;
+        const foreignKeyFieldName = ctx.meta.relations.find(relation => relation.from.collection === collectionName && relation.to.collection === parentCollectionName)?.from.field;
+        const collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+        const payload: any = {};
+        for (let index = 0; index < collectionFieldNames.length; index++) {
+            const fieldName = collectionFieldNames[index];
+            const isForeignKeyField = fieldName === foreignKeyFieldName;
+            if (isForeignKeyField) {
+                payload[fieldName] = `{{ responses[${parentTransactionIndex}].data.id }}`
+                continue;
+            }
+
+            payload[fieldName] = entry[fieldName];
+        }
+
+        const localTransactionIndex = transactionBody.length;
+        if (payload.id) {
+            const localPayload = {
+                [foreignKeyFieldName]: payload[foreignKeyFieldName],
+            };
+            transactionBody.push({
+                method: "updateMany",
+                props: {
+                    collectionName: collectionName,
+                    data: localPayload,
+                    filter: { id: payload.id },
+                },
+            });
+        } else {
+            transactionBody.push({
+                method: "createOne",
+                props: { collectionName: collectionName, data: payload },
+            });
+        }
+
+        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
+        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
+        for (let index = 0; index < childrenCollectionNames.length; index++) {
+            const childrenCollectionName = childrenCollectionNames[index];
+            const childrenEntries = entry[childrenCollectionName];
+            if (childrenEntries) {
+                for (let index = 0; index < childrenEntries.length; index++) {
+                    const childrenEntry = childrenEntries[index];
+                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
+                }
+            }
+        }
+    }
+
+    const transactionBody: any[] = [];
+
+    handleEntryRecursive(transactionBody, collectionName, entry);
+
+    return transactionBody
+}
+
+export function parseDetailViewValues(ctx: CTX, collectionName: string, values: Record<string, any>) {
+    const forignFieldNames = ctx.meta.relations
+        .filter((relation) => relation.from.collection === collectionName)
+        .map((relation) => relation.from.field);
+    const childCollectionNames = ctx.meta.relations
+        .filter((relation) => relation.to.collection === collectionName)
+        .map((relation) => relation.from.collection);
+
+    for (const [key, value] of Object.entries(values)) {
+        if (forignFieldNames.includes(key)) {
+            if (typeof value === 'number') {
+                values[key] = {
+                    id: value,
+                }
+            }
+        } else if (childCollectionNames.includes(key)) {
+            for (let index = 0; index < values[key].length; index++) {
+                parseDetailViewValues(ctx, key, values[key][index]);
+            }
+        }
+    }
+}
+
+export function getCollectionFields(ctx: CTX, collectionName: string) {
+    let returnedData: DetailFormField[] = [];
+
+    const collectionFields = ctx.meta.collections[collectionName].fields;
+    const isSingleton = ctx.meta.collections[collectionName].singleton;
+    for (const [fieldName, value] of Object.entries(collectionFields)) {
+
+        if (isSingleton && fieldName === "id") {
+            continue;
+        }
+
+        returnedData.push({
+            type: "input",
+            key: fieldName,
+            label: fieldName,
+            disabled: fieldName == "id",
+            placeholder: fieldName == "id" ? "AUTO_GENERATED" : "",
+        })
+    }
+
+    return returnedData;
+}

package/src/lib/components/diffViewer.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import { MergeView } from "@codemirror/merge";
+	import { EditorView } from "@codemirror/view";
+	import { EditorState } from "@codemirror/state";
+	import { basicSetup } from "codemirror";
+	import { javascript } from "@codemirror/lang-javascript";
+	import { sql } from "@codemirror/lang-sql";
+	import { cn } from "../utils";
+
+	interface Props {
+		type: "javascript" | "typescript" | "json" | "sql";
+		original: string;
+		modified: string;
+		class?: string;
+	}
+
+	let {
+		type,
+		original,
+		modified,
+		class: className,
+		...props
+	}: Props = $props();
+
+	let editorContainer: HTMLDivElement;
+	let mergeView: MergeView | null = null;
+
+	const getLanguageExtension = () => {
+		switch (type) {
+			case 'javascript':
+			case 'typescript':
+			case 'json':
+				return javascript();
+			case 'sql':
+				return sql();
+			default:
+				return javascript();
+		}
+	};
+
+	onMount(() => {
+		const langExtension = getLanguageExtension();
+
+		mergeView = new MergeView({
+			a: {
+				doc: original,
+				extensions: [
+					basicSetup,
+					langExtension,
+					EditorView.editable.of(false),
+					EditorState.readOnly.of(true),
+					EditorView.theme({
+						'&': {
+							backgroundColor: 'transparent',
+						},
+						'.cm-gutters': {
+							backgroundColor: 'transparent',
+							border: 'none',
+						},
+						'.cm-content': {
+							paddingTop: '10px',
+							paddingBottom: '1px',
+						}
+					})
+				]
+			},
+			b: {
+				doc: modified,
+				extensions: [
+					basicSetup,
+					langExtension,
+					EditorView.editable.of(false),
+					EditorState.readOnly.of(true),
+					EditorView.theme({
+						'&': {
+							backgroundColor: 'transparent',
+						},
+						'.cm-gutters': {
+							backgroundColor: 'transparent',
+							border: 'none',
+						},
+						'.cm-content': {
+							paddingTop: '10px',
+							paddingBottom: '1px',
+						}
+					})
+				]
+			},
+			parent: editorContainer
+		});
+	});
+
+	onDestroy(() => {
+		mergeView?.destroy();
+	});
+</script>
+
+<div class={cn("w-full resize-y rounded-md border bg-muted/30 shadow-sm", className)}>
+	<div
+		bind:this={editorContainer}
+		class="editor pl-2"
+		style="height: 100%; width: 100%;"
+	></div>
+</div>

package/src/lib/components/drawer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { calculateDrawerWidth } from "../utils";
+    import type { Snippet } from "svelte";
+    import { fade, fly } from "svelte/transition";
+
+    interface Props {
+        children?: Snippet<[]>;
+        onHide?: () => Promise<void>;
+    }
+
+    let { onHide, children }: Props = $props();
+</script>
+
+<button
+    transition:fade={{ duration: 250 }}
+    onclick={() => onHide?.()}
+    class="backgroundDrawerButton fixed left-0 top-0 z-30 h-screen w-screen bg-background opacity-50 cursor-default"
+    aria-label="background used to hide the background"
+></button>
+
+<!-- the drawer -->
+<div
+    transition:fly={{ x: "100%", duration: 250 }}
+    class="fixed right-0 top-0 z-30 flex h-full w-full flex-col border-l bg-background"
+    style="max-width: {calculateDrawerWidth()}px;"
+>
+    {@render children?.()}
+</div>

package/src/lib/components/extensionsComponents.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+	import { loadExtensionComponents } from "../extensions/extensionUtils";
+	import { getStudioContext } from "../context";
+
+	const { ctx } = getStudioContext();
+
+	interface Props {
+		name: string;
+		filterByExtensions?: string[];
+		value?: unknown;
+		children?: Snippet<[]>;
+		[key: string]: any;
+	}
+
+	let {
+		name,
+		filterByExtensions,
+		value = $bindable(),
+		children,
+		...props
+	}: Props = $props();
+
+	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
+</script>
+
+{#if Components.length}
+	{#each Components as Component}
+		<Component bind:value {...props} />
+	{/each}
+{:else}
+	{@render children?.()}
+{/if}