@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/data-input/struct-form-input.tsx

@@ -0,0 +1,324 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { structCustomFieldFragment } from '@/vdb/providers/server-config.js';
+import { ResultOf } from 'gql.tada';
+import { CheckIcon, PencilIcon, X } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { Control, ControllerRenderProps, useWatch } from 'react-hook-form';
+
+// Import the form input component we already have
+import { CustomFieldListInput } from './custom-field-list-input.js';
+import { DateTimeInput } from './datetime-input.js';
+import { SelectWithOptions } from './select-with-options.js';
+
+// Use the generated types from GraphQL fragments
+type StructCustomFieldConfig = ResultOf<typeof structCustomFieldFragment>;
+type StructField = StructCustomFieldConfig['fields'][number];
+
+interface StructFormInputProps {
+    field: ControllerRenderProps<any, any>;
+    fieldDef: StructCustomFieldConfig;
+    control: Control<any, any>;
+    getTranslation: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+}
+
+interface DisplayModeProps {
+    fieldDef: StructCustomFieldConfig;
+    watchedStructValue: Record<string, any>;
+    isReadonly: boolean;
+    setIsEditing: (value: boolean) => void;
+    getTranslation: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+    formatFieldValue: (value: any, structField: StructField) => React.ReactNode;
+}
+
+function DisplayMode({
+    fieldDef,
+    watchedStructValue,
+    isReadonly,
+    setIsEditing,
+    getTranslation,
+    formatFieldValue,
+}: Readonly<DisplayModeProps>) {
+    return (
+        <div className="border rounded-md p-4">
+            <div className="flex justify-end">
+                {!isReadonly && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setIsEditing(true)}
+                        className="h-8 w-8 p-0 -mt-2 -mr-2 text-muted-foreground hover:text-foreground"
+                    >
+                        <PencilIcon className="h-4 w-4" />
+                        <span className="sr-only">Edit</span>
+                    </Button>
+                )}
+            </div>
+            <dl className="grid grid-cols-2 divide-y divide-muted -mt-2">
+                {fieldDef.fields.map(structField => (
+                    <React.Fragment key={structField.name}>
+                        <dt className="text-sm font-medium text-muted-foreground py-2">
+                            {getTranslation(structField.label) ?? structField.name}
+                        </dt>
+                        <dd className="text-sm text-foreground py-2">
+                            {formatFieldValue(watchedStructValue[structField.name], structField)}
+                        </dd>
+                    </React.Fragment>
+                ))}
+            </dl>
+        </div>
+    );
+}
+
+export function StructFormInput({ field, fieldDef, control, getTranslation }: StructFormInputProps) {
+    const { formatDate } = useLocalFormat();
+    const isReadonly = fieldDef.readonly ?? false;
+    const [isEditing, setIsEditing] = useState(false);
+
+    // Watch the struct field for changes to update display mode
+    const watchedStructValue =
+        useWatch({
+            control,
+            name: field.name,
+            defaultValue: field.value || {},
+        }) || {};
+
+    // Helper function to format field value for display
+    const formatFieldValue = (value: any, structField: StructField) => {
+        if (value == null) return '-';
+        if (structField.list) {
+            if (Array.isArray(value)) {
+                return value.length ? value.join(', ') : '-';
+            }
+            return '-';
+        }
+        switch (structField.type) {
+            case 'boolean':
+                return (
+                    <span className={`inline-flex items-center ${value ? 'text-green-600' : 'text-red-500'}`}>
+                        {value ? <CheckIcon className="h-4 w-4" /> : <X className="h-4 w-4" />}
+                    </span>
+                );
+            case 'datetime':
+                return value ? formatDate(value, { dateStyle: 'short', timeStyle: 'short' }) : '-';
+            default:
+                return value.toString();
+        }
+    };
+
+    // Helper function to render individual struct field inputs
+    const renderStructFieldInput = (
+        structField: StructField,
+        inputField: ControllerRenderProps<any, any>,
+    ) => {
+        const isList = structField.list ?? false;
+
+        // Helper function to render single input for a struct field
+        const renderSingleStructInput = (singleField: ControllerRenderProps<any, any>) => {
+            switch (structField.type) {
+                case 'string': {
+                    // Check if the field has options (dropdown)
+                    const stringField = structField as any; // GraphQL union types need casting
+                    if (stringField.options && stringField.options.length > 0) {
+                        return (
+                            <SelectWithOptions
+                                field={singleField}
+                                options={stringField.options}
+                                disabled={isReadonly}
+                                isListField={false}
+                            />
+                        );
+                    }
+                    return (
+                        <Input
+                            value={singleField.value ?? ''}
+                            onChange={e => singleField.onChange(e.target.value)}
+                            onBlur={singleField.onBlur}
+                            name={singleField.name}
+                            disabled={isReadonly}
+                        />
+                    );
+                }
+                case 'int':
+                case 'float': {
+                    const isFloat = structField.type === 'float';
+                    const numericField = structField as any; // GraphQL union types need casting
+                    const min = isFloat ? numericField.floatMin : numericField.intMin;
+                    const max = isFloat ? numericField.floatMax : numericField.intMax;
+                    const step = isFloat ? numericField.floatStep : numericField.intStep;
+
+                    return (
+                        <Input
+                            type="number"
+                            value={singleField.value ?? ''}
+                            onChange={e => {
+                                const value = e.target.valueAsNumber;
+                                singleField.onChange(isNaN(value) ? undefined : value);
+                            }}
+                            onBlur={singleField.onBlur}
+                            name={singleField.name}
+                            disabled={isReadonly}
+                            min={min}
+                            max={max}
+                            step={step}
+                        />
+                    );
+                }
+                case 'boolean':
+                    return (
+                        <Switch
+                            checked={singleField.value}
+                            onCheckedChange={singleField.onChange}
+                            disabled={isReadonly}
+                        />
+                    );
+                case 'datetime':
+                    return (
+                        <DateTimeInput
+                            value={singleField.value}
+                            onChange={singleField.onChange}
+                            disabled={isReadonly}
+                        />
+                    );
+                default:
+                    return (
+                        <Input
+                            value={singleField.value ?? ''}
+                            onChange={e => singleField.onChange(e.target.value)}
+                            onBlur={singleField.onBlur}
+                            name={singleField.name}
+                            disabled={isReadonly}
+                        />
+                    );
+            }
+        };
+
+        // Handle string fields with options (dropdown) - already handles list case with multi-select
+        if (structField.type === 'string') {
+            const stringField = structField as any; // GraphQL union types need casting
+            if (stringField.options && stringField.options.length > 0) {
+                return (
+                    <SelectWithOptions
+                        field={inputField}
+                        options={stringField.options}
+                        disabled={isReadonly}
+                        isListField={isList}
+                    />
+                );
+            }
+        }
+
+        // For list struct fields, wrap with list input
+        if (isList) {
+            const getDefaultValue = () => {
+                switch (structField.type) {
+                    case 'string':
+                        return '';
+                    case 'int':
+                    case 'float':
+                        return 0;
+                    case 'boolean':
+                        return false;
+                    case 'datetime':
+                        return '';
+                    default:
+                        return '';
+                }
+            };
+
+            // Determine if the field type needs full width
+            const needsFullWidth = structField.type === 'text' || structField.type === 'localeText';
+
+            return (
+                <CustomFieldListInput
+                    field={inputField}
+                    disabled={isReadonly}
+                    renderInput={(index, listItemField) => renderSingleStructInput(listItemField)}
+                    defaultValue={getDefaultValue()}
+                    isFullWidth={needsFullWidth}
+                />
+            );
+        }
+
+        // For non-list fields, render directly
+        return renderSingleStructInput(inputField);
+    };
+
+    // Edit mode - memoized to prevent focus loss from re-renders
+    const EditMode = useMemo(
+        () => (
+            <div className="space-y-4 border rounded-md p-4">
+                {!isReadonly && (
+                    <div className="flex justify-end">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setIsEditing(false)}
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <CheckIcon className="h-4 w-4" />
+                            <span className="sr-only">Done</span>
+                        </Button>
+                    </div>
+                )}
+                {fieldDef.fields.map(structField => (
+                    <FormField
+                        key={structField.name}
+                        control={control}
+                        name={`${field.name}.${structField.name}`}
+                        render={({ field: structInputField }) => (
+                            <FormItem>
+                                <div className="flex items-baseline gap-4">
+                                    <div className="flex-1">
+                                        <FormLabel>
+                                            {getTranslation(structField.label) ?? structField.name}
+                                        </FormLabel>
+                                        {getTranslation(structField.description) && (
+                                            <FormDescription>
+                                                {getTranslation(structField.description)}
+                                            </FormDescription>
+                                        )}
+                                    </div>
+                                    <div className="flex-[2]">
+                                        <FormControl>
+                                            {renderStructFieldInput(structField, structInputField)}
+                                        </FormControl>
+                                        <FormMessage />
+                                    </div>
+                                </div>
+                            </FormItem>
+                        )}
+                    />
+                ))}
+            </div>
+        ),
+        [fieldDef, control, field.name, getTranslation, renderStructFieldInput, isReadonly],
+    );
+
+    return isEditing ? (
+        EditMode
+    ) : (
+        <DisplayMode
+            fieldDef={fieldDef}
+            watchedStructValue={watchedStructValue}
+            isReadonly={isReadonly}
+            setIsEditing={setIsEditing}
+            getTranslation={getTranslation}
+            formatFieldValue={formatFieldValue}
+        />
+    );
+}

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -1,30 +1,23 @@
-import { Button } from '@/components/ui/button.js';
+import { DataTableFilterDialog } from '@/vdb/components/data-table/data-table-filter-dialog.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Dialog } from '@/vdb/components/ui/dialog.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
 import { Column, ColumnDef } from '@tanstack/react-table';
 import { PlusCircle } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
-import React, { useState } from 'react';
-import { camelCaseToTitleCase } from '@/lib/utils.js';
+import { useState } from 'react';
 
 export interface AddFilterMenuProps {
     columns: Column<any, unknown>[];
 }
 
-export function AddFilterMenu({ columns }: AddFilterMenuProps) {
+export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
     const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
@@ -53,9 +46,7 @@ export function AddFilterMenu({ columns }: AddFilterMenuProps) {
                     ))}
                 </DropdownMenuContent>
             </DropdownMenu>
-            {selectedColumn && (
-                <DataTableFilterDialog column={selectedColumn as any} />
-            )}
+            {selectedColumn && <DataTableFilterDialog column={selectedColumn as any} />}
         </Dialog>
     );
 }

package/src/lib/components/data-table/data-table-bulk-action-item.tsx

@@ -0,0 +1,101 @@
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { LucideIcon } from 'lucide-react';
+import { useState } from 'react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '../ui/alert-dialog.js';
+import { DropdownMenuItem } from '../ui/dropdown-menu.js';
+
+export interface DataTableBulkActionItemProps {
+    label: React.ReactNode;
+    icon?: LucideIcon;
+    confirmationText?: React.ReactNode;
+    onClick: () => void;
+    className?: string;
+    requiresPermission?: string[];
+}
+
+export function DataTableBulkActionItem({
+    label,
+    icon: Icon,
+    confirmationText,
+    className,
+    onClick,
+    requiresPermission,
+}: DataTableBulkActionItemProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const { hasPermissions } = usePermissions();
+    const userHasPermission = hasPermissions(requiresPermission ?? []);
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!userHasPermission) {
+            return;
+        }
+        if (confirmationText) {
+            setIsOpen(true);
+        } else {
+            onClick?.();
+        }
+    };
+
+    const handleConfirm = () => {
+        setIsOpen(false);
+        onClick?.();
+    };
+
+    const handleCancel = () => {
+        setIsOpen(false);
+    };
+
+    if (confirmationText) {
+        return (
+            <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+                <AlertDialogTrigger asChild>
+                    <DropdownMenuItem onClick={handleClick} disabled={!userHasPermission}>
+                        {Icon && <Icon className={cn('mr-1 h-4 w-4', className)} />}
+                        <span className={cn('text-sm', className)}>
+                            <Trans>{label}</Trans>
+                        </span>
+                    </DropdownMenuItem>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>
+                            <Trans>Confirm Action</Trans>
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>{confirmationText}</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel onClick={handleCancel}>
+                            <Trans>Cancel</Trans>
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleConfirm}>
+                            <Trans>Continue</Trans>
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        );
+    }
+
+    return (
+        <DropdownMenuItem onClick={handleClick}>
+            {Icon && <Icon className={cn('mr-1 h-4 w-4', className)} />}
+            <span className={cn('text-sm', className)}>
+                <Trans>{label}</Trans>
+            </span>
+        </DropdownMenuItem>
+    );
+}

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Table } from '@tanstack/react-table';
+import { ChevronDown } from 'lucide-react';
+import { useRef } from 'react';
+
+interface DataTableBulkActionsProps<TData> {
+    table: Table<TData>;
+    bulkActions: BulkAction[];
+}
+
+export function DataTableBulkActions<TData>({
+    table,
+    bulkActions,
+}: Readonly<DataTableBulkActionsProps<TData>>) {
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock();
+    const blockId = pageBlock?.blockId;
+
+    // Cache to store selected items across page changes
+    const selectedItemsCache = useRef<Map<string, TData>>(new Map());
+    const selectedRowIds = Object.keys(table.getState().rowSelection);
+
+    // Get selection from cache instead of trying to get from table
+    const selection = selectedRowIds
+        .map(key => {
+            try {
+                const row = table.getRow(key);
+                if (row) {
+                    selectedItemsCache.current.set(key, row.original);
+                    return row.original;
+                }
+            } catch (error) {
+                // ignore the error, it just means the row is not on the
+                // current page.
+            }
+            if (selectedItemsCache.current.has(key)) {
+                return selectedItemsCache.current.get(key);
+            }
+            return undefined;
+        })
+        .filter((item): item is TData => item !== undefined);
+
+    const { position, shouldShow } = useFloatingBulkActions({
+        selectionCount: selection.length,
+        containerSelector: '[data-table-root], .data-table-container, table',
+        bottomOffset: 40,
+    });
+
+    if (!shouldShow) {
+        return null;
+    }
+    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
+    const allBulkActions = [...extendedBulkActions, ...(bulkActions ?? [])];
+    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
+
+    return (
+        <div
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
+            style={{ 
+                height: 'auto', 
+                maxHeight: '60px',
+                bottom: position.bottom,
+                left: position.left
+            }}
+        >
+            <span className="text-sm text-muted-foreground">
+                <Trans>{selection.length} selected</Trans>
+            </span>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-8 shadow-none">
+                        <Trans>With selected...</Trans>
+                        <ChevronDown className="ml-2 h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {allBulkActions.length > 0 ? (
+                        allBulkActions.map((action, index) => (
+                            <action.component
+                                key={`bulk-action-${index}`}
+                                selection={selection}
+                                table={table}
+                            />
+                        ))
+                    ) : (
+                        <DropdownMenuItem className="text-muted-foreground" disabled>
+                            <Trans>No actions available</Trans>
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -1,32 +1,14 @@
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
-import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
-import { camelCaseToTitleCase } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
 import { ColumnDef, HeaderContext } from '@tanstack/table-core';
-import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
-import React from 'react';
+import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 
 export interface DataTableColumnHeaderProps {
     customConfig: Partial<ColumnDef<any>>;
     headerContext: HeaderContext<any, any>;
 }
 
-export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
+export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<DataTableColumnHeaderProps>) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
 

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { Column } from '@tanstack/react-table';
-import { Check, FilterIcon, PlusCircle } from 'lucide-react';
+import { Check, FilterIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Command,
     CommandEmpty,
@@ -13,9 +12,10 @@ import {
     CommandItem,
     CommandList,
     CommandSeparator,
-} from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Separator } from '@/components/ui/separator.js';
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 export interface DataTableFacetedFilterOption {
     label: string;