Fix search field performance in grid view configuration (pimcore#743)

Related pimcore#743
sbaecher · Nov 24, 2024 · 86aa9fc · 86aa9fc
1 parent 91d1903
commit 86aa9fc
Showing 1 changed file with 26 additions and 27 deletions.
diff --git a/public/js/pimcore/object/helpers/classTree.js b/public/js/pimcore/object/helpers/classTree.js
@@ -29,40 +29,36 @@ pimcore.object.helpers.classTree = Class.create({
     },
 
     updateFilter: function (tree, filterField) {
+        const store = tree.getStore();
+        const filterValue = filterField.getValue().toLowerCase();
 
-        tree.getStore().clearFilter();
-        var currentFilterValue = filterField.getValue().toLowerCase();
+        store.clearFilter();
 
-        tree.getStore().filterBy(function (item) {
-            if (item.data.text.toLowerCase().indexOf(currentFilterValue) !== -1) {
+        const searchFilter = (node) => {
+            if (node.data.text.toLowerCase().includes(filterValue)) {
                 return true;
             }
 
-            if (!item.data.leaf) {
-                if (item.data.root) {
-                    return true;
-                }
+            return !node.data.leaf && node.childNodes.some(searchFilter);
+        };
 
-                var childNodes = item.childNodes;
-                var hide = true;
-                if (childNodes) {
-                    var i;
-                    for (i = 0; i < childNodes.length; i++) {
-                        var childNode = childNodes[i];
-                        if (childNode.get("visible")) {
-                            hide = false;
-                            break;
-                        }
-                    }
-                }
+        store.filterBy(searchFilter);
 
-                return !hide;
-            }
-        }.bind(this));
+        const rootNode = tree.getRootNode();
 
-        var rootNode = tree.getRootNode()
-        rootNode.set('text', currentFilterValue ? t('element_tag_filtered_tags') : t('element_tag_all_tags'));
-        rootNode.expand(true);
+        rootNode.set(
+            'text',
+            filterValue ? t('element_tag_filtered_tags') : t('element_tag_all_tags')
+        );
+
+        if (filterValue) {
+            rootNode.expand(false);
+            rootNode.eachChild((child) => {
+                if (searchFilter(child)) {
+                    child.expand(false);
+                }
+            });
+        }
     },
 
     getClassTree: function (url, classId, objectId) {
@@ -124,7 +120,10 @@ pimcore.object.helpers.classTree = Class.create({
             success: this.initLayoutFields.bind(this, tree)
         });
 
-        filterField.on("keyup", this.updateFilter.bind(this, tree, filterField));
+        filterField.on(
+            "keyup",
+            Ext.Function.createBuffered(this.updateFilter.bind(this, tree, filterField), 300)
+        );
         filterButton.on("click", this.updateFilter.bind(this, tree, filterField));
 
         return tree;