Merge pull request #1412 from umbraco/feature/mntp-value-data-structure

Feature: TreePicker aligns value data structure with backend API

src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts

@@ -23,3 +23,8 @@ export interface NumberRangeValueType {
 export interface UmbReferenceByUnique {
 	unique: string;
 }
+
+export interface UmbReferenceByUniqueAndType {
+	type: string;
+	unique: string;
+}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts

@@ -11,11 +11,10 @@ import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 /**
  * @element umb-property-editor-ui-tree-picker
  */
-
 @customElement('umb-property-editor-ui-tree-picker')
 export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	value = '';
+	@property({ type: Array })
+	value: UmbInputTreeElement['items'] = [];
 
 	@state()
 	type: UmbTreePickerSource['type'] = 'content';
@@ -42,8 +41,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 
 	#dynamicRootRepository = new UmbDynamicRootRepository(this);
 
-	#workspaceContext?: typeof UMB_WORKSPACE_CONTEXT.TYPE;
-
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const startNode: UmbTreePickerSource | undefined = config?.getValueByAlias('startNode');
@@ -62,14 +59,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
 	}
 
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#workspaceContext = workspaceContext;
-		});
-	}
-
 	connectedCallback() {
 		super.connectedCallback();
 
@@ -79,9 +68,10 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	async #setStartNodeId() {
 		if (this.startNodeId) return;
 
-		const unique = this.#workspaceContext?.getUnique();
 		// TODO: Awaiting the workspace context to have a parent entity ID value. [LK]
 		// e.g. const parentEntityId = this.#workspaceContext?.getParentEntityId();
+		const workspaceContext = await this.getContext(UMB_WORKSPACE_CONTEXT);
+		const unique = workspaceContext.getUnique();
 		if (unique && this.#dynamicRoot) {
 			const result = await this.#dynamicRootRepository.postDynamicRootQuery(this.#dynamicRoot, unique);
 			if (result && result.length > 0) {
@@ -91,13 +81,14 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	}
 
 	#onChange(e: CustomEvent) {
-		this.value = (e.target as UmbInputTreeElement).value as string;
+		const input = e.target as UmbInputTreeElement;
+		this.value = input.items;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
 		return html`<umb-input-tree
-			.value=${this.value}
+			.items=${this.value}
 			.type=${this.type}
 			.startNodeId=${this.startNodeId ?? ''}
 			.min=${this.min}

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts

@@ -1,10 +1,11 @@
-import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
+import type { UmbReferenceByUniqueAndType } from '@umbraco-cms/backoffice/models';
 import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-input-tree')
@@ -50,32 +51,40 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: Boolean })
 	ignoreUserStartNodes?: boolean;
 
-	@property()
-	public set value(newValue: string) {
-		super.value = newValue;
-		if (newValue) {
-			this.selectedIds = newValue.split(',');
-		} else {
-			this.selectedIds = [];
-		}
+	#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
+
+	@property({ type: Array })
+	public set items(items: Array<UmbReferenceByUniqueAndType>) {
+		this.#selectedIds = items?.map((item) => item.unique) ?? [];
+		this.value = items?.map((item) => item.unique).join(',');
 	}
-	public get value(): string {
-		return super.value as string;
+	public get items(): Array<UmbReferenceByUniqueAndType> {
+		return this.#selectedIds.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id }));
 	}
 
-	selectedIds: Array<string> = [];
+	#selectedIds: Array<string> = [];
 
 	#onChange(event: CustomEvent) {
 		switch (this._type) {
 			case 'content':
-				this.value = (event.target as UmbInputDocumentElement).selectedIds.join(',');
+				{
+					const input = event.target as UmbInputDocumentElement;
+					this.#selectedIds = input.selectedIds;
+					this.value = input.selectedIds.join(',');
+				}
 				break;
-			case 'media':
-				this.value = (event.target as UmbInputMediaElement).selectedIds.join(',');
+			case 'media': {
+				const input = event.target as UmbInputMediaElement;
+				this.#selectedIds = input.selectedIds;
+				this.value = input.selectedIds.join(',');
 				break;
-			case 'member':
-				this.value = (event.target as UmbInputMemberElement).selectedIds.join(',');
+			}
+			case 'member': {
+				const input = event.target as UmbInputMemberElement;
+				this.#selectedIds = input.selectedIds;
+				this.value = input.selectedIds.join(',');
 				break;
+			}
 			default:
 				break;
 		}
@@ -90,7 +99,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	render() {
 		switch (this._type) {
 			case 'content':
-				return this.#renderContentPicker();
+				return this.#renderDocumentPicker();
 			case 'media':
 				return this.#renderMediaPicker();
 			case 'member':
@@ -100,9 +109,9 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		}
 	}
 
-	#renderContentPicker() {
+	#renderDocumentPicker() {
 		return html`<umb-input-document
-			.selectedIds=${this.selectedIds}
+			.selectedIds=${this.#selectedIds}
 			.startNodeId=${this.startNodeId}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
@@ -113,8 +122,9 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderMediaPicker() {
+		// TODO: [LK] Review the data structure of this input editor.
 		return html`<umb-input-media
-			.selectedIds=${this.selectedIds}
+			.selectedIds=${this.#selectedIds}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
 			.max=${this.max}
@@ -125,7 +135,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	#renderMemberPicker() {
 		return html`<umb-input-member
-			.selectedIds=${this.selectedIds}
+			.selectedIds=${this.#selectedIds}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
 			.max=${this.max}