This commit is contained in:
JesmoDev
2024-05-01 22:07:49 +02:00
parent a35f21c048
commit 48b17a6631

View File

@@ -1,10 +1,11 @@
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 { css, html, customElement, 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';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@customElement('umb-input-webhook-events')
export class UmbInputWebhookEventsElement extends UmbLitElement {
@@ -26,13 +27,35 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
if (!modal) return;
await modal.onSubmit();
this.events = modal.getValue() as Array<string>;
console.log('Search modal closed', modal.getValue());
modal.destroy();
this.dispatchEvent(new UmbChangeEvent());
}
#removeEvent(index: number) {
this.events = this.events.filter((_, i) => i !== index);
this.dispatchEvent(new UmbChangeEvent());
}
#renderEvents() {
if (!this.events.length) return nothing;
return html`
${repeat(
this.events,
(item) => item,
(item, index) => html`
<span>${item}</span>
<uui-button @click=${() => this.#removeEvent(index)} label="remove"></uui-button>
`,
)}
`;
}
render() {
return html`<uui-button id="add" look="placeholder" label="Add" @click=${this.#openModal}></uui-button>`;
return html`${this.#renderEvents()}
<uui-button id="add" look="placeholder" label="Add" @click=${this.#openModal}></uui-button>`;
}
static styles = [
@@ -40,8 +63,9 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
css`
:host {
display: grid;
grid-template-columns: 1fr 1fr auto;
grid-template-columns: 1fr auto;
gap: var(--uui-size-space-2) var(--uui-size-space-2);
align-items: center;
}
#add {