diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts index 5900de6235..63ae19acf1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts @@ -3,11 +3,11 @@ import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { map } from 'rxjs'; +import { repeat } from 'lit-html/directives/repeat.js'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context'; import type { ManifestCollectionBulkAction, MediaDetails } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from 'src/core/modal'; -import { repeat } from 'lit-html/directives/repeat.js'; import { UmbMediaStore, UMB_MEDIA_STORE_CONTEXT_TOKEN } from 'src/backoffice/media/media/media.store'; @customElement('umb-collection-bulk-action-media-delete') diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts new file mode 100644 index 0000000000..63ae19acf1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts @@ -0,0 +1,88 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { map } from 'rxjs'; +import { repeat } from 'lit-html/directives/repeat.js'; +import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../collection.context'; +import type { ManifestCollectionBulkAction, MediaDetails } from '@umbraco-cms/models'; +import { UmbLitElement } from '@umbraco-cms/element'; +import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from 'src/core/modal'; +import { UmbMediaStore, UMB_MEDIA_STORE_CONTEXT_TOKEN } from 'src/backoffice/media/media/media.store'; + +@customElement('umb-collection-bulk-action-media-delete') +export class UmbCollectionBulkActionDeleteElement extends UmbLitElement { + static styles = [UUITextStyles, css``]; + + // TODO: make a UmbCollectionContextMedia: + #collectionContext?: UmbCollectionContext; + + public manifest?: ManifestCollectionBulkAction; + + #modalService?: UmbModalService; + #mediaStore?: UmbMediaStore; + + constructor() { + super(); + + this.consumeContext(UMB_COLLECTION_CONTEXT_TOKEN, (context) => { + this.#collectionContext = context; + }); + + this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { + this.#modalService = instance; + }); + + this.consumeContext(UMB_MEDIA_STORE_CONTEXT_TOKEN, (instance) => { + this.#mediaStore = instance; + }); + } + + #handleClick(event: Event) { + const selectionSubscription = this.#collectionContext?.selection.subscribe((selection) => { + const dataSubscription = this.#collectionContext?.data + .pipe(map((items) => items.filter((item) => selection.includes(item.key)))) + .subscribe((items: Array) => { + const modalHandler = this.#modalService?.confirm({ + headline: `Deleting ${selection.length} items`, + content: html` + This will delete the following files: + + `, + color: 'danger', + confirmLabel: 'Delete', + }); + modalHandler?.onClose().then(({ confirmed }) => { + selectionSubscription?.unsubscribe(); + dataSubscription?.unsubscribe(); + + if (confirmed) { + this.#mediaStore?.trash(selection); + this.#collectionContext?.clearSelection(); + } + }); + }); + }); + } + + render() { + // TODO: make a UmbCollectionContextMedia and use a deleteSelection method. + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-collection-bulk-action-media-delete': UmbCollectionBulkActionDeleteElement; + } +}