@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

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

@@ -1,9 +1,13 @@
 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 { Collection, CreateCollectionPayload, JSONSchemaObject } from "@vertesia/common";
+import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast } from "@vertesia/ui/core";
+import { UserInfo } from "@vertesia/ui/features";
+import { SharedPropsEditor } from "@vertesia/ui/features";
+import { SyncMemberHeadsToggle } from "@vertesia/ui/features";
 import { useUserSession } from "@vertesia/ui/session";
-import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
+import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
 import { basicSetup } from "codemirror";
+import dayjs from "dayjs";
 import { useMemo, useRef, useState } from "react";
 import { SelectContentType, stringifyTableLayout } from "../types";
 
@@ -54,7 +58,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             });
             return;
         }
-        
+
         const payload: Partial<CreateCollectionPayload> = {
             name: metadata.name,
             description: metadata.description,
@@ -131,64 +135,94 @@ 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>
+            {
+                !collection.dynamic && (
+                    <>
+                        <SyncMemberHeadsToggle collection={collection} />
+                        <SharedPropsEditor collection={collection} />
+                    </>
+                )
+            }
+
+        </div >
     );
 }
 
@@ -197,30 +231,28 @@ interface PropertiesEditorProps {
     collection: Collection;
 }
 function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
+    const [formData, setFormData] = useState<JSONSchemaObject>({});
+    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 _onSave = (data: JSONSchemaObject) => {
+        if (!data || !Object.keys(data).length) {
+            return;
+        }
         const payload = { properties: data || {} };
         setIsUpdating(true);
         client.store.collections
@@ -246,24 +278,19 @@ 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>
-    );
-}
+    const onDataChanged = (data: Node) => {
+        if (data instanceof ManagedObject) {
+            setFormData(data.value);
+        }
+    }
 
-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" onClick={() => _onSave(formData)}>
+                Save
+            </Button>}
+        >
+            <GeneratedForm object={object} onChange={onDataChanged} />
+        </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>
     );
-}
+}

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

@@ -0,0 +1,61 @@
+import { Collection, ContentObjectType } from "@vertesia/common";
+import { Button, Panel, useToast } from "@vertesia/ui/core";
+import { TagsInput } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useEffect, useState } from "react";
+
+interface SharedPropsEditorProps {
+    collection: Collection;
+}
+export function SharedPropsEditor({ collection }: SharedPropsEditorProps) {
+
+    const { client } = useUserSession();
+    const [colType, setColType] = useState<ContentObjectType | undefined>(undefined);
+    const [sharedProps, setSharedProps] = useState<string[]>(collection.shared_properties || []);
+    const toast = useToast();
+
+    useEffect(() => {
+        if (collection.type?.id) {
+            client.store.types.retrieve(collection.type.id).then(setColType);
+        }
+    }, [collection.type?.id]);
+
+    const options: string[] = colType ? Object.keys(colType.object_schema?.properties || {}) : [];
+
+    const onSelect = (selected: string[]) => {
+        setSharedProps(selected);
+    }
+
+    const onSave = () => {
+        client.store.collections.update(collection.id, {
+            shared_properties: sharedProps
+        }).then(() => {
+            // Handle success
+            toast({
+                title: "Updated shared properties",
+                status: "success"
+            })
+        }).catch((error) => {
+            toast({
+                title: "Failed to update shared properties",
+                description: error.message,
+                status: "error"
+            })
+            // Handle error
+        });
+    }
+
+    return (
+        <Panel title="Shared Properties" description="Add properties to share across all members in the collection. This feature requires to enable shared property synchronization on the project."
+            action={
+                <Button size="lg" isLoading={false} onClick={onSave}>
+                    Save
+                </Button>}
+        >
+            <div className=''>
+                <TagsInput value={sharedProps} onChange={onSelect} options={options} placeholder="Select properties to share" />
+            </div>
+        </Panel>
+    )
+
+}

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

@@ -0,0 +1,48 @@
+import { Collection } from "@vertesia/common";
+import { Panel, Switch, useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useState } from "react";
+
+interface SyncMemberHeadsToggleProps {
+    collection: Collection;
+}
+export function SyncMemberHeadsToggle({ collection }: SyncMemberHeadsToggleProps) {
+
+    const { client } = useUserSession();
+    const [skipHeadSync, setSkipHeadSync] = useState<boolean>(collection.skip_head_sync ?? false);
+    const [isSaving, setIsSaving] = useState<boolean>(false);
+    const toast = useToast();
+
+    const onSaveSkipHeadSync = (enableSyncHeads: boolean) => {
+        const skip_head_sync = !enableSyncHeads;
+        setIsSaving(true);
+        client.store.collections.update(collection.id, {
+            skip_head_sync: skip_head_sync
+        }).then(() => {
+            // Handle success
+            toast({
+                title: "Updated skip head sync setting",
+                status: "success"
+            })
+            setSkipHeadSync(skip_head_sync);
+        }).catch((error) => {
+            toast({
+                title: "Failed to update skip head sync",
+                description: error.message,
+                status: "error"
+            })
+            // Handle error
+        }).finally(() => {
+            setIsSaving(false);
+        });
+    }
+
+    return (
+        <Panel title="Synchronize Member Heads" description="When a new HEAD version of a member is created the colleciton will be updated to point to the new HEAD.">
+            <Switch disabled={isSaving} value={!skipHeadSync} onChange={onSaveSkipHeadSync}>
+                Enable synchronizing member heads
+            </Switch>
+        </Panel>
+    )
+
+}

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

@@ -2,4 +2,6 @@ export * from "./BrowseCollectionView";
 export * from "./CollectionsTable";
 export * from "./EditCollectionView";
 export * from "./CreateCollection";
-export * from "./SelectCollection";
+export * from "./SelectCollection";
+export * from "./SharedPropsEditor";
+export * from "./SyncMemberHeadsToggle";