@vendure/dashboard 3.3.5-master-202506250727 → 3.3.5-master-202506251318

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -119,3 +119,67 @@ export const deleteProductDocument = graphql(`
         }
     }
 `);
+
+export const deleteProductsDocument = graphql(`
+    mutation DeleteProducts($ids: [ID!]!) {
+        deleteProducts(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignProductsToChannelDocument = graphql(`
+    mutation AssignProductsToChannel($input: AssignProductsToChannelInput!) {
+        assignProductsToChannel(input: $input) {
+            id
+            channels {
+                id
+                code
+            }
+        }
+    }
+`);
+
+export const removeProductsFromChannelDocument = graphql(`
+    mutation RemoveProductsFromChannel($input: RemoveProductsFromChannelInput!) {
+        removeProductsFromChannel(input: $input) {
+            id
+            channels {
+                id
+                code
+            }
+        }
+    }
+`);
+
+export const updateProductsDocument = graphql(`
+    mutation UpdateProducts($input: [UpdateProductInput!]!) {
+        updateProducts(input: $input) {
+            id
+            name
+            facetValues {
+                id
+                name
+                code
+            }
+        }
+    }
+`);
+
+export const duplicateEntityDocument = graphql(`
+    mutation DuplicateEntity($input: DuplicateEntityInput!) {
+        duplicateEntity(input: $input) {
+            ... on DuplicateEntitySuccess {
+                newEntityId
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+            ... on DuplicateEntityError {
+                duplicationError
+            }
+        }
+    }
+`);

package/src/app/routes/_authenticated/_products/products.tsx

@@ -1,11 +1,18 @@
 import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Button } from '@/components/ui/button.js';
-import { PageActionBar, PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon, TrashIcon } from 'lucide-react';
+import { PlusIcon } from 'lucide-react';
+import {
+    AssignFacetValuesToProductsBulkAction,
+    AssignProductsToChannelBulkAction,
+    DeleteProductsBulkAction,
+    DuplicateProductsBulkAction,
+    RemoveProductsFromChannelBulkAction,
+} from './components/product-bulk-actions.js';
 import { deleteProductDocument, productListDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
@@ -32,6 +39,28 @@ function ProductListPage() {
                 };
             }}
             route={Route}
+            bulkActions={[
+                {
+                    component: AssignProductsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveProductsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: AssignFacetValuesToProductsBulkAction,
+                    order: 300,
+                },
+                {
+                    component: DuplicateProductsBulkAction,
+                    order: 400,
+                },
+                {
+                    component: DeleteProductsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateProduct', 'CreateCatalog']}>

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -50,9 +50,11 @@ function ProductDetailPage() {
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
-    const refreshRef = useRef<() => void>(() => {});
+    const refreshRef = useRef<() => void>(() => {
+    });
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        entityName: 'Product',
         queryDocument: productDetailDocument,
         createDocument: createProductDocument,
         updateDocument: updateProductDocument,

package/src/app/styles.css

@@ -4,6 +4,8 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */
+
 /*
 * Important: This is not an actual import. We are pre-processing this CSS file
 * to inject the theme variables into the CSS. This import will be replaced
@@ -64,6 +66,7 @@
     * {
         @apply border-border outline-ring/50;
     }
+
     body {
         @apply bg-background text-foreground;
     }

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

@@ -0,0 +1,101 @@
+import { usePermissions } from '@/hooks/use-permissions.js';
+import { Trans } from '@/lib/trans.js';
+import { cn } from '@/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,89 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { getBulkActions } from '@/framework/data-table/data-table-extensions.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
+import { usePageBlock } from '@/hooks/use-page-block.js';
+import { usePage } from '@/hooks/use-page.js';
+import { Trans } from '@/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 }: DataTableBulkActionsProps<TData>) {
+    const { pageId } = usePage();
+    const { blockId } = usePageBlock();
+
+    // 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);
+
+    if (selection.length === 0) {
+        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-2 px-2 py-1 bg-muted/50 rounded-md border">
+            <span className="text-sm text-muted-foreground">
+                <Trans>{selection.length} selected</Trans>
+            </span>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-8">
+                        <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-filter-badge.tsx

@@ -1,10 +1,8 @@
-import { Filter } from 'lucide-react';
-
-import { CircleX } from 'lucide-react';
-import { Badge } from '../ui/badge.js';
 import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { ColumnDataType } from './data-table-types.js';
-import { HumanReadableOperator } from './human-readable-operator.js';
+import { CircleX, Filter } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+import { HumanReadableOperator, Operator } from './human-readable-operator.js';
+import { ColumnDataType } from './types.js';
 
 export function DataTableFilterBadge({
     filter,
@@ -22,7 +20,9 @@ export function DataTableFilterBadge({
         <Badge key={filter.id} className="flex gap-1 items-center" variant="secondary">
             <Filter size="12" className="opacity-50" />
             <div>{filter.id}</div>
-            <div className="text-muted-foreground"><HumanReadableOperator operator={operator} mode="short" /></div>
+            <div className="text-muted-foreground">
+                <HumanReadableOperator operator={operator as Operator} mode="short" />
+            </div>
             <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
             <button className="cursor-pointer" onClick={() => onRemove(filter)}>
                 <CircleX size="14" />
@@ -31,7 +31,15 @@ export function DataTableFilterBadge({
     );
 }
 
-function FilterValue({ value, dataType, currencyCode }: { value: unknown, dataType: ColumnDataType, currencyCode: string }) {
+function FilterValue({
+    value,
+    dataType,
+    currencyCode,
+}: {
+    value: unknown;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
     const { formatDate, formatCurrency } = useLocalFormat();
     if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
         return Object.entries(value as Record<string, unknown>).map(([key, value]) => (

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

@@ -15,7 +15,7 @@ import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js
 import { DataTableIdFilter } from './filters/data-table-id-filter.js';
 import { DataTableNumberFilter } from './filters/data-table-number-filter.js';
 import { DataTableStringFilter } from './filters/data-table-string-filter.js';
-import { ColumnDataType } from './data-table-types.js';
+import { ColumnDataType } from './types.js';
 
 export interface DataTableFilterDialogProps {
     column: Column<any>;
@@ -38,7 +38,7 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
             {columnDataType === 'String' ? (
                 <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Int' || columnDataType === 'Float' ? (
-                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='number' />
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="number" />
             ) : columnDataType === 'DateTime' ? (
                 <DataTableDateTimeFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Boolean' ? (
@@ -46,7 +46,7 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
             ) : columnDataType === 'ID' ? (
                 <DataTableIdFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Money' ? (
-                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='money' />
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="money" />
             ) : null}
             <DialogFooter className="sm:justify-end">
                 {columnFilter && (
@@ -58,7 +58,7 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
                     <Button
                         type="button"
                         variant="secondary"
-                            onClick={e => {
+                        onClick={() => {
                             column.setFilterValue(filter);
                             setFilter(undefined);
                         }}

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -9,11 +9,11 @@ interface DataTablePaginationProps<TData> {
 }
 
 export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+    const selectedRowCount = Object.keys(table.getState().rowSelection).length;
     return (
         <div className="flex items-center justify-between px-2">
             <div className="flex-1 text-sm text-muted-foreground">
-                {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
-                row(s) selected.
+                {selectedRowCount} of {table.getFilteredRowModel().rows.length} row(s) selected.
             </div>
             <div className="flex items-center space-x-6 lg:space-x-8">
                 <div className="flex items-center space-x-2">

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

@@ -2,8 +2,11 @@
 
 import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
 import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
+import { RefreshButton } from '@/components/data-table/refresh-button.js';
 import { Input } from '@/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
+import { useChannel } from '@/hooks/use-channel.js';
 import {
     ColumnDef,
     ColumnFilter,
@@ -17,13 +20,12 @@ import {
     useReactTable,
     VisibilityState,
 } from '@tanstack/react-table';
-import { TableOptions } from '@tanstack/table-core';
+import { RowSelectionState, TableOptions } from '@tanstack/table-core';
 import React, { Suspense, useEffect } from 'react';
 import { AddFilterMenu } from './add-filter-menu.js';
+import { DataTableBulkActions } from './data-table-bulk-actions.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
 import { DataTableFilterBadge } from './data-table-filter-badge.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { RefreshButton } from '@/components/data-table/refresh-button.js';
 
 export interface FacetedFilter {
     title: string;
@@ -48,6 +50,7 @@ interface DataTableProps<TData> {
     defaultColumnVisibility?: VisibilityState;
     facetedFilters?: { [key: string]: FacetedFilter | undefined };
     disableViewOptions?: boolean;
+    bulkActions?: BulkAction[];
     /**
      * This property allows full control over _all_ features of TanStack Table
      * when needed.
@@ -57,24 +60,25 @@ interface DataTableProps<TData> {
 }
 
 export function DataTable<TData>({
-                                     columns,
-                                     data,
-                                     totalItems,
-                                     page,
-                                     itemsPerPage,
-                                     sorting: sortingInitialState,
-                                     columnFilters: filtersInitialState,
-                                     onPageChange,
-                                     onSortChange,
-                                     onFilterChange,
-                                     onSearchTermChange,
-                                     onColumnVisibilityChange,
-                                     defaultColumnVisibility,
-                                     facetedFilters,
-                                     disableViewOptions,
-                                     setTableOptions,
-                                     onRefresh,
-                                 }: DataTableProps<TData>) {
+    columns,
+    data,
+    totalItems,
+    page,
+    itemsPerPage,
+    sorting: sortingInitialState,
+    columnFilters: filtersInitialState,
+    onPageChange,
+    onSortChange,
+    onFilterChange,
+    onSearchTermChange,
+    onColumnVisibilityChange,
+    defaultColumnVisibility,
+    facetedFilters,
+    disableViewOptions,
+    bulkActions,
+    setTableOptions,
+    onRefresh,
+}: DataTableProps<TData>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
     const { activeChannel } = useChannel();
@@ -85,11 +89,15 @@ export function DataTable<TData>({
     const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(
         defaultColumnVisibility ?? {},
     );
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
 
     useEffect(() => {
         // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
         // we want to reset the column visibility to the default.
-        if (defaultColumnVisibility && JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)) {
+        if (
+            defaultColumnVisibility &&
+            JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)
+        ) {
             setColumnVisibility(defaultColumnVisibility);
         }
         // We intentionally do not include `columnVisibility` in the dependency array
@@ -98,6 +106,7 @@ export function DataTable<TData>({
     let tableOptions: TableOptions<TData> = {
         data,
         columns,
+        getRowId: row => (row as { id: string }).id,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         manualPagination: true,
@@ -108,11 +117,13 @@ export function DataTable<TData>({
         onSortingChange: setSorting,
         onColumnVisibilityChange: setColumnVisibility,
         onColumnFiltersChange: setColumnFilters,
+        onRowSelectionChange: setRowSelection,
         state: {
             pagination,
             sorting,
             columnVisibility,
             columnFilters,
+            rowSelection,
         },
     };
 
@@ -171,12 +182,19 @@ export function DataTable<TData>({
                             .map(f => {
                                 const column = table.getColumn(f.id);
                                 const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
-                                return <DataTableFilterBadge
-                                    key={f.id}
-                                    filter={f}
-                                    currencyCode={currency}
-                                    dataType={(column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'}
-                                    onRemove={() => setColumnFilters(old => old.filter(x => x.id !== f.id))} />;
+                                return (
+                                    <DataTableFilterBadge
+                                        key={f.id}
+                                        filter={f}
+                                        currencyCode={currency}
+                                        dataType={
+                                            (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
+                                        }
+                                        onRemove={() =>
+                                            setColumnFilters(old => old.filter(x => x.id !== f.id))
+                                        }
+                                    />
+                                );
                             })}
                     </div>
                 </div>
@@ -185,6 +203,7 @@ export function DataTable<TData>({
                     {onRefresh && <RefreshButton onRefresh={onRefresh} />}
                 </div>
             </div>
+            <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
             <div className="rounded-md border my-2">
                 <Table>
                     <TableHeader>
@@ -196,9 +215,9 @@ export function DataTable<TData>({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
                                         </TableHead>
                                     );
                                 })}

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,11 +1,11 @@
-import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
+import { Trans } from '@/lib/trans.js';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
+import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';
 import { NUMBER_OPERATORS } from './filters/data-table-number-filter.js';
 import { STRING_OPERATORS } from './filters/data-table-string-filter.js';
-import { Trans } from '@/lib/trans.js';
 
-type Operator =
+export type Operator =
     | (typeof DATETIME_OPERATORS)[number]
     | (typeof BOOLEAN_OPERATORS)[number]
     | (typeof ID_OPERATORS)[number]

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -57,11 +57,7 @@ export function AssignedFacetValues({
                     );
                 })}
             </div>
-            {canUpdate && (
-                <FacetValueSelector
-                    onValueSelect={onSelectHandler}
-                />
-            )}
+            {canUpdate && <FacetValueSelector onValueSelect={onSelectHandler} />}
         </>
     );
 }