From 0c35c31fd10fa7bd0fd8d7f70fc235723d43615b Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 9 Jan 2024 10:08:54 +0100 Subject: [PATCH 01/10] block catalogue modal --- .../property-editor-ui-block-list.element.ts | 28 ++++- .../block-catalogue-modal.element.ts | 110 ++++++++++++++++++ .../block-catalogue-modal.stories.ts | 19 +++ .../packages/core/modal/common/manifests.ts | 6 + .../token/block-catalogue-modal.token.ts | 21 ++++ .../src/packages/core/modal/token/index.ts | 1 + 6 files changed, 183 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index af543665f0..21274fb392 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -14,6 +14,12 @@ import '../../components/block-list-block/index.js'; import { buildUdi } from '@umbraco-cms/backoffice/utils'; import { UmbId } from '@umbraco-cms/backoffice/id'; import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import { + UMB_BLOCK_CATALOGUE_MODAL, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UmbModalManagerContext, +} from '@umbraco-cms/backoffice/modal'; +import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {} @@ -72,8 +78,15 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement @state() _layouts: Array = []; + #modalContext?: UmbModalManagerContext; + constructor() { super(); + + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => { + this.#modalContext = instance; + }); + // TODO: Prevent initial notification from these observes: this.observe(this.#context.layouts, (layouts) => { this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS] = layouts; @@ -95,11 +108,21 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }); } - #openBlockCatalogue() { + async #openBlockCatalogue() { // Open modal. - // TEMP Hack: + const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; + const modalContext = this.#modalContext?.open(UMB_BLOCK_CATALOGUE_MODAL, { + data: { unique: 'dt-blockList' }, + }); + + const data = await modalContext?.onSubmit(); + console.log('submitted', data); + if (!data) return; + + // TEMP Hack: + /* const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; const contentUdi = buildUdi('element', UmbId.new()); @@ -112,6 +135,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }, contentElementTypeKey, ); + */ } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts new file mode 100644 index 0000000000..1a73e293e9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts @@ -0,0 +1,110 @@ +import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; +import { DATA_TYPE_DETAIL_REPOSITORY_ALIAS, UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type'; +import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; +import { UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type'; +import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { + UmbBlockCatalogueModalData, + UmbBlockCatalogueModalValue, + UmbModalBaseElement, +} from '@umbraco-cms/backoffice/modal'; + +type UmbBlockTypeModel = UmbBlockTypeBase & Partial; + +@customElement('umb-block-catalogue-modal') +export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< + UmbBlockCatalogueModalData, + UmbBlockCatalogueModalValue +> { + @state() + private _blocks: Array = [ + { + contentElementTypeKey: 'something', + backgroundColor: 'cyan', + iconColor: 'black', + name: 'Mock Block', + label: 'Mock Block', + }, + { + contentElementTypeKey: 'something2', + name: 'Mock Block 2', + backgroundColor: 'cyan', + iconColor: 'black', + icon: 'icon-wand', + }, + { + contentElementTypeKey: 'something3', + label: 'Mock Block 3', + backgroundColor: 'cyan', + iconColor: 'black', + }, + ]; + + connectedCallback() { + super.connectedCallback(); + if (!this.data) return; + + if (this.modalContext) { + this.observe(this.modalContext.value, (value) => { + // + }); + } + + this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => { + console.log(context); + }); + } + + #partialUpdateBlock(linkObject: any) { + //this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } }); + } + + render() { + // Create Empty tab + return html` + + +
+ ${repeat( + this._blocks, + (block) => block.label, + (block) => + html` + + `, + )} +
+ +
+ + +
+ + `; + } + + static styles = [ + css` + uui-box div { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(min(119px, 100%), 1fr)); + } + `, + ]; +} + +export default UmbBlockCatalogueModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-block-catalogue-modal': UmbBlockCatalogueModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts new file mode 100644 index 0000000000..4503994ecc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts @@ -0,0 +1,19 @@ +import '../../../components/body-layout/body-layout.element.js'; +import './block-catalogue-modal.element.js'; + +import { Meta, Story } from '@storybook/web-components'; +import type { UmbBlockCatalogueModalElement } from './block-catalogue-modal.element.js'; +import { html } from '@umbraco-cms/backoffice/external/lit'; + +export default { + title: 'API/Modals/Layouts/Block Catalogue', + component: 'umb-block-catalogue-modal', + id: 'umb-block-catalogue-modal', +} as Meta; + +export const Overview: Story = () => html` + + +`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts index 033f818926..9d3c20fe93 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts @@ -1,6 +1,12 @@ import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; const modals: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.BlockCatalogue', + name: 'Block Catalogue Modal', + js: () => import('./block-catalogue/block-catalogue-modal.element.js'), + }, { type: 'modal', alias: 'Umb.Modal.Confirm', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts new file mode 100644 index 0000000000..2f1d0496a4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts @@ -0,0 +1,21 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbBlockCatalogueModalData { + //Which unique should be sent? Document, Document Type or Data Type? + unique: string; + view?: 'clipboard' | 'createEmpty'; +} + +export interface UmbBlockCatalogueModalValue { + content: string; +} + +export const UMB_BLOCK_CATALOGUE_MODAL = new UmbModalToken( + 'Umb.Modal.BlockCatalogue', + { + modal: { + type: 'sidebar', + size: 'small', + }, + }, +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts index b6302f9905..a959939e1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts @@ -1,3 +1,4 @@ +export * from './block-catalogue-modal.token.js'; export * from './change-password-modal.token.js'; export * from './code-editor-modal.token.js'; export * from './confirm-modal.token.js'; From 94f908455b2b3b71430e2cdb242ef78295c50709 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:06:03 +0100 Subject: [PATCH 02/10] move modal setup views --- .../property-editor-ui-block-list.element.ts | 26 +-- .../src/packages/block/block-type/types.ts | 1 + .../src/packages/block/block/index.ts | 1 + .../src/packages/block/block/manifests.ts | 3 + .../block-catalogue-modal.element.ts | 151 ++++++++++++++++++ .../block-catalogue-modal.token.ts | 7 +- .../block/modals/block-catalogue/index.ts | 2 + .../src/packages/block/block/modals/index.ts | 1 + .../packages/block/block/modals/manifests.ts | 12 ++ .../src/packages/block/index.ts | 1 + .../src/packages/block/manifests.ts | 9 +- .../block-catalogue-modal.element.ts | 110 ------------- .../block-catalogue-modal.stories.ts | 19 --- .../packages/core/modal/common/manifests.ts | 6 - .../src/packages/core/modal/token/index.ts | 1 - 15 files changed, 201 insertions(+), 149 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts rename src/Umbraco.Web.UI.Client/src/packages/{core/modal/token => block/block/modals/block-catalogue}/block-catalogue-modal.token.ts (75%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/modals/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block/modals/manifests.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 21274fb392..192a7eb4eb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -5,6 +5,8 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { + UMB_BLOCK_CATALOGUE_MODAL, + UmbBlockCatalogueView, UmbBlockLayoutBaseModel, UmbBlockManagerContext, UmbBlockTypeBase, @@ -14,12 +16,7 @@ import '../../components/block-list-block/index.js'; import { buildUdi } from '@umbraco-cms/backoffice/utils'; import { UmbId } from '@umbraco-cms/backoffice/id'; import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; -import { - UMB_BLOCK_CATALOGUE_MODAL, - UMB_MODAL_MANAGER_CONTEXT_TOKEN, - UmbModalManagerContext, -} from '@umbraco-cms/backoffice/modal'; -import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; +import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {} @@ -108,13 +105,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }); } - async #openBlockCatalogue() { + async #openBlockCatalogue(view?: UmbBlockCatalogueView) { // Open modal. const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; const modalContext = this.#modalContext?.open(UMB_BLOCK_CATALOGUE_MODAL, { - data: { unique: 'dt-blockList' }, + data: { unique: 'dt-blockList', view }, }); const data = await modalContext?.onSubmit(); @@ -147,7 +144,18 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement `, )} - Add`; + + this.#openBlockCatalogue('createEmpty')} + >Add + this.#openBlockCatalogue('clipboard')}> + + + `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts index f8b890e916..66fd1d0d23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts @@ -9,4 +9,5 @@ export interface UmbBlockTypeBase { iconColor?: string; backgroundColor?: string; editorSize?: UUIModalSidebarSize; + icon?: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts new file mode 100644 index 0000000000..9e897c4aa4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts @@ -0,0 +1 @@ +export * from './modals/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/manifests.ts new file mode 100644 index 0000000000..684effeb51 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/manifests.ts @@ -0,0 +1,3 @@ +import { manifests as modalManifests } from './modals/manifests.js'; + +export const manifests = [...modalManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts new file mode 100644 index 0000000000..c75adde28e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -0,0 +1,151 @@ +import { + UmbBlockCatalogueModalData, + UmbBlockCatalogueModalValue, + UmbBlockCatalogueView, + UmbBlockTypeBase, +} from '@umbraco-cms/backoffice/block'; +import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; +import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; + +@customElement('umb-block-catalogue-modal') +export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< + UmbBlockCatalogueModalData, + UmbBlockCatalogueModalValue +> { + @state() + private _blocks: Array = [ + { + contentElementTypeKey: 'block-catalogue-currency', + backgroundColor: '#FFD700', + iconColor: 'black', + icon: 'icon-coins', + label: 'Currency', + }, + { + contentElementTypeKey: 'block-catalogue-niels-cup-of-coffee', + backgroundColor: '#964B00', + iconColor: '#FFFDD0', + icon: 'icon-coffee', + label: "Niels' Cup of Coffee", + }, + { + contentElementTypeKey: 'block-catalogue-performance', + label: 'Performance', + icon: 'icon-dashboard', + }, + { + contentElementTypeKey: 'block-catalogue-weather', + label: 'Weather', + icon: 'icon-snow', + }, + { + contentElementTypeKey: 'block-catalogue-servers', + label: 'Servers', + icon: 'icon-stacked-disks', + }, + ]; + + @state() + view?: UmbBlockCatalogueView; + + connectedCallback() { + super.connectedCallback(); + if (!this.data) return; + + this.view = this.data.view ?? 'createEmpty'; + + if (this.modalContext) { + this.observe(this.modalContext.value, (value) => { + // + }); + } + + this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => { + console.log(context); + }); + } + + #partialUpdateBlock(linkObject: any) { + //this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } }); + } + + render() { + return html` + + ${this.#renderViews()} + +
${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()}
+ +
+ + +
+ + `; + } + + #renderClipboard() { + return html`Clipboard`; + } + + #renderCreateEmpty() { + return repeat( + this._blocks, + (block) => block.label, + (block) => + html` + + `, + ); + } + + #renderViews() { + return html` + + (this.view = 'createEmpty')}> + Create Empty + + + (this.view = 'clipboard')}> + Clipboard + + + + `; + } + + static styles = [ + css` + uui-box div { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); + } + + uui-tab-group { + --uui-tab-divider: var(--uui-color-border); + border-left: 1px solid var(--uui-color-border); + border-right: 1px solid var(--uui-color-border); + } + `, + ]; +} + +export default UmbBlockCatalogueModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-block-catalogue-modal': UmbBlockCatalogueModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts similarity index 75% rename from src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts index 2f1d0496a4..d5081ca0ae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/block-catalogue-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts @@ -1,11 +1,12 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockCatalogueModalData { - //Which unique should be sent? Document, Document Type or Data Type? unique: string; - view?: 'clipboard' | 'createEmpty'; + view?: UmbBlockCatalogueView; } +export type UmbBlockCatalogueView = 'clipboard' | 'createEmpty'; + export interface UmbBlockCatalogueModalValue { content: string; } @@ -15,7 +16,7 @@ export const UMB_BLOCK_CATALOGUE_MODAL = new UmbModalToken = [ + { + type: 'modal', + alias: 'Umb.Modal.BlockCatalogue', + name: 'Block Catalogue Modal', + js: () => import('./block-catalogue/block-catalogue-modal.element.js'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/index.ts index b37db79c03..8428775ae0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/index.ts @@ -1,3 +1,4 @@ +export * from './block/index.js'; export * from './block-grid/index.js'; export * from './block-list/index.js'; export * from './block-manager/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts index 1c311c6826..02b8ef48de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts @@ -1,6 +1,13 @@ +import { manifests as blockManifests } from './block/manifests.js'; import { manifests as blockGridManifests } from './block-grid/manifests.js'; import { manifests as blockListManifests } from './block-list/manifests.js'; import { manifests as blockRteManifests } from './block-rte/manifests.js'; import { manifests as blockTypeManifests } from './block-type/manifests.js'; -export const manifests = [...blockTypeManifests, ...blockListManifests, ...blockGridManifests, ...blockRteManifests]; +export const manifests = [ + ...blockManifests, + ...blockTypeManifests, + ...blockListManifests, + ...blockGridManifests, + ...blockRteManifests, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts deleted file mode 100644 index 1a73e293e9..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.element.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; -import { DATA_TYPE_DETAIL_REPOSITORY_ALIAS, UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type'; -import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; -import { UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type'; -import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import { - UmbBlockCatalogueModalData, - UmbBlockCatalogueModalValue, - UmbModalBaseElement, -} from '@umbraco-cms/backoffice/modal'; - -type UmbBlockTypeModel = UmbBlockTypeBase & Partial; - -@customElement('umb-block-catalogue-modal') -export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< - UmbBlockCatalogueModalData, - UmbBlockCatalogueModalValue -> { - @state() - private _blocks: Array = [ - { - contentElementTypeKey: 'something', - backgroundColor: 'cyan', - iconColor: 'black', - name: 'Mock Block', - label: 'Mock Block', - }, - { - contentElementTypeKey: 'something2', - name: 'Mock Block 2', - backgroundColor: 'cyan', - iconColor: 'black', - icon: 'icon-wand', - }, - { - contentElementTypeKey: 'something3', - label: 'Mock Block 3', - backgroundColor: 'cyan', - iconColor: 'black', - }, - ]; - - connectedCallback() { - super.connectedCallback(); - if (!this.data) return; - - if (this.modalContext) { - this.observe(this.modalContext.value, (value) => { - // - }); - } - - this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => { - console.log(context); - }); - } - - #partialUpdateBlock(linkObject: any) { - //this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } }); - } - - render() { - // Create Empty tab - return html` - - -
- ${repeat( - this._blocks, - (block) => block.label, - (block) => - html` - - `, - )} -
- -
- - -
- - `; - } - - static styles = [ - css` - uui-box div { - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(min(119px, 100%), 1fr)); - } - `, - ]; -} - -export default UmbBlockCatalogueModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-block-catalogue-modal': UmbBlockCatalogueModalElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts deleted file mode 100644 index 4503994ecc..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/block-catalogue/block-catalogue-modal.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import '../../../components/body-layout/body-layout.element.js'; -import './block-catalogue-modal.element.js'; - -import { Meta, Story } from '@storybook/web-components'; -import type { UmbBlockCatalogueModalElement } from './block-catalogue-modal.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -export default { - title: 'API/Modals/Layouts/Block Catalogue', - component: 'umb-block-catalogue-modal', - id: 'umb-block-catalogue-modal', -} as Meta; - -export const Overview: Story = () => html` - - -`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts index 9d3c20fe93..033f818926 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts @@ -1,12 +1,6 @@ import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; const modals: Array = [ - { - type: 'modal', - alias: 'Umb.Modal.BlockCatalogue', - name: 'Block Catalogue Modal', - js: () => import('./block-catalogue/block-catalogue-modal.element.js'), - }, { type: 'modal', alias: 'Umb.Modal.Confirm', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts index a959939e1b..b6302f9905 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts @@ -1,4 +1,3 @@ -export * from './block-catalogue-modal.token.js'; export * from './change-password-modal.token.js'; export * from './code-editor-modal.token.js'; export * from './confirm-modal.token.js'; From e5285ef6c87a8663936be265bccc6fb1b5d0b386 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:18:55 +0100 Subject: [PATCH 03/10] property editor button --- .../property-editor-ui-block-list.element.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 192a7eb4eb..cc366c5e9b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -148,11 +148,14 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement this.#openBlockCatalogue('createEmpty')} - >Add${this.localize.term('content_createEmpty')} - this.#openBlockCatalogue('clipboard')}> + this.#openBlockCatalogue('clipboard')}> `; @@ -166,6 +169,11 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement flex-direction: column; align-items: stretch; } + + uui-button-group { + display: grid; + grid-template-columns: 1fr auto; + } `, ]; } From 3c3b2e4a36900e775809364181c15a13a06be4b5 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 13:21:35 +0100 Subject: [PATCH 04/10] render groups --- .../src/external/lodash/index.ts | 2 +- .../src/packages/block/block-type/types.ts | 6 +- .../block-catalogue-modal.element.ts | 90 ++++++++++++------- 3 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/external/lodash/index.ts b/src/Umbraco.Web.UI.Client/src/external/lodash/index.ts index 50d5b88be4..a293c363df 100644 --- a/src/Umbraco.Web.UI.Client/src/external/lodash/index.ts +++ b/src/Umbraco.Web.UI.Client/src/external/lodash/index.ts @@ -1 +1 @@ -export { debounce, clamp, camelCase } from 'lodash-es'; +export { debounce, clamp, camelCase, groupBy } from 'lodash-es'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts index 66fd1d0d23..41b7db2544 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts @@ -9,5 +9,9 @@ export interface UmbBlockTypeBase { iconColor?: string; backgroundColor?: string; editorSize?: UUIModalSidebarSize; - icon?: string; + icon?: string; // remove later +} + +export interface UmbBlockTypeWithGroupKey extends UmbBlockTypeBase { + groupKey?: null | string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index c75adde28e..a156780039 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -2,10 +2,11 @@ import { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, UmbBlockCatalogueView, - UmbBlockTypeBase, + UmbBlockTypeWithGroupKey, } from '@umbraco-cms/backoffice/block'; import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; -import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { groupBy } from '@umbraco-cms/backoffice/external/lodash'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @customElement('umb-block-catalogue-modal') @@ -14,21 +15,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< UmbBlockCatalogueModalValue > { @state() - private _blocks: Array = [ - { - contentElementTypeKey: 'block-catalogue-currency', - backgroundColor: '#FFD700', - iconColor: 'black', - icon: 'icon-coins', - label: 'Currency', - }, - { - contentElementTypeKey: 'block-catalogue-niels-cup-of-coffee', - backgroundColor: '#964B00', - iconColor: '#FFFDD0', - icon: 'icon-coffee', - label: "Niels' Cup of Coffee", - }, + private _blocks: Array = [ { contentElementTypeKey: 'block-catalogue-performance', label: 'Performance', @@ -44,6 +31,30 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< label: 'Servers', icon: 'icon-stacked-disks', }, + { + contentElementTypeKey: 'block-catalogue-currency', + backgroundColor: '#FFD700', + iconColor: 'black', + icon: 'icon-coins', + label: 'Currency', + groupKey: 'block-catalogue-demo-blocks-group', + }, + { + contentElementTypeKey: 'block-catalogue-niels-cup-of-coffee', + backgroundColor: '#964B00', + iconColor: '#FFFDD0', + icon: 'icon-coffee', + label: "Niels' Cup of Coffee", + groupKey: 'block-catalogue-demo-blocks-group', + }, + ]; + + @state() + private _blockGroups: Array<{ key: string; name: string }> = [ + { + key: 'block-catalogue-demo-blocks-group', + name: 'Demo Blocks', + }, ]; @state() @@ -74,9 +85,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< return html` ${this.#renderViews()} - -
${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()}
- + ${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()}
block.label, - (block) => - html` - - `, - ); + const blockArrays = groupBy(this._blocks, 'groupKey'); + + const mappedGroupsAndBlocks = Object.entries(blockArrays).map(([key, value]) => { + const group = this._blockGroups.find((group) => group.key === key); + return { name: group?.name, blocks: value }; + }); + + return html` + ${mappedGroupsAndBlocks.map( + (group) => html` + ${group.name ? html`

${group.name}

` : nothing} +
+ ${repeat( + group.blocks, + (block) => block.contentElementTypeKey, + (block) => html` + + + + `, + )} +
+ `, + )} + `; } #renderViews() { @@ -127,7 +153,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< static styles = [ css` - uui-box div { + uui-box .blockGroup { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); From 99dadccde159351dc2f0e1f275aec1d43f69493f Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 14:58:25 +0100 Subject: [PATCH 05/10] mock data and send to modal --- .../src/mocks/data/data-type.data.ts | 77 +++++ .../data/document-type/document-type.data.ts | 298 ++++++++++++++++++ .../property-editor-ui-block-list.element.ts | 17 +- .../src/packages/block/block-type/types.ts | 9 +- .../block-catalogue-modal.element.ts | 43 +-- .../block-catalogue-modal.token.ts | 3 + 6 files changed, 401 insertions(+), 46 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 bd43a76f1f..1202e47653 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 @@ -491,6 +491,40 @@ export const data: Array = label: 'Mocked Block Type for Block List', contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', }, + { + label: 'Mocked Coffee Block', + contentElementTypeKey: 'coffee-umbraco-demo-block-id', + iconColor: '#FFFDD0', + backgroundColor: '#633f32', + editorSize: 'medium', + icon: 'icon-coffee', + }, + + { + label: 'Headline', + contentElementTypeKey: 'headline-umbraco-demo-block-id', + backgroundColor: 'gold', + editorSize: 'medium', + icon: 'icon-edit', + }, + { + label: 'Image', + contentElementTypeKey: 'image-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-picture', + }, + { + label: 'Rich Text', + contentElementTypeKey: 'rich-text-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-diploma', + }, + { + label: 'Two Column Layout', + contentElementTypeKey: 'two-column-layout-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-book-alt', + }, ], }, ], @@ -560,6 +594,10 @@ export const data: Array = editorAlias: 'Umbraco.BlockGrid', editorUiAlias: 'Umb.PropertyEditorUi.BlockGrid', values: [ + { + alias: 'blockGroups', + value: [{ key: 'demo-block-group-id', name: 'Demo Blocks' }], + }, { alias: 'blocks', value: [ @@ -567,6 +605,45 @@ export const data: Array = label: 'Mocked Block Type for Block Grid', contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', }, + { + label: 'Mocked Coffee Block', + contentElementTypeKey: 'coffee-umbraco-demo-block-id', + iconColor: '#FFFDD0', + backgroundColor: '#633f32', + editorSize: 'medium', + icon: 'icon-coffee', + }, + + { + label: 'Headline', + contentElementTypeKey: 'headline-umbraco-demo-block-id', + backgroundColor: 'gold', + editorSize: 'medium', + icon: 'icon-edit', + groupKey: 'demo-block-group-id', + }, + { + label: 'Image', + contentElementTypeKey: 'image-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-picture', + + groupKey: 'demo-block-group-id', + }, + { + label: 'Rich Text', + contentElementTypeKey: 'rich-text-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-diploma', + groupKey: 'demo-block-group-id', + }, + { + label: 'Two Column Layout', + contentElementTypeKey: 'two-column-layout-umbraco-demo-block-id', + editorSize: 'medium', + icon: 'icon-book-alt', + groupKey: 'demo-block-group-id', + }, ], }, ], 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 48ea73e4b4..921463a1ca 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 @@ -1198,4 +1198,302 @@ export const data: Array = [ keepLatestVersionPerDayForDays: null, }, }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'folder-umbraco-demo-blocks-id', + alias: 'folderUmbracoDemoBlocks', + name: 'Umbraco Demo Blocks', + description: null, + icon: 'icon-folder', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: false, + hasChildren: true, + isContainer: false, + parentId: null, + isFolder: true, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [], + containers: [], + }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'coffee-umbraco-demo-block-id', + alias: 'coffeeUmbracoDemoBlock', + name: 'Favorite Coffee', + description: null, + icon: 'icon-coffee', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: 'folder-umbraco-demo-blocks-id', + isFolder: false, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [ + { + id: 'coffee-name-id', + containerId: 'coffee-content-group-key', + alias: 'coffeeName', + name: 'Name of Coffee', + description: '', + dataTypeId: 'dt-textBox', + variesByCulture: false, + variesBySegment: false, + sortOrder: 10, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + { + id: 'coffee-size-id', + containerId: 'coffee-content-group-key', + alias: 'coffeeSize', + name: 'Amount (deciliter)', + description: '', + dataTypeId: 'dt-integer', + variesByCulture: false, + variesBySegment: false, + sortOrder: 10, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: 'coffee-content-group-key', + parentId: null, + name: 'Content', + type: 'Group', + sortOrder: 0, + }, + ], + }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'headline-umbraco-demo-block-id', + alias: 'headlineUmbracoDemoBlock', + name: 'Headline', + description: null, + icon: 'icon-edit', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: 'folder-umbraco-demo-blocks-id', + isFolder: false, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [ + { + id: 'headline-id', + containerId: 'headline-content-group-key', + alias: 'headline', + name: 'Headline', + description: '', + dataTypeId: 'dt-textBox', + variesByCulture: false, + variesBySegment: false, + sortOrder: 10, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: 'headline-content-group-key', + parentId: null, + name: 'Content', + type: 'Group', + sortOrder: 0, + }, + ], + }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'image-umbraco-demo-block-id', + alias: 'imageUmbracoDemoBlock', + name: 'Image', + description: null, + icon: 'icon-picture', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: 'folder-umbraco-demo-blocks-id', + isFolder: false, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [ + { + id: 'image-id', + containerId: 'image-content-group-key', + alias: 'image', + name: 'Image', + description: '', + dataTypeId: 'dt-mediaPicker', + variesByCulture: false, + variesBySegment: false, + sortOrder: 10, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: 'image-content-group-key', + parentId: null, + name: 'Content', + type: 'Group', + sortOrder: 0, + }, + ], + }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'rich-text-umbraco-demo-block-id', + alias: 'richTextUmbracoDemoBlock', + name: 'Rich Text', + description: null, + icon: 'icon-diploma', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: 'folder-umbraco-demo-blocks-id', + isFolder: false, + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + properties: [ + { + id: 'rich-text-id', + containerId: 'rich-text-content-group-key', + alias: 'richText', + name: 'Text', + description: '', + dataTypeId: 'dt-richTextEditor', + variesByCulture: false, + variesBySegment: false, + sortOrder: 10, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: 'rich-text-content-group-key', + parentId: null, + name: 'Content', + type: 'Group', + sortOrder: 0, + }, + ], + }, + { + type: 'document-type', + allowedTemplateIds: [], + defaultTemplateId: null, + id: 'two-column-layout-umbraco-demo-block-id', + alias: 'twoColumnLayoutUmbracoDemoBlock', + name: 'Two Column Layout', + description: null, + icon: 'icon-book-alt', + allowedAsRoot: true, + variesByCulture: false, + variesBySegment: false, + isElement: true, + hasChildren: false, + isContainer: false, + parentId: 'folder-umbraco-demo-blocks-id', + 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-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index cc366c5e9b..455a344e68 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -70,6 +70,9 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement @state() private _limitMax?: number; + @state() + private _blocks?: Array; + #context = new UmbBlockManagerContext(this); @state() @@ -103,19 +106,23 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement // Notify that the value has changed. //console.log('settings changed', this._value); }); + this.observe(this.#context.blockTypes, (blockTypes) => { + this._blocks = blockTypes; + }); } async #openBlockCatalogue(view?: UmbBlockCatalogueView) { // Open modal. - const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; + //const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; const modalContext = this.#modalContext?.open(UMB_BLOCK_CATALOGUE_MODAL, { - data: { unique: 'dt-blockList', view }, + data: { unique: 'dt-blockList', blocks: this._blocks ?? [], view }, }); const data = await modalContext?.onSubmit(); console.log('submitted', data); + if (!data) return; // TEMP Hack: @@ -149,9 +156,9 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement id="add-button" look="placeholder" label=${this.localize.term('content_createEmpty')} - @click=${() => this.#openBlockCatalogue('createEmpty')} - >${this.localize.term('content_createEmpty')} + @click=${() => this.#openBlockCatalogue('createEmpty')}> + ${this.localize.term('content_createEmpty')} + { @state() - private _blocks: Array = [ - { - contentElementTypeKey: 'block-catalogue-performance', - label: 'Performance', - icon: 'icon-dashboard', - }, - { - contentElementTypeKey: 'block-catalogue-weather', - label: 'Weather', - icon: 'icon-snow', - }, - { - contentElementTypeKey: 'block-catalogue-servers', - label: 'Servers', - icon: 'icon-stacked-disks', - }, - { - contentElementTypeKey: 'block-catalogue-currency', - backgroundColor: '#FFD700', - iconColor: 'black', - icon: 'icon-coins', - label: 'Currency', - groupKey: 'block-catalogue-demo-blocks-group', - }, - { - contentElementTypeKey: 'block-catalogue-niels-cup-of-coffee', - backgroundColor: '#964B00', - iconColor: '#FFFDD0', - icon: 'icon-coffee', - label: "Niels' Cup of Coffee", - groupKey: 'block-catalogue-demo-blocks-group', - }, - ]; + private _blocks: Array = []; @state() - private _blockGroups: Array<{ key: string; name: string }> = [ - { - key: 'block-catalogue-demo-blocks-group', - name: 'Demo Blocks', - }, - ]; + private _blockGroups: Array<{ key: string; name: string }> = []; @state() view?: UmbBlockCatalogueView; @@ -65,6 +28,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< if (!this.data) return; this.view = this.data.view ?? 'createEmpty'; + this._blocks = this.data.blocks ?? []; + this._blockGroups = this.data.blockGroups ?? []; if (this.modalContext) { this.observe(this.modalContext.value, (value) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts index d5081ca0ae..2d0be87105 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts @@ -1,7 +1,10 @@ +import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockCatalogueModalData { unique: string; + blocks: Array; + blockGroups?: Array<{ name: string; key: string }>; view?: UmbBlockCatalogueView; } From 3a252a800a7e386fc8bfa8ad01580e3a8ee26517 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:30:36 +0100 Subject: [PATCH 06/10] modal data send --- .../src/mocks/data/data-type.data.ts | 1 + .../block-list-block.element.ts | 8 +++++-- .../property-editor-ui-block-list.element.ts | 23 ++++++++----------- .../block-catalogue-modal.element.ts | 18 ++++----------- .../block-catalogue-modal.token.ts | 3 +-- 5 files changed, 22 insertions(+), 31 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 1202e47653..74e7646d41 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 @@ -490,6 +490,7 @@ export const data: Array = { label: 'Mocked Block Type for Block List', contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + icon: 'icon-server-alt', }, { label: 'Mocked Coffee Block', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-block/block-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-block/block-list-block.element.ts index 3bdc1ea204..8c10939823 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-block/block-list-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-block/block-list-block.element.ts @@ -33,6 +33,9 @@ export class UmbPropertyEditorUIBlockListBlockElement extends UmbLitElement impl this.observe(this.#context.label, (label) => { this._label = label; }); + this.observe(this.#context.layout, (layout) => { + console.log('layout', layout); + }); } #requestDelete() { @@ -81,8 +84,9 @@ export class UmbPropertyEditorUIBlockListBlockElement extends UmbLitElement impl } uui-action-bar { position: absolute; - top: 0; - right: 0; + top: 50%; + transform: translateY(-50%); + right: var(--uui-size-2); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 455a344e68..a6e0c3c847 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -112,34 +112,29 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement } async #openBlockCatalogue(view?: UmbBlockCatalogueView) { - // Open modal. - - //const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; - + //Open modal const modalContext = this.#modalContext?.open(UMB_BLOCK_CATALOGUE_MODAL, { - data: { unique: 'dt-blockList', blocks: this._blocks ?? [], view }, + data: { blocks: this._blocks ?? [], view }, }); const data = await modalContext?.onSubmit(); + + /**TODO: Insert next modal for data */ console.log('submitted', data); if (!data) return; - // TEMP Hack: - /* - const contentElementTypeKey = this.#context.getBlockTypes()[0]!.contentElementTypeKey; + const block = this._blocks?.find((x) => x.contentElementTypeKey === data.key); - const contentUdi = buildUdi('element', UmbId.new()); - const settingsUdi = buildUdi('element', UmbId.new()); + if (!block?.contentElementTypeKey) return; this.#context.createBlock( { - contentUdi, - settingsUdi, + contentUdi: buildUdi('element', UmbId.new()), + settingsUdi: buildUdi('element', UmbId.new()), }, - contentElementTypeKey, + block.contentElementTypeKey, ); - */ } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index d9031b6f6b..8e5cf918a1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -30,20 +30,11 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< this.view = this.data.view ?? 'createEmpty'; this._blocks = this.data.blocks ?? []; this._blockGroups = this.data.blockGroups ?? []; - - if (this.modalContext) { - this.observe(this.modalContext.value, (value) => { - // - }); - } - - this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => { - console.log(context); - }); } - #partialUpdateBlock(linkObject: any) { - //this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } }); + #onClickBlock(contentElementTypeKey: string) { + this.modalContext?.updateValue({ key: contentElementTypeKey }); + this.modalContext?.submit(); } render() { @@ -87,7 +78,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< + style="color: ${block.iconColor}" + @open=${() => this.#onClickBlock(block.contentElementTypeKey)}> `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts index 2d0be87105..6dbaa4fc70 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts @@ -2,7 +2,6 @@ import { UmbBlockTypeBase } from '@umbraco-cms/backoffice/block'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockCatalogueModalData { - unique: string; blocks: Array; blockGroups?: Array<{ name: string; key: string }>; view?: UmbBlockCatalogueView; @@ -11,7 +10,7 @@ export interface UmbBlockCatalogueModalData { export type UmbBlockCatalogueView = 'clipboard' | 'createEmpty'; export interface UmbBlockCatalogueModalValue { - content: string; + key: string; } export const UMB_BLOCK_CATALOGUE_MODAL = new UmbModalToken( From 1b6d277bf1703e39da719eb3f998de4e06688db9 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:43:01 +0100 Subject: [PATCH 07/10] list --- .../property-editor-ui-block-list.element.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index a6e0c3c847..2775afbbda 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -1,5 +1,5 @@ import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js'; -import { html, customElement, property, state, styleMap, repeat, css } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -140,11 +140,11 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement render() { return html` ${repeat( this._layouts, - (x) => x.contentUdi, - (layoutEntry) => - html` - - `, + (x, index) => x.contentUdi + index, + (layoutEntry, index) => html` + + ${index !== this._layouts.length - 1 ? html`` : nothing} + `, )} div { display: flex; flex-direction: column; @@ -173,6 +178,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement } uui-button-group { + padding-top: 2px; display: grid; grid-template-columns: 1fr auto; } From 85ce382507bf9aefc2382b8dd90b0b461f92720e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:54:31 +0100 Subject: [PATCH 08/10] small modal --- .../modals/block-catalogue/block-catalogue-modal.element.ts | 5 ++--- .../modals/block-catalogue/block-catalogue-modal.token.ts | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 8e5cf918a1..c9a616e7d7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -40,8 +40,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< render() { return html` - ${this.#renderViews()} - ${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()} + ${this.#renderViews()} ${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()}
Date: Fri, 12 Jan 2024 09:37:24 +0100 Subject: [PATCH 09/10] revert render of inline create --- .../property-editor-ui-block-list.element.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 2775afbbda..0ba6d626a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -140,11 +140,11 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement render() { return html` ${repeat( this._layouts, - (x, index) => x.contentUdi + index, - (layoutEntry, index) => html` - - ${index !== this._layouts.length - 1 ? html`` : nothing} - `, + (x) => x.contentUdi, + (layoutEntry) => + html` + + `, )} Date: Fri, 12 Jan 2024 09:45:25 +0100 Subject: [PATCH 10/10] open clipboard is boolean instead of magic string --- .../property-editor-ui-block-list.element.ts | 9 ++++----- .../block-catalogue-modal.element.ts | 14 +++++--------- .../block-catalogue/block-catalogue-modal.token.ts | 4 +--- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 0ba6d626a8..19250cef57 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -6,7 +6,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UMB_BLOCK_CATALOGUE_MODAL, - UmbBlockCatalogueView, UmbBlockLayoutBaseModel, UmbBlockManagerContext, UmbBlockTypeBase, @@ -111,10 +110,10 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }); } - async #openBlockCatalogue(view?: UmbBlockCatalogueView) { + async #openBlockCatalogue(openClipboard: boolean = false) { //Open modal const modalContext = this.#modalContext?.open(UMB_BLOCK_CATALOGUE_MODAL, { - data: { blocks: this._blocks ?? [], view }, + data: { blocks: this._blocks ?? [], openClipboard }, }); const data = await modalContext?.onSubmit(); @@ -151,13 +150,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement id="add-button" look="placeholder" label=${this.localize.term('content_createEmpty')} - @click=${() => this.#openBlockCatalogue('createEmpty')}> + @click=${() => this.#openBlockCatalogue()}> ${this.localize.term('content_createEmpty')} this.#openBlockCatalogue('clipboard')}> + @click=${() => this.#openBlockCatalogue(true)}> `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index c9a616e7d7..8b1210ccd3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -1,7 +1,6 @@ import { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue, - UmbBlockCatalogueView, UmbBlockTypeWithGroupKey, } from '@umbraco-cms/backoffice/block'; import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'; @@ -21,13 +20,13 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< private _blockGroups: Array<{ key: string; name: string }> = []; @state() - view?: UmbBlockCatalogueView; + openClipboard?: boolean; connectedCallback() { super.connectedCallback(); if (!this.data) return; - this.view = this.data.view ?? 'createEmpty'; + this.openClipboard = this.data.openClipboard ?? false; this._blocks = this.data.blocks ?? []; this._blockGroups = this.data.blockGroups ?? []; } @@ -40,7 +39,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< render() { return html` - ${this.#renderViews()} ${this.view === 'clipboard' ? this.#renderClipboard() : this.#renderCreateEmpty()} + ${this.#renderViews()} ${this.openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()}
- (this.view = 'createEmpty')}> + (this.openClipboard = false)}> Create Empty - (this.view = 'clipboard')}> + (this.openClipboard = true)}> Clipboard diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts index 1b842c20f3..1dda60f105 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts @@ -4,11 +4,9 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbBlockCatalogueModalData { blocks: Array; blockGroups?: Array<{ name: string; key: string }>; - view?: UmbBlockCatalogueView; + openClipboard?: boolean; } -export type UmbBlockCatalogueView = 'clipboard' | 'createEmpty'; - export interface UmbBlockCatalogueModalValue { key: string; }