From 04fd3cb15af5caf5b2bb0bd5abb07179a2e696c1 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Fri, 3 May 2024 13:32:08 +0200 Subject: [PATCH] fix types and selection --- .../input-webhook-events.element.ts | 8 +++- .../webhook-events-modal.element.ts | 45 +++++++++++-------- .../webhook-events-modal.token.ts | 13 +++++- 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts index cd1033bc04..c6ea85fb99 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts @@ -24,11 +24,15 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { } async #openModal() { - const modal = this._modalContext?.open(this, UMB_WEBHOOK_EVENTS_MODAL, { modal: { type: 'sidebar' } }); + const modal = this._modalContext?.open(this, UMB_WEBHOOK_EVENTS_MODAL, { + modal: { type: 'sidebar' }, + data: { events: this.events }, + }); if (!modal) return; await modal.onSubmit(); - this.events = modal.getValue() as Array; + + this.events = modal.getValue().events; modal.destroy(); this.dispatchEvent(new UmbChangeEvent()); diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts index c2125ca546..5da83ae7ca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts @@ -1,20 +1,19 @@ 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 type { PropertyValueMap } 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 { UmbModalBaseElement, type UmbModalContext } from '@umbraco-cms/backoffice/modal'; 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 = []; - +export class UmbWebhookEventsModalElement extends UmbModalBaseElement< + UmbWebhookPickerModalData, + UmbWebhookPickerModalValue +> { @state() _events: Array = []; @@ -22,27 +21,35 @@ export class UmbWebhookEventsModalElement extends UmbLitElement { #selectionManager = new UmbSelectionManager(this); - constructor() { - super(); - - this.#requestEvents(); - } + #eventsRequest?: Promise; connectedCallback(): void { super.connectedCallback(); + this.#selectionManager.setSelectable(true); this.#selectionManager.setMultiple(true); - this.#selectionManager.setSelection(this.events.map((item) => item.alias)); + this.#selectionManager.setSelection(this.data?.events.map((item) => item.alias) ?? []); + + this.#requestEvents(); + this.#observeSelection(); + } + + async #observeSelection() { + await this.#eventsRequest; + + console.log('this.#selectionManager.selection', this.#selectionManager.selection); this.observe(this.#selectionManager.selection, (selection) => { - const selectedEvents = this._events.filter((item) => selection.includes(item.alias)); - this.modalContext?.setValue(selectedEvents); - this.requestUpdate(); + this.value = { events: this._events.filter((item) => selection.includes(item.alias)) }; + // const selectedEvents = this._events.filter((item) => selection.includes(item.alias)); + // this.modalContext?.setValue(selectedEvents); + // this.requestUpdate(); }); } async #requestEvents() { - const { data } = await this.#repository.requestEvents(); + this.#eventsRequest = this.#repository.requestEvents(); + const { data } = await this.#eventsRequest; if (!data) return; @@ -79,7 +86,7 @@ export class UmbWebhookEventsModalElement extends UmbLitElement { selectable @selected=${() => this.#selectionManager.select(item.alias)} @deselected=${() => this.#selectionManager.deselect(item.alias)} - ?selected=${this.events.includes(item)}> + ?selected=${this.value.events.includes(item)}> `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.token.ts index 5a7a5227a8..a433351d06 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.token.ts @@ -1,3 +1,14 @@ +import type { UmbWebhookEventModel } from '../../types.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export const UMB_WEBHOOK_EVENTS_MODAL = new UmbModalToken('Umb.Modal.Webhook.Events'); +export interface UmbWebhookPickerModalData { + events: Array; +} + +export interface UmbWebhookPickerModalValue { + events: Array; +} + +export const UMB_WEBHOOK_EVENTS_MODAL = new UmbModalToken( + 'Umb.Modal.Webhook.Events', +);