From 8de6bd0c2565601b18ebe80f82f88a41097477d7 Mon Sep 17 00:00:00 2001
From: milan <mk@egroupware.org>
Date: Wed, 21 Aug 2024 20:48:56 +0200
Subject: [PATCH] possibility to replace et2-select-cat with et2-tree-cat

---
 .../etemplate/Et2Select/FindSelectOptions.ts  |  2 +-
 .../Et2Tree/Et2TreeDropdownCategory.ts        | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/api/js/etemplate/Et2Select/FindSelectOptions.ts b/api/js/etemplate/Et2Select/FindSelectOptions.ts
index a835ffaf88..16d4f793ec 100644
--- a/api/js/etemplate/Et2Select/FindSelectOptions.ts
+++ b/api/js/etemplate/Et2Select/FindSelectOptions.ts
@@ -261,7 +261,7 @@ export function cleanSelectOptions(options : SelectOption[] | string[] | object)
 			{
 				option.value = option.value.toString();
 			}
-			if(typeof option.label !== 'string')
+			if(option.label && typeof option.label !== 'string')
 			{
 				fixed_options.push(...cleanSelectOptions(option.label));
 			}
diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts
index ad9f35dc45..6641b870eb 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts
@@ -8,11 +8,12 @@ import {property} from "lit/decorators/property.js";
 import {css, PropertyValues, unsafeCSS} from "lit";
 import {Et2TreeDropdown} from "./Et2TreeDropdown";
 import {Et2CategoryTag} from "../Et2Select/Tag/Et2CategoryTag";
+import {Et2StaticSelectMixin, StaticOptions as so} from "../Et2Select/StaticOptions";
 
 /**
  * @since 23.1.x
  */
-export class Et2TreeDropdownCategory extends Et2TreeDropdown
+export class Et2TreeDropdownCategory extends Et2StaticSelectMixin(Et2TreeDropdown)
 {
 
 	static get styles()
@@ -58,12 +59,37 @@ export class Et2TreeDropdownCategory extends Et2TreeDropdown
 		// Set the search options from our properties
 		this.searchOptions.application = this.application;
 		this.searchOptions.globalCategories = this.globalCategories;
+
+		this.fetchComplete = so.cat(this).then(options => {
+			this.select_options = options;
+			this.requestUpdate("select_options");
+
+			if (this._tree)
+			{
+				this._tree._selectOptions = options
+				this._tree.requestUpdate();
+			}
+		});
 	}
 
 	willUpdate(changedProperties : PropertyValues)
 	{
 		super.willUpdate(changedProperties);
 
+		if (changedProperties.has("globalCategories") ||
+			changedProperties.has("application") || changedProperties.has("parentCat"))
+		{
+			this.fetchComplete = so.cat(this).then(options => {
+				this.select_options = options;
+				this.requestUpdate("select_options");
+
+				// Shoelace select has rejected our value due to missing option by now, so re-set it
+				// this.updateComplete.then(() => {
+				// 	this.value = this.value;
+				// });
+			});
+		}
+
 		if(changedProperties.has('application'))
 		{
 			this.searchOptions.application = this.application;
@@ -91,7 +117,10 @@ export class Et2TreeDropdownCategory extends Et2TreeDropdown
 		{
 			css += ".cat_" + option.value + " {--category-color: " + (option.data?.color || "transparent") + ";}\n";
 
-			option.children?.forEach((option) => catColor(option))
+			if (typeof option.children === 'object')
+			{
+				option.children?.forEach((option) => catColor(option))
+			}
 		}
 		this.select_options.forEach((option => catColor(option)));
 		// @formatter:off