From 7a667efe1b6e39208a27dd756838fcab4c947438 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 18 Jan 2024 09:40:47 +0100 Subject: [PATCH 01/30] block input groups --- .../manifests.ts | 13 +++ ...-block-grid-group-configuration.element.ts | 61 ++++++++++ ...-block-grid-group-configuration.stories.ts | 15 +++ ...i-block-grid-type-configuration.element.ts | 54 +++++++-- .../block-grid/property-editors/manifests.ts | 9 +- .../src/packages/block/block-grid/types.ts | 5 + .../input-block-type.element.ts | 109 ++++++++++++++++-- 7 files changed, 250 insertions(+), 16 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.ts new file mode 100644 index 0000000000..7bb496f59d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.ts @@ -0,0 +1,13 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestPropertyEditorUi = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration', + name: 'Block Grid Group Configuration Property Editor UI', + js: () => import('./property-editor-ui-block-grid-group-configuration.element.js'), + meta: { + label: '', + icon: 'icon-box-alt', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts new file mode 100644 index 0000000000..b26157b711 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -0,0 +1,61 @@ +import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit'; +import { 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 { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbId } from '@umbraco-cms/backoffice/id'; +import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; + +@customElement('umb-property-editor-ui-block-grid-group-configuration') +export class UmbPropertyEditorUIBlockGridGroupConfigurationElement + extends UmbLitElement + implements UmbPropertyEditorUiElement +{ + private _value: Array = []; + + @property({ type: Array }) + public get value(): Array { + return this._value; + } + public set value(value: Array) { + this._value = value || []; + } + + @property({ attribute: false }) + public set config(config: UmbPropertyEditorConfigCollection | undefined) {} + + #addGroup() { + if (Array.isArray(this.value)) { + this.value = [...this.value, { name: 'Unnamed group', key: UmbId.new() }]; + } else { + this.value = [{ name: 'Unnamed group', key: UmbId.new() }]; + } + + this.dispatchEvent(new CustomEvent('property-value-change')); + } + + render() { + return html` + + ${this.localize.term('blockEditor_addBlockGroup')} + + `; + } + + static styles = [ + UmbTextStyles, + css` + uui-button { + display: block; + } + `, + ]; +} + +export default UmbPropertyEditorUIBlockGridGroupConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-block-grid-group-configuration': UmbPropertyEditorUIBlockGridGroupConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts new file mode 100644 index 0000000000..7e8cb00391 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import type { UmbPropertyEditorUIBlockGridGroupConfigurationElement } from './property-editor-ui-block-grid-group-configuration.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +import './property-editor-ui-block-grid-group-configuration.element.js'; + +export default { + title: 'Property Editor UIs/Block Grid Group Configuration', + component: 'umb-property-editor-ui-block-grid-group-configuration', + id: 'umb-property-editor-ui-block-grid-group-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 94be84645b..c5b918799c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,10 +1,12 @@ -import type { UmbBlockTypeBase, UmbInputBlockTypeElement } from '../../../block-type/index.js'; +import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; /** * @element umb-property-editor-ui-block-grid-type-configuration @@ -14,22 +16,60 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { + #context?: UmbPropertyDatasetContext; + @property({ attribute: false }) - value: UmbBlockTypeBase[] = []; + value: UmbBlockTypeWithGroupKey[] = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; + @state() + private _blockGroups: Array = []; + + // @state() + // private _groups: Array<{ name: string; key: string | null; blocks: UmbBlockTypeWithGroupKey[] }> = []; + + constructor() { + super(); + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { + this.#context = instance; + this.#observeProperties(); + }); + } + + async #observeProperties() { + if (!this.#context) return; + + this.observe(await this.#context.propertyValueByAlias('blockGroups'), (value) => { + this._blockGroups = value as Array; + }); + } + render() { return html` { - this.value = (e.target as UmbInputBlockTypeElement).value; - }}>`; + @change=${(e: Event) => (this.value = (e.target as UmbInputBlockTypeElement).value)}>`; } - static styles = [UmbTextStyles]; + static styles = [ + UmbTextStyles, + css` + uui-input { + margin-top: var(--uui-size-6); + margin-bottom: var(--uui-size-4); + } + + uui-input:not(:hover, :focus) { + border: 1px solid transparent; + } + uui-input:not(:hover, :focus) uui-button { + opacity: 0; + } + `, + ]; } export default UmbPropertyEditorUIBlockGridTypeConfigurationElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts index 11b3d055ed..f1737b0acd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts @@ -2,5 +2,12 @@ import { manifest as blockGridEditor } from './block-grid-editor/manifests.js'; import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js'; import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js'; import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js'; +import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests.js'; -export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet, blockGridColumnSpan]; +export const manifests = [ + blockGridTypeConfiguration, + blockGridEditor, + blockGridLayoutStylesheet, + blockGridColumnSpan, + blockGridGroupConfiguration, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts index 1a58b9ea39..f8dfc9f5f2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts @@ -11,3 +11,8 @@ export interface UmbBlockGridType extends UmbBlockTypeBase { areas: Array; groupKey: null | string; } + +export interface BlockGridGroupConfigration { + name?: string; + key: string; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 622c77ed6a..ff15657cac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,4 +1,4 @@ -import { UmbBlockTypeBase } from '../../types.js'; +import { UmbBlockTypeBase, UmbBlockTypeGroup, UmbBlockTypeWithGroupKey } from '../../types.js'; import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, @@ -9,9 +9,14 @@ import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; +import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; @customElement('umb-input-block-type') -export class UmbInputBlockTypeElement extends UmbLitElement { +export class UmbInputBlockTypeElement< + BlockType extends UmbBlockTypeWithGroupKey = UmbBlockTypeBase, +> extends UmbLitElement { // @property({ type: Array, attribute: false }) public get value() { @@ -19,6 +24,7 @@ export class UmbInputBlockTypeElement = []; + @property({ type: Array }) + public get groups(): Array { + return this.#groups; + } + public set groups(groups: Array) { + this.#groups = groups ?? []; + this.#mapValues(); + } + + #mapValues() { + const valuesWithNoGroup = this.value.filter( + // Look for values without a group, or with a group that is non existent. + (value) => !value.groupKey || this.#groups.find((group) => group.key !== value.groupKey), + ); + + const valuesWithGroup = this.#groups.map((group) => { + return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; + }); + + this._mappedGroups = [{ key: '', name: '', blocks: valuesWithNoGroup }, ...valuesWithGroup]; + } + @state() private _items: Array = []; + @state() + private _mappedGroups: Array }> = []; + @state() private _workspacePath?: string; @@ -55,8 +87,13 @@ export class UmbInputBlockTypeElement; + #context?: UmbPropertyDatasetContext; + constructor() { super(); + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { + this.#context = instance; + }); } create() { @@ -87,7 +124,7 @@ export class UmbInputBlockTypeElement x.contentElementTypeKey !== contentElementTypeKey); + this.value = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey); this.dispatchEvent(new UmbChangeEvent()); } @@ -95,11 +132,54 @@ export class UmbInputBlockTypeElement (group.key === key ? { ...group, name: groupName } : group)); + + this.#context?.setPropertyValue('blockGroups', groups); + } + + #deleteGroup(key: string) { + this.#context?.setPropertyValue( + 'blockGroups', + this.groups.filter((group) => group.key !== key), + ); + this.value = this.value.filter((block) => block.groupKey !== key); + this.dispatchEvent(new UmbChangeEvent()); + this.#mapValues(); + } + render() { - return html` - ${this._items ? repeat(this._items, (item) => item.contentElementTypeKey, this.#renderItem) : ''} - ${this.#renderButton()} - `; + return html`${repeat( + this._mappedGroups, + (group) => group.key + group.blocks, + (group) => + html` ${group.key + ? html` this.#renameGroup(e, group.key)}> + this.#deleteGroup(group.key)}> + + + ` + : ''} +
+ ${repeat( + group.blocks, + (block) => block.contentElementTypeKey, + (block) => + html` this.deleteItem(block.contentElementTypeKey)}> + `, + )} + ${this.#renderButton()} +
`, + )}`; } #renderButton() { @@ -123,7 +203,7 @@ export class UmbInputBlockTypeElement Date: Thu, 18 Jan 2024 14:42:17 +0100 Subject: [PATCH 02/30] use _value for guaranteed array --- ...rty-editor-ui-block-grid-group-configuration.element.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index b26157b711..b5f896a42d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -25,12 +25,7 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement public set config(config: UmbPropertyEditorConfigCollection | undefined) {} #addGroup() { - if (Array.isArray(this.value)) { - this.value = [...this.value, { name: 'Unnamed group', key: UmbId.new() }]; - } else { - this.value = [{ name: 'Unnamed group', key: UmbId.new() }]; - } - + this.value = [...this._value, { name: 'Unnamed group', key: UmbId.new() }]; this.dispatchEvent(new CustomEvent('property-value-change')); } From 67adad5984aba43f1e625a2bc7bb2bb72fd7e37c Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:48:27 +0100 Subject: [PATCH 03/30] datasetcontext --- .../input-block-type/input-block-type.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 5bd561f196..3afaeebed3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -88,12 +88,12 @@ export class UmbInputBlockTypeElement< typeof UMB_WORKSPACE_MODAL.VALUE >; - #context?: UmbPropertyDatasetContext; + #datasetContext?: UmbPropertyDatasetContext; constructor() { super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { - this.#context = instance; + this.#datasetContext = instance; }); } @@ -138,11 +138,11 @@ export class UmbInputBlockTypeElement< const groupName = e.target.value as string; const groups = this.groups.map((group) => (group.key === key ? { ...group, name: groupName } : group)); - this.#context?.setPropertyValue('blockGroups', groups); + this.#datasetContext?.setPropertyValue('blockGroups', groups); } #deleteGroup(key: string) { - this.#context?.setPropertyValue( + this.#datasetContext?.setPropertyValue( 'blockGroups', this.groups.filter((group) => group.key !== key), ); From c545d0853bfb34d79321a31e8b8beb462a7c9862 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:50:35 +0100 Subject: [PATCH 04/30] groupkey --- .../components/input-block-type/input-block-type.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 3afaeebed3..6faacfd6d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -154,7 +154,7 @@ export class UmbInputBlockTypeElement< render() { return html`${repeat( this._mappedGroups, - (group) => group.key + group.blocks, + (group) => group.key, (group) => html` ${group.key ? html` Date: Fri, 19 Jan 2024 09:41:51 +0100 Subject: [PATCH 05/30] grouping logic moved --- ...i-block-grid-type-configuration.element.ts | 63 ++++++++-- .../src/packages/block/block-grid/types.ts | 10 +- .../input-block-type.element.ts | 115 +++++++----------- 3 files changed, 103 insertions(+), 85 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index c5b918799c..cae3b17d09 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,12 +1,12 @@ import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, css, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; -import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; +import { UmbBlockGridGroupType, UmbBlockGridGroupTypeConfiguration } from '@umbraco-cms/backoffice/block'; /** * @element umb-property-editor-ui-block-grid-type-configuration @@ -16,7 +16,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { - #context?: UmbPropertyDatasetContext; + #datasetContext?: UmbPropertyDatasetContext; @property({ attribute: false }) value: UmbBlockTypeWithGroupKey[] = []; @@ -25,34 +25,75 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement public config?: UmbPropertyEditorConfigCollection; @state() - private _blockGroups: Array = []; + private _blockGroups: Array = []; - // @state() - // private _groups: Array<{ name: string; key: string | null; blocks: UmbBlockTypeWithGroupKey[] }> = []; + @state() + private _mappedValuesAndGroups: Array = []; constructor() { super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { - this.#context = instance; + this.#datasetContext = instance; this.#observeProperties(); }); } async #observeProperties() { - if (!this.#context) return; + if (!this.#datasetContext) return; - this.observe(await this.#context.propertyValueByAlias('blockGroups'), (value) => { - this._blockGroups = value as Array; + this.observe(await this.#datasetContext.propertyValueByAlias('blockGroups'), (value) => { + this._blockGroups = value as Array; + this.#mapValuesToBlockGroups(); + console.log('groups changed', value); + }); + this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), (value) => { + this.#mapValuesToBlockGroups(); + console.log('value changed', value); }); } + #mapValuesToBlockGroups() { + const valuesWithNoGroup = this.value.filter( + // Look for values without a group, or with a group that is non existent. + (value) => !value.groupKey || this._blockGroups.find((group) => group.key !== value.groupKey), + ); + + const valuesWithGroup = this._blockGroups.map((group) => { + return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; + }); + + this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; + } + + #onChange(e: Event, groupKey?: string) { + const newValue = (e.target as UmbInputBlockTypeElement).value; + const values = this.value.filter((item) => item.groupKey !== groupKey); + this.value = [...values, ...newValue]; + this.dispatchEvent(new CustomEvent('property-value-change')); + } + + render() { + return html`${repeat( + this._mappedValuesAndGroups, + (group) => group.key, + (group) => + html` this.#onChange(e, group.key)}>`, + )}`; + } + + /* render() { return html` (this.value = (e.target as UmbInputBlockTypeElement).value)}>`; - } + }*/ static styles = [ UmbTextStyles, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts index f8dfc9f5f2..b6c2e2a02e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts @@ -1,4 +1,4 @@ -import type { UmbBlockTypeBase } from '../block-type/index.js'; +import type { UmbBlockTypeBase, UmbBlockTypeWithGroupKey } from '../block-type/index.js'; export interface UmbBlockGridType extends UmbBlockTypeBase { columnSpanOptions: Array; @@ -12,7 +12,11 @@ export interface UmbBlockGridType extends UmbBlockTypeBase { groupKey: null | string; } -export interface BlockGridGroupConfigration { - name?: string; +export interface UmbBlockGridGroupType { + name: string; key: string; } + +export interface UmbBlockGridGroupTypeConfiguration extends Partial { + blocks: Array; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 6faacfd6d4..b8ec0604e8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -9,24 +9,28 @@ import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { UmbBlockGridType } from '@umbraco-cms/backoffice/block'; @customElement('umb-input-block-type') export class UmbInputBlockTypeElement< BlockType extends UmbBlockTypeWithGroupKey = UmbBlockTypeBase, > extends UmbLitElement { - // @property({ type: Array, attribute: false }) public get value() { return this._items; } public set value(items) { this._items = items ?? []; - this.#mapValues(); } + @property() + groupKey?: string; + + @property() + groupName?: string; + @property({ type: String, attribute: 'entity-type' }) public get entityType() { return this.#entityType; @@ -51,35 +55,9 @@ export class UmbInputBlockTypeElement< } #entityType?: string; - #groups: Array = []; - @property({ type: Array }) - public get groups(): Array { - return this.#groups; - } - public set groups(groups: Array) { - this.#groups = groups ?? []; - this.#mapValues(); - } - - #mapValues() { - const valuesWithNoGroup = this.value.filter( - // Look for values without a group, or with a group that is non existent. - (value) => !value.groupKey || this.#groups.find((group) => group.key !== value.groupKey), - ); - - const valuesWithGroup = this.#groups.map((group) => { - return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; - }); - - this._mappedGroups = [{ key: '', name: '', blocks: valuesWithNoGroup }, ...valuesWithGroup]; - } - @state() private _items: Array = []; - @state() - private _mappedGroups: Array }> = []; - @state() private _workspacePath?: string; @@ -89,11 +67,19 @@ export class UmbInputBlockTypeElement< >; #datasetContext?: UmbPropertyDatasetContext; + #blockGroups: Array = []; + #filter?: any; constructor() { super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { this.#datasetContext = instance; + this.observe(await this.#datasetContext?.propertyValueByAlias('blockGroups'), (value) => { + this.#blockGroups = value as Array; + }); + this.observe(await this.#datasetContext?.propertyValueByAlias('blocks'), (value) => { + this.#filter = value as Array; + }); }); } @@ -109,7 +95,7 @@ export class UmbInputBlockTypeElement< // Only pick elements: docType.isElement && // Prevent picking the an already used element type: - this._items.find((x) => x.contentElementTypeKey === docType.id) === undefined, + this.#filter.find((x: UmbBlockGridType) => x.contentElementTypeKey === docType.id) === undefined, }, }); @@ -133,54 +119,41 @@ export class UmbInputBlockTypeElement< return undefined; } - #renameGroup(e: UUIInputEvent, key: string) { - if (!key) return; - const groupName = e.target.value as string; - const groups = this.groups.map((group) => (group.key === key ? { ...group, name: groupName } : group)); - - this.#datasetContext?.setPropertyValue('blockGroups', groups); + render() { + return html`${this.#renderGroupInput()} +
+ ${repeat(this.value, (block) => block.contentElementTypeKey, this.#renderItem)} ${this.#renderButton()} +
`; } - #deleteGroup(key: string) { + #renderGroupInput() { + if (!this.groupKey) return; + return html` + + + + `; + } + + #changeGroupName(e: UUIInputEvent) { + if (!this.groupKey) return; + + const groupName = e.target.value as string; this.#datasetContext?.setPropertyValue( 'blockGroups', - this.groups.filter((group) => group.key !== key), + this.#blockGroups.map((group) => ({ ...group, groupName: this.groupKey === group.key ? groupName : group.name })), ); - this.value = this.value.filter((block) => block.groupKey !== key); - this.dispatchEvent(new UmbChangeEvent()); - this.#mapValues(); } - render() { - return html`${repeat( - this._mappedGroups, - (group) => group.key, - (group) => - html` ${group.key - ? html` this.#renameGroup(e, group.key)}> - this.#deleteGroup(group.key)}> - - - ` - : ''} -
- ${repeat( - group.blocks, - (block) => block.contentElementTypeKey, - (block) => - html` this.deleteItem(block.contentElementTypeKey)}> - `, - )} - ${this.#renderButton()} -
`, - )}`; + #deleteGroup() { + if (!this.groupKey) return; + this.#datasetContext?.setPropertyValue( + 'blockGroups', + this.#blockGroups.filter((group) => group.key !== this.groupKey), + ); + this.value = this._items.filter((block) => block.groupKey !== this.groupKey); + this.dispatchEvent(new UmbChangeEvent()); + console.log(this.value); } #renderButton() { From 3fa16e1256751b686656bd5ec62758fae89cdd73 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:16:54 +0100 Subject: [PATCH 06/30] test with broken group key --- .../src/mocks/data/data-type.data.ts | 7 +++++ .../data/document-type/document-type.data.ts | 27 +++++++++++++++++++ ...i-block-grid-type-configuration.element.ts | 12 ++++++--- 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts index 74e7646d41..e8dbbe4cd3 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts @@ -645,6 +645,13 @@ export const data: Array = icon: 'icon-book-alt', groupKey: 'demo-block-group-id', }, + { + label: 'Test broken group key', + contentElementTypeKey: 'test-block-id', + editorSize: 'medium', + icon: 'icon-war', + groupKey: 'group-id-that-does-not-exist', + }, ], }, ], diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts index 921463a1ca..540eb77371 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts @@ -1496,4 +1496,31 @@ export const data: Array = [ properties: [], containers: [], }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'test-block-id', + alias: 'testBlock', + name: 'Test broken group key', + description: null, + icon: 'icon-war', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: null, + isFolder: false, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [], + containers: [], + }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index cae3b17d09..d761a60745 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -57,6 +57,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement // Look for values without a group, or with a group that is non existent. (value) => !value.groupKey || this._blockGroups.find((group) => group.key !== value.groupKey), ); + //.map((value) => ({ ...value, groupKey: undefined })); const valuesWithGroup = this._blockGroups.map((group) => { return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; @@ -66,9 +67,14 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement } #onChange(e: Event, groupKey?: string) { - const newValue = (e.target as UmbInputBlockTypeElement).value; - const values = this.value.filter((item) => item.groupKey !== groupKey); - this.value = [...values, ...newValue]; + const newValues = (e.target as UmbInputBlockTypeElement).value; + + // remove all values that are in the group, or have a group that does not exist in the block groups. + const values = this.value + .filter((b) => b.groupKey !== groupKey) + .filter((b) => this._blockGroups.find((group) => group.key === b.groupKey)); + + this.value = [...values, ...newValues]; this.dispatchEvent(new CustomEvent('property-value-change')); } From 0b36a405dd4ea7e2761482b3bc7a627cf05f1675 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:23:56 +0100 Subject: [PATCH 07/30] remove leftovers --- ...i-block-grid-type-configuration.element.ts | 14 +------ .../input-block-type.element.ts | 41 ++++++++++--------- 2 files changed, 22 insertions(+), 33 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index d761a60745..0282db6938 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -44,11 +44,9 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this.observe(await this.#datasetContext.propertyValueByAlias('blockGroups'), (value) => { this._blockGroups = value as Array; this.#mapValuesToBlockGroups(); - console.log('groups changed', value); }); - this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), (value) => { + this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), () => { this.#mapValuesToBlockGroups(); - console.log('value changed', value); }); } @@ -57,7 +55,6 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement // Look for values without a group, or with a group that is non existent. (value) => !value.groupKey || this._blockGroups.find((group) => group.key !== value.groupKey), ); - //.map((value) => ({ ...value, groupKey: undefined })); const valuesWithGroup = this._blockGroups.map((group) => { return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; @@ -92,15 +89,6 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement )}`; } - /* - render() { - return html` (this.value = (e.target as UmbInputBlockTypeElement).value)}>`; - }*/ - static styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index b8ec0604e8..8337b90f0f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -126,6 +126,27 @@ export class UmbInputBlockTypeElement< `; } + #renderItem = (item: BlockType) => { + return html` + this.deleteItem(item.contentElementTypeKey)}> + + `; + }; + + #renderButton() { + return html` + this.create()} label="open"> + + Add + + `; + } + + //Group renders (if exists) + #renderGroupInput() { if (!this.groupKey) return; return html` @@ -153,28 +174,8 @@ export class UmbInputBlockTypeElement< ); this.value = this._items.filter((block) => block.groupKey !== this.groupKey); this.dispatchEvent(new UmbChangeEvent()); - console.log(this.value); } - #renderButton() { - return html` - this.create()} label="open"> - - Add - - `; - } - - #renderItem = (item: BlockType) => { - return html` - this.deleteItem(item.contentElementTypeKey)}> - - `; - }; - static styles = [ css` div { From 288d9e0a759763dc65441bea2f3314e677f90edb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:28:41 +0100 Subject: [PATCH 08/30] fix group type in group config --- ...ty-editor-ui-block-grid-group-configuration.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index b5f896a42d..ea8b94c594 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -4,20 +4,20 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbId } from '@umbraco-cms/backoffice/id'; -import { BlockGridGroupConfigration } from '@umbraco-cms/backoffice/block'; +import { UmbBlockGridGroupType } from '@umbraco-cms/backoffice/block'; @customElement('umb-property-editor-ui-block-grid-group-configuration') export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { - private _value: Array = []; + private _value: Array = []; @property({ type: Array }) - public get value(): Array { + public get value(): Array { return this._value; } - public set value(value: Array) { + public set value(value: Array) { this._value = value || []; } From 1c7382b95b57feab60f1a824b89b4976bcdaa250 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:32:41 +0100 Subject: [PATCH 09/30] filter fix --- ...rty-editor-ui-block-grid-type-configuration.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 0282db6938..b4ff316d7a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -67,10 +67,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement const newValues = (e.target as UmbInputBlockTypeElement).value; // remove all values that are in the group, or have a group that does not exist in the block groups. - const values = this.value - .filter((b) => b.groupKey !== groupKey) - .filter((b) => this._blockGroups.find((group) => group.key === b.groupKey)); - + let values = this.value.filter((b) => b.groupKey !== groupKey); + if (!groupKey) { + values = values.filter((b) => this._blockGroups.find((group) => group.key === b.groupKey)); + } this.value = [...values, ...newValues]; this.dispatchEvent(new CustomEvent('property-value-change')); } From 90ae3682dffb1f2571fc4ed4a34ab94dbe401728 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Sun, 21 Jan 2024 15:01:53 +0100 Subject: [PATCH 10/30] types --- .../src/packages/block/block-grid/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts index b6c2e2a02e..0b2771f457 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts @@ -1,6 +1,6 @@ import type { UmbBlockTypeBase, UmbBlockTypeWithGroupKey } from '../block-type/index.js'; -export interface UmbBlockGridType extends UmbBlockTypeBase { +export interface UmbBlockGridType extends UmbBlockTypeWithGroupKey { columnSpanOptions: Array; allowAtRoot: boolean; allowInAreas: boolean; @@ -9,7 +9,6 @@ export interface UmbBlockGridType extends UmbBlockTypeBase { thumbnail?: string; areaGridColumns?: number; areas: Array; - groupKey: null | string; } export interface UmbBlockGridGroupType { From 038f4fc1c26766559e8483243a75d70b09c09cf8 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Sun, 21 Jan 2024 15:29:32 +0100 Subject: [PATCH 11/30] move grouping to property editor rather than component --- ...i-block-grid-type-configuration.element.ts | 46 +++++++++++++--- .../src/packages/block/block-grid/types.ts | 2 +- .../input-block-type.element.ts | 53 ++----------------- 3 files changed, 45 insertions(+), 56 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index b4ff316d7a..e74c52cce4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,12 +1,13 @@ import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, state, css, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, css, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UmbBlockGridGroupType, UmbBlockGridGroupTypeConfiguration } from '@umbraco-cms/backoffice/block'; +import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; /** * @element umb-property-editor-ui-block-grid-type-configuration @@ -80,15 +81,46 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this._mappedValuesAndGroups, (group) => group.key, (group) => - html` this.#onChange(e, group.key)}>`, + html`${group.key ? this.#renderGroupInput(group.key, group.name) : nothing} + this.#onChange(e, group.key)}>`, )}`; } + #changeGroupName(e: UUIInputEvent, groupKey: string) { + const groupName = e.target.value as string; + this.#datasetContext?.setPropertyValue( + 'blockGroups', + this._blockGroups.map((group) => ({ ...group, groupName: groupKey === group.key ? groupName : group.name })), + ); + } + + #deleteGroup(groupKey: string) { + this.#datasetContext?.setPropertyValue( + 'blockGroups', + this._blockGroups.filter((group) => group.key !== groupKey), + ); + + // Should blocks that belonged to the removed group be deleted as well? + this.value = this.value.filter((block) => block.groupKey !== groupKey); + } + + #renderGroupInput(groupKey: string, groupName?: string) { + return html` this.#changeGroupName(e, groupKey)}> + this.#deleteGroup(groupKey)}> + + + `; + } + static styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts index 0b2771f457..41778daab8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts @@ -1,4 +1,4 @@ -import type { UmbBlockTypeBase, UmbBlockTypeWithGroupKey } from '../block-type/index.js'; +import type { UmbBlockTypeWithGroupKey } from '../block-type/index.js'; export interface UmbBlockGridType extends UmbBlockTypeWithGroupKey { columnSpanOptions: Array; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 8337b90f0f..ac790ef928 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,4 +1,4 @@ -import { UmbBlockTypeBase, UmbBlockTypeGroup, UmbBlockTypeWithGroupKey } from '../../types.js'; +import { UmbBlockTypeBase, UmbBlockTypeWithGroupKey } from '../../types.js'; import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, @@ -9,7 +9,6 @@ import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UmbBlockGridType } from '@umbraco-cms/backoffice/block'; @@ -25,12 +24,6 @@ export class UmbInputBlockTypeElement< this._items = items ?? []; } - @property() - groupKey?: string; - - @property() - groupName?: string; - @property({ type: String, attribute: 'entity-type' }) public get entityType() { return this.#entityType; @@ -67,16 +60,12 @@ export class UmbInputBlockTypeElement< >; #datasetContext?: UmbPropertyDatasetContext; - #blockGroups: Array = []; - #filter?: any; + #filter: Array = []; constructor() { super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { this.#datasetContext = instance; - this.observe(await this.#datasetContext?.propertyValueByAlias('blockGroups'), (value) => { - this.#blockGroups = value as Array; - }); this.observe(await this.#datasetContext?.propertyValueByAlias('blocks'), (value) => { this.#filter = value as Array; }); @@ -120,10 +109,9 @@ export class UmbInputBlockTypeElement< } render() { - return html`${this.#renderGroupInput()} -
- ${repeat(this.value, (block) => block.contentElementTypeKey, this.#renderItem)} ${this.#renderButton()} -
`; + return html`
+ ${repeat(this.value, (block) => block.contentElementTypeKey, this.#renderItem)} ${this.#renderButton()} +
`; } #renderItem = (item: BlockType) => { @@ -145,37 +133,6 @@ export class UmbInputBlockTypeElement< `; } - //Group renders (if exists) - - #renderGroupInput() { - if (!this.groupKey) return; - return html` - - - - `; - } - - #changeGroupName(e: UUIInputEvent) { - if (!this.groupKey) return; - - const groupName = e.target.value as string; - this.#datasetContext?.setPropertyValue( - 'blockGroups', - this.#blockGroups.map((group) => ({ ...group, groupName: this.groupKey === group.key ? groupName : group.name })), - ); - } - - #deleteGroup() { - if (!this.groupKey) return; - this.#datasetContext?.setPropertyValue( - 'blockGroups', - this.#blockGroups.filter((group) => group.key !== this.groupKey), - ); - this.value = this._items.filter((block) => block.groupKey !== this.groupKey); - this.dispatchEvent(new UmbChangeEvent()); - } - static styles = [ css` div { From 5411d0e872d4eed944eeea74dda161d139e4f21d Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Sun, 21 Jan 2024 15:38:27 +0100 Subject: [PATCH 12/30] remove events --- ...i-block-grid-type-configuration.element.ts | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index e74c52cce4..d7aed09461 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -52,10 +52,8 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement } #mapValuesToBlockGroups() { - const valuesWithNoGroup = this.value.filter( - // Look for values without a group, or with a group that is non existent. - (value) => !value.groupKey || this._blockGroups.find((group) => group.key !== value.groupKey), - ); + // What if a block is in a group that does not exist in the block groups? Should it be removed? (Right now they will never be rendered) + const valuesWithNoGroup = this.value.filter((value) => !value.groupKey); const valuesWithGroup = this._blockGroups.map((group) => { return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; @@ -64,30 +62,13 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; } - #onChange(e: Event, groupKey?: string) { - const newValues = (e.target as UmbInputBlockTypeElement).value; - - // remove all values that are in the group, or have a group that does not exist in the block groups. - let values = this.value.filter((b) => b.groupKey !== groupKey); - if (!groupKey) { - values = values.filter((b) => this._blockGroups.find((group) => group.key === b.groupKey)); - } - this.value = [...values, ...newValues]; - this.dispatchEvent(new CustomEvent('property-value-change')); - } - render() { return html`${repeat( this._mappedValuesAndGroups, (group) => group.key, (group) => html`${group.key ? this.#renderGroupInput(group.key, group.name) : nothing} - this.#onChange(e, group.key)}>`, + `, )}`; } From 1e5d751d59ffcc91b05ec5b5787a7cf4e7e8e7bb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Jan 2024 13:42:21 +0100 Subject: [PATCH 13/30] save grouping --- ...ui-block-grid-type-configuration.element.ts | 18 ++++++++++++------ .../input-block-type.element.ts | 4 +++- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 32e9dc2de4..f63568ff1e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -19,8 +19,14 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement { #datasetContext?: UmbPropertyDatasetContext; + private _value: Array = []; @property({ attribute: false }) - value: UmbBlockTypeWithGroupKey[] = []; + get value() { + return this._value; + } + set value(value: Array) { + this._value = value ?? []; + } @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -43,7 +49,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement if (!this.#datasetContext) return; this.observe(await this.#datasetContext.propertyValueByAlias('blockGroups'), (value) => { - this._blockGroups = value as Array; + this._blockGroups = (value as Array) ?? []; this.#mapValuesToBlockGroups(); }); this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), () => { @@ -53,10 +59,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement #mapValuesToBlockGroups() { // What if a block is in a group that does not exist in the block groups? Should it be removed? (Right now they will never be rendered) - const valuesWithNoGroup = this.value.filter((value) => !value.groupKey); + const valuesWithNoGroup = this._value.filter((value) => !value.groupKey); const valuesWithGroup = this._blockGroups.map((group) => { - return { name: group.name, key: group.key, blocks: this.value.filter((value) => value.groupKey === group.key) }; + return { name: group.name, key: group.key, blocks: this._value.filter((value) => value.groupKey === group.key) }; }); this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; @@ -76,7 +82,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement const groupName = e.target.value as string; this.#datasetContext?.setPropertyValue( 'blockGroups', - this._blockGroups.map((group) => ({ ...group, groupName: groupKey === group.key ? groupName : group.name })), + this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)), ); } @@ -87,7 +93,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement ); // Should blocks that belonged to the removed group be deleted as well? - this.value = this.value.filter((block) => block.groupKey !== groupKey); + this.value = this._value.filter((block) => block.groupKey !== groupKey); } #renderGroupInput(groupKey: string, groupName?: string) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 2a3721f41a..186f9b8079 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -59,6 +59,7 @@ export class UmbInputBlockTypeElement< typeof UMB_WORKSPACE_MODAL.VALUE >; + /* #datasetContext?: UmbPropertyDatasetContext; #filter: Array = []; @@ -71,6 +72,7 @@ export class UmbInputBlockTypeElement< }); }); } + */ create() { this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, async (modalManager) => { @@ -84,7 +86,7 @@ export class UmbInputBlockTypeElement< // Only pick elements: docType.isElement && // Prevent picking the an already used element type: - this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, + this._items.find((x) => x.contentElementTypeKey === docType.unique) === undefined, }, }); From 0712399676f72984d0719b5ee884214105eaf8b7 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Jan 2024 14:48:59 +0100 Subject: [PATCH 14/30] filter --- .../components/input-block-type/input-block-type.element.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 186f9b8079..2a3721f41a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -59,7 +59,6 @@ export class UmbInputBlockTypeElement< typeof UMB_WORKSPACE_MODAL.VALUE >; - /* #datasetContext?: UmbPropertyDatasetContext; #filter: Array = []; @@ -72,7 +71,6 @@ export class UmbInputBlockTypeElement< }); }); } - */ create() { this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, async (modalManager) => { @@ -86,7 +84,7 @@ export class UmbInputBlockTypeElement< // Only pick elements: docType.isElement && // Prevent picking the an already used element type: - this._items.find((x) => x.contentElementTypeKey === docType.unique) === undefined, + this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, }, }); From 3c104d7b2dcc8caa6c169b181fd8415f56a06f70 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:16:42 +0100 Subject: [PATCH 15/30] delete item --- ...or-ui-block-grid-type-configuration.element.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index f63568ff1e..354518ad8d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,4 +1,4 @@ -import type { UmbBlockTypeWithGroupKey } from '../../../block-type/index.js'; +import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property, state, css, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; @@ -68,13 +68,24 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; } + #onChange(e: CustomEvent, group?: UmbBlockGridGroupTypeConfiguration) { + const groupValues = (e.target as UmbInputBlockTypeElement).value; + const newValues = groupValues.map((value) => ({ ...value, groupKey: group?.key })); + const filteredValues = this._value.filter((block) => block.contentElementTypeKey === group?.key); + this.value = [...filteredValues, ...newValues]; + this.dispatchEvent(new CustomEvent('property-value-change')); + } + render() { return html`${repeat( this._mappedValuesAndGroups, (group) => group.key, (group) => html`${group.key ? this.#renderGroupInput(group.key, group.name) : nothing} - `, + this.#onChange(e, group)}>`, )}`; } From dc7d2110ec9db475a7af4c0c1c9208c37c0c0700 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:36:29 +0100 Subject: [PATCH 16/30] remove build error --- .../src/mocks/data/document-type/document-type.data.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts index 2d6f01db6c..800e58907a 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts @@ -1488,7 +1488,6 @@ export const data: Array = [ containers: [], }, { - type: 'document-type', allowedTemplateIds: [], defaultTemplateId: null, id: 'test-block-id', From d67f71b7ffcef5df086d355a52f1c38535d6cc62 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:36:58 +0100 Subject: [PATCH 17/30] delete event possibility --- ...editor-ui-block-grid-type-configuration.element.ts | 11 +++++++++-- .../src/packages/block/block-type/components/index.ts | 2 +- .../input-block-type/input-block-type.element.ts | 3 ++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 354518ad8d..5a6c73b111 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -68,6 +68,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; } + /* #onChange(e: CustomEvent, group?: UmbBlockGridGroupTypeConfiguration) { const groupValues = (e.target as UmbInputBlockTypeElement).value; const newValues = groupValues.map((value) => ({ ...value, groupKey: group?.key })); @@ -75,6 +76,12 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this.value = [...filteredValues, ...newValues]; this.dispatchEvent(new CustomEvent('property-value-change')); } + */ + + #deleteItem(e: CustomEvent) { + this.value = this._value.filter((block) => block.contentElementTypeKey !== e.detail.contentElementTypeKey); + this.dispatchEvent(new CustomEvent('property-value-change')); + } render() { return html`${repeat( @@ -85,7 +92,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this.#onChange(e, group)}>`, + @delete=${this.#deleteItem}>`, )}`; } @@ -112,7 +119,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement auto-width label="Group" .value=${groupName ?? ''} - @change=${(e: UUIInputEvent) => this.#changeGroupName(e, groupKey)}> + @delete=${(e: UUIInputEvent) => this.#changeGroupName(e, groupKey)}> this.#deleteGroup(groupKey)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts index fcdafe77a5..2ce6e9bff7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts @@ -1,2 +1,2 @@ -export * from './input-block-type/index.js'; export * from './block-type-card/index.js'; +export * from './input-block-type/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 2a3721f41a..2dc6c57e31 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -101,7 +101,8 @@ export class UmbInputBlockTypeElement< deleteItem(contentElementTypeKey: string) { this.value = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey); - this.dispatchEvent(new UmbChangeEvent()); + this.dispatchEvent(new CustomEvent('delete', { detail: { contentElementTypeKey } })); + //this.dispatchEvent(new UmbChangeEvent()); } protected getFormElement() { From ef942a9ee06cd7ca3d7ea2adc0d98a617a0e06d4 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 24 Jan 2024 10:31:07 +0100 Subject: [PATCH 18/30] move grouping methods --- ...i-block-grid-type-configuration.element.ts | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 5a6c73b111..e7355d9e4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -2,7 +2,10 @@ import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../. import '../../../block-type/components/input-block-type/index.js'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property, state, css, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; -import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { + UmbPropertyEditorConfigCollection, + UmbPropertyValueChangeEvent, +} from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; @@ -80,7 +83,25 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement #deleteItem(e: CustomEvent) { this.value = this._value.filter((block) => block.contentElementTypeKey !== e.detail.contentElementTypeKey); - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + + #deleteGroup(groupKey: string) { + this.#datasetContext?.setPropertyValue( + 'blockGroups', + this._blockGroups.filter((group) => group.key !== groupKey), + ); + + // Should blocks that belonged to the removed group be deleted as well? + this.value = this._value.filter((block) => block.groupKey !== groupKey); + } + + #changeGroupName(e: UUIInputEvent, groupKey: string) { + const groupName = e.target.value as string; + this.#datasetContext?.setPropertyValue( + 'blockGroups', + this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)), + ); } render() { @@ -96,24 +117,6 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement )}`; } - #changeGroupName(e: UUIInputEvent, groupKey: string) { - const groupName = e.target.value as string; - this.#datasetContext?.setPropertyValue( - 'blockGroups', - this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)), - ); - } - - #deleteGroup(groupKey: string) { - this.#datasetContext?.setPropertyValue( - 'blockGroups', - this._blockGroups.filter((group) => group.key !== groupKey), - ); - - // Should blocks that belonged to the removed group be deleted as well? - this.value = this._value.filter((block) => block.groupKey !== groupKey); - } - #renderGroupInput(groupKey: string, groupName?: string) { return html` Date: Thu, 25 Jan 2024 12:28:05 +0100 Subject: [PATCH 19/30] context --- ...i-block-grid-type-configuration.element.ts | 64 ++++++++++++++----- .../input-block-type.element.ts | 55 +++------------- .../workspace/block-type-workspace.context.ts | 13 ++-- .../workspace/block-type-workspace.element.ts | 10 +-- 4 files changed, 73 insertions(+), 69 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 9563e8a899..1184683ea9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,7 +1,16 @@ -import type { UmbBlockTypeWithGroupKey } from '../../../block-type/index.js'; +import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, state, repeat, nothing, css } from '@umbraco-cms/backoffice/external/lit'; +import { + html, + customElement, + property, + state, + repeat, + nothing, + css, + ifDefined, +} from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyValueChangeEvent, type UmbPropertyEditorConfigCollection, @@ -11,6 +20,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbBlockGridGroupType, UmbBlockGridGroupTypeConfiguration } from '@umbraco-cms/backoffice/block'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UMB_PROPERTY_DATASET_CONTEXT, type UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; /** * @element umb-property-editor-ui-block-grid-type-configuration @@ -21,6 +31,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement implements UmbPropertyEditorUiElement { #datasetContext?: UmbPropertyDatasetContext; + #blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController< + typeof UMB_WORKSPACE_MODAL.DATA, + typeof UMB_WORKSPACE_MODAL.VALUE + >; private _value: Array = []; @property({ attribute: false }) @@ -40,12 +54,29 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement @state() private _mappedValuesAndGroups: Array = []; + @state() + private _workspacePath?: string; + constructor() { super(); this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { this.#datasetContext = instance; this.#observeProperties(); }); + + this.#blockTypeWorkspaceModalRegistration?.destroy(); + + const entityType = 'block-grid-type'; + + this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath(entityType) + .onSetup(() => { + return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } }; + }) + .observeRouteBuilder((routeBuilder) => { + const newpath = routeBuilder({}); + this._workspacePath = newpath; + }); } async #observeProperties() { @@ -71,21 +102,20 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup]; } - /* - #onChange(e: CustomEvent, group?: UmbBlockGridGroupTypeConfiguration) { - const groupValues = (e.target as UmbInputBlockTypeElement).value; - const newValues = groupValues.map((value) => ({ ...value, groupKey: group?.key })); - const filteredValues = this._value.filter((block) => block.contentElementTypeKey === group?.key); - this.value = [...filteredValues, ...newValues]; - this.dispatchEvent(new CustomEvent('property-value-change')); - } - */ - - #deleteItem(e: CustomEvent) { - this.value = this._value.filter((block) => block.contentElementTypeKey !== e.detail.contentElementTypeKey); + #onChange(e: CustomEvent, groupKey?: string) { + const updatedValues = (e.target as UmbInputBlockTypeElement).value.map((value) => ({ ...value, groupKey })); + const filteredValues = this.value.filter((value) => value.groupKey !== groupKey); + this.value = [...filteredValues, ...updatedValues]; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } + #onCreate(e: CustomEvent, groupKey: string | null) { + const selectedElementType = e.detail.contentElementTypeKey; + if (selectedElementType) { + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + groupKey); + } + } + #deleteGroup(groupKey: string) { this.#datasetContext?.setPropertyValue( 'blockGroups', @@ -113,7 +143,9 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement `, + .workspacePath="${this._workspacePath}" + @create=${(e: CustomEvent) => this.#onCreate(e, group.key ?? null)} + @change=${(e: CustomEvent) => this.#onChange(e, group.key)}>`, )}`; } @@ -122,7 +154,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement auto-width label="Group" .value=${groupName ?? ''} - @delete=${(e: UUIInputEvent) => this.#changeGroupName(e, groupKey)}> + @change=${(e: UUIInputEvent) => this.#changeGroupName(e, groupKey)}> this.#deleteGroup(groupKey)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 548cd15034..982b51eb4d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,21 +1,16 @@ import type { UmbBlockTypeBaseModel } from '../../types.js'; -import { - UMB_DOCUMENT_TYPE_PICKER_MODAL, - UMB_MODAL_MANAGER_CONTEXT, - UMB_WORKSPACE_MODAL, - UmbModalRouteRegistrationController, -} from '@umbraco-cms/backoffice/modal'; +import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; @customElement('umb-input-block-type') export class UmbInputBlockTypeElement< BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, > extends UmbLitElement { - // @property({ type: Array, attribute: false }) public get value() { return this._items; @@ -24,41 +19,12 @@ export class UmbInputBlockTypeElement< this._items = items ?? []; } - @property({ type: String, attribute: 'entity-type' }) - public get entityType() { - return this.#entityType; - } - public set entityType(entityType) { - this.#entityType = entityType; - - this.#blockTypeWorkspaceModalRegistration?.destroy(); - - if (entityType) { - // TODO: Make specific modal token that requires data. - this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addAdditionalPath(entityType) - .onSetup(() => { - return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } }; - }) - .observeRouteBuilder((routeBuilder) => { - const newpath = routeBuilder({}); - this._workspacePath = newpath; - }); - } - } - #entityType?: string; + @property({ type: String }) + workspacePath?: string; @state() private _items: Array = []; - @state() - private _workspacePath?: string; - - #blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController< - typeof UMB_WORKSPACE_MODAL.DATA, - typeof UMB_WORKSPACE_MODAL.VALUE - >; - #datasetContext?: UmbPropertyDatasetContext; #filter: Array = []; @@ -84,25 +50,24 @@ export class UmbInputBlockTypeElement< // Only pick elements: docType.isElement && // Prevent picking the an already used element type: + this.#filter && this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, }, }); const modalValue = await modalContext?.onSubmit(); const selectedElementType = modalValue.selection[0]; + if (selectedElementType) { - this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType); + this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } })); } } }); - - // No need to fire a change event, as all changes are made directly to the property, via context api. } deleteItem(contentElementTypeKey: string) { this.value = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey); - this.dispatchEvent(new CustomEvent('delete', { detail: { contentElementTypeKey } })); - //this.dispatchEvent(new UmbChangeEvent()); + this.dispatchEvent(new UmbChangeEvent()); } protected getFormElement() { @@ -118,7 +83,7 @@ export class UmbInputBlockTypeElement< #renderItem = (item: BlockType) => { return html` this.deleteItem(item.contentElementTypeKey)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts index 5209b21197..5883299981 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts @@ -1,9 +1,10 @@ -import type { UmbBlockTypeBaseModel } from '../types.js'; +import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../types.js'; import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbInvariantableWorkspaceContextInterface, - UmbWorkspaceContextInterface} from '@umbraco-cms/backoffice/workspace'; + UmbWorkspaceContextInterface, +} from '@umbraco-cms/backoffice/workspace'; import { UmbEditableWorkspaceContextBase, UmbInvariantWorkspacePropertyDatasetContext, @@ -13,7 +14,7 @@ import type { UmbControllerHost, UmbControllerHostElement } from '@umbraco-cms/b import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import type { ManifestWorkspace, PropertyEditorConfigProperty } from '@umbraco-cms/backoffice/extension-registry'; -export class UmbBlockTypeWorkspaceContext +export class UmbBlockTypeWorkspaceContext extends UmbEditableWorkspaceContextBase implements UmbInvariantableWorkspaceContextInterface { @@ -57,11 +58,15 @@ export class UmbBlockTypeWorkspaceContext { const elementTypeKey = info.match.params.elementTypeKey; - this.#workspaceContext!.create(elementTypeKey); + const groupKey = info.match.params.groupKey === 'null' ? null : info.match.params.groupKey; + this.#workspaceContext!.create(elementTypeKey, groupKey); new UmbWorkspaceIsNewRedirectController( this, From 025c2bf898f9428389d712330a57272df7636d04 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 25 Jan 2024 12:33:16 +0100 Subject: [PATCH 20/30] build err --- ...operty-editor-ui-block-grid-group-configuration.element.ts | 4 ++-- ...operty-editor-ui-block-grid-group-configuration.stories.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts index ea8b94c594..333d2258ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts @@ -1,10 +1,10 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit'; -import { 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 { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbId } from '@umbraco-cms/backoffice/id'; -import { UmbBlockGridGroupType } from '@umbraco-cms/backoffice/block'; +import type { UmbBlockGridGroupType } from '@umbraco-cms/backoffice/block'; @customElement('umb-property-editor-ui-block-grid-group-configuration') export class UmbPropertyEditorUIBlockGridGroupConfigurationElement diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts index 7e8cb00391..c001579428 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.stories.ts @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/web-components'; +import type { Meta, Story } from '@storybook/web-components'; import type { UmbPropertyEditorUIBlockGridGroupConfigurationElement } from './property-editor-ui-block-grid-group-configuration.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; From 316e67df7b006e4ebccf011f790398cc7975f8d6 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 25 Jan 2024 12:40:50 +0100 Subject: [PATCH 21/30] entity type --- ...i-block-grid-type-configuration.element.ts | 28 +++++++------------ .../src/packages/block/block-grid/types.ts | 2 ++ 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 1184683ea9..9714e9cd08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -1,23 +1,18 @@ import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { - html, - customElement, - property, - state, - repeat, - nothing, - css, - ifDefined, -} from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, repeat, nothing, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyValueChangeEvent, type UmbPropertyEditorConfigCollection, } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbBlockGridGroupType, UmbBlockGridGroupTypeConfiguration } from '@umbraco-cms/backoffice/block'; +import { + UMB_BLOCK_GRID_TYPE, + type UmbBlockGridGroupType, + type UmbBlockGridGroupTypeConfiguration, +} from '@umbraco-cms/backoffice/block'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UMB_PROPERTY_DATASET_CONTEXT, type UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; @@ -66,12 +61,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this.#blockTypeWorkspaceModalRegistration?.destroy(); - const entityType = 'block-grid-type'; - this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addAdditionalPath(entityType) + .addAdditionalPath(UMB_BLOCK_GRID_TYPE) .onSetup(() => { - return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } }; + return { data: { entityType: UMB_BLOCK_GRID_TYPE, preset: {} }, modal: { size: 'large' } }; }) .observeRouteBuilder((routeBuilder) => { const newpath = routeBuilder({}); @@ -141,9 +134,8 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement (group) => html`${group.key ? this.#renderGroupInput(group.key, group.name) : nothing} this.#onCreate(e, group.key ?? null)} @change=${(e: CustomEvent) => this.#onChange(e, group.key)}>`, )}`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts index a3fb79a2f7..3a51638811 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts @@ -1,5 +1,7 @@ import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../block-type/index.js'; +export const UMB_BLOCK_GRID_TYPE = 'block-grid-type'; + export interface UmbBlockGridType extends UmbBlockTypeBaseModel { columnSpanOptions: Array; allowAtRoot: boolean; From 8b4ddaa92fae35c3ddffeeb5491d28929ca3315a Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 25 Jan 2024 13:55:57 +0100 Subject: [PATCH 22/30] block list --- ...i-block-list-type-configuration.element.ts | 37 ++++++++++++++++++- .../src/packages/block/block-list/types.ts | 2 + ...shboard-localization-dictionary.element.ts | 1 + 3 files changed, 38 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts index 5948997fcb..57744eb391 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts @@ -1,10 +1,12 @@ import type { UmbBlockTypeBaseModel, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import { UMB_BLOCK_LIST_TYPE } from '../../types.js'; /** * @element umb-property-editor-ui-block-list-type-configuration @@ -14,16 +16,47 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { + #blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController< + typeof UMB_WORKSPACE_MODAL.DATA, + typeof UMB_WORKSPACE_MODAL.VALUE + >; + + @state() + private _workspacePath?: string; + + constructor() { + super(); + this.#blockTypeWorkspaceModalRegistration?.destroy(); + + this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath(UMB_BLOCK_LIST_TYPE) + .onSetup(() => { + return { data: { entityType: UMB_BLOCK_LIST_TYPE, preset: {} }, modal: { size: 'large' } }; + }) + .observeRouteBuilder((routeBuilder) => { + const newpath = routeBuilder({}); + this._workspacePath = newpath; + }); + } + @property({ attribute: false }) value: UmbBlockTypeBaseModel[] = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; + #onCreate(e: CustomEvent) { + const selectedElementType = e.detail.contentElementTypeKey; + if (selectedElementType) { + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null'); + } + } + render() { return html` { this.value = (e.target as UmbInputBlockTypeElement).value; }}>`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts index dee3748bfd..bd1e8053c9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts @@ -1,5 +1,7 @@ import type { UmbBlockTypeBaseModel } from '../block-type/index.js'; import type { UmbBlockLayoutBaseModel } from '../index.js'; +export const UMB_BLOCK_LIST_TYPE = 'block-list-type'; + export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {} export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts index 6f82558c59..9f60055470 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts @@ -42,6 +42,7 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement { const { data } = await this.#repo.list(0, 1000); this.#dictionaryItems = data?.items ?? []; + this.#setTableColumns(); this.#setTableItems(); } From 1ec7129a630020acd7454ad4fa270b30321d5ba8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:14:57 +0100 Subject: [PATCH 23/30] remove comment --- .../packages/block/block/workspace/block-workspace.context.ts | 1 - 1 file changed, 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 e205abc1a3..7fe74f0be1 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 @@ -45,7 +45,6 @@ export class UmbBlockWorkspaceContext< readonly name = this.#label.asObservable(); constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { - // TODO: We don't need a repo here, so maybe we should not require this of the UmbEditableWorkspaceContextBase super(host, workspaceArgs.manifest.alias); this.#entityType = workspaceArgs.manifest.meta?.entityType; this.workspaceAlias = workspaceArgs.manifest.alias; From e35911cbc47ecaee47e7cec025847701f9bdd075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:18:28 +0100 Subject: [PATCH 24/30] order imports --- .../property-editor-ui-block-list-type-configuration.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts index 57744eb391..a1a1c7de07 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts @@ -1,12 +1,12 @@ import type { UmbBlockTypeBaseModel, UmbInputBlockTypeElement } from '../../../block-type/index.js'; import '../../../block-type/components/input-block-type/index.js'; +import { UMB_BLOCK_LIST_TYPE } from '../../types.js'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; -import { UMB_BLOCK_LIST_TYPE } from '../../types.js'; /** * @element umb-property-editor-ui-block-list-type-configuration From 686f9b6a419667a9723283e891398cb39ebe753b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:54:58 +0100 Subject: [PATCH 25/30] fix js issue --- ...property-editor-ui-block-grid-type-configuration.element.ts | 2 +- ...property-editor-ui-block-list-type-configuration.element.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 9714e9cd08..10a4d4c3f9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -105,7 +105,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement #onCreate(e: CustomEvent, groupKey: string | null) { const selectedElementType = e.detail.contentElementTypeKey; if (selectedElementType) { - this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + groupKey); + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + groupKey + '/' + selectedElementType); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts index a1a1c7de07..b8941ca8b1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts @@ -48,7 +48,8 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement #onCreate(e: CustomEvent) { const selectedElementType = e.detail.contentElementTypeKey; if (selectedElementType) { - this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null'); + // We do not have any groups here, which is why we pass null as the groupKey. + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/null/' + selectedElementType); } } From 3a28c13e46a34f04790ec2a3662d541c63b98db9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:55:10 +0100 Subject: [PATCH 26/30] remove space --- .../components/input-block-type/input-block-type.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 982b51eb4d..1dcad5fdf3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -75,7 +75,7 @@ export class UmbInputBlockTypeElement< } render() { - return html`
+ return html`
${repeat(this.value, (block) => block.contentElementTypeKey, this.#renderItem)} ${this.#renderButton()}
`; } From 9e282d7a310f6cc31b2cb0fae1e7532ff7a9f5fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:55:19 +0100 Subject: [PATCH 27/30] remove log --- .../block/block-type/workspace/block-type-workspace.context.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts index 5883299981..82ca7316ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts @@ -65,8 +65,6 @@ export class UmbBlockTypeWorkspaceContext Date: Fri, 26 Jan 2024 09:55:41 +0100 Subject: [PATCH 28/30] add () --- .../design/document-type-workspace-view-edit.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts index 9b9920205b..f6babbd0eb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts @@ -11,12 +11,12 @@ import type { PropertyTypeContainerModelBaseModel, } from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; -import type { UmbRoute , UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbConfirmModalData } from '@umbraco-cms/backoffice/modal'; import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbSorterConfig} from '@umbraco-cms/backoffice/sorter'; +import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { @@ -216,7 +216,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple if (!tabId) return; this._workspaceContext?.structure.removeContainer(null, tabId); this._tabsStructureHelper?.isOwnerContainer(tabId) - ? window.history.replaceState(null, '', this._routerPath + this._routes[0]?.path ?? '/root') + ? window.history.replaceState(null, '', this._routerPath + (this._routes[0]?.path ?? '/root')) : ''; } async #addTab() { From cd9c729f33fbf58eb23be3e19da820fbc44fc3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 09:55:52 +0100 Subject: [PATCH 29/30] add () --- .../views/design/media-type-workspace-view-edit.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts index a920094e78..cd24e5cf44 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts @@ -11,12 +11,12 @@ import type { PropertyTypeContainerModelBaseModel, } from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; -import type { UmbRoute , UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbConfirmModalData } from '@umbraco-cms/backoffice/modal'; import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbSorterConfig} from '@umbraco-cms/backoffice/sorter'; +import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { @@ -216,7 +216,7 @@ export class UmbMediaTypeWorkspaceViewEditElement extends UmbLitElement implemen if (!tabId) return; this._workspaceContext?.structure.removeContainer(null, tabId); this._tabsStructureHelper?.isOwnerContainer(tabId) - ? window.history.replaceState(null, '', this._routerPath + this._routes[0]?.path ?? '/root') + ? window.history.replaceState(null, '', this._routerPath + (this._routes[0]?.path ?? '/root')) : ''; } async #addTab() { From 5d25632ae6e7d5420b75e46ed4e22d8ef3b35bc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 26 Jan 2024 12:39:17 +0100 Subject: [PATCH 30/30] Revert "fix js issue" This reverts commit 686f9b6a419667a9723283e891398cb39ebe753b. --- ...property-editor-ui-block-grid-type-configuration.element.ts | 2 +- ...property-editor-ui-block-list-type-configuration.element.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 10a4d4c3f9..9714e9cd08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -105,7 +105,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement #onCreate(e: CustomEvent, groupKey: string | null) { const selectedElementType = e.detail.contentElementTypeKey; if (selectedElementType) { - this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + groupKey + '/' + selectedElementType); + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + groupKey); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts index b8941ca8b1..a1a1c7de07 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts @@ -48,8 +48,7 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement #onCreate(e: CustomEvent) { const selectedElementType = e.detail.contentElementTypeKey; if (selectedElementType) { - // We do not have any groups here, which is why we pass null as the groupKey. - this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/null/' + selectedElementType); + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null'); } }