Part-DB-server/templates/components/tree_macros.html.twig

{% macro sidebar_dropdown() %}
    {# Format is [mode, route, label, show_condition] #}
    {% set data_sources = [
        ['categories', path('tree_category_root'), 'category.labelp', is_granted('@categories.read') and is_granted('@parts.read')],
        ['locations', path('tree_location_root'), 'storelocation.labelp', is_granted('@storelocations.read') and is_granted('@parts.read')],
        ['footprints', path('tree_footprint_root'), 'footprint.labelp', is_granted('@footprints.read') and is_granted('@parts.read')],
        ['manufacturers', path('tree_manufacturer_root'), 'manufacturer.labelp', is_granted('@manufacturers.read') and is_granted('@parts.read')],
        ['suppliers', path('tree_supplier_root'), 'supplier.labelp', is_granted('@suppliers.read') and is_granted('@parts.read')],
        ['devices', path('tree_device_root'), 'project.labelp', is_granted('@projects.read')],
        ['tools', path('tree_tools'), 'tools.label', true],
    ] %}

    <li class="dropdown-header">{% trans %}actions{% endtrans %}</li>
    <li><button class="tree-btns dropdown-item" {{ stimulus_action('elements/sidebar_tree', 'expandAll') }}">{% trans %}expandAll{% endtrans %}</a></li>
    <li><button class="tree-btns dropdown-item" {{ stimulus_action('elements/sidebar_tree', 'collapseAll') }}">{% trans %}reduceAll{% endtrans %}</a></li>
    <li role="separator" class="dropdown-divider"></li>
    <li class="dropdown-header">{% trans %}datasource{% endtrans %}</li>

    {% for source in data_sources %}
        {% if source[3] %} {# show_condition #}
            <li><button class="tree-btns dropdown-item" data-mode="{{ source[0] }}" data-url="{{ source[1] }}" data-text="{{ source[2] | trans }}"
                        {{ stimulus_action('elements/sidebar_tree', 'changeDataSource')  }}
                >{{ source[2] | trans }}</button></li>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro treeview_sidebar(id, default_mode) %}
    <div {{ stimulus_controller('elements/sidebar_tree') }} data-default-mode="{{ default_mode }}" id="{{ id }}">
        <div class="input-group input-group-sm mb-2 mt-1">
            <button class="btn bg-body-tertiary dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
            ><span class="sidebar-title" {{ stimulus_target('elements/sidebar_tree', 'sourceText') }}>Loading... / Access Denied</span></button>
            <ul class="dropdown-menu" aria-labelledby="dropdownCat">
                {{ _self.sidebar_dropdown('tree-categories') }}
            </ul>
            <input type="search" class="form-control bg-body-tertiary border-0" placeholder="{% trans %}search.placeholder{% endtrans %}" {{ stimulus_action('elements/sidebar_tree', 'searchInput') }}>
        </div>

        <div id="{{ id }}Tree" {{ stimulus_target('elements/sidebar_tree', 'tree') }}></div>
    </div>
{% endmacro %}

{% macro treeview(entity) %}
    <div {{ stimulus_controller('elements/tree') }} data-tree-data="{{ tree_data(entity) }}" data-tree-show-tags="true">
        <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>
{% endmacro %}