From e477c8c675b75bba3feb9d9d3e6f887c93dbf74c Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 30 Jan 2024 13:23:33 +0100 Subject: [PATCH 1/8] Block type create labels --- .../property-editor-ui-block-list.element.ts | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 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 2bcc827d31..3398809967 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 @@ -67,9 +67,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement this.#context.setSettings(buildUpValue.settingsData); } + @state() + private _createButtonLabel = this.localize.term('content_createEmpty'); + @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; + const validationLimit = config.getValueByAlias('validationLimit'); this._limitMin = validationLimit?.min; @@ -78,6 +82,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement const blocks = config.getValueByAlias>('blocks') ?? []; this.#context.setBlockTypes(blocks); + const customCreateButtonLabel = config.getValueByAlias('createLabel'); + if (customCreateButtonLabel) { + this._createButtonLabel = customCreateButtonLabel; + } else if (blocks.length === 1) { + this._createButtonLabel = `${this.localize.term('general_add')} ${blocks[0].label}`; + } + const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); this.#context.setInlineEditingMode(useInlineEditingAsDefault); //config.useSingleBlockMode @@ -97,10 +108,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement private _blocks?: Array; @state() - _layouts: Array = []; + private _layouts: Array = []; @state() - _catalogueRouteBuilder?: UmbModalRouteBuilder; + private _catalogueRouteBuilder?: UmbModalRouteBuilder; + + @state() + private _directRoute?: string; #context = new UmbBlockListManagerContext(this); @@ -151,6 +165,11 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement } render() { + if (this._blocks?.length === 1) { + const elementKey = this._blocks[0].contentElementTypeKey; + this._directRoute = + this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey; + } return html` ${repeat( this._layouts, (x) => x.contentUdi, @@ -164,10 +183,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement - ${this.localize.term('content_createEmpty')} - + label=${this._createButtonLabel} + href=${this._directRoute ?? this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) ?? ''}> Date: Tue, 30 Jan 2024 15:22:41 +0100 Subject: [PATCH 2/8] blockgrid editor setup --- .../property-editor-ui-block-grid.element.ts | 213 ++++++++++++++---- .../block-catalogue-modal.element.ts | 3 +- .../block-catalogue-modal.token.ts | 4 +- 3 files changed, 174 insertions(+), 46 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 3c2afc0908..8b8c318156 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,11 +1,19 @@ import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +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 { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UMB_BLOCK_CATALOGUE_MODAL, + type UmbBlockLayoutBaseModel, + type UmbBlockTypeBaseModel, + type UmbBlockTypeGroup, +} from '@umbraco-cms/backoffice/block'; +import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; /** * @element umb-property-editor-ui-block-grid @@ -15,62 +23,161 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement @property() value = ''; + @state() + private _limitMin?: number; + @state() + private _limitMax?: number; + + @state() + private _blocks?: Array; + + @state() + private _blockGroups?: Array; + + @state() + private _layouts: Array = []; + + @state() + private _catalogueRouteBuilder?: UmbModalRouteBuilder; + + @state() + private _directRoute?: string; + + @state() + private _createButtonLabel = this.localize.term('content_createEmpty'); + @property({ attribute: false }) - public config?: UmbPropertyEditorConfigCollection; + public set config(config: UmbPropertyEditorConfigCollection | undefined) { + if (!config) return; - @state() - private _routes: UmbRoute[] = []; + const validationLimit = config.getValueByAlias('validationLimit'); - @state() - private _routerPath: string | undefined; + this._limitMin = validationLimit?.min; + this._limitMax = validationLimit?.max; - @state() - private _activePath: string | undefined; + this._blocks = config.getValueByAlias>('blocks') ?? []; + this._blockGroups = config.getValueByAlias>('blockGroups') ?? []; - @state() - private _variantId?: UmbVariantId; + const customCreateButtonLabel = config.getValueByAlias('createLabel'); + if (customCreateButtonLabel) { + this._createButtonLabel = customCreateButtonLabel; + } else if (this._blocks.length === 1) { + this._createButtonLabel = `${this.localize.term('general_add')} ${this._blocks[0].label}`; + } + + //const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); + + //this.#context.setInlineEditingMode(useInlineEditingAsDefault); + //config.useSingleBlockMode + //config.useLiveEditing + //config.useInlineEditingAsDefault + this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? ''; + + //this.#context.setEditorConfiguration(config); + } constructor() { super(); - this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { - this.observe(context?.variantId, (propertyVariantId) => { - this._variantId = propertyVariantId; - this.setupRoutes(); - }); + /* + // 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.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) + .addAdditionalPath(':view/:index') + .onSetup((routingInfo) => { + const index = routingInfo.index ? parseInt(routingInfo.index) : -1; + return { + data: { + blocks: this._blocks ?? [], + blockGroups: this._blockGroups ?? [], + openClipboard: routingInfo.view === 'clipboard', + blockOriginData: { index: index }, + }, + }; + }) + .observeRouteBuilder((routeBuilder) => { + this._catalogueRouteBuilder = routeBuilder; + }); } - 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() { + if (this._blocks?.length === 1) { + const elementKey = this._blocks[0].contentElementTypeKey; + this._directRoute = + this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey; } + return html` + + + + + `; } + /* +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`
@@ -101,8 +208,28 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
` : 'loading...'; } + */ - static styles = [UmbTextStyles]; + static styles = [ + UmbTextStyles, + css` + :host { + display: grid; + gap: 1px; + } + > div { + display: flex; + flex-direction: column; + align-items: stretch; + } + + uui-button-group { + padding-top: 1px; + display: grid; + grid-template-columns: 1fr auto; + } + `, + ]; } export default UmbPropertyEditorUIBlockGridElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 9bba4b38ee..a427ab584b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -2,6 +2,7 @@ import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js'; import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, + UmbBlockTypeGroup, UmbBlockTypeWithGroupKey, } from '@umbraco-cms/backoffice/block'; import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; @@ -21,7 +22,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< private _blocks: Array = []; @state() - private _blockGroups: Array<{ key: string; name: string }> = []; + private _blockGroups: Array = []; @state() _openClipboard?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts index 6872272e0e..7a68521e47 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts @@ -1,9 +1,9 @@ -import type { UmbBlockTypeBaseModel, UmbBlockWorkspaceData } from '@umbraco-cms/backoffice/block'; +import type { UmbBlockTypeBaseModel, UmbBlockTypeGroup, UmbBlockWorkspaceData } from '@umbraco-cms/backoffice/block'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockCatalogueModalData { blocks: Array; - blockGroups?: Array<{ name: string; key: string }>; + blockGroups?: Array; openClipboard?: boolean; blockOriginData: UmbBlockWorkspaceData['originData']; } From 5c311b1a512c0303aa63a599905506f2789fb704 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 31 Jan 2024 12:21:42 +0100 Subject: [PATCH 3/8] catalogue show block info --- .../block-catalogue-modal.element.ts | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index a427ab584b..e12ac2b161 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -1,4 +1,8 @@ import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js'; +import { + DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, + type UmbDocumentTypeItemModel, +} from '@umbraco-cms/backoffice/document-type'; import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, @@ -12,12 +16,19 @@ import { UmbModalBaseElement, UmbModalRouteRegistrationController, } from '@umbraco-cms/backoffice/modal'; +import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository'; @customElement('umb-block-catalogue-modal') export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue > { + #itemManager = new UmbRepositoryItemsManager( + this, + DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, + (x) => x.unique, + ); + @state() private _blocks: Array = []; @@ -49,6 +60,19 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< this._workspacePath = routeBuilder({}); }); }); + + this.observe(this.#itemManager.items, (items) => { + this._blocks = items.map((item) => { + const blockGroup = this._blocks.find((block) => block.contentElementTypeKey === item.unique)?.groupKey; + const block: UmbBlockTypeWithGroupKey = { + contentElementTypeKey: item.unique, + label: item.name, + icon: item.icon ?? undefined, + groupKey: blockGroup, + }; + return block; + }); + }); } connectedCallback() { @@ -58,14 +82,9 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< this._openClipboard = this.data.openClipboard ?? false; this._blocks = this.data.blocks ?? []; this._blockGroups = this.data.blockGroups ?? []; - } - /* - #onClickBlock(contentElementTypeKey: string) { - this.modalContext?.updateValue({ key: contentElementTypeKey }); - this.modalContext?.submit(); + this.#itemManager.setUniques(this._blocks.map((x) => x.contentElementTypeKey)); } - */ render() { return html` 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 4/8] 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; From 55c2e5a2bbaa00344d6b1d642c88974ca7fbd154 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 5 Feb 2024 13:34:16 +0100 Subject: [PATCH 5/8] localizations --- .../property-editor-ui-block-grid.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 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 7c9b52e093..f4d2b2e5ac 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 @@ -44,7 +44,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement private _directRoute?: string; @state() - private _createButtonLabel = this.localize.term('content_createEmpty'); + private _createButtonLabel = this.localize.term('blockEditor_addBlock'); @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { @@ -62,7 +62,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement if (customCreateButtonLabel) { this._createButtonLabel = customCreateButtonLabel; } else if (this._blocks.length === 1) { - this._createButtonLabel = `${this.localize.term('general_add')} ${this._blocks[0].label}`; + this._createButtonLabel = this.localize.term('blockEditor_addThis', [this._blocks[0].label]); } //const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); From 0c4599f87854be807bf39cc70abe81826aac5f18 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 5 Feb 2024 14:31:56 +0100 Subject: [PATCH 6/8] size --- .../block-grid-editor/property-editor-ui-block-grid.element.ts | 2 +- .../modals/block-catalogue/block-catalogue-modal.element.ts | 2 +- 2 files changed, 2 insertions(+), 2 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 f4d2b2e5ac..fccea2bcf0 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,6 +1,6 @@ import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { ManifestPropertyEditorUi, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { 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 { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index e12ac2b161..8cc4b3f4d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -117,7 +117,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< return html` ${mappedGroupsAndBlocks.map( (group) => html` - ${group.name ? html`

${group.name}

` : nothing} + ${group.name ? html`

${group.name}

` : nothing}
${repeat( group.blocks, From 76825064f61cfe47111067ebe32cecd766c26038 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 5 Feb 2024 15:13:21 +0100 Subject: [PATCH 7/8] render and grouping --- .../block-catalogue-modal.element.ts | 64 ++++++++----------- 1 file changed, 25 insertions(+), 39 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 8cc4b3f4d6..6c65ce57e5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -1,8 +1,5 @@ import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js'; -import { - DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, - type UmbDocumentTypeItemModel, -} from '@umbraco-cms/backoffice/document-type'; +import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type'; import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, @@ -10,7 +7,6 @@ import type { UmbBlockTypeWithGroupKey, } from '@umbraco-cms/backoffice/block'; import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; -import { groupBy } from '@umbraco-cms/backoffice/external/lodash'; import { UMB_MODAL_CONTEXT, UmbModalBaseElement, @@ -23,17 +19,14 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue > { - #itemManager = new UmbRepositoryItemsManager( + #itemManager = new UmbRepositoryItemsManager( this, DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, - (x) => x.unique, + (x) => x.contentElementTypeKey, ); @state() - private _blocks: Array = []; - - @state() - private _blockGroups: Array = []; + private _groupedBlocks: Array<{ name?: string; blocks: Array }> = []; @state() _openClipboard?: boolean; @@ -60,19 +53,6 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< this._workspacePath = routeBuilder({}); }); }); - - this.observe(this.#itemManager.items, (items) => { - this._blocks = items.map((item) => { - const blockGroup = this._blocks.find((block) => block.contentElementTypeKey === item.unique)?.groupKey; - const block: UmbBlockTypeWithGroupKey = { - contentElementTypeKey: item.unique, - label: item.name, - icon: item.icon ?? undefined, - groupKey: blockGroup, - }; - return block; - }); - }); } connectedCallback() { @@ -80,10 +60,17 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< if (!this.data) return; this._openClipboard = this.data.openClipboard ?? false; - this._blocks = this.data.blocks ?? []; - this._blockGroups = this.data.blockGroups ?? []; - this.#itemManager.setUniques(this._blocks.map((x) => x.contentElementTypeKey)); + const blocks: Array = this.data.blocks ?? []; + const blockGroups: Array = this.data.blockGroups ?? []; + + const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey)); + const grouped = blockGroups.map((group) => ({ + name: group.name ?? '', + blocks: blocks.filter((block) => block.groupKey === group.key), + })); + + this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped]; } render() { @@ -107,15 +94,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< } #renderCreateEmpty() { - const blockArrays = groupBy(this._blocks, 'groupKey'); - - const mappedGroupsAndBlocks = Object.entries(blockArrays).map(([key, value]) => { - const group = this._blockGroups.find((group) => group.key === key); - return { name: group?.name, blocks: value }; - }); - return html` - ${mappedGroupsAndBlocks.map( + ${this._groupedBlocks.map( (group) => html` ${group.name ? html`

${group.name}

` : nothing}
@@ -141,12 +121,18 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< #renderViews() { return html` - (this._openClipboard = false)}> - Create Empty + (this._openClipboard = false)}> + Create Empty - (this._openClipboard = true)}> - Clipboard + (this._openClipboard = true)}> + Clipboard From 2d97e1ab6bcbc573100a8be5f8409adbf4dff0f8 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 5 Feb 2024 15:15:28 +0100 Subject: [PATCH 8/8] remove leftovers --- .../block-catalogue/block-catalogue-modal.element.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 6c65ce57e5..1beec67023 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -1,5 +1,4 @@ import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js'; -import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type'; import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, @@ -12,19 +11,12 @@ import { UmbModalBaseElement, UmbModalRouteRegistrationController, } from '@umbraco-cms/backoffice/modal'; -import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository'; @customElement('umb-block-catalogue-modal') export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue > { - #itemManager = new UmbRepositoryItemsManager( - this, - DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, - (x) => x.contentElementTypeKey, - ); - @state() private _groupedBlocks: Array<{ name?: string; blocks: Array }> = [];