diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts index 4a7b5d3a91..044d75fc02 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts @@ -1,9 +1,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; +import { map } from 'rxjs'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from './collection.context'; -import type { MediaDetails } from '@umbraco-cms/models'; +import type { ManifestEntityBulkAction, MediaDetails } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; +import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; + +import '../entity-bulk-actions/entity-bulk-action.element'; @customElement('umb-collection-selection-actions') export class UmbCollectionSelectionActionsElement extends UmbLitElement { @@ -22,7 +26,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { justify-content: space-between; } #selection-info, - umb-extension-slot { + #actions { display: flex; align-items: center; box-sizing: border-box; @@ -32,7 +36,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { ]; @property() - public entityType = 'media'; + public entityType: string | null = null; @state() private _nodesLength = 0; @@ -40,13 +44,19 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { @state() private _selectionLength = 0; + @state() + private _entityBulkActions: Array = []; + private _collectionContext?: UmbCollectionContext; + private _selection: Array = []; constructor() { super(); this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (instance) => { this._collectionContext = instance; + this.entityType = instance.getEntityType(); this._observeCollectionContext(); + this.#observeEntityBulkActions(); }); } @@ -70,6 +80,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { this.observe(this._collectionContext.selection, (selection) => { this._selectionLength = selection.length; + this._selection = selection; }); } @@ -77,6 +88,20 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { return html`
${this._selectionLength} of ${this._nodesLength} selected
`; } + // TODO: find a solution to use extension slot + #observeEntityBulkActions() { + this.observe( + umbExtensionsRegistry.extensionsOfType('entityBulkAction').pipe( + map((extensions) => { + return extensions.filter((extension) => extension.meta.entityType === this.entityType); + }) + ), + (bulkActions) => { + this._entityBulkActions = bulkActions; + } + ); + } + render() { if (this._selectionLength === 0) return nothing; @@ -88,9 +113,13 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { look="secondary"> ${this._renderSelectionCount()} - manifest.meta.entityType === this.entityType}>`; + +
+ ${this._entityBulkActions?.map( + (manifest) => + html`` + )} +
`; } }