From c33d1a7de60ac15a8b96d4542ff0195d38851835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Feb 2024 13:03:34 +0100 Subject: [PATCH] adjustments --- .../context/block-grid-entries.context.ts | 11 ++++---- ...ty-editor-ui-block-grid-entries.element.ts | 18 ++++++++++--- .../property-editor-ui-block-grid.element.ts | 4 +-- .../property-editor-ui-block-list.element.ts | 26 +++++++++---------- .../block/context/block-entries.context.ts | 1 + .../block/context/block-entry.context.ts | 2 ++ .../block/context/block-manager.context.ts | 10 ++++++- 7 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts index b5ff33280d..fa1755c4b7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts @@ -1,4 +1,4 @@ -import type { UmbBlockDataType} from '../../block/index.js'; +import type { UmbBlockDataType } from '../../block/index.js'; import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js'; import type { UmbBlockGridWorkspaceData } from '../index.js'; import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js'; @@ -16,15 +16,15 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< #catalogueModal: UmbModalRouteRegistrationController; #catalogueRouteBuilder?: UmbModalRouteBuilder; - setParentKey(contentUdi: string) { - this.#catalogueModal.setUniquePathValue('parentUnique', contentUdi); + setParentKey(contentUdi: string | null) { + this.#catalogueModal.setUniquePathValue('parentUnique', contentUdi ?? 'null'); } getParentKey() { return ''; } - setAreaKey(areaKey: string) { - this.#catalogueModal.setUniquePathValue('areaKey', areaKey); + setAreaKey(areaKey: string | null) { + this.#catalogueModal.setUniquePathValue('areaKey', areaKey ?? 'null'); } getAreaKey() { return ''; @@ -92,6 +92,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< modalData: UmbBlockGridWorkspaceData, ) { await this._retrieveManager; + // TODO: Insert layout entry at the right spot. return this._manager?.insert(layoutEntry, content, settings, modalData) ?? false; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts index 557bad244c..30de83e1de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts @@ -23,18 +23,18 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement { } @property({ attribute: false }) - public set parentUnique(value: string) { + public set parentUnique(value: string | null) { this.#context.setParentKey(value); } - public get parentUnique(): string { + public get parentUnique(): string | null { return this.#context.getParentKey(); } @property({ attribute: false }) - public set areaKey(value: string) { + public set areaKey(value: string | null) { this.#context.setAreaKey(value); } - public get areaKey(): string { + public get areaKey(): string | null { return this.#context.getAreaKey(); } @@ -51,6 +51,16 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement { }); } + /** + * TODO: + BLOCK - element with entry(AreaS) context areas observable + > AREA 1 - element med entries(Area) context area/entries observable + > BLOCK A + > BLOCK B + > AREA 2 + > BLOCK C + > BLOCK D + */ render() { // TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. return html` ${repeat( 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 6de6098195..772ccf96d2 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 @@ -102,8 +102,8 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement render() { return html``; + .parentUnique=${null} + .areaKey=${null}>`; } static styles = [ 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 046fe7babf..bc72d06be8 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 @@ -26,7 +26,7 @@ const SORTER_CONFIG: UmbSorterConfig { return modelEntry.contentUdi; }, - identifier: 'block-list-editor', + //identifier: 'block-list-editor', itemSelector: 'umb-property-editor-ui-block-list-block', //containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT', }; @@ -63,9 +63,9 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement buildUpValue.settingsData ??= []; this._value = buildUpValue as UmbBlockListValueModel; - this.#context.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS] ?? []); - this.#context.setContents(buildUpValue.contentData); - this.#context.setSettings(buildUpValue.settingsData); + this.#managerContext.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS] ?? []); + this.#managerContext.setContents(buildUpValue.contentData); + this.#managerContext.setSettings(buildUpValue.settingsData); } @state() @@ -81,7 +81,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement this._limitMax = validationLimit?.max; const blocks = config.getValueByAlias>('blocks') ?? []; - this.#context.setBlockTypes(blocks); + this.#managerContext.setBlockTypes(blocks); const customCreateButtonLabel = config.getValueByAlias('createLabel'); if (customCreateButtonLabel) { @@ -91,12 +91,12 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement } const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); - this.#context.setInlineEditingMode(useInlineEditingAsDefault); + this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault); // TODO: //config.useSingleBlockMode, not done jey this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? ''; - this.#context.setEditorConfiguration(config); + this.#managerContext.setEditorConfiguration(config); } @state() @@ -113,7 +113,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement @state() private _catalogueRouteBuilder?: UmbModalRouteBuilder; - #context = new UmbBlockListManagerContext(this); + #managerContext = new UmbBlockListManagerContext(this); #entriesContext = new UmbBlockListEntriesContext(this); constructor() { @@ -130,7 +130,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }); // TODO: Prevent initial notification from these observes: - this.observe(this.#context.layouts, (layouts) => { + this.observe(this.#managerContext.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); @@ -143,21 +143,21 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement // Update sorter. this.#sorter.setModel(layouts); // Update manager: - this.#context.setLayouts(layouts); + this.#managerContext.setLayouts(layouts); }); - this.observe(this.#context.contents, (contents) => { + 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.observe(this.#context.settings, (settings) => { + 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.observe(this.#context.blockTypes, (blockTypes) => { + this.observe(this.#managerContext.blockTypes, (blockTypes) => { this._blocks = blockTypes; }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts index fe74d2f663..844b0128ad 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts @@ -22,6 +22,7 @@ export abstract class UmbBlockEntriesContext< protected _layoutEntries = new UmbArrayState([], (x) => x.contentUdi); readonly layoutEntries = this._layoutEntries.asObservable(); + readonly layoutEntriesLength = this._layoutEntries.asObservablePart((x) => x.length); setLayoutEntries(layoutEntries: Array) { this._layoutEntries.setValue(layoutEntries); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index 36ceae8c8c..d755f50778 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -56,6 +56,8 @@ export abstract class UmbBlockEntryContext< public readonly content = this.#content.asObservable(); public readonly contentTypeKey = this.#content.asObservablePart((x) => x?.contentTypeKey); + // TODO: Make sure changes to the Block Content / Settings are reflected back to Manager. + #settings = new UmbObjectState(undefined); public readonly settings = this.#settings.asObservable(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts index 113a4a9e09..3e88e0e83a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts @@ -92,10 +92,18 @@ export abstract class UmbBlockManagerContext< }, 'observePropertyAlias', ); + this.observe( + propertyContext?.variantId, + (variantId) => { + // TODO: This might not be the property variant ID, but the content variant ID. Check up on what makes most sense. + this.#workspaceModal.setUniquePathValue('variantId', variantId?.toString()); + }, + 'observePropertyVariantId', + ); }); this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL) - .addUniquePaths(['propertyAlias']) + .addUniquePaths(['propertyAlias', 'variantId']) .addAdditionalPath('block') .onSetup(() => { return { data: { entityType: 'block', preset: {} }, modal: { size: 'medium' } };