diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index c44cc0369f..d4d60b54c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -106,6 +106,12 @@ export class UmbInputBlockTypeElement< presetAlias: 'element', }, }, + // TODO: hide the queryParams and filter config under a "elementTypesOnly" field. [MR] + search: { + queryParams: { + isElementType: true, + }, + }, pickableFilter: (docType) => // Only pick elements: docType.isElement && diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts index 7b74306a45..4437d9b0b9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts @@ -1,11 +1,13 @@ import { UMB_PICKER_CONTEXT } from '../picker.context.token.js'; import type { UmbPickerContext } from '../picker.context.js'; import type { ManifestPickerSearchResultItem } from './result-item/picker-search-result-item.extension.js'; -import { customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +type PickableFilterMethodType = (item: T) => boolean; + @customElement('umb-picker-search-result') export class UmbPickerSearchResultElement extends UmbLitElement { @state() @@ -20,6 +22,9 @@ export class UmbPickerSearchResultElement extends UmbLitElement { @state() _isSearchable: boolean = false; + @property({ attribute: false }) + pickableFilter: PickableFilterMethodType = () => true; + #pickerContext?: UmbPickerContext; constructor() { @@ -30,10 +35,15 @@ export class UmbPickerSearchResultElement extends UmbLitElement { this.observe( this.#pickerContext?.search.searchable, (isSearchable) => (this._isSearchable = isSearchable ?? false), + 'obsSearchable', ); - this.observe(this.#pickerContext?.search.query, (query) => (this._query = query)); - this.observe(this.#pickerContext?.search.searching, (query) => (this._searching = query ?? false)); - this.observe(this.#pickerContext?.search.resultItems, (items) => (this._items = items ?? [])); + this.observe(this.#pickerContext?.search.query, (query) => (this._query = query), 'obsQuery'); + this.observe( + this.#pickerContext?.search.searching, + (query) => (this._searching = query ?? false), + 'obsSearching', + ); + this.observe(this.#pickerContext?.search.resultItems, (items) => (this._items = items ?? []), 'obsResultItems'); }); } @@ -58,11 +68,15 @@ export class UmbPickerSearchResultElement extends UmbLitElement { } #renderResultItem(item: UmbEntityModel) { + console.log('pickableFilter', this.pickableFilter(item)); return html` manifest.forEntityTypes.includes(item.entityType)} - .elementProps=${{ item }}> + .elementProps=${{ + item, + disabled: !this.pickableFilter(item), + }}> `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index f886f47986..a936ff88d7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -13,8 +13,9 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbPickerSearchResu id=${item.unique} icon=${item.icon ?? 'icon-document'} select-only - selectable + ?selectable=${!this.disabled} ?selected=${this._isSelected} + ?disabled=${this.disabled} @deselected=${() => this.pickerContext?.selection.deselect(item.unique)} @selected=${() => this.pickerContext?.selection.select(item.unique)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item-element-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item-element-base.ts index c0c429aec1..07969e0aa0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item-element-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item-element-base.ts @@ -18,6 +18,9 @@ export abstract class UmbPickerSearchResultItemElementBase this.pickerContext?.selection.deselect(item.unique)} @selected=${() => this.pickerContext?.selection.select(item.unique)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index bb1fe200de..b2e6c66084 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -159,7 +159,7 @@ export class UmbTreePickerModalElement - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/picker/document-type-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/picker/document-type-picker-search-result-item.element.ts index f97639eb2a..44864c8b3b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/picker/document-type-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/picker/document-type-picker-search-result-item.element.ts @@ -13,8 +13,9 @@ export class UmbDocumentTypePickerSearchResultItemElement extends UmbPickerSearc id=${item.unique} icon=${item.icon ?? 'icon-document'} select-only - selectable + ?selectable=${!this.disabled} ?selected=${this._isSelected} + ?disabled=${this.disabled} @deselected=${() => this.pickerContext?.selection.deselect(item.unique)} @selected=${() => this.pickerContext?.selection.select(item.unique)}> ${when( diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts index 8086682f33..52d0090b3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts @@ -13,8 +13,9 @@ export class UmbDocumentPickerSearchResultItemElement extends UmbPickerSearchRes id=${item.unique} icon=${item.documentType.icon ?? 'icon-document'} select-only - selectable + ?selectable=${!this.disabled} ?selected=${this._isSelected} + ?disabled=${this.disabled} @deselected=${() => this.pickerContext?.selection.deselect(item.unique)} @selected=${() => this.pickerContext?.selection.select(item.unique)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/member-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/member-picker-search-result-item.element.ts index 2e73f8d596..e9e9641c8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/member-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/member-picker-search-result-item.element.ts @@ -13,8 +13,9 @@ export class UmbMemberPickerSearchResultItemElement extends UmbPickerSearchResul id=${item.unique} icon=${item.memberType.icon ?? 'icon-user'} select-only - selectable + ?selectable=${!this.disabled} ?selected=${this._isSelected} + ?disabled=${this.disabled} @deselected=${() => this.pickerContext?.selection.deselect(item.unique)} @selected=${() => this.pickerContext?.selection.select(item.unique)}>