From 6769f6557999c8eeabc26ffb91c8242c65593d83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Tue, 30 Aug 2022 16:47:21 +0200
Subject: [PATCH] add action execute in actionService

---
 .../backoffice/tree/actions-modal.element.ts  | 31 ++++++++++++++-----
 .../src/backoffice/tree/actions.service.ts    |  4 +++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts
index 0e7624dd21..34214dac49 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts
@@ -1,9 +1,11 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
+import { UmbActionService } from './actions.service';
+import { UmbContextConsumerMixin } from '../../core/context';
 
 @customElement('umb-actions-modal')
-export class UmbActionsModal extends LitElement {
+export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -26,24 +28,39 @@ export class UmbActionsModal extends LitElement {
 				cursor: pointer;
 			}
 			.action:hover {
-				background-color: var(--uui-color-surface-alt);
+				background-color: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
 			}
 		`,
 	];
 
+	private _actionService?: UmbActionService;
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbActionService', (actionService: UmbActionService) => {
+			this._actionService = actionService;
+		});
+	}
+
 	@property()
 	name = '';
 
+	private _actionList = ['create', 'rename', 'delete', 'reload'];
+
+	renderActions() {
+		return this._actionList.map((action) => {
+			return html` <div class="action" @click=${() => this._actionService?.execute(action)}>${action}</div> `;
+		});
+	}
+
 	render() {
 		return html`
 			<div id="title">
 				<h3>${this.name}</h3>
 			</div>
-			<div id="action-list">
-				<div class="action">action 1</div>
-				<div class="action">action 2</div>
-				<div class="action">action 3</div>
-			</div>
+			<div id="action-list">${this.renderActions()}</div>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts
index 66213551da..ad8302fced 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts
@@ -68,6 +68,10 @@ export class UmbActionService extends UmbContextProviderMixin(LitElement) {
 		this._modalOpen = false;
 	}
 
+	public execute(action: any) {
+		console.log('Execute action: ', action);
+	}
+
 	private _renderBackdrop() {
 		// eslint-disable-next-line lit-a11y/click-events-have-key-events
 		return this._modalOpen ? html`<div id="backdrop" @click=${this.close}></div>` : nothing;