Merge branch 'feature/entity-actions' of https://github.com/umbraco/Umbraco.CMS.Backoffice into feature/entity-actions

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/document-delete.entity-action.ts

@@ -1,11 +0,0 @@
-export class DeleteDocumentEntityAction {
-	#host: any;
-
-	constructor(host: any) {
-		this.#host = host;
-	}
-
-	execute() {
-		alert('delete');
-	}
-}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/document-trash.entity-action.ts

@@ -0,0 +1,45 @@
+import { UmbTemplateTreeRepository } from '../../../templating/templates/tree/data/template.tree.repository';
+import { UmbTemplateDetailRepository } from '../../../templating/templates/workspace/data/template.detail.repository';
+import { UmbContextConsumerController } from '@umbraco-cms/context-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+
+export class TrashDocumentEntityAction {
+	#host: UmbControllerHostInterface;
+	#key: string;
+	#modalService?: UmbModalService;
+	#documentDetailRepo: UmbTemplateDetailRepository;
+	#documentTreeRepo: UmbTemplateTreeRepository;
+
+	constructor(host: UmbControllerHostInterface, key: string) {
+		this.#host = host;
+		this.#key = key;
+		this.#documentTreeRepo = new UmbTemplateTreeRepository(this.#host); // TODO: change to document repo
+		this.#documentDetailRepo = new UmbTemplateDetailRepository(this.#host); // TODO: change to document repo
+
+		new UmbContextConsumerController(this.#host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
+			this.#modalService = instance;
+		});
+	}
+
+	async execute() {
+		const { data } = await this.#documentTreeRepo.requestItems([this.#key]);
+
+		if (data) {
+			const item = data[0];
+
+			const modalHandler = this.#modalService?.confirm({
+				headline: `Delete ${item.name}`,
+				content: 'Are you sure you want to delete this item?',
+				color: 'danger',
+				confirmLabel: 'Delete',
+			});
+
+			modalHandler?.onClose().then(({ confirmed }) => {
+				if (confirmed) {
+					this.#documentDetailRepo.delete(this.#key);
+				}
+			});
+		}
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts

@@ -1,5 +1,5 @@
 import { CreateDocumentEntityAction } from './document-create.entity-action';
-import { DeleteDocumentEntityAction } from './document-delete.entity-action';
+import { TrashDocumentEntityAction } from './document-trash.entity-action';
 import { PublishDocumentEntityAction } from './document-publish.entity-action';
 import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
@@ -17,13 +17,13 @@ const entityActions: Array<ManifestEntityAction> = [
 	},
 	{
 		type: 'entityAction',
-		alias: 'Umb.EntityAction.Document.Delete',
-		name: 'Delete Document Entity Action ',
+		alias: 'Umb.EntityAction.Document.Trash',
+		name: 'Trash Document Entity Action ',
 		meta: {
 			entityType: 'document',
 			icon: 'umb:trash',
-			label: 'Delete',
-			api: DeleteDocumentEntityAction,
+			label: 'Trash',
+			api: TrashDocumentEntityAction,
 		},
 	},
 	{

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/entity-action.element.ts

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbLitElement } from '@umbraco-cms/element';
@@ -23,15 +23,17 @@ class UmbEntityActionElement extends UmbLitElement {
 
 	#api: any;
 
-	#onClickLabel() {
-		this.#api.execute();
+	async #onClickLabel() {
+		await this.#api.execute();
 	}
 
 	render() {
 		return html`
-			<uui-menu-item
-				label="${ifDefined(this._manifest?.meta.label)}"
-				@click-label=${this.#onClickLabel}></uui-menu-item>
+			<uui-menu-item label="${ifDefined(this._manifest?.meta.label)}" @click-label=${this.#onClickLabel}>
+				${this._manifest?.meta.icon
+					? html`<uui-icon slot="icon" name="${this._manifest?.meta.icon}"></uui-icon>`
+					: nothing}
+			</uui-menu-item>
 		`;
 	}
 }