@vertesia/ui 0.60.0 → 0.61.0

package/src/features/store/collections/BrowseCollectionView.tsx

@@ -0,0 +1,45 @@
+import { useUserSession, TypeRegistry } from "@vertesia/ui/session";
+import { Collection } from "@vertesia/common";
+import { DocumentSearchResultsWithDropZone, DocumentSearchResults } from "../objects/DocumentSearchResults";
+import { useToast } from "@vertesia/ui/core";
+
+
+interface BrowseCollectionViewProps {
+    collection: Collection;
+}
+export function BrowseCollectionView({ collection }: BrowseCollectionViewProps) {
+    const toast = useToast();
+    const { client, typeRegistry } = useUserSession();
+    const onUploadDone = async (objectIds: string[]) => {
+        if (objectIds.length > 0) {
+            await client.store.collections.addMembers(collection.id, objectIds).catch(err => {
+                toast({
+                    title: 'Failed to add objects to collection',
+                    description: err.message,
+                    status: 'error'
+                })
+            });
+        }
+    }
+    const tableLayout = getTableLayout(collection, typeRegistry);
+    return collection.dynamic ? (
+        <DocumentSearchResults layout={tableLayout} />
+    ) : (
+        <DocumentSearchResultsWithDropZone onUploadDone={onUploadDone} layout={tableLayout} />
+    )
+}
+
+function getTableLayout(collection: Collection, typeRegistry?: TypeRegistry | undefined) {
+    let table_layout = collection.table_layout;
+    if (table_layout && table_layout.length > 0) {
+        return table_layout;
+    }
+    if (collection.type && typeRegistry) {
+        table_layout = typeRegistry?.getTypeLayout(collection.type.id);
+    }
+    if (table_layout && table_layout.length > 0) {
+        return table_layout;
+    } else {
+        return undefined;
+    }
+}

package/src/features/store/collections/CollectionView.tsx

@@ -0,0 +1,94 @@
+import { Collection, FacetSpec } from "@vertesia/common";
+import { ErrorBox, Spinner, useFetch, VTabs, VTabsBar, VTabsPanel } from "@vertesia/ui/core";
+import { FullHeightLayout } from "@vertesia/ui/layout";
+import { NavLink } from "@vertesia/ui/router";
+import { useUserSession } from "@vertesia/ui/session";
+import { PanelErrorBoundary } from "../../errors";
+import { GenericPageNavHeader } from "../../layout";
+import { DocumentSearchProvider, DocumentSelectionProvider } from "../../store";
+import { SelectionActions, UploadObjectsButton } from "../objects/selection/SelectionActions";
+import { BrowseCollectionView } from "./BrowseCollectionView";
+import { EditCollectionView } from "./EditCollectionView";
+
+const facets: FacetSpec[] = [
+    {
+        name: 'status',
+        field: 'status'
+    },
+    {
+        name: 'type',
+        field: 'type'
+    }
+];
+
+
+interface CollectionViewProps {
+    collectionId: string;
+}
+export function CollectionView({ collectionId }: CollectionViewProps) {
+    const { client } = useUserSession();
+
+    const { data: collection, error, refetch, isLoading } = useFetch(() => client.store.collections.retrieve(collectionId), [collectionId]);
+
+    if (error) {
+        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+    }
+
+    const actions = [
+        <SelectionActions key='selection' />,
+        <UploadObjectsButton key="upload" collectionId={collectionId ?? ''} />
+    ];
+
+    const title = (
+        <div className='flex gap-x-1 items-center'>
+            <div>{collection?.name || ''}</div>
+        </div>
+    )
+
+    const breadcrumbs = [
+        <NavLink href='/collections' key='collections'>Collections</NavLink>,
+        <span key='collection-detail'>Collection Detail</span>
+    ];
+
+    const tabs = [
+        {
+            name: 'browse',
+            label: 'Browse',
+            content: <BrowseCollectionView collection={collection as Collection} />
+        },
+        {
+            name: 'metadata',
+            label: 'Metadata',
+            content: <EditCollectionView collection={collection as Collection} refetch={refetch} />
+        }
+    ];
+
+    return (
+        <FullHeightLayout>
+            <DocumentSearchProvider facets={facets} collectionId={collectionId}>
+                <DocumentSelectionProvider collectionId={collectionId}>
+                    <GenericPageNavHeader title={title}
+                        description={collection?.description || ''}
+                        actions={actions}
+                        breadcrumbs={breadcrumbs}
+                    />
+                    <VTabs defaultValue="browse" tabs={tabs}>
+                        <VTabsBar className="px-4" />
+                        {
+                            isLoading ?
+                                <div className="w-full flex justify-center">
+                                    <Spinner />
+                                </div> :
+                                <div className="h-[calc(100vh-165px)] overflow-auto px-4 py-2">
+                                    <PanelErrorBoundary>
+                                        <VTabsPanel />
+                                    </PanelErrorBoundary>
+                                </div>
+                        }
+                    </VTabs>
+
+                </DocumentSelectionProvider>
+            </DocumentSearchProvider>
+        </FullHeightLayout>
+    )
+}

package/src/features/store/collections/CollectionsTable.tsx

@@ -0,0 +1,115 @@
+import { NavLink } from "@vertesia/ui/router";
+import { useUserSession } from "@vertesia/ui/session";
+import { FolderClosed, Search, Trash2 } from "lucide-react";
+import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip } from "@vertesia/ui/core";
+import { useFetch } from "@vertesia/ui/core";
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useState, useEffect } from "react";
+
+dayjs.extend(relativeTime);
+
+interface CollectionsTableProps {
+}
+export function CollectionsTable({ }: CollectionsTableProps) {
+    const { client } = useUserSession();
+    const toast = useToast();
+    const [collectionToDelete, setCollectionToDelete] = useState<string | undefined>();
+    const [isLoading, setIsLoading] = useState(true);
+
+    const { data: collections, error, refetch } = useFetch(() => client.store.collections.list(), []);
+    
+    // Update loading state when data is fetched
+    useEffect(() => {
+        if (collections || error) {
+            setIsLoading(false);
+        }
+    }, [collections, error]);
+
+    if (error) {
+        return <ErrorBox title='Collections fetch failed'>{error.message}</ErrorBox>
+    }
+
+    const deleteCollection = async () => {
+        if (!collectionToDelete) return;
+        
+        try {
+            await client.store.collections.delete(collectionToDelete);
+            toast({
+                title: 'Collection deleted',
+                status: 'success',
+                duration: 3000
+            });
+            refetch();
+        } catch (err: any) {
+            console.error('Failed to delete collection:', err);
+            toast({
+                title: 'Failed to delete collection',
+                description: err.message || 'An error occurred',
+                status: 'error',
+                duration: 5000
+            });
+        } finally {
+            setCollectionToDelete(undefined);
+        }
+    };
+
+    return (
+        <>
+            {collections && <Table className="w-full">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Created</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <TBody columns={4} isLoading={isLoading}>
+                    {
+                        collections.map((c) => {
+                            return <TR key={c.id}>
+                                <td>
+                                    <div className="flex items-center gap-2">
+                                        {collectionIcon(c.dynamic)}
+                                        <NavLink href={`/collections/${c.id}`}>{c.name}</NavLink>
+                                    </div>
+                                </td>
+                                <td>{c.type?.name || "-"}</td>
+                                <td>{dayjs(c.created_at).fromNow()}</td>
+                                <td className="text-right">
+                                    <Button 
+                                        variant="destructive" 
+                                        size="sm"
+                                        onClick={() => setCollectionToDelete(c.id)}
+                                    >
+                                        <Trash2 className="size-4" />
+                                    </Button>
+                                </td>
+                            </TR>
+                        })
+                    }
+                </TBody>
+            </Table>}
+            
+            <ConfirmModal
+                isOpen={!!collectionToDelete}
+                title="Delete Collection"
+                content="Are you sure you want to delete this collection? This action cannot be undone."
+                onConfirm={deleteCollection}
+                onCancel={() => setCollectionToDelete(undefined)}
+            />
+        </>
+    )
+}
+
+export function collectionIcon(isDynamic: boolean) {
+    const tooltipText = isDynamic ? "Dynamic Collection" : "Static Collection";
+    const icon = isDynamic ? <Search className="size-5" /> : <FolderClosed className="size-5" />;
+
+    return (
+        <VTooltip description={tooltipText} className="mr-2">
+            {icon}
+        </VTooltip>
+    );
+}

package/src/features/store/collections/CollectionsView.tsx

@@ -0,0 +1,166 @@
+import { CreateCollectionPayload } from "@vertesia/common";
+import {
+    Button, FormItem, Input, Styles,
+    Switch, useFlag, useToast, VModal,
+    VModalBody,
+    VModalFooter,
+    VModalTitle
+} from "@vertesia/ui/core";
+import { FullHeightLayout } from "@vertesia/ui/layout";
+import { useNavigate } from "@vertesia/ui/router";
+import { useUserSession } from "@vertesia/ui/session";
+import { useState } from "react";
+import { GenericPageNavHeader } from "../../layout";
+import { SelectContentType } from "../../store";
+import { CollectionsTable } from "./CollectionsTable";
+
+interface CollectionsViewProps { }
+export function CollectionsView({ }: CollectionsViewProps) {
+    const actions = [<CreateCollectionButton key="create" />];
+    return (
+        <FullHeightLayout>
+            <GenericPageNavHeader
+                title="Collections"
+                breadcrumbs={[<span key="0">Collections</span>]}
+                description="Group objects together using a collection"
+                actions={actions}
+            />
+            <FullHeightLayout.Body>
+                <CollectionsTable />
+            </FullHeightLayout.Body>
+        </FullHeightLayout>
+    );
+}
+
+function CreateCollectionButton() {
+    const { on, off, isOn } = useFlag();
+    return (
+        <div>
+            <VModal onClose={off} isOpen={isOn}>
+                <VModalTitle>Create a Collection</VModalTitle>
+                <CreateCollectionForm onClose={off} />
+            </VModal>
+            <Button onClick={on}>Create Collection</Button>
+        </div>
+    );
+}
+
+interface CreateCollectionFormProps {
+    onClose: () => void;
+    redirect?: boolean
+    onAddToCollection?: (collectionId: string) => void;
+}
+export function CreateCollectionForm({ onClose, redirect = true, onAddToCollection }: CreateCollectionFormProps) {
+    const navigate = useNavigate();
+    const toast = useToast();
+    const [isProcessing, setProcessing] = useState(false);
+    const { client } = useUserSession();
+    const [payload, setPayload] = useState<CreateCollectionPayload>({
+        dynamic: false,
+        name: "",
+        description: "",
+    });
+
+    function setPayloadProp(name: string, value: any) {
+        setPayload({
+            ...payload,
+            [name]: value,
+        });
+    }
+
+    const onCreate = () => {
+        if (!payload?.name || !payload.name.trim()) {
+            toast({
+                title: "Name is required",
+                description: "Please provide a name for the collection",
+                status: "error",
+                duration: 5000,
+            });
+            return;
+        }
+        payload.name = payload.name.trim();
+        if (payload.description) {
+            payload.description = payload.description.trim();
+        }
+        if (payload.dynamic == null) {
+            payload.dynamic = false;
+        }
+        setProcessing(true);
+        client.store.collections
+            .create(payload as CreateCollectionPayload)
+            .then((r) => {
+                onClose();
+                toast({
+                    title: "Collection created",
+                    description: `Collection "${r.name}" created successfully`,
+                    status: "success",
+                    duration: 3000,
+                });
+                if (redirect)
+                    navigate(`/collections/${r.id}`);
+                if (onAddToCollection) {
+                    onAddToCollection(r.id);
+                }
+            })
+            .catch((err) => {
+                toast({
+                    title: "Failed to create collection",
+                    description: err.message,
+                    status: "error",
+                    duration: 5000,
+                });
+            })
+            .finally(() => setProcessing(false));
+    };
+
+    return (
+        <form>
+            <VModalBody>
+                <FormItem label="Name" required>
+                    <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
+                </FormItem>
+                <FormItem label="Description" className="mt-2">
+                    <textarea
+                        className={Styles.INPUT}
+                        value={payload.description || ""}
+                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                    />
+                </FormItem>
+                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamic Collection is based on a query vs. users manully adding content.">
+                    <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
+                </FormItem>
+                <FormItem label="Type" className="mt-2" description="This is optional and drives what properties are used to describe a collection">
+                    <SelectContentType
+                        defaultValue={payload.type || null}
+                        onChange={(v) => {
+                            if (Array.isArray(v)) {
+                                setPayloadProp("type", v.length > 0 ? v[0].id : null);
+                            } else {
+                                setPayloadProp("type", v?.id || null);
+                            }
+                        }}
+                        isClearable
+                    />
+                </FormItem>
+                <FormItem label="Allowed Content Types" className="mt-4">
+                    <SelectContentType
+                        defaultValue={payload.allowed_types || null}
+                        onChange={(v) => {
+                            if (Array.isArray(v)) {
+                                setPayloadProp("allowed_types", v.map(type => type.id));
+                            } else {
+                                setPayloadProp("allowed_types", v ? [v.id] : []);
+                            }
+                        }}
+                        isClearable multiple
+                    />
+                </FormItem>
+            </VModalBody>
+            <VModalFooter>
+                <Button isDisabled={isProcessing} onClick={onCreate}>
+                    Create Collection
+                </Button>
+            </VModalFooter>
+        </form >
+    );
+}

package/src/features/store/collections/EditCollectionView.tsx

@@ -0,0 +1,253 @@
+import { json } from "@codemirror/lang-json";
+import { Collection, CreateCollectionPayload } from "@vertesia/common";
+import { Button, ErrorBox, FormItem, Input, Styles, useFetch, useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
+import { basicSetup } from "codemirror";
+import { useMemo, useRef, useState } from "react";
+import { SelectContentType, stringifyTableLayout } from "../../store";
+
+const extensions = [basicSetup, json()];
+
+interface UpdateData {
+    name: string;
+    description: string;
+    query: string;
+    tags: string[];
+    type: string;
+    allowed_types: string[];
+}
+
+interface EditCollectionViewProps {
+    collection: Collection;
+    refetch: () => void;
+}
+export function EditCollectionView({ refetch, collection }: EditCollectionViewProps) {
+    const typeId = collection.type?.id;
+    const tableLayoutRef = useRef<EditorApi | undefined>(undefined);
+    const toast = useToast();
+    const { client } = useUserSession();
+    const [isUpdating, setUpdating] = useState(false);
+    const [metadata, setMetadata] = useState<UpdateData>({
+        name: collection.name,
+        description: collection.description || "",
+        query: collection.query ? JSON.stringify(collection.query, null, 2) : "",
+        tags: collection.tags || [],
+        type: collection.type?.id || "",
+        allowed_types: collection.allowed_types || [],
+    });
+
+    const tableLayoutValue = useMemo(() => {
+        return stringifyTableLayout(collection.table_layout);
+    }, [collection.table_layout]);
+
+    const onSubmit = () => {
+        const query = metadata.query ? JSON.parse(metadata.query) : undefined;
+        const payload: Partial<CreateCollectionPayload> = {
+            name: metadata.name,
+            description: metadata.description,
+            query: query,
+            tags: metadata.tags,
+            type: metadata.type,
+            allowed_types: metadata.allowed_types,
+        };
+        let error: string | undefined;
+        if (!payload.name) {
+            error = "Name is required";
+        }
+        if (!payload.type) {
+            (payload as any).type = null;
+        }
+        if (error) {
+            toast({
+                title: "Validation failed",
+                description: error,
+                status: "error",
+                duration: 5000,
+            });
+        }
+        if (tableLayoutRef.current) {
+            const layout = tableLayoutRef.current.getValue();
+            if (layout) {
+                try {
+                    payload.table_layout = JSON.parse(layout);
+                } catch (err: any) {
+                    toast({
+                        title: "Invalid Table Layout",
+                        description: err.message,
+                        status: "error",
+                        duration: 5000,
+                    });
+                    return;
+                }
+            } else {
+                payload.table_layout = null;
+            }
+        }
+        setUpdating(true);
+        client.store.collections
+            .update(collection.id, payload)
+            .then(() => {
+                refetch();
+                toast({
+                    title: "Collection updated",
+                    description: "Collection has been updated successfully",
+                    status: "success",
+                    duration: 3000,
+                });
+            })
+            .catch((err) => {
+                toast({
+                    title: "Failed to update collection",
+                    description: err.message,
+                    status: "error",
+                    duration: 5000,
+                });
+            })
+            .finally(() => {
+                setUpdating(false);
+            });
+    };
+
+    const setField = (name: string, value: any) => {
+        setMetadata({
+            ...metadata,
+            [name]: value,
+        });
+    };
+
+    return (
+        <div className="flex flex-col gap-4 py-2">
+            <FormItem label="Name" required>
+                <Input value={metadata.name} onChange={(v) => setField("name", v)} />
+            </FormItem>
+            <FormItem label="Description">
+                <textarea
+                    className={Styles.INPUT}
+                    value={metadata.description}
+                    onChange={(e) => setField("description", e.target.value)}
+                />
+            </FormItem>
+            {collection.dynamic && (
+                <FormItem label="Query" description="Define the query to fetch dynamic content for this collection.">
+                    <textarea
+                        className={Styles.INPUT}
+                        value={metadata.query}
+                        onChange={(e) => setField("query", e.target.value)}
+                    />
+                </FormItem>
+            )}
+            <FormItem label="Table Layout" description="Define how the collection should be displayed in tables.">
+                <CodeMirrorEditor className="border-1 rounded-md border-border"
+                    value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
+            </FormItem>
+            <FormItem label="Type">
+                <SelectContentType
+                    defaultValue={metadata.type || null}
+                    onChange={(v) => {
+                        if (Array.isArray(v)) {
+                            setField("type", v.length > 0 ? v[0].id : null);
+                        } else {
+                            setField("type", v?.id || null);
+                        }
+                    }}
+                    isClearable
+                />
+            </FormItem>
+            <FormItem label="Allowed Content Types">
+                <SelectContentType
+                    defaultValue={metadata.allowed_types || null}
+                    onChange={(v) => {
+                        if (Array.isArray(v)) {
+                            setField("allowed_types", v.map(type => type.id));
+                        } else {
+                            setField("allowed_types", v ? [v.id] : []);
+                        }
+                    }}
+                    isClearable multiple
+                />
+            </FormItem>
+            <Button size="lg" className="w-min my-4" isDisabled={isUpdating} onClick={onSubmit}>
+                Save Metadata
+            </Button>
+
+            {typeId && <PropertiesEditor typeId={typeId} collection={collection} />}
+        </div>
+    );
+}
+
+interface PropertiesEditorProps {
+    typeId: string;
+    collection: Collection;
+}
+function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
+    const { client } = useUserSession();
+    const { data: type, error } = useFetch(() => client.store.types.retrieve(typeId), [typeId]);
+    if (error) {
+        return <ErrorBox title="Failed to load type">{error.message}</ErrorBox>;
+    }
+
+    return (
+        <Section title="Properties">
+            {type && <PropertiesForm collection={collection} schema={type.object_schema} />}
+        </Section>
+    );
+}
+
+interface PropertiesFormProps {
+    schema: any;
+    collection: Collection;
+}
+function PropertiesForm({ schema = {}, collection }: PropertiesFormProps) {
+    const { client } = useUserSession();
+    const toast = useToast();
+    const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection]);
+    const [isUpdating, setIsUpdating] = useState(false);
+
+    const _onSave = (data: any) => {
+        const payload = { properties: data || {} };
+        setIsUpdating(true);
+        client.store.collections
+            .update(collection.id, payload)
+            .then(() => {
+                toast({
+                    title: "Collection properties updated",
+                    description: "Collection has been updated successfully",
+                    status: "success",
+                    duration: 3000,
+                });
+            })
+            .catch((err) => {
+                toast({
+                    title: "Failed to update collection properties",
+                    description: err.message,
+                    status: "error",
+                    duration: 5000,
+                });
+            })
+            .finally(() => {
+                setIsUpdating(false);
+            });
+    };
+
+    return (
+        <GeneratedForm object={object} onSubmit={_onSave}>
+            <Button size="lg" isLoading={isUpdating} className="my-4" variant="primary" type="submit">
+                Save Properties
+            </Button>
+        </GeneratedForm>
+    );
+}
+
+interface SectionProps {
+    children: React.ReactNode;
+    title: string;
+}
+function Section({ children, title }: SectionProps) {
+    return (
+        <div className="my-4">
+            <div className="text-lg text-gray-700 font-semibold border-b border-b-gray-300 py-2 mb-4">{title}</div>
+            {children}
+        </div>
+    );
+}

package/src/features/store/collections/index.ts

@@ -0,0 +1,5 @@
+export * from "./BrowseCollectionView";
+export * from "./CollectionsTable";
+export * from "./CollectionsView";
+export * from "./CollectionView";
+export * from "./EditCollectionView";

package/src/features/store/index.ts

@@ -0,0 +1,3 @@
+export * from "./objects";
+export * from "./types";
+export * from "./collections";