Implemented a treeview element using stimulus

assets/controllers/elements/tree-controller.js

@@ -0,0 +1,82 @@
+import {Controller} from "@hotwired/stimulus";
+
+import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css"
+import "patternfly-bootstrap-treeview";
+
+export default class extends Controller {
+    static targets = [ "tree" ];
+
+    connect() {
+        const treeElement = this.treeTarget;
+        if (!treeElement) {
+            console.error("You need to define a tree target for the controller!");
+            return;
+        }
+
+        //Fetch data and initialize tree
+        this._getData().then(this._fillTree.bind(this));
+
+    }
+
+    _fillTree(data) {
+        //Get primary color from css variable
+        const primary_color = getComputedStyle(document.documentElement).getPropertyValue('--bs-warning');
+
+        const tree = this.treeTarget;
+
+        $(tree).treeview({
+            data: data,
+            enableLinks: true,
+            showIcon: false,
+            showBorder: true,
+            searchResultBackColor: primary_color,
+            searchResultColor: '#000',
+            onNodeSelected: function (event, data) {
+                if (data.href) {
+
+                    //Simulate a click so we just change the inner frame
+                    let a = document.createElement('a');
+                    a.setAttribute('href', data.href);
+                    a.innerHTML = "";
+                    $(tree).append(a);
+                    a.click();
+                    a.remove();
+                }
+            },
+            //onNodeContextmenu: contextmenu_handler,
+            expandIcon: "fas fa-plus fa-fw fa-treeview",
+            collapseIcon: "fas fa-minus fa-fw fa-treeview"
+        })
+            .on('initialized', function () {
+                //Collapse all nodes after init
+                $(this).treeview('collapseAll', {silent: true});
+
+                //Reveal the selected ones
+                $(this).treeview('revealNode', [$(this).treeview('getSelected')]);
+            });
+    }
+
+    collapseAll() {
+        $(this.treeTarget).treeview('collapseAll', {silent: true});
+    }
+
+    expandAll() {
+        $(this.treeTarget).treeview('expandAll', {silent: true});
+    }
+
+    searchInput(event) {
+        const data = event.data;
+        //Do nothing if no data was passed
+
+        const tree = this.treeTarget;
+        $(tree).treeview('collapseAll', {silent: true});
+        $(tree).treeview('search', [data]);
+    }
+
+    _getData() {
+        //Use lambda function to preserve this context
+        return new Promise((myResolve, myReject) => {
+            return myResolve(this.element.dataset.treeData);
+        });
+    }
+}

templates/AdminPages/EntityAdminBase.html.twig

@@ -21,28 +21,7 @@
     {% block card_content %}
         <div class="row">
             <div class="col-sm-4">
-
+                {% include "elements/_tree_view.html.twig" %}
-                <div class="row">
-                    <div class="col-8">
-                        <input id="tree-search" type="search" class="form-control" placeholder="{% trans %}search.placeholder{% endtrans %}">
-                    </div>
-                    <div class="btn-group btn-group-sm col-4" role="group">
-                        <button type="button" class="btn btn-outline-secondary" id="tree-expand"
-                                title="{% trans %}expandAll{% endtrans %}">
-                            <i class="fas fa-plus fa-fw"></i>
-                        </button>
-                        <button type="button" class="btn btn-outline-secondary" id="tree-reduce"
-                                title="{% trans %}reduceAll{% endtrans %}">
-                            <i class="fas fa-minus fa-fw"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="treeview-sm mt-2" id="tree" data-tree-data="{{ generateTreeData(entity) }}"
-                     data-tree-search="#tree-search" data-tree-expand="#tree-expand" data-tree-reduce="#tree-reduce">
-
-                </div>
-
             </div>
 
             <div class="col-sm-8">

templates/elements/_tree_view.html.twig

@@ -0,0 +1,19 @@
+<div {{ stimulus_controller('elements/tree') }} data-tree-data="{{ generateTreeData(entity) }}">
+    <div class="row" >
+        <div class="col-8">
+            <input type="search" class="form-control" placeholder="{% trans %}search.placeholder{% endtrans %}" {{ stimulus_action('elements/tree', 'searchInput') }}>
+        </div>
+        <div class="btn-group btn-group-sm col-4" role="group">
+            <button type="button" class="btn btn-outline-secondary" {{ stimulus_action('elements/tree', 'expandAll') }}
+                    title="{% trans %}expandAll{% endtrans %}">
+                <i class="fas fa-plus fa-fw"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary" {{ stimulus_action('elements/tree', 'collapseAll') }}
+                    title="{% trans %}reduceAll{% endtrans %}">
+                <i class="fas fa-minus fa-fw"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="treeview-sm mt-2" {{ stimulus_target('elements/tree', 'tree') }}></div>
+</div>