BulkAction
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);
}
Members
location
property
type:
BulkActionLocationId
label
property
type:
string
getTranslationVars
property
type:
(
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
property
type:
string
A valid Clarity Icons icon shape, e.g.
“cog”, “user”, “info-standard”.
iconClass
property
type:
string
A class to be added to the icon element. Examples:
- is-success
- is-danger
- is-warning
- is-info
- is-highlight
onClick
property
type:
(context: BulkActionClickContext<ItemType, ComponentType>) => void
Defines the logic that executes when the bulk action button is clicked.
isVisible
property
type:
(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
property
type:
string | ((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),
// ...
})
BulkActionLocationId
A valid location of a list view that supports the bulk actions API.
Signature
type BulkActionLocationId = 'product-list' | 'facet-list' | 'collection-list' | string
BulkActionFunctionContext
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;
}
Members
selection
property
type:
ItemType[]
An array of the selected items from the list.
hostComponent
property
type:
ComponentType
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
property
type:
Injector
The Angular Injector which can be used
to get service instances which might be needed in the click handler.
route
property
type:
ActivatedRoute
BulkActionClickContext
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>
Members
clearSelection
property
type:
() => void
Clears the selection in the active list view.
event
property
type:
MouseEvent
The click event itself.