mock data and send to modal

src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts

@@ -491,6 +491,40 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 						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<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		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<DataTypeResponseModel | FolderTreeItemResponseModel> =
 						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',
+					},
 				],
 			},
 		],

src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts

@@ -1198,4 +1198,302 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 			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: [],
+	},
 ];

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<UmbBlockTypeBase>;
+
 	#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')}</uui-button
-				>
+					@click=${() => this.#openBlockCatalogue('createEmpty')}>
+					${this.localize.term('content_createEmpty')}
+				</uui-button>
 				<uui-button
 					label=${this.localize.term('content_createFromClipboard')}
 					look="placeholder"

src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts

@@ -12,6 +12,11 @@ export interface UmbBlockTypeBase {
 	icon?: string; // remove later
 }
 
-export interface UmbBlockTypeWithGroupKey extends UmbBlockTypeBase {
-	groupKey?: null | string;
+export interface UmbBlockTypeGroup {
+	name?: string | null;
+	key: string;
+}
+
+export interface UmbBlockTypeWithGroupKey extends UmbBlockTypeBase {
+	groupKey?: string | null;
 }

src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts

@@ -15,47 +15,10 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	UmbBlockCatalogueModalValue
 > {
 	@state()
-	private _blocks: Array<UmbBlockTypeWithGroupKey> = [
-		{
-			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<UmbBlockTypeWithGroupKey> = [];
 
 	@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) => {

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<UmbBlockTypeBase>;
+	blockGroups?: Array<{ name: string; key: string }>;
 	view?: UmbBlockCatalogueView;
 }