@vendure/dashboard 3.3.6-master-202507090236 → 3.3.6-master-202507110238

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -1,51 +1,26 @@
-import { DataTableColumnHeader } from '@/vdb/components/data-table/data-table-column-header.js';
 import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
 import {
-    FieldInfo,
-    getObjectPathToPaginatedList,
-    getTypeFieldInfo,
+    getObjectPathToPaginatedList
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
 import { api } from '@/vdb/graphql/api.js';
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from '@/vdb/components/ui/alert-dialog.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     ColumnFiltersState,
     ColumnSort,
-    createColumnHelper,
     SortingState,
-    Table,
+    Table
 } from '@tanstack/react-table';
-import { AccessorKeyColumnDef, ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
-import { EllipsisIcon, TrashIcon } from 'lucide-react';
-import React, { useMemo } from 'react';
-import { toast } from 'sonner';
-import { Button } from '../ui/button.js';
-import { Checkbox } from '../ui/checkbox.js';
+import { ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
+import React from 'react';
+import { getColumnVisibility } from '../data-table/data-table-utils.js';
+import { useGeneratedColumns } from '../data-table/use-generated-columns.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
 type IsPaginatedList<T> = T extends { items: any[]; totalItems: number } ? true : false;
@@ -345,139 +320,14 @@ export function PaginatedListDataTable<
         listData = listData?.[path];
     }
 
-    const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
-
-    const { columns, customFieldColumnNames } = useMemo(() => {
-        const columnConfigs: Array<{ fieldInfo: FieldInfo; isCustomField: boolean }> = [];
-        const customFieldColumnNames: string[] = [];
-
-        columnConfigs.push(
-            ...fields // Filter out custom fields
-                .filter(field => field.name !== 'customFields' && !field.type.endsWith('CustomFields'))
-                .map(field => ({ fieldInfo: field, isCustomField: false })),
-        );
-
-        const customFieldColumn = fields.find(field => field.name === 'customFields');
-        if (customFieldColumn && customFieldColumn.type !== 'JSON') {
-            const customFieldFields = getTypeFieldInfo(customFieldColumn.type);
-            columnConfigs.push(
-                ...customFieldFields.map(field => ({ fieldInfo: field, isCustomField: true })),
-            );
-            customFieldColumnNames.push(...customFieldFields.map(field => field.name));
-        }
-
-        const queryBasedColumns = columnConfigs.map(({ fieldInfo, isCustomField }) => {
-            const customConfig = customizeColumns?.[fieldInfo.name as unknown as AllItemFieldKeys<T>] ?? {};
-            const { header, ...customConfigRest } = customConfig;
-            const enableColumnFilter = fieldInfo.isScalar && !facetedFilters?.[fieldInfo.name];
-
-            return columnHelper.accessor(fieldInfo.name as any, {
-                id: fieldInfo.name,
-                meta: { fieldInfo, isCustomField },
-                enableColumnFilter,
-                enableSorting: fieldInfo.isScalar,
-                // Filtering is done on the server side, but we set this to 'equalsString' because
-                // otherwise the TanStack Table with apply an "auto" function which somehow
-                // prevents certain filters from working.
-                filterFn: 'equalsString',
-                cell: ({ cell, row }) => {
-                    const cellValue = cell.getValue();
-                    const value =
-                        cellValue ??
-                        (isCustomField ? row.original?.customFields?.[fieldInfo.name] : undefined);
-
-                    if (fieldInfo.list && Array.isArray(value)) {
-                        return value.join(', ');
-                    }
-                    if (
-                        (fieldInfo.type === 'DateTime' && typeof value === 'string') ||
-                        value instanceof Date
-                    ) {
-                        return <DisplayComponent id="vendure:dateTime" value={value} />;
-                    }
-                    if (fieldInfo.type === 'Boolean') {
-                        if (cell.column.id === 'enabled') {
-                            return <DisplayComponent id="vendure:booleanBadge" value={value} />;
-                        } else {
-                            return <DisplayComponent id="vendure:booleanCheckbox" value={value} />;
-                        }
-                    }
-                    if (fieldInfo.type === 'Asset') {
-                        return <DisplayComponent id="vendure:asset" value={value} />;
-                    }
-                    if (value !== null && typeof value === 'object') {
-                        return JSON.stringify(value);
-                    }
-                    return value;
-                },
-                header: headerContext => {
-                    return (
-                        <DataTableColumnHeader headerContext={headerContext} customConfig={customConfig} />
-                    );
-                },
-                ...customConfigRest,
-            });
-        });
-
-        let finalColumns = [...queryBasedColumns];
-
-        for (const [id, column] of Object.entries(additionalColumns ?? {})) {
-            if (!id) {
-                throw new Error('Column id is required');
-            }
-            finalColumns.push(columnHelper.accessor(id as any, { ...column, id }));
-        }
-
-        if (defaultColumnOrder) {
-            // ensure the columns with ids matching the items in defaultColumnOrder
-            // appear as the first columns in sequence, and leave the remainder in the
-            // existing order
-            const orderedColumns = finalColumns
-                .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
-                .sort(
-                    (a, b) =>
-                        defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any),
-                );
-            const remainingColumns = finalColumns.filter(
-                column => !column.id || !defaultColumnOrder.includes(column.id as any),
-            );
-            finalColumns = [...orderedColumns, ...remainingColumns];
-        }
-
-        if (rowActions || deleteMutation) {
-            const rowActionColumn = getRowActions(rowActions, deleteMutation);
-            if (rowActionColumn) {
-                finalColumns.push(rowActionColumn);
-            }
-        }
-
-        // Add the row selection column
-        finalColumns.unshift({
-            id: 'selection',
-            accessorKey: 'selection',
-            header: ({ table }) => (
-                <Checkbox
-                    className="mx-1"
-                    checked={table.getIsAllRowsSelected()}
-                    onCheckedChange={checked =>
-                        table.toggleAllRowsSelected(checked === 'indeterminate' ? undefined : checked)
-                    }
-                />
-            ),
-            enableColumnFilter: false,
-            cell: ({ row }) => {
-                return (
-                    <Checkbox
-                        className="mx-1"
-                        checked={row.getIsSelected()}
-                        onCheckedChange={row.getToggleSelectedHandler()}
-                    />
-                );
-            },
-        });
-
-        return { columns: finalColumns, customFieldColumnNames };
-    }, [fields, customizeColumns, rowActions]);
+    const { columns, customFieldColumnNames } = useGeneratedColumns({
+        fields,
+        customizeColumns,
+        rowActions,
+        deleteMutation,
+        additionalColumns,
+        defaultColumnOrder,
+    });
 
     const columnVisibility = getColumnVisibility(fields, defaultVisibility, customFieldColumnNames);
     const transformedData =
@@ -509,124 +359,3 @@ export function PaginatedListDataTable<
     );
 }
 
-function getRowActions(
-    rowActions?: RowAction<any>[],
-    deleteMutation?: TypedDocumentNode<any, any>,
-): AccessorKeyColumnDef<any> | undefined {
-    return {
-        id: 'actions',
-        accessorKey: 'actions',
-        header: 'Actions',
-        enableColumnFilter: false,
-        cell: ({ row }) => {
-            return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                            <EllipsisIcon />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                        {rowActions?.map((action, index) => (
-                            <DropdownMenuItem onClick={() => action.onClick?.(row)} key={index}>
-                                {action.label}
-                            </DropdownMenuItem>
-                        ))}
-                        {deleteMutation && (
-                            <DeleteMutationRowAction deleteMutation={deleteMutation} row={row} />
-                        )}
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            );
-        },
-    };
-}
-
-function DeleteMutationRowAction({
-    deleteMutation,
-    row,
-}: {
-    deleteMutation: TypedDocumentNode<any, any>;
-    row: Row<{ id: string }>;
-}) {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
-    const { mutate: deleteMutationFn } = useMutation({
-        mutationFn: api.mutate(deleteMutation),
-        onSuccess: (result: { [key: string]: { result: 'DELETED' | 'NOT_DELETED'; message: string } }) => {
-            const unwrappedResult = Object.values(result)[0];
-            if (unwrappedResult.result === 'DELETED') {
-                refetchPaginatedList();
-                toast.success(i18n.t('Deleted successfully'));
-            } else {
-                toast.error(i18n.t('Failed to delete'), {
-                    description: unwrappedResult.message,
-                });
-            }
-        },
-        onError: (err: Error) => {
-            toast.error(i18n.t('Failed to delete'), {
-                description: err.message,
-            });
-        },
-    });
-    return (
-        <AlertDialog>
-            <AlertDialogTrigger asChild>
-                <DropdownMenuItem onSelect={e => e.preventDefault()}>
-                    <div className="flex items-center gap-2 text-destructive">
-                        <TrashIcon className="w-4 h-4 text-destructive" />
-                        <Trans>Delete</Trans>
-                    </div>
-                </DropdownMenuItem>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-                <AlertDialogHeader>
-                    <AlertDialogTitle>
-                        <Trans>Confirm deletion</Trans>
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                        <Trans>
-                            Are you sure you want to delete this item? This action cannot be undone.
-                        </Trans>
-                    </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                    <AlertDialogCancel>
-                        <Trans>Cancel</Trans>
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                        onClick={() => deleteMutationFn({ id: row.original.id })}
-                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                    >
-                        <Trans>Delete</Trans>
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
-    );
-}
-
-/**
- * Returns the default column visibility configuration.
- */
-function getColumnVisibility(
-    fields: FieldInfo[],
-    defaultVisibility?: Record<string, boolean | undefined>,
-    customFieldColumnNames?: string[],
-): Record<string, boolean> {
-    const allDefaultsTrue = defaultVisibility && Object.values(defaultVisibility).every(v => v === true);
-    const allDefaultsFalse = defaultVisibility && Object.values(defaultVisibility).every(v => v === false);
-    return {
-        id: false,
-        createdAt: false,
-        updatedAt: false,
-        ...(allDefaultsTrue ? { ...Object.fromEntries(fields.map(f => [f.name, false])) } : {}),
-        ...(allDefaultsFalse ? { ...Object.fromEntries(fields.map(f => [f.name, true])) } : {}),
-        // Make custom fields hidden by default unless overridden
-        ...(customFieldColumnNames
-            ? { ...Object.fromEntries(customFieldColumnNames.map(f => [f, false])) }
-            : {}),
-        ...defaultVisibility,
-    };
-}

package/src/lib/components/shared/product-variant-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/command.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
-import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { AssetFragment, assetFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
@@ -28,6 +28,13 @@ const productVariantListDocument = graphql(
                     featuredAsset {
                         ...Asset
                     }
+                    price
+                    priceWithTax
+                    product {
+                        featuredAsset {
+                            ...Asset
+                        }
+                    }
                 }
                 totalItems
             }
@@ -37,10 +44,17 @@ const productVariantListDocument = graphql(
 );
 
 export interface ProductVariantSelectorProps {
-    onProductVariantIdChange: (productVariantId: string) => void;
+    onProductVariantSelect: (variant: {
+        productVariantId: string;
+        productVariantName: string;
+        sku: string;
+        productAsset: AssetFragment | null;
+        price?: number;
+        priceWithTax?: number;
+    }) => void;
 }
 
-export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<ProductVariantSelectorProps>) {
+export function ProductVariantSelector({ onProductVariantSelect }: Readonly<ProductVariantSelectorProps>) {
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const debouncedSearch = useDebounce(search, 500);
@@ -85,7 +99,17 @@ export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<Pr
                                     key={variant.id}
                                     value={variant.id}
                                     onSelect={() => {
-                                        onProductVariantIdChange(variant.id);
+                                        onProductVariantSelect({
+                                            productVariantId: variant.id,
+                                            productVariantName: variant.name,
+                                            sku: variant.sku,
+                                            productAsset:
+                                                variant.featuredAsset ??
+                                                variant.product.featuredAsset ??
+                                                null,
+                                            price: variant.price,
+                                            priceWithTax: variant.priceWithTax,
+                                        });
                                         setOpen(false);
                                     }}
                                     className="flex items-center gap-2 p-2"

package/src/lib/framework/component-registry/dynamic-component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { COMPONENT_REGISTRY, useComponentRegistry } from "./component-registry.js";
+import { useComponentRegistry } from "./component-registry.js";
 
 export type DisplayComponentProps<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
@@ -33,7 +33,7 @@ export type InputComponentProps<
  */
 export function DisplayComponent<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
->(props: DisplayComponentProps<T>): React.ReactNode {   
+>(props: Readonly<DisplayComponentProps<T>>): React.ReactNode {   
     const { getDisplayComponent } = useComponentRegistry();
     const Component = getDisplayComponent(props.id);
     if (!Component) {
@@ -45,7 +45,7 @@ export function DisplayComponent<
 
 export function InputComponent<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
->(props: InputComponentProps<T>): React.ReactNode {
+>(props: Readonly<InputComponentProps<T>>): React.ReactNode {
     const { getInputComponent } = useComponentRegistry();
     const Component = getInputComponent(props.id);
     if (!Component) {