From 0aa0955e231da102150793bebed02f0009dbda38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 21 Dec 2023 17:01:27 +0100
Subject: [PATCH] element type picker

---
 .../block-type-list-workspace-view.element.ts | 10 +++++
 .../input-document-type.element.ts            |  7 ++--
 ...-editor-ui-document-type-picker.element.ts | 40 +++++++++++--------
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/block-type-list-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/block-type-list-workspace-view.element.ts
index f4840e235a..3c4bbfb04a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/block-type-list-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/block-type-list-workspace-view.element.ts
@@ -26,11 +26,17 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
 					property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
 			</uui-box>
 			<uui-box headline="Data models">
+				<!-- TODO: implement readonly mode for umb-property -->
 				<umb-property
 					label="Content Model"
 					alias="contentElementTypeKey"
 					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
+					readonly
 					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
 						{
 							alias: 'onlyPickElementTypes',
 							value: true,
@@ -41,6 +47,10 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
 					alias="settingsElementTypeKey"
 					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
 					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
 						{
 							alias: 'onlyPickElementTypes',
 							value: true,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
index cacf3c9c87..a802cfa080 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
@@ -8,7 +8,7 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 @customElement('umb-input-document-type')
 export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) {
 	/**
-	 * Selects the element types only
+	 * Limits to only select Element Types
 	 * @type {boolean}
 	 * @attr
 	 * @default false
@@ -65,8 +65,9 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	public get selectedIds(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
-	public set selectedIds(ids: Array<string>) {
-		this.#pickerContext.setSelection(ids);
+	public set selectedIds(ids: Array<string> | undefined) {
+		console.log('selectedIds', ids);
+		this.#pickerContext.setSelection(ids ?? []);
 	}
 
 	@property()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
index 4ee89b94eb..1700db5a8a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
@@ -6,15 +6,14 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 
 @customElement('umb-property-editor-ui-document-type-picker')
 export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	private _value: Array<string> = [];
-
 	@property({ type: Array })
-	public get value(): Array<string> {
+	public get value(): Array<string> | string | undefined {
 		return this._value;
 	}
-	public set value(value: Array<string>) {
-		this._value = value || [];
+	public set value(value: Array<string> | string | undefined) {
+		this._value = value ?? [];
 	}
+	private _value?: Array<string> | string;
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
@@ -23,7 +22,9 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 			this._limitMin = validationLimit?.min;
 			this._limitMax = validationLimit?.max;
 
-			this._onlyElementTypes = config.getValueByAlias('onlyPickElementTypes');
+			// We have the need in Block Editors, to just pick a single ID not as an array. So for that we use the multiPicker config, which can be set to true if you wanted to be able to pick multiple.
+			this._multiPicker = config.getValueByAlias('multiPicker') ?? false;
+			this._onlyElementTypes = config.getValueByAlias('onlyPickElementTypes') ?? false;
 		}
 	}
 
@@ -32,25 +33,30 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 	@state()
 	private _limitMax?: number;
 	@state()
+	private _multiPicker?: boolean;
+	@state()
 	private _onlyElementTypes?: boolean;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputDocumentTypeElement).selectedIds;
+		const selectedIds = (event.target as UmbInputDocumentTypeElement).selectedIds;
+		this.value = this._multiPicker ? selectedIds : selectedIds[0];
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	// TODO: Implement mandatory?
 	render() {
-		return html`
-			<umb-input-document-type
-				@change=${this._onChange}
-				.selectedIds=${this._value}
-				.min=${this._limitMin ?? 0}
-				.max=${this._limitMax ?? Infinity}
-				.element-types-only=${this._onlyElementTypes}
-				>Add</umb-input-document-type
-			>
-		`;
+		return this._multiPicker !== undefined
+			? html`
+					<umb-input-document-type
+						@change=${this._onChange}
+						.selectedIds=${this._multiPicker ? (this._value as Array<string>) ?? [] : [this._value as string]}
+						.min=${this._limitMin ?? 0}
+						.max=${this._limitMax ?? Infinity}
+						.element-types-only=${this._onlyElementTypes}
+						>Add</umb-input-document-type
+					>
+			  `
+			: '';
 	}
 }