@lobb-js/studio 0.1.31

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import DataTable from "$lib/components/dataTable/dataTable.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { Link, Plus, TableIcon } from "lucide-svelte";
+    import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../../extensions/extensionUtils";
+
+    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()}
+                    collectionName={childCollection}
+                    filter={{
+                        [childField]: entry.id,
+                    }}
+                    class="bg-soft border rounded-md overflow-hidden"
+                >
+                    <div class="border rounded-md overflow-clip">
+                        <div
+                            class="flex items-center justify-between px-2 h-10 bg-soft 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-soft"
+                                    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,175 @@
+<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 "$lib/components/ui/button/button.svelte";
+    import { fade, fly } from "svelte/transition";
+    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 { calculateDrawerWidth, getChangedProperties } from "$lib/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 "$lib/components/drawer.svelte";
+
+    let {
+        collectionName,
+        values = {},
+        showRelatedRecords = true,
+        onCancel,
+        onSuccessfullSave,
+        title,
+        submitButton,
+        recordId,
+    }: UpdateDetailViewProp = $props();
+
+    parseDetailViewValues(collectionName, values)
+
+    const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+    let entry: Record<string, any> = $state(
+        getDefaultEntry(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(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(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]}
+                        {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,32 @@
+<script lang="ts">
+	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
+	import type { ButtonProps } from "$lib/components/ui/button/button.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+    import { openUpdateDetailView } from "../store.svelte";
+
+	interface LocalProp extends UpdateDetailViewProp {
+		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={() => {
+		openUpdateDetailView({
+			values: entry,
+			...props
+		});
+	}}
+>
+	{#if props.children}
+		{@render props.children()}
+	{/if}
+</Button>

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

@@ -0,0 +1,177 @@
+import Mustache from "mustache";
+import { ctx } from "$lib/store.svelte";
+import { getFieldRelation } from "$lib/utils";
+import { getField } from "../dataTable/utils";
+import type { DetailFormField } from "./detailViewForm.svelte";
+
+export function getDefaultEntry(fieldNames: string[], collectionName: string, values?: Record<string, any>) {
+    return Object.fromEntries(
+        fieldNames.map((fieldName) => {
+            let value = null;
+            const field = getField(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(
+        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(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(childrenCollectionName, childrenEntries[index]);
+                }
+            }
+        }
+    }
+
+    return entry;
+}
+
+export function generateTransactionBody(
+        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].collection : 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({
+                collection: collectionName,
+                method: "updateMany",
+                args: [
+                    localPayload,
+                    {
+                        id: payload.id
+                    }
+                ],
+            });
+        } else {
+            transactionBody.push({
+                collection: collectionName,
+                method: "createOne",
+                args: [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(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(key, values[key][index]);
+            }
+        }
+    }
+}
+
+export function getCollectionFields(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,102 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import * as monaco from "monaco-editor";
+	import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+	import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+	import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+	import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+	import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+	import { cn } from "$lib/utils";
+
+	interface Props {
+		type: "javascript" | "typescript" | "json";
+		original: string;
+		modified: string;
+		class?: string;
+	}
+
+	let {
+		type,
+		original,
+		modified,
+		class: className,
+		...props
+	}: Props = $props();
+
+	let editorContainer: HTMLDivElement;
+	let editor: monaco.editor.IStandaloneDiffEditor;
+	let originalModel: monaco.editor.ITextModel;
+	let modifiedModel: monaco.editor.ITextModel;
+
+	self.MonacoEnvironment = {
+		getWorker(_, label) {
+			if (label === "json") {
+				return new jsonWorker();
+			}
+			if (label === "css" || label === "scss" || label === "less") {
+				return new cssWorker();
+			}
+			if (
+				label === "html" ||
+				label === "handlebars" ||
+				label === "razor"
+			) {
+				return new htmlWorker();
+			}
+			if (label === "typescript" || label === "javascript") {
+				return new tsWorker();
+			}
+			return new editorWorker();
+		},
+	};
+
+	onMount(async () => {
+		monaco.editor.defineTheme("transparentTheme", {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.background": "#EFEFEF00",
+				focusBorder: "#00000000",
+			},
+		});
+
+		originalModel = monaco.editor.createModel(original, type);
+
+		modifiedModel = monaco.editor.createModel(modified, type);
+
+		editor = monaco.editor.createDiffEditor(editorContainer, {
+			renderSideBySide: true,
+			readOnly: true,
+			automaticLayout: true,
+			theme: "transparentTheme",
+			minimap: { enabled: false },
+			glyphMargin: false,
+			overviewRulerLanes: 0,
+			hideCursorInOverviewRuler: true,
+			stickyScroll: { enabled: false },
+			lineNumbersMinChars: 2,
+			scrollBeyondLastLine: false,
+			padding: { top: 10, bottom: 1 },
+		});
+
+		editor.setModel({
+			original: originalModel,
+			modified: modifiedModel,
+		});
+	});
+
+	onDestroy(() => {
+		editor?.dispose();
+		originalModel.dispose();
+		modifiedModel.dispose();
+	});
+</script>
+
+<div class={cn("resize-y rounded-md border bg-soft shadow-sm h-60", 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 "$lib/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,31 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+	import { loadExtensionComponents } from "../../extensions/extensionUtils";
+
+	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(name, filterByExtensions);
+</script>
+
+{#if Components.length}
+	{#each Components as Component}
+		<Component bind:value {...props} />
+	{/each}
+{:else}
+	{@render children?.()}
+{/if}
+