yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debounce dispatch event + correct event

Browse Source
This commit is contained in:
Niels Lyngsø
2024-04-11 11:26:05 +02:00
parent c9c59f60b9
commit 5295e8d6d1
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
View File

@@ -8,12 +8,14 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -127,6 +129,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
);
});
*/
this.observe(this.#entriesContext.layoutEntries, (layouts) => {
this._layouts = layouts;
// Update sorter.
this.#sorter.setModel(layouts);
// Update manager:
this.#managerContext.setLayouts(layouts);
});
// TODO: Prevent initial notification from these observes:
this.observe(this.#managerContext.layouts, (layouts) => {
@@ -135,26 +144,19 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
//console.log('layout changed', this._value);
// TODO: idea: consider inserting an await here, so other changes could appear first? Maybe some mechanism to only fire change event onces?
//this.#entriesContext.setLayoutEntries(layouts);
this.dispatchEvent(new UmbChangeEvent());
});
this.observe(this.#entriesContext.layoutEntries, (layouts) => {
this._layouts = layouts;
// Update sorter.
this.#sorter.setModel(layouts);
// Update manager:
this.#managerContext.setLayouts(layouts);
this.#fireChangeEvent();
});
this.observe(this.#managerContext.contents, (contents) => {
this._value = { ...this._value, contentData: contents };
// Notify that the value has changed.
//console.log('content changed', this._value);
this.dispatchEvent(new UmbChangeEvent());
this.#fireChangeEvent();
});
this.observe(this.#managerContext.settings, (settings) => {
this._value = { ...this._value, settingsData: settings };
// Notify that the value has changed.
//console.log('settings changed', this._value);
this.dispatchEvent(new UmbChangeEvent());
this.#fireChangeEvent();
});
this.observe(this.#managerContext.blockTypes, (blockTypes) => {
this._blocks = blockTypes;
@@ -184,6 +186,15 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
*/
}
#debounceChangeEvent?: boolean;
#fireChangeEvent = async () => {
if (this.#debounceChangeEvent) return;
this.#debounceChangeEvent = true;
await Promise.resolve();
this.dispatchEvent(new UmbPropertyValueChangeEvent());
this.#debounceChangeEvent = false;
};
render() {
let createPath: string | undefined;
if (this._blocks?.length === 1) {