mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-08-02 01:04:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use stimulus controller for sidebar treeviews.

Browse source
This commit is contained in:
Jan Böhmer 2022-07-31 15:50:16 +02:00
parent 2d1aa829f6
commit fc90259032
6 changed files with 157 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

28
templates/_sidebar.html.twig
View file

@ -1,21 +1,13 @@
{% import "elements/tree_macros.html.twig" as tree %}
{% macro sidebar_dropdown(target) %}
<li class="dropdown-header">{% trans %}actions{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="expand" data-target="{{ target }}">{% trans %}expandAll{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="collapse" data-target="{{ target }}">{% trans %}reduceAll{% endtrans %}</a></li>
<li role="separator" class="dropdown-divider"></li>
<li class="dropdown-header">{% trans %}datasource{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="categories" data-target="{{ target }}">{% trans %}category.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="locations" data-target="{{ target }}">{% trans %}storelocation.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="footprints" data-target="{{ target }}">{% trans %}footprint.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="manufacturers" data-target="{{ target }}">{% trans %}manufacturer.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="suppliers" data-target="{{ target }}">{% trans %}supplier.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="devices" data-target="{{ target }}">{% trans %}device.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="tools" data-target="{{ target }}">{% trans %}tools.label{% endtrans %}</a></li>
{% endmacro %}
<ul class="nav flex-column">
<li id="treeBox-categories">
<div class="nav flex-column">
{{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
{{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
{{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}
{# <li id="treeBox-categories">
<div class="input-group input-group-sm mb-2 mt-1">
<button class="btn btn-light dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@ -58,5 +50,5 @@
</div>
<div id="tree-tools" data-tree-search="#tree-tools-search"></div>
</li>
</ul>
</li> #}
</div>

40
templates/elements/tree_macros.html.twig Normal file
View file

@ -0,0 +1,40 @@
{% macro sidebar_dropdown() %}
{# Format is [mode, route, label] #}
{% set data_sources = [
['categories', path('tree_category_root'), 'category.labelp'],
['locations', path('tree_location_root'), 'storelocation.labelp'],
['footprints', path('tree_footprint_root'), 'footprint.labelp'],
['manufacturer', path('tree_manufacturer_root'), 'manufacturer.labelp'],
['suppliers', path('tree_supplier_root'), 'supplier.labelp'],
['devices', path('tree_device_root'), 'device.labelp'],
['tools', path('tree_tools'), 'tools.label'],
] %}
<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 %}
<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>
{% 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 btn-light 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...</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownCat">
{{ _self.sidebar_dropdown('tree-categories') }}
</ul>
<input type="search" class="form-control bg-light border-0" placeholder="{% trans %}search.placeholder{% endtrans %}" {{ stimulus_action('elements/sidebar_tree', 'searchInput') }}>
</div>
<div id="tree-categories" {{ stimulus_target('elements/sidebar_tree', 'tree') }}></div>
</div>
{% endmacro %}