added trashing

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts

@@ -1,6 +1,6 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextProviderMixin } from '../../core/context';
 import type { ManifestEntityAction } from '../../core/models';
 
@@ -60,6 +60,8 @@ export class UmbActionService extends UmbContextProviderMixin(LitElement) {
 	@state()
 	private _name = '';
 
+	public key = '';
+
 	@state()
 	private _pages: Array<HTMLElement> = [];
 
@@ -68,8 +70,9 @@ export class UmbActionService extends UmbContextProviderMixin(LitElement) {
 		this.provideContext('umbActionService', this);
 	}
 
-	public open(name: string) {
+	public open(name: string, key: string) {
 		this._name = name;
+		this.key = key;
 		this._modalOpen = true;
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts

@@ -3,6 +3,8 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../../core/context';
 import type { ManifestEntityAction } from '../../../core/models';
+import { UmbModalService } from '../../../core/services/modal';
+import { UmbNodeStore } from '../../../core/stores/node.store';
 import { UmbActionService } from '../actions.service';
 
 @customElement('umb-tree-action-delete')
@@ -13,6 +15,8 @@ export default class UmbTreeActionDeleteElement extends UmbContextConsumerMixin(
 	public treeAction?: ManifestEntityAction;
 
 	private _actionService?: UmbActionService;
+	private _modalService?: UmbModalService;
+	private _nodeStore?: UmbNodeStore;
 
 	constructor() {
 		super();
@@ -20,11 +24,30 @@ export default class UmbTreeActionDeleteElement extends UmbContextConsumerMixin(
 		this.consumeContext('umbActionService', (actionService: UmbActionService) => {
 			this._actionService = actionService;
 		});
+
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
+
+		this.consumeContext('umbNodeStore', (nodeStore: UmbNodeStore) => {
+			this._nodeStore = nodeStore;
+		});
 	}
 
 	private _handleLabelClick() {
 		console.log(this.treeAction, 'label clicked');
 		this._actionService?.openPage('umb-tree-action-delete-page');
+		const modalHandler = this._modalService?.confirm({
+			headline: 'Delete page 1',
+			content: 'Are you sure you want to delete this page?',
+			color: 'danger',
+		});
+
+		modalHandler?.onClose.then(({ confirmed }: any) => {
+			if (confirmed && this._actionService) {
+				this._nodeStore?.trash(this._actionService.key);
+			}
+		});
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts

@@ -107,7 +107,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) {
 	}
 
 	private _openActions() {
-		this._actionService?.open(this.label);
+		this._actionService?.open(this.label, this.itemKey);
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts

@@ -51,7 +51,7 @@ export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) {
 					<umb-tree-item
 						.itemKey=${item.key}
 						.itemType=${item.type}
-						.label=${item.name}
+						.label="${item.name}${item.isTrashed ? ' - trashed' : ''}"
 						?hasChildren=${item.hasChildren}
 						.loading=${this._loading}></umb-tree-item>
 				`

src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts

@@ -25,6 +25,23 @@ export class UmbNodeStore {
 		);
 	}
 
+	trash(key: string) {
+		// fetch from server and update store
+		// TODO: Use node type to hit the right API, or have a general Node API?
+		return fetch('/umbraco/backoffice/node/trash', {
+			method: 'POST',
+			body: key,
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		})
+			.then((res) => res.json())
+			.then((data: Array<NodeEntity>) => {
+				this._updateStore(data);
+				this._updateEntity(data);
+			});
+	}
+
 	// TODO: make sure UI somehow can follow the status of this action.
 	save(data: NodeEntity[]): Promise<void> {
 		// fetch from server and update store

src/Umbraco.Web.UI.Client/src/mocks/domains/node.handlers.ts

@@ -21,6 +21,15 @@ export const handlers = [
 
 		const saved = umbNodeData.save(data);
 
-		return res(ctx.status(200), ctx.json(saved));
+		return res(ctx.status(200), ctx.json([saved]));
+	}),
+
+	rest.post<NodeEntity[]>('/umbraco/backoffice/node/trash', (req, res, ctx) => {
+		console.warn('Please move to schema');
+		const key = req.body as string;
+
+		const trashed = umbNodeData.trash(key);
+
+		return res(ctx.status(200), ctx.json([trashed]));
 	}),
 ];