@vendure/dashboard 3.3.6-master-202507010922 → 3.3.6-master-202507020234

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-bulk-actions.tsx

@@ -0,0 +1,61 @@
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { useChannel } from '@/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import {
+    assignShippingMethodsToChannelDocument,
+    deleteShippingMethodsDocument,
+    removeShippingMethodsFromChannelDocument,
+} from '../shipping-methods.graphql.js';
+
+export const DeleteShippingMethodsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteShippingMethodsDocument}
+            entityName="shipping methods"
+            requiredPermissions={['DeleteShippingMethod']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignShippingMethodsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="shipping methods"
+            mutationFn={api.mutate(assignShippingMethodsToChannelDocument)}
+            requiredPermissions={['UpdateShippingMethod']}
+            buildInput={(channelId: string) => ({
+                shippingMethodIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemoveShippingMethodsFromChannelBulkAction: BulkActionComponent<any> = ({
+    selection,
+    table,
+}) => {
+    const { selectedChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="shipping methods"
+            mutationFn={api.mutate(removeShippingMethodsFromChannelDocument)}
+            requiredPermissions={['UpdateShippingMethod']}
+            buildInput={() => ({
+                shippingMethodIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+        />
+    );
+};

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.graphql.ts

@@ -81,3 +81,30 @@ export const deleteShippingMethodDocument = graphql(`
         }
     }
 `);
+
+export const deleteShippingMethodsDocument = graphql(`
+    mutation DeleteShippingMethods($ids: [ID!]!) {
+        deleteShippingMethods(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignShippingMethodsToChannelDocument = graphql(`
+    mutation AssignShippingMethodsToChannel($input: AssignShippingMethodsToChannelInput!) {
+        assignShippingMethodsToChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);
+
+export const removeShippingMethodsFromChannelDocument = graphql(`
+    mutation RemoveShippingMethodsFromChannel($input: RemoveShippingMethodsFromChannelInput!) {
+        removeShippingMethodsFromChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);

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

@@ -6,6 +6,11 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import {
+    AssignShippingMethodsToChannelBulkAction,
+    DeleteShippingMethodsBulkAction,
+    RemoveShippingMethodsFromChannelBulkAction,
+} from './components/shipping-method-bulk-actions.js';
 import { TestShippingMethodDialog } from './components/test-shipping-method-dialog.js';
 import { deleteShippingMethodDocument, shippingMethodListQuery } from './shipping-methods.graphql.js';
 
@@ -38,6 +43,20 @@ function ShippingMethodListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            bulkActions={[
+                {
+                    component: AssignShippingMethodsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveShippingMethodsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DeleteShippingMethodsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateShippingMethod']}>

package/src/app/routes/_authenticated/_stock-locations/components/stock-location-bulk-actions.tsx

@@ -0,0 +1,58 @@
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { useChannel } from '@/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import {
+    assignStockLocationsToChannelDocument,
+    deleteStockLocationsDocument,
+    removeStockLocationsFromChannelDocument,
+} from '../stock-locations.graphql.js';
+
+export const DeleteStockLocationsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteStockLocationsDocument}
+            entityName="stock locations"
+            requiredPermissions={['DeleteStockLocation']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignStockLocationsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="stock locations"
+            mutationFn={api.mutate(assignStockLocationsToChannelDocument)}
+            requiredPermissions={['UpdateStockLocation']}
+            buildInput={(channelId: string) => ({
+                stockLocationIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemoveStockLocationsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { selectedChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="stock locations"
+            mutationFn={api.mutate(removeStockLocationsFromChannelDocument)}
+            requiredPermissions={['UpdateStockLocation']}
+            buildInput={() => ({
+                stockLocationIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+        />
+    );
+};

package/src/app/routes/_authenticated/_stock-locations/stock-locations.graphql.ts

@@ -60,3 +60,28 @@ export const deleteStockLocationDocument = graphql(`
         }
     }
 `);
+
+export const deleteStockLocationsDocument = graphql(`
+    mutation DeleteStockLocations($input: [DeleteStockLocationInput!]!) {
+        deleteStockLocations(input: $input) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignStockLocationsToChannelDocument = graphql(`
+    mutation AssignStockLocationsToChannel($input: AssignStockLocationsToChannelInput!) {
+        assignStockLocationsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removeStockLocationsFromChannelDocument = graphql(`
+    mutation RemoveStockLocationsFromChannel($input: RemoveStockLocationsFromChannelInput!) {
+        removeStockLocationsFromChannel(input: $input) {
+            id
+        }
+    }
+`);

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

@@ -6,6 +6,11 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import {
+    AssignStockLocationsToChannelBulkAction,
+    DeleteStockLocationsBulkAction,
+    RemoveStockLocationsFromChannelBulkAction,
+} from './components/stock-location-bulk-actions.js';
 import { deleteStockLocationDocument, stockLocationListQuery } from './stock-locations.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations')({
@@ -32,6 +37,20 @@ function StockLocationListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            bulkActions={[
+                {
+                    component: AssignStockLocationsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveStockLocationsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DeleteStockLocationsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateStockLocation']}>

package/src/app/routes/_authenticated/_tax-categories/components/tax-category-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteTaxCategoriesDocument } from '../tax-categories.graphql.js';
+
+export const DeleteTaxCategoriesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteTaxCategoriesDocument}
+            entityName="tax categories"
+            requiredPermissions={['DeleteTaxCategory']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_tax-categories/tax-categories.graphql.ts

@@ -61,3 +61,12 @@ export const deleteTaxCategoryDocument = graphql(`
         }
     }
 `);
+
+export const deleteTaxCategoriesDocument = graphql(`
+    mutation DeleteTaxCategories($ids: [ID!]!) {
+        deleteTaxCategories(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

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

@@ -7,6 +7,7 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
 import { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
@@ -49,6 +50,12 @@ function TaxCategoryListPage() {
                     ),
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteTaxCategoriesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateTaxCategory']}>

package/src/app/routes/_authenticated/_tax-rates/components/tax-rate-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteTaxRatesDocument } from '../tax-rates.graphql.js';
+
+export const DeleteTaxRatesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteTaxRatesDocument}
+            entityName="tax rates"
+            requiredPermissions={['DeleteTaxRate']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_tax-rates/tax-rates.graphql.ts

@@ -73,3 +73,12 @@ export const deleteTaxRateDocument = graphql(`
         }
     }
 `);
+
+export const deleteTaxRatesDocument = graphql(`
+    mutation DeleteTaxRates($ids: [ID!]!) {
+        deleteTaxRates(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

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

@@ -10,6 +10,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
 import { zoneListQuery } from '../_zones/zones.graphql.js';
+import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
 import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
@@ -92,6 +93,12 @@ function TaxRateListPage() {
                     cell: ({ row }) => `${row.original.value}%`,
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteTaxRatesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateTaxRate']}>

package/src/app/routes/_authenticated/_zones/components/zone-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteZonesDocument } from '../zones.graphql.js';
+
+export const DeleteZonesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteZonesDocument}
+            entityName="zones"
+            requiredPermissions={['DeleteZone']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -94,3 +94,12 @@ export const deleteZoneDocument = graphql(`
         }
     }
 `);
+
+export const deleteZonesDocument = graphql(`
+    mutation DeleteZones($ids: [ID!]!) {
+        deleteZones(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -6,6 +6,7 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
 import { ZoneCountriesSheet } from './components/zone-countries-sheet.js';
 import { deleteZoneDocument, zoneListQuery } from './zones.graphql.js';
 
@@ -41,6 +42,12 @@ function ZoneListPage() {
                     ),
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteZonesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateZone']}>

package/src/lib/components/shared/asset/asset-bulk-actions.tsx

@@ -0,0 +1,90 @@
+'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 { usePageBlock } from '@/hooks/use-page-block.js';
+import { usePage } from '@/hooks/use-page.js';
+import { Trans } from '@/lib/trans.js';
+import { ChevronDown } from 'lucide-react';
+import { Asset } from './asset-gallery.js';
+
+export type AssetBulkActionContext = {
+    selection: Asset[];
+    refetch: () => void;
+};
+
+export type AssetBulkActionComponent = React.FunctionComponent<AssetBulkActionContext>;
+
+export type AssetBulkAction = {
+    order?: number;
+    component: AssetBulkActionComponent;
+};
+
+interface AssetBulkActionsProps {
+    selection: Asset[];
+    bulkActions?: AssetBulkAction[];
+    refetch: () => void;
+}
+
+export function AssetBulkActions({ selection, bulkActions, refetch }: AssetBulkActionsProps) {
+    const { pageId } = usePage();
+    const { blockId } = usePageBlock();
+
+    if (selection.length === 0) {
+        return null;
+    }
+
+    // Get extended bulk actions from the registry
+    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
+
+    // Convert DataTable bulk actions to Asset bulk actions
+    const convertedBulkActions: AssetBulkAction[] = extendedBulkActions.map(action => ({
+        order: action.order,
+        component: ({ selection }) => {
+            // Create a mock table context for compatibility
+            const mockTable = {
+                getState: () => ({ rowSelection: {} }),
+                getRow: () => null,
+            } as any;
+
+            const ActionComponent = action.component;
+            return <ActionComponent selection={selection} table={mockTable} />;
+        },
+    }));
+
+    const allBulkActions = [...convertedBulkActions, ...(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 mb-2 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={`asset-bulk-action-${index}`} selection={selection} refetch={refetch} />
+                        ))
+                    ) : (
+                        <DropdownMenuItem className="text-muted-foreground" disabled>
+                            <Trans>No actions available</Trans>
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -16,14 +16,15 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { api } from '@/graphql/api.js';
 import { assetFragment, AssetFragment } from '@/graphql/fragments.js';
 import { graphql } from '@/graphql/graphql.js';
-import { formatFileSize } from '@/lib/utils.js';
 import { Trans } from '@/lib/trans.js';
+import { formatFileSize } from '@/lib/utils.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { useDebounce } from '@uidotdev/usehooks';
 import { DetailPageButton } from '../detail-page-button.js';
+import { AssetBulkAction, AssetBulkActions } from './asset-bulk-actions.js';
 
 const getAssetListDocument = graphql(
     `
@@ -76,7 +77,7 @@ export interface AssetGalleryProps {
     /**
      * @description
      * Defines whether multiple assets can be selected.
-     * 
+     *
      * If set to 'auto', the asset selection will be toggled when the user clicks on an asset.
      * If set to 'manual', multiple selection will occur only if the user holds down the control/cmd key.
      */
@@ -87,6 +88,7 @@ export interface AssetGalleryProps {
     showHeader?: boolean;
     className?: string;
     onFilesDropped?: (files: File[]) => void;
+    bulkActions?: AssetBulkAction[];
 }
 
 export function AssetGallery({
@@ -99,6 +101,7 @@ export function AssetGallery({
     showHeader = true,
     className = '',
     onFilesDropped,
+    bulkActions,
 }: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
@@ -111,7 +114,7 @@ export function AssetGallery({
     const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType];
 
     // Query for assets
-    const { data, isLoading } = useQuery({
+    const { data, isLoading, refetch } = useQuery({
         queryKey,
         queryFn: () => {
             const filter: Record<string, any> = {};
@@ -173,7 +176,6 @@ export function AssetGallery({
             return;
         }
 
-
         // Manual mode - check for modifier key
         const isModifierKeyPressed = event.metaKey || event.ctrlKey;
 
@@ -269,6 +271,9 @@ export function AssetGallery({
                 </div>
             )}
 
+            {/* Bulk actions bar */}
+            <AssetBulkActions selection={selected} bulkActions={bulkActions} refetch={refetch} />
+
             <div
                 {...getRootProps()}
                 className={`
@@ -300,7 +305,7 @@ export function AssetGallery({
                                     ${isSelected(asset as Asset) ? 'ring-2 ring-primary' : ''}
                                     flex flex-col min-w-[120px]
                                 `}
-                                onClick={(e) => handleSelect(asset as Asset, e)}
+                                onClick={e => handleSelect(asset as Asset, e)}
                             >
                                 <div
                                     className="relative w-full bg-muted/30"
@@ -324,7 +329,7 @@ export function AssetGallery({
                                     <p className="text-xs line-clamp-2 min-h-[2.5rem]" title={asset.name}>
                                         {asset.name}
                                     </p>
-                                    <div className='flex justify-between items-center'>
+                                    <div className="flex justify-between items-center">
                                         {asset.fileSize && (
                                             <p className="text-xs text-muted-foreground mt-1">
                                                 {formatFileSize(asset.fileSize)}

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -0,0 +1,70 @@
+import { LayersIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelDialog } from '@/components/shared/assign-to-channel-dialog.js';
+import { useChannel, usePaginatedList } from '@/index.js';
+import { Trans } from '@/lib/trans.js';
+
+interface AssignToChannelBulkActionProps {
+    selection: any[];
+    table: any;
+    entityType: string;
+    mutationFn: (variables: any) => Promise<any>;
+    requiredPermissions: string[];
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    additionalFields?: React.ReactNode;
+    additionalData?: Record<string, any>;
+    /**
+     * Additional callback to run on success, after the standard refetch and reset
+     */
+    onSuccess?: () => void;
+}
+
+export function AssignToChannelBulkAction({
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+    onSuccess,
+}: Readonly<AssignToChannelBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+        onSuccess?.();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityIds={selection.map(s => s.id)}
+                entityType={entityType}
+                mutationFn={mutationFn}
+                onSuccess={handleSuccess}
+                buildInput={buildInput}
+                additionalFields={additionalFields}
+                additionalData={additionalData}
+            />
+        </>
+    );
+}