From 8b4ddaa92fae35c3ddffeeb5491d28929ca3315a Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 25 Jan 2024 13:55:57 +0100
Subject: [PATCH] block list

---
 ...i-block-list-type-configuration.element.ts | 37 ++++++++++++++++++-
 .../src/packages/block/block-list/types.ts    |  2 +
 ...shboard-localization-dictionary.element.ts |  1 +
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
index 5948997fcb..57744eb391 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
@@ -1,10 +1,12 @@
 import type { UmbBlockTypeBaseModel, UmbInputBlockTypeElement } from '../../../block-type/index.js';
 import '../../../block-type/components/input-block-type/index.js';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UMB_BLOCK_LIST_TYPE } from '../../types.js';
 
 /**
  * @element umb-property-editor-ui-block-list-type-configuration
@@ -14,16 +16,47 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
+	#blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController<
+		typeof UMB_WORKSPACE_MODAL.DATA,
+		typeof UMB_WORKSPACE_MODAL.VALUE
+	>;
+
+	@state()
+	private _workspacePath?: string;
+
+	constructor() {
+		super();
+		this.#blockTypeWorkspaceModalRegistration?.destroy();
+
+		this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath(UMB_BLOCK_LIST_TYPE)
+			.onSetup(() => {
+				return { data: { entityType: UMB_BLOCK_LIST_TYPE, preset: {} }, modal: { size: 'large' } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				const newpath = routeBuilder({});
+				this._workspacePath = newpath;
+			});
+	}
+
 	@property({ attribute: false })
 	value: UmbBlockTypeBaseModel[] = [];
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
+	#onCreate(e: CustomEvent) {
+		const selectedElementType = e.detail.contentElementTypeKey;
+		if (selectedElementType) {
+			this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null');
+		}
+	}
+
 	render() {
 		return html`<umb-input-block-type
-			entity-type="block-list-type"
 			.value=${this.value}
+			.workspacePath=${this._workspacePath}
+			@create=${this.#onCreate}
 			@change=${(e: Event) => {
 				this.value = (e.target as UmbInputBlockTypeElement).value;
 			}}></umb-input-block-type>`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
index dee3748bfd..bd1e8053c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
@@ -1,5 +1,7 @@
 import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
 import type { UmbBlockLayoutBaseModel } from '../index.js';
 
+export const UMB_BLOCK_LIST_TYPE = 'block-list-type';
+
 export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {}
 export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
index 6f82558c59..9f60055470 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
@@ -42,6 +42,7 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 
 		const { data } = await this.#repo.list(0, 1000);
 		this.#dictionaryItems = data?.items ?? [];
+
 		this.#setTableColumns();
 		this.#setTableItems();
 	}