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; }