From 26f594332ef61a68e38b5af6277d4d0d5c802a76 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:21:48 +0200 Subject: [PATCH 01/15] Update manifests.ts --- .../block-list/property-editors/block-list-editor/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts index c3d07105cc..e734bfaad1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts @@ -14,6 +14,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS, icon: 'icon-thumbnail-list', group: 'lists', + supportsReadOnly: true, settings: { properties: [ { From 0ffbf5b36a3c71b5bb885e6f48678dccbd938abf Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:21:56 +0200 Subject: [PATCH 02/15] add readonly prop --- .../property-editor-ui-block-list.element.ts | 9 +++++++++ 1 file changed, 9 insertions(+) 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 9e263cf849..00cd9340d9 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 @@ -113,6 +113,15 @@ export class UmbPropertyEditorUIBlockListElement } } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() private _limitMin?: number; @state() From 66a9f5353b03b653fc5a5f61b09db08804949969 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:49:34 +0200 Subject: [PATCH 03/15] disable sorting when readonly --- .../property-editor-ui-block-list.element.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) 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 00cd9340d9..62ad4e56ac 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 @@ -120,7 +120,19 @@ export class UmbPropertyEditorUIBlockListElement * @default false */ @property({ type: Boolean, reflect: true }) - readonly = false; + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + + if (this.#readonly) { + this.#sorter.disable(); + } else { + this.#sorter.enable(); + } + } + #readonly = false; @state() private _limitMin?: number; From 5699936722d1674a9ae7b2262cef90cd82fc6fc5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:53:00 +0200 Subject: [PATCH 04/15] remove inline create button when readonly --- .../property-editor-ui-block-list.element.ts | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) 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 62ad4e56ac..7fa69fc27f 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 @@ -4,7 +4,7 @@ import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../type import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js'; import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js'; import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element'; -import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyEditorUiElement, UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry'; import { @@ -244,15 +244,14 @@ export class UmbPropertyEditorUIBlockListElement return html` ${repeat( this._layouts, (x) => x.contentUdi, - (layoutEntry, index) => - html` - - `, + (layoutEntry, index) => html` + ${this.#renderInlineCreateButton(index)} + + + `, )} @@ -265,6 +264,13 @@ export class UmbPropertyEditorUIBlockListElement `; } + #renderInlineCreateButton(index: number) { + if (this.readonly) return nothing; + return html``; + } + static override styles = [ UmbTextStyles, From 3d3e76dd8110c2c800ce6e638af9a0360abce569 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:55:20 +0200 Subject: [PATCH 05/15] remove create button when readonly --- .../property-editor-ui-block-list.element.ts | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) 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 7fa69fc27f..1c8f611360 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 @@ -233,14 +233,6 @@ export class UmbPropertyEditorUIBlockListElement } override render() { - let createPath: string | undefined; - if (this._blocks?.length === 1) { - const elementKey = this._blocks[0].contentElementTypeKey; - createPath = - this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey; - } else { - createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 }); - } return html` ${repeat( this._layouts, (x) => x.contentUdi, @@ -254,7 +246,7 @@ export class UmbPropertyEditorUIBlockListElement `, )} - + ${this.#renderCreateButton()} `; } + #renderCreateButton() { + if (this.readonly) return nothing; + + let createPath: string | undefined; + if (this._blocks?.length === 1) { + const elementKey = this._blocks[0].contentElementTypeKey; + createPath = + this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey; + } else { + createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 }); + } + + return html` + + `; + } + static override styles = [ UmbTextStyles, From 523a3b49779e6284cfe3281e14c5361c9693967c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 09:56:26 +0200 Subject: [PATCH 06/15] remove paste button when readonly --- .../property-editor-ui-block-list.element.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) 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 1c8f611360..b4cc38059d 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 @@ -245,15 +245,7 @@ export class UmbPropertyEditorUIBlockListElement `, )} - - ${this.#renderCreateButton()} - - - - `; + ${this.#renderCreateButton()} ${this.#renderPasteButton()} `; } #renderInlineCreateButton(index: number) { @@ -280,6 +272,18 @@ export class UmbPropertyEditorUIBlockListElement `; } + #renderPasteButton() { + if (this.readonly) return nothing; + return html` + + + + `; + } + static override styles = [ UmbTextStyles, From c031d293c625490f57e8076267bbe221d4a616f5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 10:16:56 +0200 Subject: [PATCH 07/15] split block-list-entry actions into multiple renders --- .../block-list-entry.element.ts | 66 +++++++++++-------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts index 6433e33864..d0641cf0e3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts @@ -251,33 +251,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper >${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()} - ${this._showContentEdit && this._workspaceEditContentPath - ? html` - - ${this._contentInvalid - ? html`!` - : nothing} - ` - : nothing} - ${this._hasSettings && this._workspaceEditSettingsPath - ? html` - - ${this._settingsInvalid - ? html`!` - : nothing} - ` - : nothing} - this.#context.requestDelete()}> - - + ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()} ${!this._showContentEdit && this._contentInvalid ? html`!` @@ -285,6 +259,44 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper `; } + #renderEditContentAction() { + return html` ${this._showContentEdit && this._workspaceEditContentPath + ? html` + + ${this._contentInvalid + ? html`!` + : nothing} + ` + : nothing}`; + } + + #renderEditSettingsAction() { + return html` + ${this._hasSettings && this._workspaceEditSettingsPath + ? html` + + ${this._settingsInvalid + ? html`!` + : nothing} + ` + : nothing} + `; + } + + #renderDeleteAction() { + return html` this.#context.requestDelete()}> + + `; + } + override render() { return this.#renderBlock(); } From f48e18c46d82a672fedfd468fcf02a0f94f5115b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 10:20:20 +0200 Subject: [PATCH 08/15] accept readonly prop --- .../block-list-entry/block-list-entry.element.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts index d0641cf0e3..3da65903c0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts @@ -48,6 +48,15 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper } private _contentUdi?: string | undefined; + /** + * Sets the element to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + public readonly = false; + #context = new UmbBlockListEntryContext(this); @state() From e19ed12c0c6a2c5204eeaaef832d203ece8cd5e9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 10:20:33 +0200 Subject: [PATCH 09/15] remove delete action when readonly --- .../components/block-list-entry/block-list-entry.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts index 3da65903c0..b7ee9dd6dc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts @@ -301,6 +301,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper } #renderDeleteAction() { + if (this.readonly) return nothing; return html` this.#context.requestDelete()}> `; From 4dc38334755e1f66a2bebf36f958138bd93dddb8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 10:21:13 +0200 Subject: [PATCH 10/15] pass readonly to block-list-entry --- .../block-list-editor/property-editor-ui-block-list.element.ts | 1 + 1 file changed, 1 insertion(+) 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 b4cc38059d..d8244b94db 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 @@ -241,6 +241,7 @@ export class UmbPropertyEditorUIBlockListElement `, From b283a0a4e8d4e88ffafe45353386b1c1b69f5652 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 13:36:44 +0200 Subject: [PATCH 11/15] add read only state manager --- .../block/block/workspace/block-workspace.context.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index c94569ca8a..d60cd50116 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -10,7 +10,7 @@ import { UmbClassState, UmbObjectState, UmbStringState } from '@umbraco-cms/back import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; -import { decodeFilePath } from '@umbraco-cms/backoffice/utils'; +import { decodeFilePath, UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils'; import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT, @@ -59,6 +59,9 @@ export class UmbBlockWorkspaceContext(undefined); readonly variantId = this.#variantId.asObservable(); + #readOnlyState = new UmbReadOnlyVariantStateManager(this); + public readonly readOnlyState = this.#readOnlyState; + constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { super(host, workspaceArgs.manifest.alias); const manifest = workspaceArgs.manifest; From 4c479209162f27f44a289719116830fed383beb8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 13:37:19 +0200 Subject: [PATCH 12/15] set all block content to read only if the outer property is read only --- .../workspace/block-workspace.context.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index d60cd50116..570207b26e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -94,6 +94,25 @@ export class UmbBlockWorkspaceContext { this.#variantId.setValue(variantId); }); + + // If the current property is readonly all inner block content should also be readonly. + this.observe(context.isReadOnly, (isReadOnly) => { + const unique = 'UMB_PROPERTY'; + const variantId = this.#variantId.getValue(); + if (variantId === undefined) return; + + if (isReadOnly) { + const state = { + unique, + variantId, + message: '', + }; + + this.#readOnlyState?.addState(state); + } else { + this.#readOnlyState?.removeState(unique); + } + }); }); this.observe(this.variantId, (variantId) => { From 94b7af1f70fe29fe3b561415506cf47a4d49fd10 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 13:37:46 +0200 Subject: [PATCH 13/15] update state based on manager --- .../block-element-property-dataset.context.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts index c7451f7806..4db36b5497 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts @@ -1,5 +1,6 @@ import { UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT } from './block-element-property-dataset.context-token.js'; import type { UmbBlockElementManager } from './block-element-manager.js'; +import { UMB_BLOCK_WORKSPACE_CONTEXT } from './block-workspace.context-token.js'; import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; @@ -36,6 +37,16 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase imp super(host, UMB_PROPERTY_DATASET_CONTEXT.toString()); this.#elementManager = elementManager; + this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspace) => { + this.observe( + workspace.readOnlyState.isOn, + (value) => { + this.#currentVariantCultureIsReadOnly.setValue(value); + }, + 'umbObserveReadOnlyStates', + ); + }); + this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this); } From 24e532b98e4b2ba73f9708b8bf22dfc37eafdd14 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 30 Aug 2024 14:08:57 +0200 Subject: [PATCH 14/15] more explicit unique --- .../packages/block/block/workspace/block-workspace.context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index 29fa469df3..dddd143138 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -98,7 +98,7 @@ export class UmbBlockWorkspaceContext { - const unique = 'UMB_PROPERTY'; + const unique = 'UMB_PROPERTY_CONTEXT'; const variantId = this.#variantId.getValue(); if (variantId === undefined) return; From a565489e406219b3fa36bf198b4a7212dd973245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 30 Aug 2024 21:27:03 +0200 Subject: [PATCH 15/15] one prop for read only state --- .../block/block/workspace/block-workspace.context.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index dddd143138..19e304d8db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -60,8 +60,7 @@ export class UmbBlockWorkspaceContext(undefined); readonly variantId = this.#variantId.asObservable(); - #readOnlyState = new UmbReadOnlyVariantStateManager(this); - public readonly readOnlyState = this.#readOnlyState; + public readonly readOnlyState = new UmbReadOnlyVariantStateManager(this); constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { super(host, workspaceArgs.manifest.alias); @@ -109,9 +108,9 @@ export class UmbBlockWorkspaceContext