add action execute in actionService

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>
 		`;
 	}
 }

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;