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-custom-picker-tree-data-source.ts

@@ -1,12 +1,21 @@
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import type { UmbPickerTreeDataSource } from '@umbraco-cms/backoffice/picker-data-source';
-import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
+import type {
+	UmbPickerSearchableDataSource,
+	UmbPickerTreeDataSource,
+} from '@umbraco-cms/backoffice/picker-data-source';
+import type { UmbSearchRequestArgs, UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search';
 import type { UmbTreeChildrenOfRequestArgs, UmbTreeItemModel } from '@umbraco-cms/backoffice/tree';
 
 export class ExampleCustomPickerTreePropertyEditorDataSource
 	extends UmbControllerBase
-	implements UmbPickerTreeDataSource
+	implements UmbPickerTreeDataSource, UmbPickerSearchableDataSource
 {
+	treePickableFilter: (treeItem: UmbTreeItemModel) => boolean = (treeItem) =>
+		!!treeItem.unique && treeItem.entityType === 'example';
+
+	searchPickableFilter: (searchItem: UmbSearchResultItemModel) => boolean = (searchItem) =>
+		!!searchItem.unique && searchItem.entityType === 'example';
+
 	async requestTreeRoot() {
 		const root = {
 			unique: null,
@@ -60,7 +69,7 @@ export class ExampleCustomPickerTreePropertyEditorDataSource
 
 		const data = {
 			items: result,
-			totalItems: result.length,
+			total: result.length,
 		};
 
 		return { data };

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);
 	}
 }