@lobb-js/studio 0.7.2 → 0.7.3

package/src/lib/components/detailView/detailViewForm.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type  { Icon as IconType } from 'lucide-svelte';
+    import FieldInputReplacement, { type CustomFieldSnippet } from "./fieldInputReplacement.svelte";
+    import type { HTMLInputTypeAttribute } from "svelte/elements";
+
+    export interface BaseField {
+        key: string;
+        label: string;
+        icon?: typeof IconType;
+        errorMessages?: string[];
+        disabled?: boolean;
+        customFieldSnippet?: CustomFieldSnippet;
+    }
+
+    export interface InputField extends BaseField {
+        type: 'input';
+        placeholder?: string;
+        inputType?: HTMLInputTypeAttribute;
+        inputStep?: number | "any" | undefined;
+    }
+    
+    export interface TextAreaField extends BaseField {
+        type: 'textarea';
+        placeholder?: string;
+    }
+    
+    export interface SelectField extends BaseField {
+        type: 'select';
+        options: string[];
+        placeholder?: string;
+    }
+    
+    export interface DateField extends BaseField {
+        type: 'date';
+    }
+    
+    export interface timeField extends BaseField {
+        type: 'time';
+    }
+    
+    export interface DateTimeField extends BaseField {
+        type: 'datetime';
+    }
+    
+    export interface BooleanField extends BaseField {
+        type: 'switch';
+    }
+
+    export type DetailFormField = InputField | TextAreaField | SelectField | DateField | timeField | DateTimeField | BooleanField;
+
+    interface DetailViewFormProps {
+        fields: DetailFormField[];
+        value?: Record<string, unknown>;
+        topRight?: Snippet<[]>;
+    }
+
+    let { value = $bindable({}), fields, topRight }: DetailViewFormProps = $props();
+</script>
+
+<div class="flex flex-col gap-4 p-4">
+    {#each fields as field}
+        <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"
+                    >
+                        {#if field.icon}
+                            <field.icon size="12" />
+                        {/if}
+                        {field.type}
+                    </div>
+                </div>
+                <div>
+                    {@render topRight?.()}
+                    <!-- TODO: WHEN YOU USE THIS COMPONENT IN THE CREATE AND UPDATE DETAIL VIEW ADD THIS PART TO IT -->
+                    <!-- <ExtensionsComponents
+                        name="detailView.fields.topRight.{collectionName}.{fieldName}"
+                        utils={getExtensionUtils()}
+                        bind:value={value[field.key]}
+                    /> -->
+                </div>
+            </div>
+            <FieldInputReplacement
+                field={field}
+                bind:value={
+                    () => value[field.key],
+                    (v) =>
+                    (value = {
+                        ...value,
+                        [field.key]: v,
+                    })
+                }
+                customFieldInput={field.customFieldSnippet}
+            ></FieldInputReplacement>
+        </div>
+    {/each}
+</div>

package/src/lib/components/detailView/fieldCustomInput.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import CodeEditor from "../codeEditor.svelte";
+	import RichTextEditor from "../richTextEditor.svelte";
+
+	interface Props {
+		value: any;
+		type: string;
+		args: any;
+		field: any;
+		destructive?: boolean;
+	}
+
+	let {
+		value = $bindable(),
+		type,
+		args,
+		field,
+		destructive,
+	}: Props = $props();
+</script>
+
+{#if type === "code"}
+	<CodeEditor name={field.key} {...args} bind:value />
+{:else if type === "richtext"}
+	<RichTextEditor name={field.key} bind:value />
+{/if}

package/src/lib/components/detailView/fieldInput.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import { getStudioContext } from "../../context";
+	import { getFieldRelation } from "../../utils";
+	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
+	import { getField } from "../dataTable/utils";
+	import Button from "../ui/button/button.svelte";
+	import FieldCustomInput from "./fieldCustomInput.svelte";
+	import Input from "../ui/input/input.svelte";
+	import * as Select from "../../components/ui/select/index";
+	import Textarea from "../ui/textarea/textarea.svelte";
+	import ForeingKeyInput from "../foreingKeyInput.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+
+	const { ctx, lobb } = getStudioContext();
+
+	interface Props {
+		collectionName: string;
+		fieldName: string;
+		value: any;
+		errorMessages?: string[];
+		entry?: Record<string, any>;
+	}
+
+	let {
+		collectionName,
+		fieldName,
+		value = $bindable(),
+		errorMessages = [],
+		entry,
+	}: Props = $props();
+
+	const ui_input =
+		ctx.meta.collections[collectionName].fields[fieldName].ui?.input;
+	const ui =
+		ctx.meta.collections[collectionName].fields[fieldName].ui;
+	const field = getField(ctx, fieldName, collectionName);
+	const fieldRelation = getFieldRelation(ctx, collectionName, fieldName);
+	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
+	const disabledClasses = "pointer-events-none opacity-50";
+	const destructive: boolean = $derived(Boolean(errorMessages.length));
+
+</script>
+
+<div class="{isDisabled ? "cursor-not-allowed" : ''}">
+	<div
+		class="
+			relative flex flex-col gap-2
+			{isDisabled ? disabledClasses : ''}
+		"
+		style="flex: 2;"
+	>
+		<Button
+			onclick={() => (value = null)}
+			variant="outline"
+			class="absolute right-0 top-0 z-10 mr-1.5 mt-1.5 aspect-square h-6 w-6 p-0"
+			Icon={Ban}
+			tabindex={-1}
+		></Button>
+		{#if ui_input}
+			<FieldCustomInput
+				bind:value
+				type={ui_input.type}
+				args={ui_input.args}
+				{field}
+				{destructive}
+			/>
+		{:else if field.label === "id"}
+			<Input
+				placeholder="AUTO GENERATED"
+				class="bg-muted/30 text-xs"
+				bind:value
+			/>
+		{:else if fieldRelation && entry}
+			<ExtensionsComponents
+				name="detailView.fields.foreignKey.{fieldRelation.to.collection}"
+				utils={getExtensionUtils(lobb, ctx)}
+				parentCollectionName={collectionName}
+				collectionName={fieldRelation.to.collection}
+				bind:value
+				{entry}
+				fieldName={field.key}
+				{destructive}
+			>
+				<ForeingKeyInput
+					parentCollectionName={collectionName}
+					collectionName={fieldRelation.to.collection}
+					bind:value
+					{entry}
+					fieldName={field.key}
+					{destructive}
+				/>
+			</ExtensionsComponents>
+		{:else if field.type === "string"}
+			<!-- if the string has a validator of type enum -->
+			{#if field.validators && field.validators.enum}
+				<Select.Root
+					type="single"
+					onValueChange={(newValue) => {
+						value = newValue;
+					}}
+				>
+					<Select.Trigger
+						placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+						class="
+							h-9 w-full bg-muted/30 pr-8
+							{destructive ? 'border-destructive bg-destructive/10' : ''}
+						"
+					>
+						{value ? value : "NULL"}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							{#each field.validators.enum as option}
+								<Select.Item value={option} label={option} />
+							{/each}
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+			{:else}
+				<Input
+					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+					type="text"
+					class="
+						bg-muted/30 text-xs
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+					bind:value
+				/>
+			{/if}
+		{:else if field.type === "text"}
+			<Textarea
+				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
+				rows={5}
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
+		{:else if field.type === "date"}
+			<Input
+				type="date"
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (!value) {
+							return;
+						}
+						const date = new Date(value);
+						return date.toISOString().split("T")[0];
+					},
+					(v) => (value = v)
+				}
+			/>
+		{:else if field.type === "time"}
+			<Input
+				type="time"
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (!value) {
+							return;
+						}
+						return value;
+					},
+					(v) => (value = v)
+				}
+			/>
+		{:else if field.type === "datetime"}
+			<Input
+				type="datetime-local"
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (!value) {
+							return;
+						}
+						const date = new Date(value);
+						return date.toISOString().slice(0, 16);
+					},
+					(v) => {
+						value = v;
+					}
+				}
+			/>
+		{:else if field.type === "bool"}
+			<Select.Root type="single" bind:value>
+				<Select.Trigger
+					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+					class="
+						bg-muted/30 pr-9
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+				>
+					{String(value).toUpperCase()}
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Item value={"true"} class="flex gap-1.5">
+						<Check size="15" />
+						TRUE
+					</Select.Item>
+					<Select.Item value={"false"} class="flex gap-1.5">
+						<X size="15" />
+						FALSE
+					</Select.Item>
+					<Select.Item value={"null"} class="flex gap-1.5">
+						<Ban size="15" />
+						NULL
+					</Select.Item>
+				</Select.Content>
+			</Select.Root>
+		{:else if field.type === "decimal"}
+			<Input
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				type="number"
+				step="any"
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
+		{:else}
+			<Input
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				type="number"
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
+		{/if}
+		{#if errorMessages}
+			{#each errorMessages as message}
+				<div class="flex gap-1 text-destructive">
+					<CircleAlert size="15" class="translate-y-[0.025rem]" />
+					<div class="text-[0.7rem]">
+						{message}
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>

package/src/lib/components/detailView/fieldInputReplacement.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
+	import Button from "../ui/button/button.svelte";
+	import Input from "../ui/input/input.svelte";
+	import * as Select from "../../components/ui/select/index";
+	import Textarea from "../ui/textarea/textarea.svelte";
+  	import type { EntryField } from "./detailViewForm.svelte";
+  	import type { Snippet } from "svelte";
+  	import AlertView from "../alertView.svelte";
+
+	export type CustomFieldSnippet = Snippet<[EntryField, unknown]>;
+
+	interface Props {
+		field: EntryField;
+		value: unknown;
+		customFieldInput?: CustomFieldSnippet;
+	}
+
+	let {
+		field,
+		value = $bindable(),
+		customFieldInput,
+	}: Props = $props();
+
+	const disabledClasses = "pointer-events-none opacity-50";
+	const destructive: boolean = $derived(Boolean(field.errorMessages && field.errorMessages.length));
+</script>
+
+<div class="{field.disabled ? "cursor-not-allowed" : ''}">
+	<div
+		class="
+			relative flex flex-col gap-2
+			{field.disabled ? disabledClasses : ''}
+		"
+		style="flex: 2;"
+	>
+		<Button
+			onclick={() => (value = null)}
+			variant="outline"
+			class="absolute right-0 top-0 z-10 mr-1.5 mt-1.5 aspect-square h-6 w-6 p-0"
+			Icon={Ban}
+			tabindex={-1}
+		></Button>
+		{#if customFieldInput}
+			{@render customFieldInput(field, value)}
+		{:else if field.type === "input"}
+			<!-- if the string has a validator of type enum -->
+			<Input
+				placeholder={field.placeholder ? field.placeholder : "NULL"}
+				type="text"
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
+		{:else if field.type === "select"}
+			<Select.Root
+				type="single"
+				onValueChange={(newValue) => {
+					value = newValue;
+				}}
+			>
+				<Select.Trigger
+					placeholder={field.placeholder ? field.placeholder : "NULL"}
+					class="
+						h-9 w-full bg-muted/30 pr-8
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+				>
+					{value ? value : "NULL"}
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Group>
+						{#each field.options as option}
+							<Select.Item value={option} label={option} />
+						{/each}
+					</Select.Group>
+				</Select.Content>
+			</Select.Root>
+		{:else if field.type === "textarea"}
+			{#if typeof value === 'string' || typeof value === 'undefined' || value === null}
+				<Textarea
+					placeholder={field.placeholder ? field.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
+					rows={5}
+					class="
+						bg-muted/30 text-xs
+						{destructive ? 'border-destructive bg-destructive/10' : ''}
+					"
+					bind:value
+				/>
+			{:else}
+				<AlertView title="Couldnt render component">
+					The value passed to the Textarea in (fieldInputReplacement) is something different from these (string, undefined, null)
+				</AlertView>
+			{/if}
+		{:else if field.type === "date"}
+			<Input
+				type="date"
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (typeof value !== "string") {
+							return;
+						}
+						const date = new Date(value);
+						return date.toISOString().split("T")[0];
+					},
+					(v) => (value = v)
+				}
+			/>
+		{:else if field.type === "time"}
+			<Input
+				type="time"
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (typeof value !== "string") {
+							return;
+						}
+						return value;
+					},
+					(v) => (value = v)
+				}
+			/>
+		{:else if field.type === "datetime"}
+			<Input
+				type="datetime-local"
+				class="
+					dateInput block w-full bg-muted/30 pr-9 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value={
+					() => {
+						if (typeof value !== "string") {
+							return;
+						}
+						const date = new Date(value);
+						return date.toISOString().slice(0, 16);
+					},
+					(v) => {
+						value = v;
+					}
+				}
+			/>
+		{:else if field.type === "switch"}
+			{#if typeof value === "string" || typeof value === "undefined"}
+				<Select.Root type="single" bind:value>
+					<Select.Trigger
+						class="
+							bg-muted/30 pr-9
+							{destructive ? 'border-destructive bg-destructive/10' : ''}
+						"
+					>
+						{String(value).toUpperCase()}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value={"true"} class="flex gap-1.5">
+							<Check size="15" />
+							TRUE
+						</Select.Item>
+						<Select.Item value={"false"} class="flex gap-1.5">
+							<X size="15" />
+							FALSE
+						</Select.Item>
+						<Select.Item value={"null"} class="flex gap-1.5">
+							<Ban size="15" />
+							NULL
+						</Select.Item>
+					</Select.Content>
+				</Select.Root>
+			{:else}
+				<AlertView title="Couldnt render component">
+					The value passed to the switch element in (fieldInputReplacement) is not one of these (string, undefined)
+				</AlertView>
+			{/if}
+		{:else}
+			<AlertView title="Couldnt render component">
+				For some reason couldnt render the (fieldInputReplacement)
+			</AlertView>
+		{/if}
+		{#if field.errorMessages}
+			{#each field.errorMessages as message}
+				<div class="flex gap-1 text-destructive">
+					<CircleAlert size="15" class="translate-y-[0.025rem]" />
+					<div class="text-[0.7rem]">
+						{message}
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,59 @@
+import type { CreateDetailViewProp } from "./create/createDetailView.svelte";
+import type { UpdateDetailViewProp } from "./update/updateDetailView.svelte";
+import CreateDetailView from "./create/createDetailView.svelte";
+import UpdateDetailView from "./update/updateDetailView.svelte";
+import type { StudioContext } from "../../context";
+import { getCollectionParamsFields } from "../dataTable/utils";
+import { createStudioContextMap } from "../../context";
+import { mount, unmount } from "svelte";
+
+export function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp) {
+    const targetElement = document.querySelector('main');
+
+    if (!targetElement) {
+        throw new Error("main html element doesn't exist for some reason")
+    }
+
+    const mountedCreateDetailView = mount(CreateDetailView, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.()
+                await unmount(mountedCreateDetailView, { outro: true });
+            }
+        },
+    })
+}
+
+export async function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp) {
+    const { lobb, ctx } = studioContext;
+    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();
+    const entry = result.data[0];
+
+    const targetElement = document.querySelector('main');
+
+    if (!targetElement) {
+        throw new Error("main html element doesn't exist for some reason")
+    }
+
+    const mountedUpdateDetailView = mount(UpdateDetailView, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.()
+                await unmount(mountedUpdateDetailView, { outro: true });
+            },
+            values: entry,
+        },
+    })
+}