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

Use stimulus for parts tables and select actions.

Browse source
This commit is contained in:
Jan Böhmer 2022-08-01 00:31:49 +02:00
parent 565cb3a790
commit 452f0a8362
9 changed files with 1369 additions and 1053 deletions
Download patch file Download diff file Expand all files Collapse all files

91
templates/Parts/lists/_parts_list.html.twig
View file

@ -1,90 +1,3 @@
<form method="post" action="{{ url("table_action") }}">
<input type="hidden" name="_token" value="{{ csrf_token('table_action') }}">
{% import "components/datatables.macro.html.twig" as datatables %}
<input type="hidden" name="redirect_back" value="{{ app.request.uri }}">
<input type="hidden" name="ids" id="select_ids" value="">
<div class="d-none mb-2" id="select_panel">
{# <span id="select_count"></span> #}
<span class="badge bg-secondary">{% trans with {'%count%': '<span id="select_count"></span>'} %}part_list.action.part_count{% endtrans %}</span>
<select class="selectpicker" name="action" id="select_action" data-controller="elements--selectpicker"
title="{% trans %}part_list.action.action.title{% endtrans %}" onchange="updateTargetSelect()" required>
<optgroup label="{% trans %}part_list.action.action.group.favorite{% endtrans %}">
<option {% if not is_granted('@parts.edit') %}disabled{% endif %} value="favorite">{% trans %}part_list.action.action.favorite{% endtrans %}</option>
<option {% if not is_granted('@parts.edit') %}disabled{% endif %} value="unfavorite">{% trans %}part_list.action.action.unfavorite{% endtrans %}</option>
</optgroup>
<optgroup label="{% trans %}part_list.action.action.group.change_field{% endtrans %}">
<option {% if not is_granted('@parts_category.edit') %}disabled{% endif %} value="change_category" data-url="{{ path('select_category') }}">{% trans %}part_list.action.action.change_category{% endtrans %}</option>
<option {% if not is_granted('@parts_footprint.edit') %}disabled{% endif %} value="change_footprint" data-url="{{ path('select_footprint') }}">{% trans %}part_list.action.action.change_footprint{% endtrans %}</option>
<option {% if not is_granted('@parts_manufacturer.edit') %}disabled{% endif %} value="change_manufacturer" data-url="{{ path('select_manufacturer') }}">{% trans %}part_list.action.action.change_manufacturer{% endtrans %}</option>
<option {% if not is_granted('@parts_unit.edit') %}disabled{% endif %} value="change_unit" data-url="{{ path('select_measurement_unit') }}">{% trans %}part_list.action.action.change_unit{% endtrans %}</option>
</optgroup>
<option {% if not is_granted('@parts.delete') %}disabled{% endif %} value="delete">{% trans %}part_list.action.action.delete{% endtrans %}</option>
</select>
<select class="" style="display: none;" data-live-search="true" name="target" id="select_target">
{# This is left empty, as this will be filled by Javascript #}
</select>
<button type="submit" class="btn btn-secondary">{% trans %}part_list.action.submit{% endtrans %}</button>
</div>
<div id="part_list" class="" data-select="true" data-part_table="true" data-datatable data-settings='{{ datatable_settings(datatable)|escape('html_attr') }}'>
<div class="card-body">
<div class="card">
<div class="card-body">
<h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
<h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
</div>
</div>
</div>
</div>
</form>
<script>
function updateOptions(selector, json)
{
var select = document.querySelector(selector);
//Clear options
select.innerHTML = null;
for(i=0; i<json.length; i++) {
var json_opt = json[i];
var opt = document.createElement('option');
opt.value = json_opt.value;
opt.innerHTML = json_opt.text;
if(json_opt['data-subtext']) {
opt.dataset.subtext = json_opt['data-subtext'];
}
select.appendChild(opt);
}
}
function updateTargetSelect() {
var element = document.querySelector('#select_action');
var selected = element.options[element.options.selectedIndex];
var url = selected.dataset.url;
if (url) {
fetch(url)
.then(response => response.json())
.then(data => updateOptions('#select_target', data))
.then(data => $('#select_target').selectpicker('refresh'));
} else {
$('#select_target').selectpicker('hide');
}
}
</script>
{{ datatables.partsDatatableWithForm(datatable) }}