Bulk action improvements: buttons (wording, color, icons, disabled-state), hide select-on-all-pages if only one results-page (#1973)

This commit is contained in:
Richard Schreiber
2021-02-24 09:59:07 +01:00
committed by GitHub
parent ef8b6f60b8
commit 5b36fa198d
2 changed files with 36 additions and 36 deletions

View File

@@ -90,10 +90,10 @@
</th>
<th></th>
</tr>
{% if "can_change_event_settings" in request.eventpermset %}
{% if "can_change_event_settings" in request.eventpermset and page_obj.paginator.num_pages > 1 %}
<tr class="table-select-all warning hidden">
<td>
<input type="checkbox" name="__ALL" id="__all">
<input type="checkbox" name="__ALL" id="__all" data-results-total="{{ page_obj.paginator.count }}">
</td>
<td colspan="5">
<label for="__all">
@@ -108,7 +108,7 @@
<tr>
<td>
{% if "can_change_event_settings" in request.eventpermset %}
<label aria-label="{% trans "select row for batch-operation" %}" class="batch-select-label"><input type="checkbox" name="subevent" class="" value="{{ s.pk }}"/></label>
<label aria-label="{% trans "select row for batch-operation" %}" class="batch-select-label"><input type="checkbox" name="subevent" class="batch-select-checkbox" value="{{ s.pk }}"/></label>
{% endif %}
</td>
<td>
@@ -167,19 +167,21 @@
</table>
</div>
{% if "can_change_event_settings" in request.eventpermset %}
<button type="submit" class="btn btn-default btn-save" name="action" value="delete">
{% trans "Delete selected" %}
<div class="batch-select-actions">
<button type="submit" class="btn btn-danger btn-save" name="action" value="delete">
<i class="fa fa-trash"></i>{% trans "Delete selected" %}
</button>
<button type="submit" class="btn btn-default btn-save" name="action" value="disable"
<button type="submit" class="btn btn-primary btn-save" name="action" value="disable"
formaction="{% url "control:event.subevents.bulkedit" organizer=request.event.organizer.slug event=request.event.slug %}">
{% trans "Change selected" %}
<i class="fa fa-edit"></i>{% trans "Edit selected" %}
</button>
<button type="submit" class="btn btn-default btn-save" name="action" value="enable">
{% trans "Enable selected" %}
<i class="fa fa-check"></i>{% trans "Activate selected" %}
</button>
<button type="submit" class="btn btn-default btn-save" name="action" value="disable">
{% trans "Disable selected" %}
<i class="fa fa-ban"></i>{% trans "Deactivate selected" %}
</button>
</div>
{% endif %}
</form>
{% include "pretixcontrol/pagination.html" %}

View File

@@ -690,6 +690,8 @@ $(function () {
// Tables with bulk selection, e.g. subevent list
$("input[data-toggle-table]").each(function (ev) {
var $toggle = $(this);
var $actionButtons = $(".batch-select-actions button", this.form);
var countLabels = $("<span></span>").appendTo($actionButtons);
var $table = $toggle.closest("table");
var $selectAll = $table.find(".table-select-all");
var $rows = $table.find("tbody tr");
@@ -758,37 +760,33 @@ $(function () {
});
});
var update = function() {
var nrOfChecked = $checkboxes.filter(":checked").length;
var allChecked = nrOfChecked == $checkboxes.length;
var update = function () {
var all_same;
var checkboxes = $checkboxes.toArray();
var i = checkboxes.length;
while (i--) {
if (all_same === undefined) {
all_same = checkboxes[i].checked;
continue;
}
if (all_same != checkboxes[i].checked) {
$toggle.prop("checked", false).prop("indeterminate", true).trigger("change");
return;
}
}
$toggle.prop("checked", all_same).prop("indeterminate", false).trigger("change");
};
if (!nrOfChecked) countLabels.empty();
else countLabels.text(" ("+nrOfChecked+")");
var debounceUpdate;
$checkboxes.change(function() {
//$(this).closest("tr").toggleClass("warning", this.checked);
// when changing the $toggles checked-property, lots of change events
// get triggered => debounce
if (debounceUpdate) window.clearTimeout(debounceUpdate);
debounceUpdate = window.setTimeout(update, 10);
});
if (!allChecked) $selectAll.find("input").prop("checked", false);
$actionButtons.attr("disabled", !nrOfChecked);
$toggle.prop("checked", allChecked).prop("indeterminate", nrOfChecked > 0 && !allChecked);
$selectAll.toggleClass("hidden", nrOfChecked !== $checkboxes.length).prop("hidden", nrOfChecked !== $checkboxes.length);
}
$checkboxes.change(update);
$toggle.change(function (ev) {
if (!this.indeterminate) $checkboxes.prop("checked", this.checked);//.trigger("change");
$selectAll.toggleClass("hidden", !this.checked).prop("hidden", !this.checked);
if (!this.checked) $selectAll.find("input").prop("checked", false);
this.indeterminate = false;
$checkboxes.prop("checked", this.checked);
update();
});
$selectAll.find("input").change(function(ev) {
if (this.checked) countLabels.text(" ("+this.getAttribute("data-results-total")+")");
else countLabels.text(" ("+$checkboxes.filter(":checked").length+")");
})
update();
});
// Items and categories