From adbaea84f6ab9e769b18e5f8f7b0118d32823ff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 21 Dec 2023 16:18:49 +0100
Subject: [PATCH] get name of element type

---
 .../block-type-card.element.ts                |  5 ++-
 .../block-type-workspace-editor.element.ts    | 33 ++++++++++++++++---
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
index e5ac5d907d..75a2c49b32 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
@@ -1,6 +1,6 @@
 import {
 	DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
-	type UmbDocumentTypeTreeItemModel,
+	type UmbDocumentTypeItemModel,
 } from '@umbraco-cms/backoffice/document-type';
 import { UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
@@ -11,8 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-block-type-card')
 export class UmbBlockTypeCardElement extends UmbLitElement {
 	//
-	// TODO: Look at ways to avoid using backend models for this implementation, could we get it from the Repository, eventually we need to invent a Repository Token.
-	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeTreeItemModel>(
+	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
 		this,
 		DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
 		(x) => x.id,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts
index 01c55c153e..4e562b0e80 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts
@@ -1,27 +1,52 @@
 import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { customElement, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, css, html, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
+import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type';
 
 @customElement('umb-block-type-workspace-editor')
 export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement {
 	//
+	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
+		this,
+		DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
+		(x) => x.id,
+	);
+
 	#workspaceContext?: typeof UMB_BLOCK_TYPE_WORKSPACE_CONTEXT.TYPE;
 
+	@state()
+	_name?: string;
+
 	constructor() {
 		super();
 
 		this.consumeContext(UMB_BLOCK_TYPE_WORKSPACE_CONTEXT, (instance) => {
 			this.#workspaceContext = instance;
 			this.#workspaceContext?.createPropertyDatasetContext(this);
+			this.observe(
+				this.#workspaceContext.data,
+				(data) => {
+					if (data) {
+						this.#itemManager.setUniques([data.contentElementTypeKey]);
+					}
+				},
+				'observeWorkspaceContextData',
+			);
+		});
+
+		this.observe(this.#itemManager.items, (items) => {
+			const item = items[0];
+			if (item) {
+				this._name = item.name;
+			}
 		});
 	}
 
 	render() {
 		return html`
-			<umb-workspace-editor
-				alias="Umb.Workspace.DataType"
-				headline="Block Type (TODO: maybe insert name of Content Type here? or Label?)">
+			<umb-workspace-editor alias="Umb.Workspace.DataType" headline="Configuration of '${this._name}'">
 			</umb-workspace-editor>
 		`;
 	}