@vendure/dashboard 3.3.5-master-202506250724 → 3.3.5-master-202506251305

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -0,0 +1,268 @@
+import { useMutation } from '@tanstack/react-query';
+import { CopyIcon, LayersIcon, TagIcon, TrashIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { useChannel, usePaginatedList } from '@/index.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { Permission } from '@vendure/common/lib/generated-types';
+import {
+    deleteProductsDocument,
+    duplicateEntityDocument,
+    removeProductsFromChannelDocument,
+} from '../products.graphql.js';
+import { AssignFacetValuesDialog } from './assign-facet-values-dialog.js';
+import { AssignToChannelDialog } from './assign-to-channel-dialog.js';
+
+export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(deleteProductsDocument),
+        onSuccess: (result: ResultOf<typeof deleteProductsDocument>) => {
+            let deleted = 0;
+            const errors: string[] = [];
+            for (const item of result.deleteProducts) {
+                if (item.result === 'DELETED') {
+                    deleted++;
+                } else if (item.message) {
+                    errors.push(item.message);
+                }
+            }
+            if (0 < deleted) {
+                toast.success(i18n.t(`Deleted ${deleted} products`));
+            }
+            if (0 < errors.length) {
+                toast.error(i18n.t(`Failed to delete ${errors.length} products`));
+            }
+            refetchPaginatedList();
+            table.resetRowSelection();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} products`);
+        },
+    });
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.DeleteCatalog, Permission.DeleteProduct]}
+            onClick={() => mutate({ ids: selection.map(s => s.id) })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={<Trans>Are you sure you want to delete {selection.length} products?</Trans>}
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+};
+
+export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels, selectedChannel } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                productIds={selection.map(s => s.id)}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};
+
+export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { selectedChannel } = useChannel();
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(removeProductsFromChannelDocument),
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully removed ${selection.length} products from channel`));
+            refetchPaginatedList();
+            table.resetRowSelection();
+        },
+        onError: error => {
+            toast.error(`Failed to remove ${selection.length} products from channel: ${error.message}`);
+        },
+    });
+
+    if (!selectedChannel) {
+        return null;
+    }
+
+    const handleRemove = () => {
+        mutate({
+            input: {
+                productIds: selection.map(s => s.id),
+                channelId: selectedChannel.id,
+            },
+        });
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            onClick={handleRemove}
+            label={<Trans>Remove from current channel</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to remove {selection.length} products from the current channel?
+                </Trans>
+            }
+            icon={LayersIcon}
+            className="text-warning"
+        />
+    );
+};
+
+export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Edit facet values</Trans>}
+                icon={TagIcon}
+            />
+            <AssignFacetValuesDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                productIds={selection.map(s => s.id)}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};
+
+export const DuplicateProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [progress, setProgress] = useState({ completed: 0, total: 0 });
+
+    const { mutateAsync } = useMutation({
+        mutationFn: api.mutate(duplicateEntityDocument),
+    });
+
+    const handleDuplicate = async () => {
+        if (isDuplicating) return;
+
+        setIsDuplicating(true);
+        setProgress({ completed: 0, total: selection.length });
+
+        const results = {
+            success: 0,
+            failed: 0,
+            errors: [] as string[],
+        };
+
+        try {
+            // Process products sequentially to avoid overwhelming the server
+            for (let i = 0; i < selection.length; i++) {
+                const product = selection[i];
+
+                try {
+                    const result = await mutateAsync({
+                        input: {
+                            entityName: 'Product',
+                            entityId: product.id,
+                            duplicatorInput: {
+                                code: 'product-duplicator',
+                                arguments: [
+                                    {
+                                        name: 'includeVariants',
+                                        value: 'true',
+                                    },
+                                ],
+                            },
+                        },
+                    });
+
+                    if ('newEntityId' in result.duplicateEntity) {
+                        results.success++;
+                    } else {
+                        results.failed++;
+                        const errorMsg =
+                            result.duplicateEntity.message ||
+                            result.duplicateEntity.duplicationError ||
+                            'Unknown error';
+                        results.errors.push(`Product ${product.name || product.id}: ${errorMsg}`);
+                    }
+                } catch (error) {
+                    results.failed++;
+                    results.errors.push(
+                        `Product ${product.name || product.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    );
+                }
+
+                setProgress({ completed: i + 1, total: selection.length });
+            }
+
+            // Show results
+            if (results.success > 0) {
+                toast.success(i18n.t(`Successfully duplicated ${results.success} products`));
+            }
+            if (results.failed > 0) {
+                const errorMessage =
+                    results.errors.length > 3
+                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
+                        : results.errors.join(', ');
+                toast.error(`Failed to duplicate ${results.failed} products: ${errorMessage}`);
+            }
+
+            if (results.success > 0) {
+                refetchPaginatedList();
+                table.resetRowSelection();
+            }
+        } finally {
+            setIsDuplicating(false);
+            setProgress({ completed: 0, total: 0 });
+        }
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            onClick={handleDuplicate}
+            label={
+                isDuplicating ? (
+                    <Trans>
+                        Duplicating... ({progress.completed}/{progress.total})
+                    </Trans>
+                ) : (
+                    <Trans>Duplicate</Trans>
+                )
+            }
+            icon={CopyIcon}
+        />
+    );
+};

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

@@ -24,12 +24,12 @@ import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader
 import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useRef } from 'react';
 import { toast } from 'sonner';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
-import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
-import { useRef } from 'react';
 
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
@@ -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,
@@ -88,9 +90,9 @@ function ProductDetailPage() {
             });
         },
     });
-    
+
     return (
-        <Page pageId="product-detail" entity={entity} form={form} submitHandler={submitHandler}>
+        <Page pageId="product-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
@@ -142,10 +144,13 @@ function ProductDetailPage() {
                 <CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />
                 {entity && entity.variantList.totalItems > 0 && (
                     <PageBlock column="main" blockId="product-variants-table">
-                        <ProductVariantsTable productId={params.id} registerRefresher={refresher => {
-                            refreshRef.current = refresher;
-                        }} />
-                         <div className="mt-4">
+                        <ProductVariantsTable
+                            productId={params.id}
+                            registerRefresher={refresher => {
+                                refreshRef.current = refresher;
+                            }}
+                        />
+                        <div className="mt-4">
                             <AddProductVariantDialog
                                 productId={params.id}
                                 onSuccess={() => {

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -114,7 +114,7 @@ function PromotionDetailPage() {
     });
 
     return (
-        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -71,7 +71,7 @@ function RoleDetailPage() {
     });
 
     return (
-        <Page pageId="role-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="role-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -65,7 +65,7 @@ function SellerDetailPage() {
     });
 
     return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="seller-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -94,7 +94,7 @@ function ShippingMethodDetailPage() {
     });
 
     return (
-        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New shipping method</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -74,7 +74,7 @@ function StockLocationDetailPage() {
     });
 
     return (
-        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -73,7 +73,7 @@ function TaxCategoryDetailPage() {
     });
 
     return (
-        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -77,7 +77,7 @@ function TaxRateDetailPage() {
     });
 
     return (
-        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -66,7 +66,7 @@ function ZoneDetailPage() {
     });
 
     return (
-        <Page pageId="zone-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="zone-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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>
+    );
+}