@lobb-js/studio 0.1.31

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

@@ -0,0 +1,171 @@
+<script lang="ts">
+    import _ from "lodash";
+
+    import * as Popover from "$lib/components/ui/popover/index.js";
+    import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
+    import Button, { buttonVariants } from "../ui/button/button.svelte";
+    import Label from "../ui/label/label.svelte";
+    import Switch from "../ui/switch/switch.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { getFieldIcon } from "./utils";
+
+    interface Props {
+        collectionName: string;
+        sort: Record<string, "asc" | "desc">;
+        showText: boolean;
+    }
+
+    let { collectionName, sort = $bindable({}), showText }: Props = $props();
+
+    let popoverOpen = $state(false);
+
+    function getFieldNames() {
+        const options = Object.keys(
+            ctx.meta.collections[collectionName].fields,
+        );
+        const existingPropertiesNames = Object.keys(sort);
+        const filteredOptions = _.difference(options, existingPropertiesNames);
+        return filteredOptions;
+    }
+
+    function moveProperty<T extends Record<string, any>>(
+        obj: T,
+        propertyToMove: keyof T,
+        direction: "up" | "down",
+        steps: number = 1,
+    ): T {
+        const keys = Object.keys(obj) as Array<keyof T>;
+        const currentIndex = keys.indexOf(propertyToMove);
+
+        if (currentIndex === -1) {
+            console.warn(
+                `Property '${String(propertyToMove)}' not found in the object.`,
+            );
+            return { ...obj };
+        }
+
+        const [removedKey] = keys.splice(currentIndex, 1) as [keyof T];
+
+        let newIndex: number;
+        if (direction === "up") {
+            newIndex = Math.max(0, currentIndex - steps);
+        } else if (direction === "down") {
+            newIndex = Math.min(keys.length, currentIndex + steps);
+        } else {
+            console.warn(
+                `Invalid direction specified: '${direction}'. Use 'up' or 'down'.`,
+            );
+            return { ...obj };
+        }
+
+        keys.splice(newIndex, 0, removedKey);
+
+        const newObject: T = {} as T;
+        keys.forEach((key) => {
+            newObject[key] = obj[key];
+        });
+
+        return newObject;
+    }
+</script>
+
+<div class="flex flex-col gap-2 p-2 text-muted-foreground">
+    {#if Object.keys(sort).length}
+        <div class="flex flex-col gap-2 text-muted-foreground">
+            {#each Object.entries(sort) as [fieldName, order]}
+                <div class="flex items-center justify-between text-xs">
+                    <dir class="m-0 flex items-center gap-3 p-0">
+                        <div class="flex gap-1">
+                            <ArrowUp
+                                onclick={() =>
+                                    (sort = moveProperty(
+                                        sort,
+                                        fieldName,
+                                        "up",
+                                    ))}
+                                class="cursor-pointer hover:text-foreground"
+                                size="15"
+                            />
+                            <ArrowDown
+                                onclick={() =>
+                                    (sort = moveProperty(
+                                        sort,
+                                        fieldName,
+                                        "down",
+                                    ))}
+                                class="cursor-pointer hover:text-foreground"
+                                size="15"
+                            />
+                        </div>
+                        <div class="text-foreground font-medium">
+                            {fieldName}
+                        </div>
+                    </dir>
+                    <dir class="m-0 flex items-center gap-2 p-0">
+                        <div class="flex items-center space-x-2">
+                            <Label class="text-xs">Ascending</Label>
+                            <!-- <Switch checked={true} /> -->
+                            <Switch
+                                bind:checked={
+                                    () => sort[fieldName] === "asc",
+                                    (v) =>
+                                        (sort[fieldName] = v ? "asc" : "desc")
+                                }
+                            />
+                        </div>
+                        <Button
+                            onclick={() => delete sort[fieldName]}
+                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                            variant="ghost"
+                            size="icon"
+                            Icon={X}
+                        ></Button>
+                    </dir>
+                </div>
+            {/each}
+        </div>
+    {:else}
+        <div class="flex flex-col gap-0.5 p-2">
+            <div class="text-xs text-foreground">
+                No sorts applied to this view
+            </div>
+            <div class="text-xs text-muted-foreground">
+                Add a column below to sort the view
+            </div>
+        </div>
+    {/if}
+</div>
+<div class="flex justify-between border-t p-2">
+    {#if getFieldNames().length}
+        <Popover.Root bind:open={popoverOpen}>
+            <Popover.Trigger
+                class={buttonVariants({
+                    variant: "ghost",
+                    class: "h-7 px-3 text-xs font-normal",
+                })}
+            >
+                <Plus />
+                Add a sort rule
+            </Popover.Trigger>
+            <Popover.Content class="flex w-48 flex-col p-2">
+                {#each getFieldNames() as fieldName}
+                    {@const FieldIcon = getFieldIcon(fieldName, collectionName)}
+                    <button
+                        onclick={() => {
+                            sort[fieldName] = "asc";
+                            popoverOpen = false;
+                        }}
+                        class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-3 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+                    >
+                        <FieldIcon size="15" />
+                        <div>{fieldName}</div>
+                    </button>
+                {/each}
+            </Popover.Content>
+        </Popover.Root>
+    {:else}
+        <div class="flex items-center text-xs text-muted-foreground">
+            All columns have been added
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Popover from "$lib/components/ui/popover/index.js";
+	import { ArrowDownWideNarrow } from "lucide-svelte";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import Sort from "./sort.svelte";
+
+	interface Props {
+		collectionName: string;
+		sort: Record<string, "asc" | "desc">;
+		showText: boolean;
+	}
+
+	let { collectionName, sort = $bindable({}), showText }: Props = $props();
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={buttonVariants({
+			variant: "ghost",
+			class: "h-7 px-3 text-xs font-normal",
+		})}
+	>
+		<ArrowDownWideNarrow />
+		{#if showText}
+			{@const sortRules = Object.keys(sort).length}
+			{#if sortRules}
+				Sorted by {sortRules} rules
+			{:else}
+				Sort
+			{/if}
+		{/if}
+	</Popover.Trigger>
+	<Popover.Content class="w-screen max-w-[20rem] p-0">
+		<Sort {collectionName} {showText} bind:sort />
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,337 @@
+<script lang="ts" module>
+	interface Column {
+		id: string;
+		icon?: any;
+		subtext?: any;
+	}
+
+	type Entry = Record<string, any>;
+
+	interface Select {
+		onSelect: (entry: any) => void;
+	}
+
+	export interface TableProps {
+		data: Entry[];
+		columns?: Column[];
+		showCollapsible?: boolean;
+
+		// sorting
+		sort?: Record<string, "asc" | "desc">;
+		localSorting?: boolean;
+
+		// checkboxes
+		selectedRecords?: Array<any>;
+		selectByColumn?: string | null;
+		showCheckboxes?: boolean;
+
+		// styles
+		showLastRowBorder?: boolean;
+		showLastColumnBorder?: boolean;
+
+		// snippets
+		overrideCell?: Snippet<[any, Column, Entry]>;
+		tools?: Snippet<[Entry, number]>;
+		collapsible?: Snippet<[Entry, number]>;
+
+		// other
+		parentWidth?: number;
+		unifiedBgColor?: "bg-soft" | "bg-background";
+		select?: Select;
+		tableWidth?: number;
+	}
+</script>
+
+<script lang="ts">
+	import {
+		ArrowDownNarrowWide,
+		ArrowUpWideNarrow,
+		ChevronRight,
+		CircleOff,
+	} from "lucide-svelte";
+	import Checkbox from "../ui/checkbox/checkbox.svelte";
+	import { orderBy } from "lodash";
+	import type { Snippet } from "svelte";
+	import Button from "../ui/button/button.svelte";
+
+	let {
+		data,
+		columns = Object.keys(data[0]).map((key) => {
+			return {
+				id: key,
+			};
+		}),
+		showCollapsible = false,
+		sort = $bindable({}),
+		localSorting = false,
+		selectedRecords = $bindable(),
+		showCheckboxes = true,
+		selectByColumn,
+		showLastRowBorder,
+		showLastColumnBorder,
+		parentWidth,
+		overrideCell,
+		tools,
+		collapsible,
+		unifiedBgColor,
+		select,
+		tableWidth = $bindable(),
+	}: TableProps = $props();
+
+	let expandedRows: boolean[] = $state(new Array(data.length).fill(false));
+
+	// calculate columns count
+	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const columnsLength = columns.length + toolsExists;
+
+	// set table width
+	let columnsWidths: number[] = $state([]);
+	$effect(() => {
+		tableWidth =
+			columnsWidths.reduce((sum, width) => sum + width, 0) +
+			(columnsLength - 1);
+	});
+
+	function sortHandler(columnId: string) {
+		if (sort[columnId] === "asc") {
+			sort[columnId] = "desc";
+		} else if (sort[columnId] === "desc") {
+			delete sort[columnId];
+		} else {
+			sort[columnId] = "asc";
+		}
+		sort = { ...sort };
+
+		// update the data based on the new sorts
+		if (localSorting) {
+			if (Object.keys(sort).length) {
+				data = orderBy(data, Object.keys(sort), Object.values(sort));
+			} else {
+				const columnNames = columns.map((column) => column.id);
+				const defaultSorts = columns.map((column) => "asc") as Array<
+					"asc" | "desc"
+				>;
+				data = orderBy(data, columnNames, defaultSorts);
+			}
+		}
+	}
+
+	function toggleCheckAllHandler(value: boolean) {
+		if (value) {
+			if (selectByColumn) {
+				selectedRecords = data.map(
+					(entry, index) => entry[selectByColumn],
+				);
+			} else {
+				selectedRecords = data.map((entry, index) => index);
+			}
+		} else {
+			selectedRecords = [];
+		}
+	}
+
+	function checkBoxHandler(event: MouseEvent, entry: any, index: number) {
+		event.preventDefault();
+
+		const value =
+			selectByColumn && entry.hasOwnProperty(selectByColumn)
+				? entry[selectByColumn]
+				: index;
+
+		if (selectedRecords) {
+			const foundIndex = selectedRecords.findIndex((v) => v === value);
+
+			if (foundIndex !== -1) {
+				selectedRecords.splice(foundIndex, 1);
+			} else {
+				selectedRecords.push(value);
+			}
+			selectedRecords = [...selectedRecords];
+		}
+	}
+
+	function isCheckedHandler(entry: any, index: number): boolean {
+		const value =
+			selectByColumn && entry.hasOwnProperty(selectByColumn)
+				? entry[selectByColumn]
+				: index;
+
+		if (selectedRecords) {
+			return selectedRecords.includes(value);
+		}
+
+		return false;
+	}
+</script>
+
+<div
+	style="
+		display: grid;
+		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength -
+		1}, minmax(auto, 15rem));
+		grid-template-rows: 2.5rem;
+	"
+>
+	{#if selectedRecords || tools}
+		<div
+			bind:clientWidth={columnsWidths[0]}
+			class="
+				sticky left-0 top-0 z-20
+				flex items-center p-2.5 text-xs h-10
+				border-r border-b gap-2
+				{unifiedBgColor ? unifiedBgColor : 'bg-soft'}
+			"
+		>
+			<!-- collapsable toggle -->
+			{#if showCollapsible}
+				<div class="w-[20px]"></div>
+			{/if}
+			{#if selectedRecords && showCheckboxes}
+				<Checkbox
+					class="border-muted-foreground hover:border-foreground"
+					onCheckedChange={toggleCheckAllHandler}
+					checked={Boolean(selectedRecords.length)}
+				/>
+			{/if}
+		</div>
+	{/if}
+	{#each columns as column, index}
+		{@const lastColumn = columns.length - 1 === index}
+		{@const ColumnIcon = column.icon}
+		<button
+			bind:clientWidth={columnsWidths[index + toolsExists]}
+			onclick={() => sortHandler(column.id)}
+			class="
+				sticky top-0 z-10
+				flex items-center p-2.5 text-xs h-10
+				{unifiedBgColor ? unifiedBgColor : 'bg-soft'}
+				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
+				border-b gap-2
+			"
+		>
+			{#if sort[column.id] === "asc"}
+				<ArrowDownNarrowWide
+					size="12.5"
+					class="text-muted-foreground"
+				/>
+			{:else if sort[column.id] === "desc"}
+				<ArrowUpWideNarrow size="12.5" class="text-muted-foreground" />
+			{:else}
+				<ColumnIcon size="12.5" class="text-muted-foreground" />
+			{/if}
+			<div class="font-bold">{column.id}</div>
+			<div class="text-muted-foreground text-[0.7rem]">
+				{column.subtext}
+			</div>
+		</button>
+	{/each}
+	{#if Object.keys(data).length}
+		{#each data as entry, index}
+			{@const isDisabled = Boolean(entry.__disabled)}
+			{@const lastRow = data.length - 1 === index}
+			{#if selectedRecords || tools}
+				<div
+					class="
+						sticky left-0
+						flex items-center p-2.5 text-xs h-10
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						border-r gap-2
+					"
+				>
+					<!-- collapsable toggle -->
+					{#if showCollapsible}
+						<Button
+							variant="ghost"
+							class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent transition-transform"
+							style={expandedRows[index]
+								? "transform: rotate(90deg);"
+								: "transform: rotate(0deg);"}
+							Icon={ChevronRight}
+							onclick={() => {
+								expandedRows[index] = !expandedRows[index];
+								expandedRows = [...expandedRows];
+							}}
+							disabled={isDisabled}
+						></Button>
+					{/if}
+					{#if selectedRecords && showCheckboxes}
+						<Checkbox
+							class="border-muted-foreground
+						hover:border-foreground"
+							onclick={(event) =>
+								checkBoxHandler(event, entry, index)}
+							checked={isCheckedHandler(entry, index)}
+							disabled={isDisabled}
+						/>
+					{/if}
+					{#if tools && !isDisabled}
+						{@render tools(entry, index)}
+					{/if}
+				</div>
+			{/if}
+			{#each columns as column, index}
+				{@const lastColumn = columns.length - 1 === index}
+				{@const fieldValue = entry[column.id]}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={() => {
+						select?.onSelect(entry);
+					}}
+					class="
+						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
+						{select ? 'cursor-pointer' : ''}
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
+					"
+				>
+					{#if overrideCell}
+						{@render overrideCell(fieldValue, column, entry)}
+					{:else}
+						{fieldValue}
+					{/if}
+				</div>
+			{/each}
+			<!-- nested data -->
+			<div
+				style="grid-column: span {columnsLength};"
+				class="
+					{!showLastColumnBorder ? '' : 'border-r'}
+					{lastRow && !showLastRowBorder ? '' : 'border-b'}
+				"
+			>
+				<div
+					style="
+						{parentWidth ? `width: ${parentWidth}px` : ''};
+						max-width: 100vw;
+						{expandedRows[index] ? '' : 'height: 0px;'}
+					"
+					class="
+						sticky left-0 top-0 overflow-auto bg-soft
+						{unifiedBgColor ? unifiedBgColor : ''}
+						{expandedRows[index] ? 'border-t' : ''}
+					"
+				>
+					{#if collapsible && expandedRows[index]}
+						{@render collapsible(entry, index)}
+					{/if}
+				</div>
+			</div>
+		{/each}
+	{/if}
+</div>
+{#if Object.keys(data).length === 0}
+	<div
+		class="
+			sticky left-0
+			flex justify-center items-center gap-2 text-xs
+			text-muted-foreground text-center rounded-md p-2 h-14
+		"
+		style="
+			{parentWidth ? `width: ${parentWidth}px` : ''};
+		"
+	>
+		<CircleOff size="17.5" />
+		No result
+	</div>
+{/if}

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

@@ -0,0 +1,127 @@
+import type { TableProps } from "./table.svelte";
+
+import { ctx } from "$lib/store.svelte";
+import {
+    Binary,
+    Braces,
+    Brackets,
+    Calendar,
+    CalendarClock,
+    Clock,
+    Hash,
+    Key,
+    Text,
+    Type,
+} from "lucide-svelte/icons";
+
+export function getCollectionColumns(collectionName: string): TableProps['columns'] {
+    const collectionFields = getFields(collectionName);
+    const headers: TableProps['columns'] = [];
+    for (const fieldName in collectionFields) {
+        const field = collectionFields[fieldName];
+        headers.push({
+            id: field.key,
+            subtext: field.type,
+            icon: getFieldIcon(fieldName, collectionName),
+        });
+    }
+    return headers;
+}
+
+export function getFieldIcon(fieldName: string, collectionName: string) {
+	const field = getField(fieldName, collectionName);
+	if (fieldName === "id") {
+		return Key;
+	} else if (field.type === "string") {
+		return Type;
+	} else if (field.type === "text") {
+		return Text;
+	} else if (field.type === "object") {
+		return Braces;
+	} else if (field.type === "array") {
+		return Brackets;
+	} else if (field.type === "bool") {
+		return Binary;
+	} else if (field.type === "integer") {
+		return Hash;
+	} else if (field.type === "long") {
+		return Hash;
+	} else if (field.type === "float") {
+		return Hash;
+	} else if (field.type === "decimal") {
+		return Hash;
+	} else if (field.type === "date") {
+		return Calendar;
+	} else if (field.type === "datetime") {
+		return CalendarClock;
+	} else if (field.type === "time") {
+		return Clock;
+	}
+
+	throw new Error(`(${field.type}) doesnt have an icon`);
+}
+
+export function getFields(collectionName: string) {
+	return ctx.meta.collections[collectionName].fields;
+}
+
+export function getField(fieldName: string, collectionName: string) {
+	return getFields(collectionName)[fieldName];
+}
+
+export function getCollectionPrimaryField(collectionName: string): string | undefined {
+	const collectionFields =
+			ctx.meta.collections[collectionName].fields;
+
+	const primaryFieldObject: any = Object.values(collectionFields).find(
+		(field) => (field as any).type === "string",
+	);
+
+	if (
+		primaryFieldObject &&
+		typeof primaryFieldObject === "object" &&
+		"key" in primaryFieldObject
+	) {
+		const fieldName = primaryFieldObject.key;
+		return fieldName;
+	}
+}
+
+export function getCollectionParamsFields(collectionName: string, allFields = false) {
+	const relations = ctx.meta.relations;
+	const foreignFields = relations
+		.filter((relation) => {
+			return relation.from.collection === collectionName
+		})
+		.map((relation) => {
+			return {
+				field: relation.from.field,
+				collection: relation.to.collection,
+			};
+		});
+
+	const columns = [];
+	for (let index = 0; index < foreignFields.length; index++) {
+		const foreignField = foreignFields[index];
+		if (!foreignField.collection) {
+			continue;
+		}
+		columns.push(`${foreignField.field}.id`);
+
+		if (!allFields) {
+			const primaryField = getCollectionPrimaryField(foreignField.collection)
+			if (primaryField) {
+				columns.push(`${foreignField.field}.${primaryField}`);
+			}
+		} else {
+			const fieldNames = Object.keys(ctx.meta.collections[foreignField.collection].fields);
+			for (let index = 0; index < fieldNames.length; index++) {
+				const fieldName = fieldNames[index];
+				columns.push(`${foreignField.field}.${fieldName}`);
+			}
+		}
+	}
+
+	const foreignColumns = columns.join(",");
+	return `*${foreignColumns ? `,${foreignColumns}` : ""}`;
+}