events

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

@@ -0,0 +1,60 @@
+import { UMB_WEBHOOK_EVENTS_MODAL } from './webhook-events-modal/webhook-events-modal.token.js';
+import { css, html, customElement, state, property, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import '@umbraco-cms/backoffice/culture';
+import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+@customElement('umb-input-webhook-events')
+export class UmbInputWebhookEventsElement extends UmbLitElement {
+	@property({ attribute: false })
+	public events: Array<string> = [];
+
+	private _modalContext?: UmbModalManagerContext;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
+			this._modalContext = _instance;
+		});
+	}
+
+	async #openModal() {
+		const modal = this._modalContext?.open(this, UMB_WEBHOOK_EVENTS_MODAL, { modal: { type: 'sidebar' } });
+		if (!modal) return;
+
+		await modal.onSubmit();
+
+		console.log('Search modal closed', modal.getValue());
+		modal.destroy();
+	}
+
+	render() {
+		return html`<uui-button id="add" look="placeholder" label="Add" @click=${this.#openModal}></uui-button>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: grid;
+				grid-template-columns: 1fr 1fr auto;
+				gap: var(--uui-size-space-2) var(--uui-size-space-2);
+			}
+
+			#add {
+				grid-column: -1 / 1;
+			}
+		`,
+	];
+}
+
+export default UmbInputWebhookEventsElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-webhook-events': UmbInputWebhookEventsElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts

@@ -1,13 +1,12 @@
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, customElement, state, property, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import '@umbraco-cms/backoffice/culture';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-input-webhook-headers')
-export class UmbInputWebhookHeadersElement extends UmbLitElement implements UmbWorkspaceViewElement {
+export class UmbInputWebhookHeadersElement extends UmbLitElement {
 	@property()
 	public headers: { [key: string]: string } = {};
 
@@ -17,6 +16,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement implements UmbW
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
 
+		if (!this.headers) return;
+
 		this._headers = Object.entries(this.headers).map(([name, value]) => ({ name, value }));
 	}
 

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

@@ -0,0 +1,40 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, property } 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';
+
+@customElement('umb-webhook-events-modal')
+export class UmbWebhookEventsModalElement extends UmbLitElement {
+	@property({ attribute: false })
+	modalContext?: UmbModalContext;
+
+	#webhookRepository = new UmbWebhookDetailRepository(this);
+
+	constructor() {
+		super();
+
+		const hello = this.#webhookRepository;
+	}
+
+	#onInput(event: InputEvent) {
+		const input = event.target as HTMLInputElement;
+		this.modalContext?.setValue(input.value);
+	}
+
+	render() {
+		return html`<input type="text" @input=${this.#onInput} />
+			<button @click=${() => this.modalContext?.submit()}>Submit</button> `;
+	}
+
+	static styles = [UmbTextStyles, css``];
+}
+
+export default UmbWebhookEventsModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-webhook-events-modal': UmbWebhookEventsModalElement;
+	}
+}

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

@@ -0,0 +1,3 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export const UMB_WEBHOOK_EVENTS_MODAL = new UmbModalToken('Umb.Modal.Webhook.Events');

src/Umbraco.Web.UI.Client/src/packages/webhook/manifests.ts

@@ -3,4 +3,14 @@ import { manifests as workspaceManifests } from './workspace/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests: Array<ManifestTypes> = [...treeManifests, ...workspaceManifests, ...collectionManifests];
+export const manifests: Array<ManifestTypes> = [
+	...treeManifests,
+	...workspaceManifests,
+	...collectionManifests,
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Webhook.Events',
+		name: 'Webhook Events Modal',
+		js: () => import('./components/webhook-events-modal/webhook-events-modal.element.js'),
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts

@@ -1,4 +1,6 @@
+import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
 import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js';
+import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js';
 import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -6,9 +8,12 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import '@umbraco-cms/backoffice/culture';
 import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook';
 
-import '../../../components/input-webhook-headers-view.element.js';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import UmbInputWebhookHeadersElement from '../../../components/input-webhook-headers-view.element.js';
+import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
+import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+
+import '../../../components/input-webhook-headers.element.js';
+import '../../../components/input-webhook-events.element.js';
 
 @customElement('umb-webhook-details-workspace-view')
 export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -34,29 +39,54 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 		});
 	}
 
-	#onHeadersChange(event: UmbChangeEvent) {
-		if (!this._webhook) return;
+	#onEventsChange(event: UmbChangeEvent) {
+		const events = (event.target as UmbInputWebhookEventsElement).events;
+		this.#webhookWorkspaceContext?.setEvents(events);
+	}
 
+	#onHeadersChange(event: UmbChangeEvent) {
 		const headers = (event.target as UmbInputWebhookHeadersElement).headers;
 		this.#webhookWorkspaceContext?.setHeaders(headers);
 	}
 
+	#onTypesChange(event: UmbChangeEvent) {
+		const types = (event.target as UmbInputDocumentTypeElement).selection;
+		this.#webhookWorkspaceContext?.setTypes(types);
+	}
+
+	#onUrlChange(event: UUIInputEvent) {
+		const value = event.target.value;
+		if (typeof value !== 'string') return;
+
+		this.#webhookWorkspaceContext?.setUrl(value);
+	}
+
+	#onEnabledChange(event: UUIBooleanInputEvent) {
+		this.#webhookWorkspaceContext?.setEnabled(event.target.checked);
+	}
+
 	render() {
 		if (!this._webhook) return nothing;
 
 		return html`
 			<uui-box>
 				<umb-property-layout label="Url" description="The url to call when the webhook is triggered.">
-					<uui-input slot="editor"></uui-input>
+					<uui-input @input=${this.#onUrlChange} slot="editor"></uui-input>
 				</umb-property-layout>
 				<umb-property-layout label="Events" description="The events for which the webhook should be triggered.">
-					<div slot="editor">IMPLEMENT</div>
+					<umb-input-webhook-events
+						@change=${this.#onEventsChange}
+						.events=${this._webhook.events ?? []}
+						slot="editor"></umb-input-webhook-events>
 				</umb-property-layout>
 				<umb-property-layout label="Content Type" description="Only trigger the webhook for a specific content type.">
-					<umb-input-document-type slot="editor" ?elementTypesOnly=${true}></umb-input-document-type>
+					<umb-input-document-type
+						@change=${this.#onTypesChange}
+						slot="editor"
+						?elementTypesOnly=${true}></umb-input-document-type>
 				</umb-property-layout>
 				<umb-property-layout label="Enabled" description="Is the webhook enabled?">
-					<uui-toggle slot="editor"></uui-toggle>
+					<uui-toggle slot="editor" @input=${this.#onEnabledChange}></uui-toggle>
 				</umb-property-layout>
 				<umb-property-layout label="Headers" description="Custom headers to include in the webhook request.">
 					<umb-input-webhook-headers

src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/webhook-workspace.context.ts

@@ -92,10 +92,26 @@ export class UmbWebhookWorkspaceContext
 		this.#data.update({ name });
 	}
 
+	setEvents(events: string[]) {
+		this.#data.update({ events });
+	}
+
 	setHeaders(headers: { [key: string]: string }) {
 		this.#data.update({ headers });
 	}
 
+	setTypes(types: string[]) {
+		this.#data.update({ types });
+	}
+
+	setUrl(url: string) {
+		this.#data.update({ url });
+	}
+
+	setEnabled(enabled: boolean) {
+		this.#data.update({ enabled });
+	}
+
 	async submit() {
 		const newData = this.getData();
 		if (!newData) {