@vertesia/ui 0.79.0 → 0.79.2

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()];
@@ -54,7 +56,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             });
             return;
         }
-        
+
         const payload: Partial<CreateCollectionPayload> = {
             name: metadata.name,
             description: metadata.description,
@@ -131,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
+                        isClearable
                     />
                 </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)}
-                    />
-                </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>
@@ -197,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 || {} };
@@ -247,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

@@ -16,19 +16,24 @@ import { useUserSession } from "@vertesia/ui/session";
  * @returns A dropdown to select a collection.
 **/
 interface SelectCollectionProps {
-    value?: string; // Collection ID
-    onChange: (collectionId: string | undefined, collection?: CollectionItem) => void;
+    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" }: SelectCollectionProps) {
+
+export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections", filterOut, allowDynamic = true, multiple = false }: SelectCollectionProps) {
     const { client } = useUserSession();
 
     const [searchQuery, setSearchQuery] = useState('');
     const [isSearching, setIsSearching] = useState(false);
+    const [useServerSearch, setUseServerSearch] = useState(false);
 
-    // Debounce the search query to avoid excessive API calls
+    // 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
@@ -37,29 +42,63 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         const trimmedQuery = query.trim();
 
         const collections = await client.store.collections.search({
-            dynamic: false,
-            name: trimmedQuery || undefined
+            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]);
+    }, [client, allowDynamic, filterOut, useServerSearch]);
 
-    // Fetch collections based on debounced search query
+    // Fetch collections based on search mode
     const { data: collections, error } = useFetch(
-        () => searchCollections(debouncedSearchQuery),
-        [debouncedSearchQuery, searchCollections]
+        () => searchCollections(useServerSearch ? debouncedSearchQuery : ''),
+        [useServerSearch ? debouncedSearchQuery : '', searchCollections]
     );
 
-    // Memoize the selected collection to avoid recalculation on every render
+    // Memoize the selected collection(s)
     const selectedCollection = useMemo(() => {
-        return collections?.find((collection: CollectionItem) => collection.id === value);
-    }, [collections, value]);
+        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) => {
-        onChange(collection.id, collection);
-    }, [onChange]);
+        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(() => {
@@ -71,6 +110,24 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         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 (
@@ -80,8 +137,18 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         );
     }
 
-    const hasSearchQuery = searchQuery.trim().length > 0;
-    const showClearOption = selectedCollection && hasSearchQuery;
+    // 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 (
         <Popover>
@@ -94,7 +161,7 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     disabled={disabled}
                 >
                     <span className="truncate flex-1 text-left min-w-0">
-                        {selectedCollection ? selectedCollection.name : placeholder}
+                        {getDisplayText()}
                     </span>
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -125,7 +192,7 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     </CommandEmpty>
                     <CommandGroup className="max-h-[300px] overflow-auto">
                         {
-                            showClearOption && (
+                            showClearOption && !multiple && (
                                 <CommandItem
                                     value="__clear__"
                                     onSelect={handleClear}
@@ -136,40 +203,29 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                             )
                         }
                         {
-                            collections?.map((collection: CollectionItem) => (
-                                <CommandItem
-                                    key={collection.id}
-                                    value={collection.id}
-                                    onSelect={() => handleSelect(collection)}
-                                    className={cn(
-                                        "flex items-center justify-between",
-                                        value === collection.id ? "bg-muted/20" : ""
-                                    )}
-                                >
-                                    <div className="flex flex-col flex-1 min-w-0">
-                                        <span className="truncate font-medium">
-                                            {collection.name}
-                                        </span>
-                                        {
-                                            collection.description && (
-                                                <span className="text-sm text-muted-foreground truncate">
-                                                    {collection.description}
-                                                </span>
-                                            )
-                                        }
-                                    </div>
-                                    <Check
-                                        className={cn(
-                                            "ml-2 h-4 w-4 shrink-0",
-                                            value === collection.id ? "opacity-100" : "opacity-0"
+                            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>
-                            ))
+                                    </CommandItem>
+                                );
+                            })
                         }
                     </CommandGroup>
                 </Command>
             </PopoverContent>
         </Popover>
     );
-}
+}