Merge pull request #1826 from umbraco/feature/get-content-type-name-for-confirm-dialog

get name for dialog

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -18,6 +18,9 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	@property({ type: String, attribute: false })
 	href?: string;
 
+	@property({ type: String, attribute: false })
+	iconFile?: string;
+
 	@property({ type: String, attribute: false })
 	iconColor?: string;
 
@@ -41,7 +44,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	private _elementTypeKey?: string | undefined;
 
 	@state()
-	_fallbackName?: string;
+	_name?: string;
 
 	@state()
 	_fallbackIcon?: string | null;
@@ -53,7 +56,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			const item = items[0];
 			if (item) {
 				this._fallbackIcon = item.icon;
-				this._fallbackName = item.name;
+				this._name = item.name;
 			}
 		});
 	}
@@ -63,9 +66,11 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		return html`
 			<uui-card-block-type
 				href=${ifDefined(this.href)}
-				.name=${this._fallbackName ?? 'Unknown'}
+				.name=${this._name ?? 'Unknown'}
 				.background=${this.backgroundColor}>
-				<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>
+				${this.iconFile
+					? html`<img src=${this.iconFile} alt="" />`
+					: html`<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>`}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts

@@ -7,7 +7,10 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
-import { UMB_DOCUMENT_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/document-type';
+import {
+	UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT,
+	UMB_DOCUMENT_TYPE_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/document-type';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 /** TODO: Look into sending a "change" event when there is a change, rather than create, delete, and change event. Make sure it doesn't break move for RTE/List/Grid. [LI] */
@@ -123,10 +126,13 @@ export class UmbInputBlockTypeElement<
 	}
 
 	async #onRequestDelete(item: BlockType) {
+		const store = await this.getContext(UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT);
+		const contentType = store.getItems([item.contentElementTypeKey]);
 		await umbConfirmModal(this, {
 			color: 'danger',
-			headline: `Remove [TODO: Get name]?`,
-			content: 'Are you sure you want to remove this block type?',
+			headline: `Remove ${contentType[0]?.name}?`,
+			// TODO: Translations: [NL]
+			content: 'Are you sure you want to remove this Block Type Configuration?',
 			confirmLabel: 'Remove',
 		});
 		this.deleteItem(item.contentElementTypeKey);
@@ -143,6 +149,7 @@ export class UmbInputBlockTypeElement<
 			<umb-block-type-card
 				.data-umb-content-element-key=${block.contentElementTypeKey}
 				.name=${block.label}
+				.iconFile=${block.thumbnail}
 				.iconColor=${block.iconColor}
 				.backgroundColor=${block.backgroundColor}
 				.href="${this.workspacePath}edit/${block.contentElementTypeKey}"

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

@@ -6,6 +6,7 @@ export interface UmbBlockTypeBaseModel {
 	label?: string;
 	//view?: string; // TODO: remove/replace with custom element manifest type for block list.
 	//stylesheet?: string; // TODO: remove/replace with custom element manifest type for block list.
+	thumbnail?: string;
 	iconColor?: string;
 	backgroundColor?: string;
 	editorSize?: UUIModalSidebarSize;

src/Umbraco.Web.UI.Client/src/packages/core/store/store-base.ts

@@ -74,7 +74,7 @@ export class UmbStoreBase<StoreItemType = any> extends UmbContextBase<any> imple
 	 * @returns {Array<StoreItemType>}
 	 * @memberof UmbStoreBase
 	 */
-	getItems(uniques: Array<string>) {
+	getItems(uniques: Array<string>): Array<StoreItemType> {
 		return this._data.getValue().filter((item) => uniques.includes(this._data.getUniqueMethod(item) as string));
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/item/document-type-item-store.context-token.ts

@@ -0,0 +1,6 @@
+import type { UmbDocumentTypeItemStore } from './document-type-item.store.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT = new UmbContextToken<UmbDocumentTypeItemStore>(
+	'UmbDocumentTypeItemStore',
+);

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/item/document-type-item.repository.ts

@@ -1,6 +1,6 @@
 import type { UmbDocumentTypeItemModel } from './types.js';
 import { UmbDocumentTypeItemServerDataSource } from './document-type-item.server.data-source.js';
-import { UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT } from './document-type-item.store.js';
+import { UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT } from './document-type-item-store.context-token.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbItemRepositoryBase } from '@umbraco-cms/backoffice/repository';
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/item/document-type-item.store.ts

@@ -1,5 +1,5 @@
 import type { UmbDocumentTypeItemModel } from './types.js';
-import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT } from './document-type-item-store.context-token.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbItemStoreBase } from '@umbraco-cms/backoffice/store';
 
@@ -20,7 +20,3 @@ export class UmbDocumentTypeItemStore extends UmbItemStoreBase<UmbDocumentTypeIt
 		super(host, UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT.toString());
 	}
 }
-
-export const UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT = new UmbContextToken<UmbDocumentTypeItemStore>(
-	'UmbDocumentTypeItemStore',
-);

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/item/index.ts

@@ -1,3 +1,4 @@
-export { UmbDocumentTypeItemRepository } from './document-type-item.repository.js';
 export { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, UMB_DOCUMENT_TYPE_ITEM_STORE_ALIAS } from './manifests.js';
+export { UmbDocumentTypeItemRepository } from './document-type-item.repository.js';
+export * from './document-type-item-store.context-token.js';
 export * from './types.js';