BulkAction

Configures a bulk action which can be performed on all selected items in a list view.

For a full example, see the registerBulkAction docs.

Signature

interface BulkAction<ItemType = any, ComponentType = any> {    location: BulkActionLocationId;    label: string;    getTranslationVars?: (        context: BulkActionFunctionContext<ItemType, ComponentType>,    ) => Record<string, string | number> | Promise<Record<string, string | number>>;    icon?: string;    iconClass?: string;    onClick: (context: BulkActionClickContext<ItemType, ComponentType>) => void;    isVisible?: (context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>;    requiresPermission?: string | ((userPermissions: string[]) => boolean);}

location

propertyBulkActionLocationId

label

propertystring

getTranslationVars

property

(         context: BulkActionFunctionContext<ItemType, ComponentType>,     ) => Record<string, string | number> | Promise<Record<string, string | number>>

An optional function that should resolve to a map of translation variables which can be used when translating the label string.

icon

propertystring

A valid Clarity Icons icon shape, e.g. "cog", "user", "info-standard".

iconClass

propertystring

A class to be added to the icon element. Examples:

is-success
is-danger
is-warning
is-info
is-highlight

onClick

property(context: BulkActionClickContext<ItemType, ComponentType>) => void

Defines the logic that executes when the bulk action button is clicked.

isVisible

property(context: BulkActionFunctionContext<ItemType, ComponentType>) => boolean | Promise<boolean>

A function that determines whether this bulk action item should be displayed in the menu. If not defined, the item will always be displayed.

This function will be invoked each time the selection is changed, so try to avoid expensive code running here.

Example

import { registerBulkAction, DataService } from '@vendure/admin-ui/core';registerBulkAction({  location: 'product-list',  label: 'Assign to channel',  // Only display this action if there are multiple channels  isVisible: ({ injector }) => injector.get(DataService).client    .userStatus()    .mapSingle(({ userStatus }) => 1 < userStatus.channels.length)    .toPromise(),  // ...});

requiresPermission

propertystring | ((userPermissions: string[]) => boolean)

Control the display of this item based on the user permissions.

Example

registerBulkAction({  // Can be specified as a simple string  requiresPermission: Permission.UpdateProduct,  // Or as a function that returns a boolean if permissions are satisfied  requiresPermission: userPermissions =>    userPermissions.includes(Permission.UpdateCatalog) ||    userPermissions.includes(Permission.UpdateProduct),  // ...})

@vendure/admin-ui Sourcev1.8.0

A valid location of a list view that supports the bulk actions API.

Signature

type BulkActionLocationId = | 'product-list'    | 'facet-list'    | 'collection-list'    | 'customer-list'    | 'customer-group-list'    | 'customer-group-members-list'    | 'customer-group-members-picker-list'    | 'promotion-list'    | 'seller-list'    | 'channel-list'    | 'administrator-list'    | 'role-list'    | 'shipping-method-list'    | 'stock-location-list'    | 'payment-method-list'    | 'tax-category-list'    | 'tax-rate-list'    | 'zone-list'    | 'zone-members-list'    | string

@vendure/admin-ui Sourcev1.8.0

This is the argument which gets passed to the getTranslationVars and isVisible functions of the BulkAction definition.

Signature

interface BulkActionFunctionContext<ItemType, ComponentType> {    selection: ItemType[];    hostComponent: ComponentType;    injector: Injector;    route: ActivatedRoute;}

selection

propertyItemType[]

An array of the selected items from the list.

hostComponent

propertyComponentType

The component instance that is hosting the list view. For instance, ProductListComponent. This can be used to call methods on the instance, e.g. calling hostComponent.refresh() to force a list refresh after deleting the selected items.

injector

propertyInjector

The Angular Injector which can be used to get service instances which might be needed in the click handler.

route

propertyActivatedRoute

@vendure/admin-ui Sourcev1.8.0

This is the argument which gets passed to the onClick function of a BulkAction.

Signature

interface BulkActionClickContext<ItemType, ComponentType> extends BulkActionFunctionContext<ItemType, ComponentType> {    clearSelection: () => void;    event: MouseEvent;}

Extends: BulkActionFunctionContext<ItemType, ComponentType>

clearSelection

property() => void

Clears the selection in the active list view.

event

propertyMouseEvent

The click event itself.