diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts index c6a84438d9..7e0e77d5cd 100644 --- a/src/assets/lang/en.ts +++ b/src/assets/lang/en.ts @@ -1735,11 +1735,11 @@ export default { enabled: 'Enabled', events: 'Events', event: 'Event', - url: 'Url', + url: 'URL', types: 'Types', webhookKey: 'Webhook key', retryCount: 'Retry count', - urlDescription: 'The url to call when the webhook is triggered.', + urlDescription: 'The URL to call when the webhook is triggered.', eventDescription: 'The events for which the webhook should be triggered.', contentTypeDescription: 'Only trigger the webhook for a specific content type.', enabledDescription: 'Is the webhook enabled?', @@ -1747,6 +1747,7 @@ export default { contentType: 'Content Type', headers: 'Headers', selectEventFirst: 'Please select an event first.', + selectEvents: 'Select events', }, languages: { addLanguage: 'Add language', diff --git a/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts b/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts index 21f972c729..e16d4f4bb7 100644 --- a/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts +++ b/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts @@ -1,4 +1,4 @@ -import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-table-boolean-column-layout') @@ -7,7 +7,7 @@ export class UmbWebhookTableBooleanColumnLayoutElement extends UmbLitElement { value = false; override render() { - return this.value ? html`` : nothing; + return html``; } } diff --git a/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts b/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts index 032ca105a4..116bd06841 100644 --- a/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts +++ b/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts @@ -32,7 +32,7 @@ export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement if (this.value?.contentTypeName && this.#repository) { const { data } = await this.#repository.requestItems(this.value.contentTypes); - this._contentTypes = data?.map((item) => item.name).join(', ') ?? ''; + this._contentTypes = data?.map((item) => this.localize.string(item.name)).join(', ') ?? ''; } } diff --git a/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts b/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts index 5ac9a83cf8..4128f4e9d2 100644 --- a/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts +++ b/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts @@ -1,10 +1,9 @@ import type { UmbWebhookDetailModel } from '../../../types.js'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js'; import './column-layouts/name/webhook-table-name-column-layout.element.js'; @@ -21,25 +20,25 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { @state() private _tableColumns: Array = [ { - name: 'Name', + name: this.localize.term('general_name'), alias: 'name', elementName: 'umb-webhook-table-name-column-layout', }, { - name: 'Enabled', + name: this.localize.term('webhooks_enabled'), alias: 'enabled', elementName: 'umb-webhook-table-boolean-column-layout', }, { - name: 'URL', + name: this.localize.term('webhooks_url'), alias: 'url', }, { - name: 'Events', + name: this.localize.term('webhooks_events'), alias: 'events', }, { - name: 'Types', + name: this.localize.term('webhooks_types'), alias: 'types', elementName: 'umb-webhook-table-content-type-column-layout', }, @@ -112,7 +111,6 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { } static override styles = [ - UmbTextStyles, css` :host { display: flex; diff --git a/src/packages/webhook/components/input-webhook-events.element.ts b/src/packages/webhook/components/input-webhook-events.element.ts index 901dc34e41..f17bea9008 100644 --- a/src/packages/webhook/components/input-webhook-events.element.ts +++ b/src/packages/webhook/components/input-webhook-events.element.ts @@ -47,23 +47,29 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { if (!this.events.length) return nothing; return html` - ${repeat( - this.events, - (item) => item.alias, - (item) => html` - ${item.eventName} - this.#removeEvent(item.alias)}> - `, - )} + + ${repeat( + this.events, + (item) => item.alias, + (item) => html` + + + + this.#removeEvent(item.alias)}> + + + `, + )} + `; } override render() { return html`${this.#renderEvents()} `; @@ -72,15 +78,8 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { static override styles = [ UmbTextStyles, css` - :host { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--uui-size-space-2) var(--uui-size-space-2); - align-items: center; - } - - #choose { - grid-column: -1 / 1; + #btn-add { + display: block; } `, ]; diff --git a/src/packages/webhook/components/input-webhook-headers.element.ts b/src/packages/webhook/components/input-webhook-headers.element.ts index 6819cd267a..68bc822494 100644 --- a/src/packages/webhook/components/input-webhook-headers.element.ts +++ b/src/packages/webhook/components/input-webhook-headers.element.ts @@ -14,7 +14,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { private _headers: Array<{ name: string; value: string }> = []; @state() - private _headerNames: string[] = ['Accept', 'Content-Type', 'User-Agent', 'Content-Length']; + private _headerNames: string[] = ['Accept', 'Content-Length', 'Content-Type', 'User-Agent']; get #filterHeaderNames() { return this._headerNames.filter((name) => !this._headers.find((header) => header.name === name)); @@ -78,7 +78,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { .value=${header.value} @input=${(e: InputEvent) => this.#onInput(e, 'value', index)} list="valueList" /> - this.#removeHeader(index)} label="Remove"> + this.#removeHeader(index)} label=${this.localize.term('general_remove')}> `; } @@ -105,8 +105,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { if (!this._headers.length) return nothing; return html` - KEY - VALUE + Name + Value ${repeat( this._headers, diff --git a/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts b/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts index d6b2fb13f5..7df91e91c6 100644 --- a/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts +++ b/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts @@ -1,9 +1,7 @@ import { UmbWebhookEventRepository } from '../../repository/event/webhook-event.repository.js'; import type { UmbWebhookEventModel } from '../../types.js'; import type { UmbWebhookPickerModalData, UmbWebhookPickerModalValue } from './webhook-events-modal.token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; - +import { customElement, html, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; @@ -67,32 +65,36 @@ export class UmbWebhookEventsModalElement extends UmbModalBaseElement< } override render() { - return html` - - ${repeat( - this._events, - (item) => item.alias, - (item) => html` - this.#selectionManager.select(item.alias)} - @deselected=${() => this.#selectionManager.deselect(item.alias)} - ?selected=${this.value.events.includes(item)}> - - - `, - )} - -
- - -
- `; + return html` + + + ${repeat( + this._events, + (item) => item.alias, + (item) => html` + this.#selectionManager.select(item.alias)} + @deselected=${() => this.#selectionManager.deselect(item.alias)} + ?selected=${this.value.events.includes(item)}> + + + `, + )} + +
+ + +
+ + `; } - - static override styles = [UmbTextStyles, css``]; } export default UmbWebhookEventsModalElement; diff --git a/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts b/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts index 071ecf38ef..3149d847cc 100644 --- a/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts +++ b/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts @@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-root-workspace') export class UmbWebhookRootWorkspaceElement extends UmbLitElement { override render() { - return html` - ; - `; + return html` + + ; + + `; } } diff --git a/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts b/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts index c9f9ea0eb6..874d2b3764 100644 --- a/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts +++ b/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts @@ -1,17 +1,16 @@ -import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js'; +import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js'; -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, 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'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import '@umbraco-cms/backoffice/culture'; -import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; - import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type'; +import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; +import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import '@umbraco-cms/backoffice/culture'; import '../../../components/input-webhook-headers.element.js'; import '../../../components/input-webhook-events.element.js'; @@ -43,9 +42,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme }); } - #onEventsChange(event: UmbChangeEvent) { - const events = (event.target as UmbInputWebhookEventsElement).events; - if (events[0].eventType !== this.contentType) { + #onEventsChange(event: UmbChangeEvent & { target: UmbInputWebhookEventsElement }) { + const events = event.target.events ?? []; + if (events.length && events[0].eventType !== this.contentType) { this.#webhookWorkspaceContext?.setTypes([]); } this.#webhookWorkspaceContext?.setEvents(events); @@ -75,7 +74,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme if (this.contentType !== 'Content' && this.contentType !== 'Media') return nothing; return html` - + ${this.#renderContentTypePickerEditor()} `; @@ -84,17 +85,20 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme #renderContentTypePickerEditor() { switch (this.contentType) { case 'Content': - return html``; + return html` + + `; case 'Media': - return html``; + return html` + + `; default: return nothing; } @@ -105,20 +109,28 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme return html` - + - + ${this.#renderContentTypePicker()} - - + + - + `; + return html` + + `; } static override styles = [UmbTextStyles];