@vendure/dashboard 3.3.8-master-202507290247 → 3.3.8-master-202507300243

package/src/lib/components/data-input/product-multi-selector.tsx

@@ -0,0 +1,426 @@
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { DataInputComponent } from '@/vdb/framework/component-registry/component-registry.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Plus, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+// GraphQL queries
+const searchProductsDocument = graphql(`
+    query SearchProducts($input: SearchInput!) {
+        search(input: $input) {
+            totalItems
+            items {
+                enabled
+                productId
+                productName
+                slug
+                productAsset {
+                    id
+                    preview
+                }
+                productVariantId
+                productVariantName
+                productVariantAsset {
+                    id
+                    preview
+                }
+                sku
+            }
+            facetValues {
+                count
+                facetValue {
+                    id
+                    name
+                    facet {
+                        id
+                        name
+                    }
+                }
+            }
+        }
+    }
+`);
+
+type SearchItem = {
+    enabled: boolean;
+    productId: string;
+    productName: string;
+    slug: string;
+    productAsset?: { id: string; preview: string } | null;
+    productVariantId: string;
+    productVariantName: string;
+    productVariantAsset?: { id: string; preview: string } | null;
+    sku: string;
+};
+
+interface ProductMultiSelectorProps {
+    mode: 'product' | 'variant';
+    initialSelectionIds?: string[];
+    onSelectionChange: (selectedIds: string[]) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+function LoadingState() {
+    return (
+        <div className="text-center text-muted-foreground">
+            <Trans>Loading...</Trans>
+        </div>
+    );
+}
+
+function EmptyState() {
+    return (
+        <div className="text-center text-muted-foreground">
+            <Trans>No items found</Trans>
+        </div>
+    );
+}
+
+function ProductList({
+    items,
+    mode,
+    selectedIds,
+    getItemId,
+    getItemName,
+    toggleSelection,
+}: Readonly<{
+    items: SearchItem[];
+    mode: 'product' | 'variant';
+    selectedIds: Set<string>;
+    getItemId: (item: SearchItem) => string;
+    getItemName: (item: SearchItem) => string;
+    toggleSelection: (item: SearchItem) => void;
+}>) {
+    return (
+        <>
+            {items.map(item => {
+                const itemId = getItemId(item);
+                const isSelected = selectedIds.has(itemId);
+                const asset =
+                    mode === 'product' ? item.productAsset : item.productVariantAsset || item.productAsset;
+
+                return (
+                    <div
+                        key={itemId}
+                        role="checkbox"
+                        tabIndex={0}
+                        aria-checked={isSelected}
+                        className={`border rounded-lg p-3 cursor-pointer transition-colors ${
+                            isSelected
+                                ? 'border-primary bg-primary/5'
+                                : 'border-border hover:border-primary/50'
+                        }`}
+                        onClick={() => toggleSelection(item)}
+                        onKeyDown={e => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                toggleSelection(item);
+                            }
+                        }}
+                    >
+                        <div className="flex items-start gap-3">
+                            <div className="flex-shrink-0">
+                                <VendureImage
+                                    asset={asset}
+                                    preset="tiny"
+                                    className="w-16 h-16 rounded object-contain bg-secondary/10"
+                                    fallback={<div className="w-16 h-16 rounded bg-secondary/10" />}
+                                />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <div className="font-medium text-sm">{getItemName(item)}</div>
+                                {mode === 'product' ? (
+                                    <div className="text-xs text-muted-foreground">{item.slug}</div>
+                                ) : (
+                                    <div className="text-xs text-muted-foreground">{item.sku}</div>
+                                )}
+                            </div>
+                            <div className="flex-shrink-0">
+                                <Checkbox checked={isSelected} />
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </>
+    );
+}
+
+function ProductMultiSelectorDialog({
+    mode,
+    initialSelectionIds = [],
+    onSelectionChange,
+    open,
+    onOpenChange,
+}: Readonly<ProductMultiSelectorProps>) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedItems, setSelectedItems] = useState<SearchItem[]>([]);
+    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+    // Add debounced search term
+    const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+    // Search input configuration
+    const searchInput = useMemo(
+        () => ({
+            term: debouncedSearchTerm,
+            groupByProduct: mode === 'product',
+            take: 50,
+            skip: 0,
+        }),
+        [debouncedSearchTerm, mode],
+    );
+
+    // Query search results
+    const { data: searchData, isLoading } = useQuery({
+        queryKey: ['searchProducts', searchInput],
+        queryFn: () => api.query(searchProductsDocument, { input: searchInput }),
+        enabled: open,
+    });
+
+    const items = searchData?.search.items || [];
+
+    // Get the appropriate ID for an item based on mode
+    const getItemId = useCallback(
+        (item: SearchItem): string => {
+            return mode === 'product' ? item.productId : item.productVariantId;
+        },
+        [mode],
+    );
+
+    // Get the appropriate name for an item based on mode
+    const getItemName = useCallback(
+        (item: SearchItem): string => {
+            return mode === 'product' ? item.productName : item.productVariantName;
+        },
+        [mode],
+    );
+
+    // Toggle item selection
+    const toggleSelection = useCallback(
+        (item: SearchItem) => {
+            const itemId = getItemId(item);
+            const newSelectedIds = new Set(selectedIds);
+            const newSelectedItems = [...selectedItems];
+
+            if (selectedIds.has(itemId)) {
+                newSelectedIds.delete(itemId);
+                const index = selectedItems.findIndex(selected => getItemId(selected) === itemId);
+                if (index >= 0) {
+                    newSelectedItems.splice(index, 1);
+                }
+            } else {
+                newSelectedIds.add(itemId);
+                newSelectedItems.push(item);
+            }
+
+            setSelectedIds(newSelectedIds);
+            setSelectedItems(newSelectedItems);
+        },
+        [selectedIds, selectedItems, getItemId],
+    );
+
+    // Clear all selections
+    const clearSelection = useCallback(() => {
+        setSelectedIds(new Set());
+        setSelectedItems([]);
+    }, []);
+
+    // Handle selection confirmation
+    const handleSelect = useCallback(() => {
+        onSelectionChange(Array.from(selectedIds));
+        onOpenChange(false);
+    }, [selectedIds, onSelectionChange, onOpenChange]);
+
+    // Initialize selected items when dialog opens
+    useEffect(() => {
+        if (open) {
+            setSelectedIds(new Set(initialSelectionIds));
+            // We'll update the selectedItems once we have search results that match the IDs
+        }
+    }, [open, initialSelectionIds]);
+
+    // Update selectedItems when we have search results that match our selected IDs
+    useEffect(() => {
+        if (items.length > 0 && selectedIds.size > 0) {
+            const newSelectedItems = items.filter(item => selectedIds.has(getItemId(item)));
+            if (newSelectedItems.length > 0) {
+                setSelectedItems(prevItems => {
+                    const existingIds = new Set(prevItems.map(getItemId));
+                    const uniqueNewItems = newSelectedItems.filter(item => !existingIds.has(getItemId(item)));
+                    return [...prevItems, ...uniqueNewItems];
+                });
+            }
+        }
+    }, [items, selectedIds, getItemId]);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[95vw] md:max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>{mode === 'product' ? 'Select Products' : 'Select Variants'}</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="flex-1 min-h-0 flex flex-col">
+                    {/* Search Input */}
+                    <div className="flex-shrink-0 mb-4">
+                        <Input
+                            id="search"
+                            placeholder="Search products..."
+                            value={searchTerm}
+                            onChange={e => setSearchTerm(e.target.value)}
+                        />
+                    </div>
+
+                    <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        {/* Items Grid */}
+                        <div className="lg:col-span-2 overflow-auto flex flex-col">
+                            <div className="space-y-2 p-2">
+                                {isLoading && <LoadingState />}
+                                {!isLoading && items.length === 0 && <EmptyState />}
+                                {!isLoading && items.length > 0 && (
+                                    <ProductList
+                                        items={items}
+                                        mode={mode}
+                                        selectedIds={selectedIds}
+                                        getItemId={getItemId}
+                                        getItemName={getItemName}
+                                        toggleSelection={toggleSelection}
+                                    />
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Selected Items Panel */}
+                        <div className="border rounded-lg p-4 overflow-auto flex flex-col">
+                            <div className="flex items-center justify-between mb-4 flex-shrink-0">
+                                <div className="text-sm font-medium">
+                                    <Trans>Selected Items</Trans>
+                                    <Badge variant="secondary" className="ml-2">
+                                        {selectedItems.length}
+                                    </Badge>
+                                </div>
+                                {selectedItems.length > 0 && (
+                                    <Button variant="outline" size="sm" onClick={clearSelection}>
+                                        <Trans>Clear</Trans>
+                                    </Button>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                {selectedItems.length === 0 ? (
+                                    <div className="text-center text-muted-foreground text-sm">
+                                        <Trans>No items selected</Trans>
+                                    </div>
+                                ) : (
+                                    selectedItems.map(item => (
+                                        <div
+                                            key={getItemId(item)}
+                                            className="flex items-center justify-between p-2 border rounded"
+                                        >
+                                            <div className="flex-1 min-w-0">
+                                                <div className="text-sm font-medium truncate">
+                                                    {getItemName(item)}
+                                                </div>
+                                                <div className="text-xs text-muted-foreground">
+                                                    {mode === 'product' ? item.slug : item.sku}
+                                                </div>
+                                            </div>
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() => toggleSelection(item)}
+                                            >
+                                                <X className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <DialogFooter className="mt-4">
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleSelect} disabled={selectedItems.length === 0}>
+                        <Trans>Select {selectedItems.length} Items</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+export const ProductMultiInput: DataInputComponent = ({ value, onChange, ...props }) => {
+    const [open, setOpen] = useState(false);
+
+    // Parse the configuration from the field definition
+    const mode = (props as any)?.selectionMode === 'variant' ? 'variant' : 'product';
+
+    // Parse the current value (JSON array of IDs)
+    const selectedIds = useMemo(() => {
+        if (!value || typeof value !== 'string') return [];
+        try {
+            return JSON.parse(value);
+        } catch {
+            return [];
+        }
+    }, [value]);
+
+    const handleSelectionChange = useCallback(
+        (newSelectedIds: string[]) => {
+            onChange(JSON.stringify(newSelectedIds));
+        },
+        [onChange],
+    );
+
+    const itemType = mode === 'product' ? 'products' : 'variants';
+    const buttonText =
+        selectedIds.length > 0 ? `Selected ${selectedIds.length} ${itemType}` : `Select ${itemType}`;
+
+    return (
+        <>
+            <div className="space-y-2">
+                <Button variant="outline" onClick={() => setOpen(true)}>
+                    <Plus className="h-4 w-4 mr-2" />
+                    <Trans>{buttonText}</Trans>
+                </Button>
+
+                {selectedIds.length > 0 && (
+                    <div className="text-sm text-muted-foreground">
+                        <Trans>{selectedIds.length} items selected</Trans>
+                    </div>
+                )}
+            </div>
+
+            <ProductMultiSelectorDialog
+                mode={mode}
+                initialSelectionIds={selectedIds}
+                onSelectionChange={handleSelectionChange}
+                open={open}
+                onOpenChange={setOpen}
+            />
+        </>
+    );
+};

package/src/lib/components/data-input/relation-selector.tsx

@@ -11,6 +11,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/pop
 import { getQueryName } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import type { DocumentNode } from 'graphql';
@@ -27,7 +28,7 @@ export interface RelationSelectorConfig<T = any> {
     /** Number of items to load per page */
     pageSize?: number;
     /** Placeholder text for the search input */
-    placeholder?: string;
+    placeholder?: React.ReactNode;
     /** Whether to enable multi-select mode */
     multiple?: boolean;
     /** Custom filter function for search */
@@ -366,7 +367,7 @@ export function RelationSelector<T>({
     }, [selectedItemsCache, selectedIds, config.idKey, isMultiple]);
 
     return (
-        <div className={className}>
+        <div className={cn('overflow-auto', className)}>
             {/* Display selected items */}
             {selectedItems.length > 0 && (
                 <div className="flex flex-wrap gap-2 mb-2">
@@ -376,9 +377,9 @@ export function RelationSelector<T>({
                         return (
                             <div
                                 key={itemId}
-                                className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
+                                className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm max-w-full min-w-0"
                             >
-                                <span>{label}</span>
+                                <div className="min-w-0 flex-1">{label}</div>
                                 {!disabled && (
                                     <button
                                         type="button"
@@ -403,10 +404,10 @@ export function RelationSelector<T>({
                             {isMultiple
                                 ? selectedItems.length > 0
                                     ? `Add more (${selectedItems.length} selected)`
-                                    : selectorLabel ?? <Trans>Select items</Trans>
+                                    : (selectorLabel ?? <Trans>Select items</Trans>)
                                 : selectedItems.length > 0
                                   ? 'Change selection'
-                                  : selectorLabel ?? <Trans>Select item</Trans>}
+                                  : (selectorLabel ?? <Trans>Select item</Trans>)}
                         </Trans>
                     </Button>
                 </PopoverTrigger>

package/src/lib/components/data-input/select-with-options.tsx

@@ -0,0 +1,84 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { StringFieldOption } from '@vendure/common/lib/generated-types';
+import React from 'react';
+import { ControllerRenderProps } from 'react-hook-form';
+import { MultiSelect } from '../shared/multi-select.js';
+
+export interface SelectWithOptionsProps {
+    field: ControllerRenderProps<any, any>;
+    options: StringFieldOption[];
+    disabled?: boolean;
+    placeholder?: React.ReactNode;
+    isListField?: boolean;
+}
+
+/**
+ * @description
+ * A select component that renders options from custom field configuration.
+ * It automatically handles localization of option labels based on user settings.
+ *
+ * @since 3.3.0
+ */
+export function SelectWithOptions({
+    field,
+    options,
+    disabled,
+    placeholder,
+    isListField = false,
+}: Readonly<SelectWithOptionsProps>) {
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+
+    const getTranslation = (label: Array<{ languageCode: string; value: string }> | null) => {
+        if (!label) return '';
+        const translation = label.find(t => t.languageCode === displayLanguage);
+        return translation?.value ?? label[0]?.value ?? '';
+    };
+
+    // Convert options to MultiSelect format
+    const multiSelectItems = options.map(option => ({
+        value: option.value,
+        label: option.label ? getTranslation(option.label) : option.value,
+    }));
+
+    // For list fields, use MultiSelect component
+    if (isListField) {
+        return (
+            <MultiSelect
+                multiple={true}
+                value={field.value || []}
+                onChange={field.onChange}
+                items={multiSelectItems}
+                placeholder={placeholder ? String(placeholder) : 'Select options'}
+                className={disabled ? 'opacity-50 pointer-events-none' : ''}
+            />
+        );
+    }
+
+    // For single fields, use regular Select
+    const currentValue = field.value ?? '';
+
+    const handleValueChange = (value: string) => {
+        if (value) {
+            field.onChange(value);
+        }
+    };
+
+    return (
+        <Select value={currentValue ?? undefined} onValueChange={handleValueChange} disabled={disabled}>
+            <SelectTrigger>
+                <SelectValue placeholder={placeholder || <Trans>Select an option</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {options.map(option => (
+                    <SelectItem key={option.value} value={option.value}>
+                        {option.label ? getTranslation(option.label) : option.value}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}