events modal

src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts

@@ -1,31 +1,82 @@
+import { UmbWebhookDetailRepository } from '../../repository/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
-import { UmbWebhookDetailRepository } from '../../repository/index.js';
+import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-webhook-events-modal')
 export class UmbWebhookEventsModalElement extends UmbLitElement {
 	@property({ attribute: false })
 	modalContext?: UmbModalContext;
 
+	@property({ attribute: false })
+	events: Array<string> = [];
+
+	@state()
+	_events: Array<string> = [];
+
 	#webhookRepository = new UmbWebhookDetailRepository(this);
 
+	#selectionManager = new UmbSelectionManager(this);
+
 	constructor() {
 		super();
 
-		const hello = this.#webhookRepository;
+		this.#requestEvents();
 	}
 
-	#onInput(event: InputEvent) {
-		const input = event.target as HTMLInputElement;
-		this.modalContext?.setValue(input.value);
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.#selectionManager.setSelectable(true);
+		this.#selectionManager.setMultiple(true);
+		this.#selectionManager.setSelection(this.events);
+
+		this.observe(this.#selectionManager.selection, (selection) => {
+			this.modalContext?.setValue(selection);
+		});
+	}
+
+	async #requestEvents() {
+		const { data } = await this.#webhookRepository.requestEvents();
+
+		if (!data) return;
+
+		this._events = data.items;
+	}
+
+	#submit() {
+		this.modalContext?.submit();
+	}
+
+	#close() {
+		this.modalContext?.reject();
 	}
 
 	render() {
-		return html`<input type="text" @input=${this.#onInput} />
-			<button @click=${() => this.modalContext?.submit()}>Submit</button> `;
+		return html`<umb-body-layout headline="Select languages">
+			<uui-box>
+				${repeat(
+					this._events,
+					(item) => item,
+					(item) => html`
+						<uui-menu-item
+							label=${item}
+							selectable
+							@selected=${() => this.#selectionManager.select(item)}
+							@deselected=${() => this.#selectionManager.deselect(item)}
+							?selected=${this.events.includes(item)}>
+							<uui-icon slot="icon" name="icon-globe"></uui-icon>
+						</uui-menu-item>
+					`,
+				)}
+			</uui-box>
+			<div slot="actions">
+				<uui-button label="Close" @click=${this.#close}></uui-button>
+				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+			</div>
+		</umb-body-layout> `;
 	}
 
 	static styles = [UmbTextStyles, css``];

src/Umbraco.Web.UI.Client/src/packages/webhook/repository/detail/webhook-detail.repository.ts

@@ -1,3 +1,4 @@
+import { WebhookService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbWebhookDetailModel } from '../../types.js';
 import { UmbWebhookServerDataSource } from './webhook-detail.server.data-source.js';
 import { UMB_WEBHOOK_DETAIL_STORE_CONTEXT } from './webhook-detail.store.js';
@@ -12,6 +13,21 @@ export class UmbWebhookDetailRepository extends UmbDetailRepositoryBase<UmbWebho
 	async create(model: UmbWebhookDetailModel) {
 		return super.create(model, null);
 	}
+
+	async requestEvents(): Promise<{ data: { items: string[]; total: number }; error: any }> {
+		//TODO Use service when available
+
+		const items = ['Content Deleted', 'Content Published', 'Content Unpublished', 'Media Deleted', 'Media Saved'];
+
+		const result = {
+			data: { items, total: items.length },
+			error: null,
+		};
+
+		return new Promise((resolve) => {
+			setTimeout(() => resolve(result), 10);
+		});
+	}
 }
 
 export default UmbWebhookDetailRepository;