@lobb-js/lobb-ext-storage 0.8.2 → 0.8.4

package/dist/extension.types.d.ts

@@ -0,0 +1,25 @@
+export interface Extension {
+    name: string;
+    onStartup?: (utils: ExtensionUtils) => void;
+    components?: Record<string, any>;
+    dashboardNavs?: {
+        top?: NavItem[];
+        middle?: NavItem[];
+        bottom?: NavItem[];
+    };
+}
+export interface NavItem {
+    label: string;
+    icon?: any;
+    href?: string;
+    onclick?: () => void;
+    navs?: NavItem[];
+}
+export interface ExtensionUtils {
+    components: {
+        Icons: Record<string, any>;
+    };
+    location: {
+        navigate: (path: string) => void;
+    };
+}

package/dist/extension.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import type { Extension, ExtensionUtils } from "@lobb-js/studio";
+export default function extension(utils: ExtensionUtils): Extension;

package/dist/index.js

@@ -0,0 +1,25 @@
+import FileExplorerPage from "./lib/components/pages/fileExplorerPage.svelte";
+import ForeignKeyComponent from "./lib/components/foreignKeyComponent.svelte";
+import ChildrenFileExplorer from "./lib/components/childrenFileExplorer.svelte";
+import ExplorerNotSupported from "./lib/components/explorerNotSupported.svelte";
+export default function extension(utils) {
+    return {
+        name: "storage",
+        components: {
+            "pages.file_manager": FileExplorerPage,
+            "detailView.fields.foreignKey.storage_fs": ForeignKeyComponent,
+            "detailView.create.subRecords.storage_fs": ExplorerNotSupported,
+            "detailView.update.subRecords.storage_fs": ChildrenFileExplorer,
+            "listView.entry.children.storage_fs": ChildrenFileExplorer,
+        },
+        dashboardNavs: {
+            middle: [
+                {
+                    href: "/studio/extensions/storage/file_manager",
+                    icon: utils.components.Icons.Folders,
+                    label: "File Manager",
+                },
+            ],
+        },
+    };
+}

package/dist/lib/components/childrenFileExplorer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { ExtensionProps } from "@lobb-js/studio";
+  import FileExplorer from "./fileExplorer.svelte";
+
+  interface Props extends ExtensionProps {
+    class: string;
+  }
+
+  const { utils, filter, class: className }: Props = $props();
+</script>
+
+<FileExplorer foreignKeyObject={filter} utils={utils} class={className} />

package/dist/lib/components/childrenFileExplorer.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChildrenFileExplorerProps = typeof __propDef.props;
+export type ChildrenFileExplorerEvents = typeof __propDef.events;
+export type ChildrenFileExplorerSlots = typeof __propDef.slots;
+export default class ChildrenFileExplorer extends SvelteComponentTyped<ChildrenFileExplorerProps, ChildrenFileExplorerEvents, ChildrenFileExplorerSlots> {
+}
+export {};

package/dist/lib/components/explorerNotSupported.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { FolderX } from "lucide-svelte";
+</script>
+
+<div class="border rounded-md p-4 bg-muted/30 flex items-center flex-col text-muted-foreground gap-2">
+    <FolderX size={35} />
+    <div class="flex flex-col justify-center items-center">
+        <div class="text-sm font-bold">Storage file system is not supported here</div>
+        <div class="text-xs text-center max-w-96">
+            To access the storage file system for this record, please create the record first, then edit it to enable storage access.
+        </div>
+    </div>
+</div>

package/dist/lib/components/explorerNotSupported.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExplorerNotSupportedProps = typeof __propDef.props;
+export type ExplorerNotSupportedEvents = typeof __propDef.events;
+export type ExplorerNotSupportedSlots = typeof __propDef.slots;
+export default class ExplorerNotSupported extends SvelteComponentTyped<ExplorerNotSupportedProps, ExplorerNotSupportedEvents, ExplorerNotSupportedSlots> {
+}
+export {};

package/dist/lib/components/fileExplorer.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import type { Snippet } from "svelte";
+
+	import { fileOpen } from 'browser-fs-access';
+    import path from "path-browserify"
+	import FileManagerBreadCrumbs from "./fileManagerBreadCrumbs.svelte";
+    import FileIcon from "./fileIcon.svelte";
+
+    export interface Entry {
+        id: string;
+        name: string;
+        path: string;
+        type: "directory" | "file";
+        icon: string;
+        file_mime_type: string;
+    }
+
+    interface Props extends ExtensionProps {
+        location?: string;
+        onFileSelect?: (entry: Entry) => void;
+        foreignKeyObject?: Record<string, any>;
+        topLeftHeader?: Snippet<[]>;
+        class?: string;
+    }
+
+	let { location = $bindable('/'), onFileSelect, topLeftHeader, foreignKeyObject = {}, class: className, ...props }: Props = $props();
+
+    let loading = $state(true);
+    let entries: Entry[] = $state([]);
+
+	let contextType: "directory" | "file" | "background" = $state("background");
+	let selectedEntry: Entry | undefined = $state(undefined);
+	let contextMenuOpen: boolean = $state(false);
+
+    const utils = props.utils;
+	const icons = utils.components.Icons;
+	const { Tooltip, Button, ContextMenu } = utils.components;
+
+	$effect(() => {
+		renderFileExplorer(location);
+	});
+
+	async function renderFileExplorer(
+		location: string,
+	) {
+        loading = true;
+
+		const localFilter = {
+			filter: {
+				path: location,
+                ...foreignKeyObject,
+			},
+		};
+        const response = await utils.lobb.findAll("storage_fs", localFilter);
+        entries = (await response.json()).data;
+
+        loading = false;
+	}
+
+	async function refreshFileExplorer() {
+		await renderFileExplorer(location);
+	}
+
+	async function handleCreateFolder() {
+		contextMenuOpen = false;
+		const newFolderName = prompt("Please enter a name for the new folder:");
+		if (newFolderName) {
+			const response = await utils.lobb.createOne("storage_fs", {
+				name: newFolderName,
+				path: location,
+				type: "directory",
+                ...foreignKeyObject,
+			});
+			const result = await response.json();
+			if (result.error) {
+				if (result.error.status === 409) {
+					utils.toast.error(
+						"Directories with the same name cannot exist in the same directory.",
+					);
+				} else {
+					utils.toast.error(result.error.message);
+				}
+				return;
+			}
+			await refreshFileExplorer();
+		}
+	}
+
+	async function handleFileUpload() {
+		contextMenuOpen = false;
+
+		async function uploadFile(file: File) {
+			if (file) {
+				const response = await utils.lobb.createOne(
+					"storage_fs",
+					{
+						path: location,
+                        ...foreignKeyObject,
+					},
+					file,
+				);
+				const result = await response.json();
+				if (result.error) {
+					if (result.error.status === 409) {
+						utils.toast.error(
+							"Files with the same name cannot exist in the same directory.",
+						);
+					} else {
+						utils.toast.error(result.error.message);
+					}
+					contextMenuOpen = false;
+					return;
+				}
+			}
+			await refreshFileExplorer();
+		}
+
+		const file = await fileOpen();
+
+		utils.toast.promise(
+			uploadFile(file),
+			{
+				loading: 'Uploading File...',
+				success: 'Done Uploading!',
+				error: 'Something went wrong While Uploading!',
+				duration: 3000,
+			},
+		);
+	}
+
+	async function handleDeleteEntry() {
+		if (!selectedEntry) {
+			throw new Error(
+				"The selected Element is (undefined) for some reason",
+			);
+		}
+		const entryId = selectedEntry.id;
+		if (!entryId) {
+			throw new Error("The id of the entry is (null) for some reason");
+		}
+		const response = await utils.lobb.deleteOne(
+			"storage_fs",
+			entryId,
+		);
+		const result = await response.json();
+		if (result.status >= 400) {
+			return;
+		}
+		await refreshFileExplorer();
+		utils.toast.success("Deleted entry successfully");
+		contextMenuOpen = false;
+	}
+
+	async function oncontextmenucapture(e: Event) {
+		const element = e.target as HTMLElement;
+		const entryId = element.getAttribute("data-id");
+		if (entryId) {
+			selectedEntry = entries.find((el: any) => el.id == entryId);
+			if (selectedEntry?.type === "file") {
+				contextType = "file";
+			} else if (selectedEntry?.type === "directory") {
+				contextType = "directory";
+			} else {
+				contextType = "background";
+			}
+		} else {
+			selectedEntry = undefined;
+			contextType = "background";
+		}
+	}
+
+	async function handleSelect(e: Event) {
+		const element = e.target as HTMLElement;
+		const entryId = element.getAttribute("data-id");
+		if (entryId) {
+			selectedEntry = entries.find((el: any) => el.id == entryId);
+		} else {
+			selectedEntry = undefined;
+		}
+	}
+
+	async function handleEntryDoubleClick(entry: Entry) {
+		if (entry.type === "directory") {
+            const locationPath = path.join(entry.path, entry.name);
+            location = locationPath;
+		} else if (entry.type === 'file') {
+            if (onFileSelect) {
+                onFileSelect(entry);
+            }
+        }
+	}
+</script>
+
+<div class="flex h-full w-full flex-col bg-background {className}">
+    <!-- file explorer header -->
+    <div
+        class="flex h-10 items-center justify-between border-b px-2"
+    >
+        <div class="flex items-center justify-between gap-2">
+            {@render topLeftHeader?.()}
+            <FileManagerBreadCrumbs bind:location={location} {utils} />
+        </div>
+        <div class="flex gap-2">
+            <!-- entries view toggle -->
+            <Tooltip.Provider delayDuration={0}>
+                <Tooltip.Root>
+                    <Tooltip.Trigger>
+                        <Button
+                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                            variant="ghost"
+                            size="icon"
+                        >
+                            <icons.List />
+                        </Button>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content
+                        side="bottom"
+                        sideOffset={7.5}
+                    >
+                        List View
+                    </Tooltip.Content>
+                </Tooltip.Root>
+            </Tooltip.Provider>
+            <Button
+                variant="outline"
+                class="h-7 px-3 text-xs font-normal"
+                Icon={icons.FolderPlus}
+                onclick={handleCreateFolder}
+            >
+                New folder
+            </Button>
+            <Button
+                class="h-7 px-3 text-xs font-normal"
+                Icon={icons.FilePlus}
+                onclick={() => { handleFileUpload() }}
+            >
+                New file
+            </Button>
+        </div>
+    </div>
+    <!-- file explorer body -->
+    <div class="flex flex-1 overflow-auto h-[calc(100vh-7.5rem)]">
+        <ContextMenu.Root bind:open={contextMenuOpen}>
+            <ContextMenu.Trigger
+                class="z-10 flex flex-1 flex-wrap content-start items-start justify-start gap-4 p-4"
+                onclick={handleSelect}
+                {oncontextmenucapture}
+            >
+                {#if loading}
+                    <div
+                        class="flex h-full w-full items-center justify-center"
+                    >
+                        <div
+                            class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+                        >
+                            <icons.LoaderCircle
+                                class="opacity-50 animate-spin"
+                                size="50"
+                            />
+                            <div
+                                class="flex flex-col items-center justify-center"
+                            >
+                                <div>Loading files and directories, please wait...</div>
+                                <div class="text-xs">
+                                    Fetching the contents of the current folder from the lobb server.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {:else}
+                    {#if entries && entries.length}
+                        {#each entries as entry}
+                            {@const selectedCss =
+                                selectedEntry?.id === entry.id
+                                    ? "bg-opacity-25 hover:bg-opacity-25"
+                                    : "hover:bg-opacity-10"}
+                            <button
+                                class="w-32 cursor-default rounded-md bg-muted-foreground bg-opacity-0 p-2 {selectedCss}"
+                                data-id={entry.id}
+                                ondblclick={() =>
+                                    handleEntryDoubleClick(entry)}
+                            >
+                                {#if entry.type === "directory"}
+                                    <div
+                                        class="pointer-events-none flex min-w-28 flex-col items-center"
+                                    >
+                                        <div
+                                            class="pointer-events-none relative"
+                                        >
+                                            <icons.Folder
+                                                size="50"
+                                                class="fill-muted-foreground stroke-none"
+                                            />
+                                            {#if entry.icon}
+                                                {@const key = entry.icon}
+                                                {/* @ts-ignore */ null}
+                                                {@const Icon = icons[key]}
+                                                <div
+                                                    class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
+                                                >
+                                                    <Icon
+                                                        class="text-primary-foreground"
+                                                        style="transform: translateY(0.1rem);"
+                                                        size="15"
+                                                    />
+                                                </div>
+                                            {/if}
+                                        </div>
+                                        <div
+                                            class="pointer-events-none w-full break-words text-center text-sm font-medium"
+                                        >
+                                            {entry.name}
+                                        </div>
+                                    </div>
+                                {:else}
+                                    <FileIcon {...props} {entry} />
+                                {/if}
+                            </button>
+                        {/each}
+                    {:else}
+                        <div
+                            class="flex h-full w-full items-center justify-center p-8"
+                        >
+                            <div
+                                class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+                            >
+                                <icons.CircleSlash2
+                                    class="opacity-50"
+                                    size="50"
+                                />
+                                <div
+                                    class="flex flex-col items-center justify-center"
+                                >
+                                    <div>Folder is empty</div>
+                                    <div class="text-xs">
+                                        Right-click to create a new folder
+                                        or upload a file.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                {/if}
+            </ContextMenu.Trigger>
+            <ContextMenu.Content
+                class="z-10 flex flex-col rounded-md border border-muted bg-background p-1 shadow-md outline-none w-40"
+            >
+                {#if contextType === "directory"}
+                    <Button
+                        variant="ghost"
+                        onclick={handleDeleteEntry}
+                        class="flex items-center gap-2 rounded-md px-4 h-8 hover:bg-muted focus-visible:ring-0 cursor-default font-normal"
+                    >
+                        Delete directory
+                    </Button>
+                {:else if contextType === "file"}
+                    <Button
+                        variant="ghost"
+                        onclick={handleDeleteEntry}
+                        class="rounded-md px-4 h-8 hover:bg-muted focus-visible:ring-0 cursor-default font-normal"
+                    >
+                        Delete file
+                    </Button>
+                {:else}
+                    <Button
+                        variant="ghost"
+                        onclick={handleCreateFolder}
+                        class="flex items-center gap-2 rounded-md px-4 h-8 hover:bg-muted focus-visible:ring-0 cursor-default font-normal"
+                    >
+                        New folder
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        onclick={handleFileUpload}
+                        class="flex items-center gap-2 rounded-md px-4 h-8 hover:bg-muted focus-visible:ring-0 cursor-default font-normal"
+                    >
+                        New file
+                    </Button>
+                {/if}
+            </ContextMenu.Content>
+        </ContextMenu.Root>
+    </div>
+    <div
+        class="flex h-10 items-center justify-center border-t px-4 text-sm text-muted-foreground"
+    >
+        {#if loading}
+            <div class="flex gap-2 justify-center items-center">
+                <icons.LoaderCircle
+                    class="animate-spin"
+                    size="15"
+                />
+                <div>loading...</div>
+            </div>
+        {:else}
+            {entries ? entries.length : "0"} items available
+        {/if}
+    </div>
+</div>

package/dist/lib/components/fileExplorer.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+export interface Entry {
+    id: string;
+    name: string;
+    path: string;
+    type: "directory" | "file";
+    icon: string;
+    file_mime_type: string;
+}
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileExplorerProps = typeof __propDef.props;
+export type FileExplorerEvents = typeof __propDef.events;
+export type FileExplorerSlots = typeof __propDef.slots;
+export default class FileExplorer extends SvelteComponentTyped<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
+}
+export {};

package/dist/lib/components/fileIcon.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { ExtensionProps } from "@lobb-js/studio";
+    import type { Entry } from "./fileExplorer.svelte";
+
+    interface Props extends ExtensionProps {
+        entry: Entry;
+    }
+
+    const { entry, utils }: Props = $props();
+
+    const MainIcon = utils.components.Icons.File;
+    const InnerIcon = utils.components.Icons.Text;
+</script>
+
+<div
+    class="pointer-events-none flex flex-col items-center gap-2 min-w-28"
+>
+    {#if entry.file_mime_type.startsWith("image/")}
+        <div class="rounded-md w-24 h-24 bg-center bg-contain bg-no-repeat" style="background-image: url('{utils.lobb.lobbUrl}/api/collections/storage_fs/{entry.id}?action=view');"></div>
+    {:else}
+        <div
+            class="pointer-events-none relative"
+        >
+            <MainIcon
+                size="50"
+                class="fill-muted stroke-muted-foreground"
+                style="stroke-width: 0.03rem;"
+            />
+            <div
+                class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
+            >
+                <InnerIcon
+                    class="text-muted-foreground"
+                    style="transform: translateY(0.1rem);"
+                    size="15"
+                />
+            </div>
+        </div>
+    {/if}
+    <div
+        class="pointer-events-none w-full break-words text-center text-sm font-medium"
+    >
+        {entry.name}
+    </div>
+</div>

package/dist/lib/components/fileIcon.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileIconProps = typeof __propDef.props;
+export type FileIconEvents = typeof __propDef.events;
+export type FileIconSlots = typeof __propDef.slots;
+export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
+}
+export {};

package/dist/lib/components/fileManagerBreadCrumbs.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import path from "path-browserify"
+
+	interface Props extends ExtensionProps {
+		location: string;
+	}
+
+	let { location = $bindable(), utils }: Props = $props();
+
+	let pathNames: string[] | undefined = $state(undefined);
+
+	$effect(() => {
+		pathNames = ["/", ...location.split("/").filter(Boolean)];
+	});
+</script>
+
+<utils.components.Breadcrumb.Root class="pl-2">
+	<utils.components.Breadcrumb.List>
+		{#if pathNames}
+			{#each pathNames as localPath, index}
+				{@const isLastElement = pathNames.length - 1 === index}
+				{@const currentFullPaths = pathNames
+					.slice(1, index + 1)
+					.join("/")}
+				{@const pathLabel = localPath === "/" ? "Home" : localPath}
+				<utils.components.Breadcrumb.Item>
+					{#if isLastElement}
+						<utils.components.Breadcrumb.Page>
+							{pathLabel}
+						</utils.components.Breadcrumb.Page>
+					{:else}
+						<utils.components.Breadcrumb.Link
+							class="cursor-pointer"
+							onclick={() => {
+								const invertedIndex = pathNames && pathNames.length - 1 - index;
+								location = path.join(location, Array(invertedIndex).fill("..").join('/'))
+							}}
+						>
+							{pathLabel}
+						</utils.components.Breadcrumb.Link>
+					{/if}
+				</utils.components.Breadcrumb.Item>
+				{#if !isLastElement}
+					<utils.components.Breadcrumb.Separator />
+				{/if}
+			{/each}
+		{/if}
+	</utils.components.Breadcrumb.List>
+</utils.components.Breadcrumb.Root>

package/dist/lib/components/fileManagerBreadCrumbs.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileManagerBreadCrumbsProps = typeof __propDef.props;
+export type FileManagerBreadCrumbsEvents = typeof __propDef.events;
+export type FileManagerBreadCrumbsSlots = typeof __propDef.slots;
+export default class FileManagerBreadCrumbs extends SvelteComponentTyped<FileManagerBreadCrumbsProps, FileManagerBreadCrumbsEvents, FileManagerBreadCrumbsSlots> {
+}
+export {};