Picker data source: Add support for pickable filters (#20491)

* add pickable to vs code dictionary

* set up types for pickable filters in data sources

* pass search pickable filter to search result

* apply filter config in document data source example

* add pickable filters to custom tree example

* Update input-entity-data.context.ts

* remove unused

* Update types.ts

src/Umbraco.Web.UI.Client/examples/picker-data-source/example-document-picker-data-source.ts

@@ -3,7 +3,10 @@ import {
 	UmbDocumentItemRepository,
 	UmbDocumentSearchRepository,
 	UmbDocumentTreeRepository,
+	type UmbDocumentSearchItemModel,
 	type UmbDocumentSearchRequestArgs,
+	type UmbDocumentTreeItemModel,
+	type UmbDocumentTreeRootModel,
 } from '@umbraco-cms/backoffice/document';
 import { UMB_DOCUMENT_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/document-type';
 import type {
@@ -20,16 +23,21 @@ import { getConfigValue, type UmbConfigCollectionModel } from '@umbraco-cms/back
 
 export class ExampleDocumentPickerPropertyEditorDataSource
 	extends UmbControllerBase
-	implements UmbPickerTreeDataSource, UmbPickerSearchableDataSource
+	implements
+		UmbPickerTreeDataSource<UmbDocumentTreeItemModel, UmbDocumentTreeRootModel>,
+		UmbPickerSearchableDataSource<UmbDocumentSearchItemModel>
 {
 	#tree = new UmbDocumentTreeRepository(this);
 	#item = new UmbDocumentItemRepository(this);
 	#search = new UmbDocumentSearchRepository(this);
 	#config: UmbConfigCollectionModel = [];
 
+	treePickableFilter: (treeItem: UmbDocumentTreeItemModel) => boolean = (treeItem) => !!treeItem.unique;
+
 	setConfig(config: UmbConfigCollectionModel) {
 		// TODO: add examples for all config options
 		this.#config = config;
+		this.#applyPickableFilterFromConfig();
 	}
 
 	getConfig(): UmbConfigCollectionModel {
@@ -57,6 +65,13 @@ export class ExampleDocumentPickerPropertyEditorDataSource
 	}
 
 	search(args: UmbSearchRequestArgs) {
+		const allowedContentTypes = this.#getAllowedDocumentTypesConfig();
+		const combinedArgs: UmbDocumentSearchRequestArgs = { ...args, allowedContentTypes };
+
+		return this.#search.search(combinedArgs);
+	}
+
+	#getAllowedDocumentTypesConfig() {
 		const filterString = getConfigValue<string>(this.#config, 'filter');
 		const filterArray = filterString ? filterString.split(',') : [];
 		const allowedContentTypes: UmbDocumentSearchRequestArgs['allowedContentTypes'] = filterArray.map(
@@ -65,10 +80,14 @@ export class ExampleDocumentPickerPropertyEditorDataSource
 				unique,
 			}),
 		);
+		return allowedContentTypes;
+	}
 
-		const combinedArgs: UmbDocumentSearchRequestArgs = { ...args, allowedContentTypes };
-
-		return this.#search.search(combinedArgs);
+	#applyPickableFilterFromConfig() {
+		const allowedDocumentTypes = this.#getAllowedDocumentTypesConfig();
+		if (!allowedDocumentTypes || allowedDocumentTypes.length === 0) return;
+		this.treePickableFilter = (treeItem: UmbDocumentTreeItemModel) =>
+			allowedDocumentTypes.some((entityType) => entityType.unique === treeItem.documentType.unique);
 	}
 }