Merge pull request #1722 from umbraco/feature/picker-context-tree-item-type

Feat: accept tree-item-type as a generic type on the picker context

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts

@@ -6,9 +6,13 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
 import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
 
-export class UmbPickerInputContext<ItemType extends { name: string; unique: string }> extends UmbControllerBase {
+type PickerItemBaseType = { name: string; unique: string };
+export class UmbPickerInputContext<
+	ItemType extends PickerItemBaseType,
+	TreeItemType extends PickerItemBaseType = ItemType,
+> extends UmbControllerBase {
 	// TODO: We are way too unsecure about the requirements for the Modal Token, as we have certain expectation for the data and value.
-	modalAlias: string | UmbModalToken<UmbPickerModalData<ItemType>, UmbPickerModalValue>;
+	modalAlias: string | UmbModalToken<UmbPickerModalData<TreeItemType>, UmbPickerModalValue>;
 	repository?: UmbItemRepository<ItemType>;
 	#getUnique: (entry: ItemType) => string | undefined;
 
@@ -44,7 +48,7 @@ export class UmbPickerInputContext<ItemType extends { name: string; unique: stri
 	constructor(
 		host: UmbControllerHost,
 		repositoryAlias: string,
-		modalAlias: string | UmbModalToken<UmbPickerModalData<ItemType>, UmbPickerModalValue>,
+		modalAlias: string | UmbModalToken<UmbPickerModalData<TreeItemType>, UmbPickerModalValue>,
 		getUniqueMethod?: (entry: ItemType) => string | undefined,
 	) {
 		super(host);
@@ -66,7 +70,7 @@ export class UmbPickerInputContext<ItemType extends { name: string; unique: stri
 		this.#itemManager.setUniques(selection.filter((value) => value !== null) as Array<string>);
 	}
 
-	async openPicker(pickerData?: Partial<UmbPickerModalData<ItemType>>) {
+	async openPicker(pickerData?: Partial<UmbPickerModalData<TreeItemType>>) {
 		await this.#itemManager.init;
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 		const modalContext = modalManager.open(this, this.modalAlias, {

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.context.ts

@@ -1,10 +1,14 @@
 import type { UmbDocumentTypeItemModel } from '../../repository/index.js';
+import type { UmbDocumentTypeTreeItemModel } from '../../tree/types.js';
 import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_DOCUMENT_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/document-type';
 
-export class UmbDocumentTypePickerContext extends UmbPickerInputContext<UmbDocumentTypeItemModel> {
+export class UmbDocumentTypePickerContext extends UmbPickerInputContext<
+	UmbDocumentTypeItemModel,
+	UmbDocumentTypeTreeItemModel
+> {
 	constructor(host: UmbControllerHost) {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -1,4 +1,5 @@
 import type { UmbDocumentTypeItemModel } from '../../repository/index.js';
+import type { UmbDocumentTypeTreeItemModel } from '../../tree/types.js';
 import { UmbDocumentTypePickerContext } from './input-document-type.context.js';
 import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@@ -32,9 +33,18 @@ export class UmbInputDocumentTypeElement extends UUIFormControlMixin(UmbLitEleme
 	 * @attr
 	 * @default false
 	 */
-	@property({ type: Boolean })
+	@property({ attribute: false })
 	elementTypesOnly: boolean = false;
 
+	/**
+	 * Limits to only select Document Types
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ attribute: false })
+	documentTypesOnly: boolean = false;
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -138,10 +148,20 @@ export class UmbInputDocumentTypeElement extends UUIFormControlMixin(UmbLitEleme
 		return undefined;
 	}
 
+	#getPickableFilter() {
+		if (this.documentTypesOnly) {
+			return (x: UmbDocumentTypeTreeItemModel) => x.isFolder === false && x.isElement === false;
+		}
+		if (this.elementTypesOnly) {
+			return (x: UmbDocumentTypeTreeItemModel) => x.isElement;
+		}
+		return undefined;
+	}
+
 	#openPicker() {
 		this.#pickerContext.openPicker({
 			hideTreeRoot: true,
-			pickableFilter: this.elementTypesOnly ? (x) => x.isElement : undefined,
+			pickableFilter: this.#getPickableFilter(),
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts

@@ -81,7 +81,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-input-document-type
-							element-types-only
+							.documentTypesOnly=${true}
 							.selection=${this._allowedContentTypeUniques ?? []}
 							@change="${(e: CustomEvent) => {
 								const sortedContentTypesList: Array<UmbContentTypeSortModel> = (
@@ -102,7 +102,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 					<div slot="editor">
 						<umb-input-collection-configuration
 							default-value="c0808dd3-8133-4e4b-8ce8-e2bea84a96a4"
-							.value=${this._collection ?? ''}
+							.value=${this._collection ?? undefined}
 							@change=${(e: CustomEvent) => {
 								const unique = (e.target as UmbInputCollectionConfigurationElement).value as string;
 								this.#workspaceContext?.setCollection({ unique });