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></th> <th></th>
</tr> </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"> <tr class="table-select-all warning hidden">
<td> <td>
<input type="checkbox" name="__ALL" id="__all"> <input type="checkbox" name="__ALL" id="__all" data-results-total="{{ page_obj.paginator.count }}">
</td> </td>
<td colspan="5"> <td colspan="5">
<label for="__all"> <label for="__all">
@@ -108,7 +108,7 @@
<tr> <tr>
<td> <td>
{% if "can_change_event_settings" in request.eventpermset %} {% 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 %} {% endif %}
</td> </td>
<td> <td>
@@ -167,19 +167,21 @@
</table> </table>
</div> </div>
{% if "can_change_event_settings" in request.eventpermset %} {% if "can_change_event_settings" in request.eventpermset %}
<button type="submit" class="btn btn-default btn-save" name="action" value="delete"> <div class="batch-select-actions">
{% trans "Delete selected" %} <button type="submit" class="btn btn-danger btn-save" name="action" value="delete">
<i class="fa fa-trash"></i>{% trans "Delete selected" %}
</button> </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 %}"> 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>
<button type="submit" class="btn btn-default btn-save" name="action" value="enable"> <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>
<button type="submit" class="btn btn-default btn-save" name="action" value="disable"> <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> </button>
</div>
{% endif %} {% endif %}
</form> </form>
{% include "pretixcontrol/pagination.html" %} {% include "pretixcontrol/pagination.html" %}

View File

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