Get automatic search when more than 20 select_options working for all cases

StaticOptions, change after init previously didn't work
This commit is contained in:
nathan 2022-08-19 11:07:16 -06:00
parent da2db8ccc0
commit 6e30a68121
4 changed files with 39 additions and 13 deletions

View File

@ -88,6 +88,7 @@ function send_template()
'select' => 'empty_label,ignore',
'select-account' => 'empty_label,account_type,ignore',
'select-number' => 'empty_label,min,max,interval,suffix',
'select-cat' => 'empty_label,global_categories,ignore,application,parentCat,owner',
'box' => ',cellpadding,cellspacing,keep',
'hbox' => 'cellpadding,cellspacing,keep',
'vbox' => 'cellpadding,cellspacing,keep',

View File

@ -58,11 +58,6 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
constructor()
{
super();
so.cat(this).then(options =>
{
this.static_options = cleanSelectOptions(options);
this.requestUpdate("select_options");
});
}
async connectedCallback()
@ -86,9 +81,18 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
}
updated(changedProperties : PropertyValues)
willUpdate(changedProperties : PropertyValues)
{
super.updated(changedProperties);
super.willUpdate(changedProperties);
if(changedProperties.has("global_categories") || changedProperties.has("application") || changedProperties.has("parentCat"))
{
so.cat(this).then(options =>
{
this.static_options = cleanSelectOptions(options);
this.requestUpdate("select_options");
});
}
if(changedProperties.has("value") || changedProperties.has('select_options'))
{

View File

@ -168,11 +168,6 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
this.__select_options = cleanSelectOptions(new_options);
if (this.__select_options.length > 20)
{
this.search = true;
}
this.requestUpdate("select_options", old_options);
}

View File

@ -296,6 +296,12 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
{
super.willUpdate(changedProperties);
// Turn on search if there's more than 20 options
if(changedProperties.has("select_options") && this.select_options.length > 20)
{
this.search = true;
}
// If searchURL is set, turn on search
if(changedProperties.has("searchUrl") && this.searchUrl)
{
@ -303,6 +309,27 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
}
}
update(changedProperties)
{
super.update(changedProperties);
// One of the key properties has changed, need to add the needed nodes
if(changedProperties.has("search") || changedProperties.has("editModeEnabled") || changedProperties.has("allowFreeEntries"))
{
// Missing any of the required attributes? Now we need to take it out.
if(!this.searchEnabled && !this.editModeEnabled && !this.allowFreeEntries || this.readonly)
{
this._unbindListeners();
this.querySelector(".search_input")?.remove();
return;
}
// Normally this should be handled in render(), but we have to add our nodes in
this._addNodes();
this._bindListeners();
}
}
/**
* Add the nodes we need to search - adjust parent shadowDOM
*
@ -310,7 +337,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
*/
protected _addNodes()
{
const div = document.createElement("div");
div.classList.add("search_input");
render(this._searchInputTemplate(), div);