@vertesia/ui 0.78.0 → 0.79.1

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

@@ -1,10 +1,12 @@
 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 dayjs from "dayjs";
 import { basicSetup } from "codemirror";
 import { useMemo, useRef, useState } from "react";
+import { UserInfo } from "@vertesia/ui/features";
+import { useUserSession } from "@vertesia/ui/session";
+import { Collection, CreateCollectionPayload } from "@vertesia/common";
+import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
+import { Button, ErrorBox, FormItem, Input, Styles, Textarea, useFetch, useToast, Panel } from "@vertesia/ui/core";
 import { SelectContentType, stringifyTableLayout } from "../types";
 
 const extensions = [basicSetup, json()];
@@ -42,7 +44,19 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     }, [collection.table_layout]);
 
     const onSubmit = () => {
-        const query = metadata.query ? JSON.parse(metadata.query) : undefined;
+        let query: any = undefined;
+        try {
+            query = metadata.query ? JSON.parse(metadata.query) : undefined;
+        } catch (err: any) {
+            toast({
+                title: "Invalid Query JSON",
+                description: err.message,
+                status: "error",
+                duration: 5000,
+            });
+            return;
+        }
+
         const payload: Partial<CreateCollectionPayload> = {
             name: metadata.name,
             description: metadata.description,
@@ -65,6 +79,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                 status: "error",
                 duration: 5000,
             });
+            return;
         }
         if (tableLayoutRef.current) {
             const layout = tableLayoutRef.current.getValue();
@@ -118,61 +133,82 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
 
     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="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+            <Panel title="Configuration"
+                action={
+                    <Button size="lg" isDisabled={isUpdating} onClick={onSubmit}>
+                        Save
+                    </Button>
+                }>
+                <div className="flex justify-between mb-2">
+                    <div className="w-1/2 gap-2 flex flex-col">
+                        <div className="text-sm font-medium mb-1">Created By</div>
+                        <div className="gap-2 flex items-center">
+                            <UserInfo userRef={collection.created_by} showTitle />
+                            <span>at {dayjs(collection.created_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                        </div>
+                    </div>
+                    <div className="w-1/2 gap-2 flex flex-col">
+                        <div className="text-sm font-medium mb-1">Updated By</div>
+                        <div className="gap-2 flex items-center">
+                            <UserInfo userRef={collection.updated_by} showTitle />
+                            <span>at {dayjs(collection.updated_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                        </div>
+                    </div>
+                </div>
+                <FormItem label="Name" required>
+                    <Input value={metadata.name} onChange={(v) => setField("name", v)} />
+                </FormItem>
+                <FormItem label="Description">
+                    <Textarea
+                        value={metadata.description}
+                        onChange={(e) => setField("description", e)}
+                    />
+                </FormItem>
+                {
+                    !collection.dynamic &&
+                    <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+                        <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>
+                }
+                {
+                    collection.dynamic && (
+                        <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
+                            <Textarea
+                                className={Styles.INPUT}
+                                value={metadata.query}
+                                onChange={(e) => setField("query", e)}
+                            />
+                        </FormItem>
+                    )
+                }
+                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
+                    <CodeMirrorEditor className="border-1 rounded-md border-border"
+                        value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
+                </FormItem>
+                <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
                     <SelectContentType
-                        defaultValue={metadata.allowed_types || null}
+                        defaultValue={metadata.type || null}
                         onChange={(v) => {
                             if (Array.isArray(v)) {
-                                setField("allowed_types", v.map(type => type.id));
+                                setField("type", v.length > 0 ? v[0].id : null);
                             } else {
-                                setField("allowed_types", v ? [v.id] : []);
+                                setField("type", v?.id || null);
                             }
                         }}
-                        isClearable multiple
-                    />
-                </FormItem>
-            }
-            {collection.dynamic && (
-                <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
-                    <textarea
-                        className={Styles.INPUT}
-                        value={metadata.query}
-                        onChange={(e) => setField("query", e.target.value)}
+                        isClearable
                     />
                 </FormItem>
-            )}
-            <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
-                <CodeMirrorEditor className="border-1 rounded-md border-border"
-                    value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
-            </FormItem>
-            <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
-                <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>
-            <Button size="lg" className="w-min my-4" isDisabled={isUpdating} onClick={onSubmit}>
-                Save Metadata
-            </Button>
+            </Panel>
 
             {typeId && <PropertiesEditor typeId={typeId} collection={collection} />}
         </div>
@@ -184,28 +220,22 @@ interface PropertiesEditorProps {
     collection: Collection;
 }
 function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
+    const toast = useToast();
     const { client } = useUserSession();
+    const [isUpdating, setIsUpdating] = useState(false);
+
     const { data: type, error } = useFetch(() => client.store.types.retrieve(typeId), [typeId]);
+    const schema = type?.object_schema || {};
+    const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection.properties]);
+
     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>
-    );
-}
+    if (!type) {
+        return null;
+    }
 
-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 || {} };
@@ -234,23 +264,12 @@ function PropertiesForm({ schema = {}, collection }: PropertiesFormProps) {
     };
 
     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>
+        <Panel title="Properties" action={
+            <Button size="lg" isLoading={isUpdating} type="submit">
+                Save
+            </Button>}
+        >
+            <GeneratedForm object={object} onSubmit={_onSave} />
+        </Panel>
     );
 }

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

@@ -1,46 +1,231 @@
-import { ErrorBox, useFetch, VSelectBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
-interface SelectCollectionProps {
-    value?: string; // Collection ID
-    onChange: (collectionId: string | undefined, collection?: any) => void;
-    disabled?: boolean;
-    className?: string;
-}
+import { CollectionItem } from "@vertesia/common";
+import {
+    Button, cn, ErrorBox, useDebounce, useFetch,
+    Popover, PopoverContent, PopoverTrigger,
+    Command, CommandEmpty, CommandGroup, CommandItem, CommandInput
+} from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
 
 /**
  * A component to select a collection from a list of collections.
  * It fetches the collections from the store and displays them in a dropdown.
  * @param props - The properties for the component.
  * @returns A dropdown to select a collection.
- */
-export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
+**/
+interface SelectCollectionProps {
+    value?: string | string[];
+    onChange: (collectionId: string | string[] | undefined, collection?: CollectionItem | CollectionItem[]) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    filterOut?: string[]; // collection IDs to filter out from the list
+    allowDynamic?: boolean;
+    multiple?: boolean;
+}
+
+export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections", filterOut, allowDynamic = true, multiple = false }: SelectCollectionProps) {
     const { client } = useUserSession();
-    const { data: collections, error } = useFetch(() => client.store.collections.search({ dynamic: false }), []);
 
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+    const [useServerSearch, setUseServerSearch] = useState(false);
+
+    // Debounce the search query to avoid excessive API calls (only used for server-side search)
+    const debouncedSearchQuery = useDebounce(searchQuery, 300);
+
+    // Memoize the search function to prevent unnecessary re-renders
+    const searchCollections = useCallback(async (query: string) => {
+        setIsSearching(true);
+        const trimmedQuery = query.trim();
+
+        const collections = await client.store.collections.search({
+            dynamic: allowDynamic ? undefined : false,
+            name: useServerSearch ? (trimmedQuery || undefined) : undefined
+        });
+
+        setIsSearching(false);
+
+        // Check if we hit the maximum limit (1000 collections) - if so, enable server-side search
+        if (!useServerSearch && collections.length >= 1000) {
+            setUseServerSearch(true);
+        }
+
+        // Filter out collections if filterOut is provided
+        if (filterOut && filterOut.length > 0) {
+            return collections.filter(col => !filterOut.includes(col.id));
+        }
+        return collections;
+    }, [client, allowDynamic, filterOut, useServerSearch]);
+
+    // Fetch collections based on search mode
+    const { data: collections, error } = useFetch(
+        () => searchCollections(useServerSearch ? debouncedSearchQuery : ''),
+        [useServerSearch ? debouncedSearchQuery : '', searchCollections]
+    );
+
+    // Memoize the selected collection(s)
+    const selectedCollection = useMemo(() => {
+        if (!collections) return multiple ? [] : undefined;
+
+        if (multiple && Array.isArray(value)) {
+            return collections.filter((collection: CollectionItem) => value.includes(collection.id));
+        } else if (!multiple && typeof value === 'string') {
+            return collections.find((collection: CollectionItem) => collection.id === value);
+        }
+        return multiple ? [] : undefined;
+    }, [collections, value, multiple]);
+
+    // Handle collection selection
+    const handleSelect = useCallback((collection: CollectionItem) => {
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : [];
+            const isSelected = currentValues.includes(collection.id);
+
+            if (isSelected) {
+                // Remove from selection
+                const newValues = currentValues.filter(id => id !== collection.id);
+                const newCollections = collections?.filter(c => newValues.includes(c.id)) || [];
+                onChange(newValues, newCollections);
+            } else {
+                // Add to selection
+                const newValues = [...currentValues, collection.id];
+                const newCollections = collections?.filter(c => newValues.includes(c.id)) || [];
+                onChange(newValues, newCollections);
+            }
+        } else {
+            onChange(collection.id, collection);
+        }
+    }, [onChange, value, collections, multiple]);
+
+    // Handle clear selection
+    const handleClear = useCallback(() => {
+        onChange(undefined, undefined);
+    }, [onChange]);
+
+    // Handle search input change
+    const handleSearchChange = useCallback((query: string) => {
+        setSearchQuery(query);
+    }, []);
+
+    const hasSearchQuery = searchQuery.trim().length > 0;
+
+    // Client-side filtering when not using server search
+    const filteredCollections = useMemo(() => {
+        if (!collections) return [];
+
+        // If using server search, collections are already filtered by the server
+        if (useServerSearch) return collections;
+
+        // Otherwise, do client-side filtering
+        if (!hasSearchQuery) return collections;
+
+        const queryLower = searchQuery.toLowerCase();
+        return collections.filter(col => col.name.toLowerCase().includes(queryLower));
+    }, [collections, useServerSearch, hasSearchQuery, searchQuery]);
+
+    const showClearOption = selectedCollection && hasSearchQuery;
+
+    // Show error state
     if (error) {
-        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+        return (
+            <ErrorBox title="Collection fetch failed">
+                {error.message}
+            </ErrorBox>
+        );
     }
 
-    // Find the selected collection object from the ID
-    const selectedCollection = value ? collections?.find(col => col.id === value) : undefined;
-
-    const handleChange = (collection: any) => {
-        // Call onChange with both the ID and the full collection object
-        onChange(collection?.id, collection);
+    // Get display text for the button
+    const getDisplayText = () => {
+        if (multiple && Array.isArray(selectedCollection) && selectedCollection.length > 0) {
+            if (selectedCollection.length === 1) {
+                return selectedCollection[0].name;
+            }
+            return `${selectedCollection.length} collections selected`;
+        } else if (!multiple && selectedCollection && !Array.isArray(selectedCollection)) {
+            return selectedCollection.name;
+        }
+        return placeholder;
     };
 
     return (
-        <VSelectBox
-            filterBy={"name"}
-            value={selectedCollection}
-            onChange={handleChange}
-            placeholder="Select a collection"
-            options={collections || []}
-            optionLabel={(col: any) => col.name}
-            by="id"
-            className={className}
-            disabled={disabled}
-        />
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-haspopup="listbox"
+                    className={cn("w-full justify-between min-w-0")}
+                    disabled={disabled}
+                >
+                    <span className="truncate flex-1 text-left min-w-0">
+                        {getDisplayText()}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="mt-2 mb-2 w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex justify-between items-center border-b px-3" cmdk-input-wrapper="">
+                        <CommandInput
+                            placeholder={searchPlaceholder}
+                            value={searchQuery}
+                            onValueChange={handleSearchChange}
+                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                        />
+                        {
+                            isSearching && (
+                                <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                            )
+                        }
+                    </div>
+                    <CommandEmpty>
+                        {
+                            isSearching
+                                ? "Searching..."
+                                : hasSearchQuery
+                                    ? "No collections found."
+                                    : "No collections available."
+                        }
+                    </CommandEmpty>
+                    <CommandGroup className="max-h-[300px] overflow-auto">
+                        {
+                            showClearOption && !multiple && (
+                                <CommandItem
+                                    value="__clear__"
+                                    onSelect={handleClear}
+                                    className="text-muted-foreground"
+                                >
+                                    Clear selection
+                                </CommandItem>
+                            )
+                        }
+                        {
+                            filteredCollections.map((collection: CollectionItem) => {
+                                const isSelected = multiple && Array.isArray(value)
+                                    ? value.includes(collection.id)
+                                    : value === collection.id;
+
+                                return (
+                                    <CommandItem
+                                        key={collection.id}
+                                        value={collection.id}
+                                        onSelect={() => handleSelect(collection)}
+                                        className="flex items-center justify-between"
+                                    >
+                                        <span className="truncate">{collection.name}</span>
+                                        {isSelected && (
+                                            <Check className="ml-2 h-4 w-4 shrink-0" />
+                                        )}
+                                    </CommandItem>
+                                );
+                            })
+                        }
+                    </CommandGroup>
+                </Command>
+            </PopoverContent>
+        </Popover>
     );
 }