From 4ec22ed11807dfd5ef47226604fa4225a6336871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 5 Feb 2024 13:26:50 +0100 Subject: [PATCH] make modal registration unique towards with property alias --- .../property-editor-ui-block-grid.element.ts | 109 +++--------------- .../property-editor-ui-block-list.element.ts | 16 ++- 2 files changed, 29 insertions(+), 96 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts index 8b8c318156..7c9b52e093 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts @@ -1,9 +1,6 @@ -import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; -import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { ManifestPropertyEditorUi, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { @@ -14,12 +11,15 @@ import { } from '@umbraco-cms/backoffice/block'; import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; /** * @element umb-property-editor-ui-block-grid */ @customElement('umb-property-editor-ui-block-grid') export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorUiElement { + #catalogueModal: UmbModalRouteRegistrationController; + @property() value = ''; @@ -79,35 +79,18 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement constructor() { super(); - /* - // TODO: Prevent initial notification from these observes: - this.observe(this.#context.layouts, (layouts) => { - this._value = { ...this._value, layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]: layouts } }; - // Notify that the value has changed. - //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._layouts = layouts; - this.#sorter.setModel(layouts); - this.dispatchEvent(new UmbChangeEvent()); + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#catalogueModal.setUniquePathValue('propertyAlias', alias); + }, + 'observePropertyAlias', + ); }); - this.observe(this.#context.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.observe(this.#context.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.observe(this.#context.blockTypes, (blockTypes) => { - this._blocks = blockTypes; - }); - */ - new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL) + this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL) + .addUniquePaths(['propertyAlias']) .addAdditionalPath(':view/:index') .onSetup((routingInfo) => { const index = routingInfo.index ? parseInt(routingInfo.index) : -1; @@ -146,70 +129,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement `; } - /* -setupRoutes() { - this._routes = []; - if (this._variantId !== undefined) { - this._routes = [ - { - path: 'modal-1', - component: () => { - return import('./property-editor-ui-block-grid-inner-test.element.js'); - }, - setup: (component) => { - if (component instanceof HTMLElement) { - (component as any).name = 'block-grid-1'; - } - }, - }, - { - path: 'modal-2', - component: () => { - return import('./property-editor-ui-block-grid-inner-test.element.js'); - }, - setup: (component) => { - if (component instanceof HTMLElement) { - (component as any).name = 'block-grid-2'; - } - }, - }, - ]; - } -} -*/ - /* - render() { - return this._variantId - ? html`
- umb-property-editor-ui-block-grid, inner routing test: - - - - - - - { - this._routerPath = event.target.absoluteRouterPath; - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - this._activePath = event.target.localActiveViewPath; - }}> - -
` - : 'loading...'; - } - */ - static styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 669f8f75e2..f8671c248d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -15,6 +15,7 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/mod import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {} @@ -45,6 +46,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }, }); + #catalogueModal: UmbModalRouteRegistrationController; + private _value: UmbBlockListValueModel = { layout: {}, contentData: [], @@ -121,6 +124,16 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement constructor() { super(); + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#catalogueModal.setUniquePathValue('propertyAlias', alias); + }, + 'observePropertyAlias', + ); + }); + // TODO: Prevent initial notification from these observes: this.observe(this.#context.layouts, (layouts) => { this._value = { ...this._value, layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]: layouts } }; @@ -147,7 +160,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement this._blocks = blockTypes; }); - new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL) + this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL) + .addUniquePaths(['propertyAlias']) .addAdditionalPath(':view/:index') .onSetup((routingInfo) => { const index = routingInfo.index ? parseInt(routingInfo.index) : -1;