yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

only render search if search is enabled

Browse Source
This commit is contained in:
Mads Rasmussen
2024-08-16 12:28:12 +02:00
parent 467ac48ad8
commit c5a43aef91
2 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
View File

@@ -1,6 +1,6 @@
import { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
import type { UmbPickerContext } from '../picker.context.js';
import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { customElement, html, nothing, 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';
@@ -18,6 +18,9 @@ export class UmbPickerSearchResultElement extends UmbLitElement {
@state()
_items: UmbEntityModel[] = [];
@state()
_isSearchable: boolean = false;
#pickerContext?: UmbPickerContext;
constructor() {
@@ -25,22 +28,16 @@ export class UmbPickerSearchResultElement extends UmbLitElement {
this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
this.#pickerContext = context;
this.observe(this.#pickerContext.search.query, (query) => {
this._query = query;
});
this.observe(this.#pickerContext.search.searching, (query) => {
this._searching = query;
});
this.observe(this.#pickerContext.search.resultItems, (items) => {
this._items = items;
});
this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
this.observe(this.#pickerContext.search.query, (query) => (this._query = query));
this.observe(this.#pickerContext.search.searching, (query) => (this._searching = query));
this.observe(this.#pickerContext.search.resultItems, (items) => (this._items = items));
});
}
override render() {
if (!this._isSearchable) return nothing;
if (this._query && this._searching === false && this._items.length === 0) {
return this.#renderEmptyResult();
}

16
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts
View File

@@ -14,6 +14,9 @@ export class UmbPickerSearchElement extends UmbLitElement {
@state()
_searching: boolean = false;
@state()
_isSearchable: boolean = false;
#pickerContext?: UmbPickerContext;
constructor() {
@@ -21,14 +24,9 @@ export class UmbPickerSearchElement extends UmbLitElement {
this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
this.#pickerContext = context;
this.observe(this.#pickerContext.search.searching, (searching) => {
this._searching = searching;
});
this.observe(this.#pickerContext.search.query, (query) => {
this._query = query?.query || '';
});
this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
this.observe(this.#pickerContext.search.searching, (searching) => (this._searching = searching));
this.observe(this.#pickerContext.search.query, (query) => (this._query = query?.query || ''));
});
}
@@ -39,6 +37,8 @@ export class UmbPickerSearchElement extends UmbLitElement {
}
override render() {
if (!this._isSearchable) return nothing;
return html`
<uui-input .value=${this._query} placeholder="Search..." @input=${this.#onInput}>
<div slot="prepend">